"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Bell, ChevronLeft, CircleUserRound, Gift, Heart, Headphones, LogOut, MapPin, PackageCheck, RotateCcw, TicketCheck, Wallet } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { useCart } from "@/components/cart-provider";
import { ProductCard } from "@/components/product-card";
import { StoreShell } from "@/components/store-shell";
import { formatPrice, ORDER_STATUS_LABELS, type Order, type Product } from "@/lib/commerce";

type User = { displayName: string; email: string; fullName: string | null };

export function AccountPanel({ user, products }: { user: User; products: Product[] }) {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const cart = useCart();
  const categories = useMemo(() => [...new Set(products.map((product) => product.category))], [products]);
  const favoriteProducts = products.filter((product) => cart.favorites.includes(product.id));

  useEffect(() => { fetch("/api/orders").then((response) => response.ok ? response.json() : null).then((payload) => payload?.orders && setOrders(payload.orders)).finally(() => setLoading(false)); }, []);

  return (
    <StoreShell categories={categories}>
      <div className="container-shell py-7">
        <div className="mb-6 rounded-[28px] bg-[var(--shop-navy)] p-6 text-white md:p-8"><div className="flex flex-col justify-between gap-5 md:flex-row md:items-center"><div className="flex items-center gap-4"><span className="grid h-16 w-16 place-items-center rounded-full bg-white/10"><CircleUserRound className="h-9 w-9" /></span><div><h1 className="text-2xl font-black">سلام {user.displayName}</h1><p className="mt-1 text-sm text-slate-300">{user.email}</p></div></div><div className="grid grid-cols-3 gap-3"><MiniStat label="سفارش" value={orders.length} /><MiniStat label="علاقه‌مندی" value={favoriteProducts.length} /><MiniStat label="امتیاز" value={320} /></div></div></div>
        <Tabs defaultValue="overview" orientation="vertical" dir="rtl" className="grid gap-5 lg:grid-cols-[250px_minmax(0,1fr)]">
          <TabsList className="h-fit flex-row justify-start overflow-x-auto rounded-[22px] border bg-white p-2 lg:flex-col lg:items-stretch dark:bg-slate-900">
            <PanelTab value="overview" icon={<CircleUserRound />} label="خلاصه حساب" /><PanelTab value="orders" icon={<PackageCheck />} label="سفارش‌ها" /><PanelTab value="favorites" icon={<Heart />} label="علاقه‌مندی‌ها" /><PanelTab value="addresses" icon={<MapPin />} label="نشانی‌ها" /><PanelTab value="wallet" icon={<Wallet />} label="کیف پول و امتیاز" /><PanelTab value="returns" icon={<RotateCcw />} label="درخواست مرجوعی" /><PanelTab value="tickets" icon={<Headphones />} label="پشتیبانی" /><PanelTab value="profile" icon={<CircleUserRound />} label="اطلاعات حساب" />
            <a href="/signout-with-chatgpt?return_to=/" target="_top" className="mt-2 flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-bold text-[var(--shop-primary)] hover:bg-emerald-50"><LogOut className="h-4 w-4" />خروج از حساب</a>
          </TabsList>
          <div className="min-w-0">
            <TabsContent value="overview" className="mt-0 space-y-5"><div className="grid gap-4 sm:grid-cols-3"><InfoCard icon={<PackageCheck />} title="آخرین سفارش" value={orders[0]?.orderNumber || "هنوز سفارشی ندارید"} /><InfoCard icon={<Gift />} title="امتیاز باشگاه" value="۳۲۰ امتیاز" /><InfoCard icon={<Bell />} title="پیام‌های جدید" value="بدون پیام جدید" /></div><Panel title="باشگاه مشتریان"><div className="flex justify-between text-sm"><span>سطح فعلی: نقره‌ای</span><span>۳۲۰ از ۱۰۰۰ امتیاز</span></div><Progress value={32} className="mt-4" /><p className="mt-3 text-xs text-slate-500">با خرید و ثبت دیدگاه امتیاز بیشتری بگیرید.</p></Panel><OrderList orders={orders.slice(0, 3)} loading={loading} /></TabsContent>
            <TabsContent value="orders" className="mt-0"><OrderList orders={orders} loading={loading} /></TabsContent>
            <TabsContent value="favorites" className="mt-0"><Panel title="علاقه‌مندی‌ها">{favoriteProducts.length ? <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">{favoriteProducts.map((product) => <ProductCard key={product.id} product={product} />)}</div> : <EmptyState icon={<Heart />} title="فهرست علاقه‌مندی خالی است" text="کالاهایی که دوست دارید را با نشان قلب ذخیره کنید." />}</Panel></TabsContent>
            <TabsContent value="addresses" className="mt-0"><Panel title="نشانی‌های من"><EmptyState icon={<MapPin />} title="هنوز نشانی ذخیره نشده" text="نشانی شما هنگام اولین سفارش ذخیره می‌شود." /><Button className="mt-5">افزودن نشانی جدید</Button></Panel></TabsContent>
            <TabsContent value="wallet" className="mt-0"><Panel title="کیف پول barzinmarket"><div className="rounded-2xl bg-gradient-to-bl from-[var(--shop-navy)] to-emerald-700 p-6 text-white"><p className="text-sm text-slate-300">موجودی قابل استفاده</p><div className="mt-3 text-3xl font-black">۰ <span className="text-sm">تومان</span></div><Button variant="secondary" className="mt-6">افزایش موجودی</Button></div></Panel></TabsContent>
            <TabsContent value="returns" className="mt-0"><Panel title="درخواست مرجوعی"><EmptyState icon={<RotateCcw />} title="درخواست فعالی ندارید" text="از کنار هر سفارش تحویل‌شده می‌توانید درخواست بازگشت ثبت کنید." /></Panel></TabsContent>
            <TabsContent value="tickets" className="mt-0"><Panel title="ارتباط با پشتیبانی"><div className="grid gap-4"><div><Label htmlFor="subject">موضوع</Label><Input id="subject" className="mt-2" /></div><div><Label htmlFor="ticket">پیام شما</Label><Textarea id="ticket" className="mt-2 min-h-32" /></div><Button className="w-fit"><TicketCheck className="ml-2 h-4 w-4" />ثبت درخواست</Button></div></Panel></TabsContent>
            <TabsContent value="profile" className="mt-0"><Panel title="اطلاعات حساب"><div className="grid gap-4 md:grid-cols-2"><div><Label>نام و نام خانوادگی</Label><Input className="mt-2" defaultValue={user.fullName || user.displayName} /></div><div><Label>ایمیل</Label><Input className="mt-2" value={user.email} readOnly /></div><div><Label>شماره همراه</Label><Input className="mt-2" placeholder="۰۹۱۲۱۲۳۴۵۶۷" /></div><div><Label>کد ملی</Label><Input className="mt-2" placeholder="اختیاری" /></div></div><Button className="mt-6">ذخیره تغییرات</Button></Panel></TabsContent>
          </div>
        </Tabs>
      </div>
    </StoreShell>
  );
}

function PanelTab({ value, icon, label }: { value: string; icon: React.ReactNode; label: string }) { return <TabsTrigger value={value} className="min-w-fit justify-start gap-2 rounded-xl px-3 py-2.5 data-[state=active]:bg-emerald-50 data-[state=active]:text-[var(--shop-primary)] dark:data-[state=active]:bg-emerald-950/40 [&_svg]:h-4 [&_svg]:w-4">{icon}{label}</TabsTrigger>; }
function MiniStat({ label, value }: { label: string; value: number }) { return <div className="rounded-2xl bg-white/10 px-4 py-3 text-center"><div className="text-xl font-black">{new Intl.NumberFormat("fa-IR").format(value)}</div><div className="mt-1 text-[11px] text-slate-300">{label}</div></div>; }
function InfoCard({ icon, title, value }: { icon: React.ReactNode; title: string; value: string }) { return <div className="rounded-[22px] border bg-white p-5 dark:bg-slate-900"><span className="text-[var(--shop-primary)] [&_svg]:h-6 [&_svg]:w-6">{icon}</span><div className="mt-4 text-xs text-slate-500">{title}</div><div className="mt-2 font-black">{value}</div></div>; }
function Panel({ title, children }: { title: string; children: React.ReactNode }) { return <section className="rounded-[24px] border bg-white p-5 md:p-6 dark:bg-slate-900"><h2 className="mb-5 text-lg font-black">{title}</h2>{children}</section>; }
function EmptyState({ icon, title, text }: { icon: React.ReactNode; title: string; text: string }) { return <div className="rounded-2xl border border-dashed p-8 text-center"><span className="mx-auto block w-fit text-slate-300 [&_svg]:h-14 [&_svg]:w-14">{icon}</span><h3 className="mt-4 font-black">{title}</h3><p className="mt-2 text-sm text-slate-500">{text}</p></div>; }
function OrderList({ orders, loading }: { orders: Order[]; loading: boolean }) { return <Panel title="سفارش‌های من">{loading ? <div className="py-10 text-center text-slate-500">در حال دریافت سفارش‌ها…</div> : orders.length ? <div className="space-y-3">{orders.map((order) => <article key={order.id} className="rounded-2xl border p-4"><div className="flex flex-wrap items-center justify-between gap-3"><div><div className="font-black" dir="ltr">{order.orderNumber}</div><div className="mt-1 text-xs text-slate-500">{new Date(order.createdAt).toLocaleDateString("fa-IR")}</div></div><span className="rounded-full bg-cyan-50 px-3 py-1 text-xs font-black text-cyan-800 dark:bg-cyan-950">{ORDER_STATUS_LABELS[order.status] || order.status}</span></div><div className="mt-4 flex items-center justify-between border-t pt-4 text-sm"><span className="text-slate-500">مبلغ سفارش</span><b>{formatPrice(order.total)} تومان</b></div></article>)}</div> : <EmptyState icon={<PackageCheck />} title="هنوز سفارشی ندارید" text="پس از خرید، وضعیت سفارش‌ها اینجا نمایش داده می‌شود." />}</Panel>; }