"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { getProductAnalytics } from "@/app/actions/product-analytics";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from "recharts";
import { PackageOpen, TrendingUp, Users, DollarSign, StoreIcon } from "lucide-react";
import { format } from "date-fns-jalali";

export function ProductAnalyticsTab({ productId }: { productId: string }) {
  const [data, setData] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!productId) {
      setIsLoading(false);
      return;
    }
    
    getProductAnalytics(productId).then(res => {
      setIsLoading(false);
      if (res.success) {
        setData(res.data);
      }
    });
  }, [productId]);

  if (!productId) {
    return (
      <Card>
        <CardContent className="p-12 text-center text-muted-foreground flex flex-col items-center">
          <TrendingUp className="w-12 h-12 opacity-20 mb-4" />
          <p>برای مشاهده آمار، ابتدا محصول را ذخیره کنید.</p>
        </CardContent>
      </Card>
    );
  }

  if (isLoading) {
    return (
      <Card>
        <CardContent className="p-12 text-center text-indigo-500 font-medium animate-pulse">
          در حال بارگذاری اطلاعات آماری...
        </CardContent>
      </Card>
    );
  }

  if (!data) return null;

  const { stats, purchaseHistory, salesHistory } = data;

  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-white dark:bg-slate-900 p-3 border rounded shadow-md text-sm font-sans" dir="rtl">
          <p className="font-bold mb-1">{label}</p>
          {payload.map((entry: any, idx: number) => (
            <p key={idx} style={{ color: entry.color }}>{entry.name}: {entry.value.toLocaleString()}</p>
          ))}
        </div>
      );
    }
    return null;
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <div className="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800/30 rounded-2xl p-5 flex flex-col justify-center">
           <div className="flex items-center gap-2 text-indigo-600 dark:text-indigo-400 mb-2">
             <PackageOpen className="w-5 h-5" />
             <span className="font-bold text-sm">تعداد کل فروخته شده</span>
           </div>
           <p className="text-3xl font-black font-sans">{stats.totalSold}</p>
         </div>
         <div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-800/30 rounded-2xl p-5 flex flex-col justify-center">
           <div className="flex items-center gap-2 text-emerald-600 dark:text-emerald-400 mb-2">
             <DollarSign className="w-5 h-5" />
             <span className="font-bold text-sm">مجموع درآمد حاصل</span>
           </div>
           <p className="text-3xl font-black font-sans">{stats.totalRevenue.toLocaleString()}</p>
         </div>
         <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800/30 rounded-2xl p-5 flex flex-col justify-center">
           <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 mb-2">
             <TrendingUp className="w-5 h-5" />
             <span className="font-bold text-sm">اولین قیمت خرید (میانگین)</span>
           </div>
           <p className="text-3xl font-black font-sans">{stats.firstPurchasePrice.toLocaleString()}</p>
         </div>
         <div className="bg-rose-50 dark:bg-rose-900/20 border border-rose-100 dark:border-rose-800/30 rounded-2xl p-5 flex flex-col justify-center">
           <div className="flex items-center gap-2 text-rose-600 dark:text-rose-400 mb-2">
             <TrendingUp className="w-5 h-5" />
             <span className="font-bold text-sm">آخرین قیمت خرید (میانگین)</span>
           </div>
           <p className="text-3xl font-black font-sans">{stats.lastPurchasePrice.toLocaleString()}</p>
         </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Price History Chart */}
        <Card>
          <CardContent className="p-5">
            <h3 className="font-bold text-slate-800 dark:text-slate-200 mb-6 flex items-center gap-2">
              <TrendingUp className="w-5 h-5 text-indigo-500" />
              روند تغییرات قیمت خرید
            </h3>
            <div className="h-[300px]" dir="ltr">
              {purchaseHistory.length === 0 ? (
                <div className="h-full flex items-center justify-center text-muted-foreground text-sm">تاریخچه خریدی ثبت نشده است</div>
              ) : (
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={purchaseHistory}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
                    <XAxis dataKey="date" tick={{ fontSize: 12 }} dy={10} />
                    <YAxis tickFormatter={(v) => (v/1000) + 'k'} tick={{ fontSize: 12 }} dx={-10} />
                    <Tooltip content={<CustomTooltip />} />
                    <Line type="stepAfter" dataKey="قیمت" stroke="#6366f1" strokeWidth={3} dot={{ r: 4 }} />
                  </LineChart>
                </ResponsiveContainer>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Suppliers List */}
        <Card>
          <CardContent className="p-5">
            <h3 className="font-bold text-slate-800 dark:text-slate-200 mb-6 flex items-center gap-2">
              <StoreIcon className="w-5 h-5 text-emerald-500" />
              تامین‌کنندگان این محصول
            </h3>
            <div className="space-y-3">
               {stats.suppliers.length === 0 ? (
                 <div className="text-center p-8 text-muted-foreground text-sm">هیچ تامین‌کننده‌ای یافت نشد</div>
               ) : (
                 stats.suppliers.map((sup: any, i: number) => (
                   <div key={i} className="flex items-center justify-between p-3 bg-muted/30 rounded-xl border">
                     <div className="flex items-center gap-3">
                       <div className="w-10 h-10 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center font-bold">
                         {sup.name.substring(0, 1)}
                       </div>
                       <div>
                         <p className="font-bold text-sm">{sup.name}</p>
                         <p className="text-xs text-muted-foreground">آخرین خرید: {sup.lastDate}</p>
                       </div>
                     </div>
                     <div className="text-left font-sans">
                       <p className="font-bold text-sm">{sup.avgPrice.toLocaleString()} ت</p>
                       <p className="text-xs text-muted-foreground">میانگین قیمت</p>
                     </div>
                   </div>
                 ))
               )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}