"use client";

import Link from "next/link";
import { Activity, Boxes, CircleDollarSign, ClipboardList, Store, Truck, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SellerPanel({ user }: { user: { displayName: string; email: string } }) { return <div className="min-h-screen bg-slate-100 p-4 md:p-7"><div className="mx-auto max-w-7xl"><header className="flex flex-col justify-between gap-4 rounded-[26px] bg-[#143c2d] p-6 text-white md:flex-row md:items-center"><div className="flex items-center gap-3"><span className="grid h-12 w-12 place-items-center rounded-2xl bg-[#00a86b]"><Store /></span><div><h1 className="text-xl font-black">مرکز فروشندگان barzinmarket</h1><p className="mt-1 text-xs text-slate-300">{user.displayName} · {user.email}</p></div></div><Button variant="secondary" asChild><Link href="/">بازگشت به فروشگاه</Link></Button></header><div className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"><SellerStat icon={<CircleDollarSign />} label="فروش این ماه" value="۰ تومان" /><SellerStat icon={<ClipboardList />} label="سفارش جدید" value="۰" /><SellerStat icon={<Boxes />} label="کالای فعال" value="۰" /><SellerStat icon={<Activity />} label="امتیاز عملکرد" value="—" /></div><Tabs defaultValue="onboarding" dir="rtl" className="mt-5"><TabsList className="h-auto w-full justify-start overflow-x-auto bg-white p-2"><TabsTrigger value="onboarding">ثبت‌نام فروشنده</TabsTrigger><TabsTrigger value="products">کالاها</TabsTrigger><TabsTrigger value="orders">سفارش‌ها</TabsTrigger><TabsTrigger value="shipping">ارسال</TabsTrigger><TabsTrigger value="finance">تسویه‌حساب</TabsTrigger></TabsList><TabsContent value="onboarding"><Card><CardHeader><CardTitle>شروع فروش در barzinmarket</CardTitle></CardHeader><CardContent><div className="grid gap-4 md:grid-cols-3">{[[Users,"اطلاعات کسب‌وکار","هویت و اطلاعات تماس را کامل کنید"],[Boxes,"افزودن کالا","کاتالوگ و موجودی خود را ثبت کنید"],[Truck,"تنظیم ارسال","محدوده و زمان تحویل را مشخص کنید"]].map(([Icon,title,text]) => { const I = Icon as typeof Users; return <div key={String(title)} className="rounded-2xl border p-5"><I className="h-7 w-7 text-emerald-600" /><h3 className="mt-4 font-black">{String(title)}</h3><p className="mt-2 text-sm leading-7 text-slate-500">{String(text)}</p></div>; })}</div><Button className="mt-6">ثبت درخواست فروشندگی</Button></CardContent></Card></TabsContent>{["products","orders","shipping","finance"].map((value) => <TabsContent key={value} value={value}><Card><CardContent className="grid min-h-72 place-items-center text-center"><div><Store className="mx-auto h-14 w-14 text-slate-300" /><h2 className="mt-4 font-black">پس از تأیید فروشنده فعال می‌شود</h2><p className="mt-2 text-sm text-slate-500">مدیر فروشگاه درخواست و سطح دسترسی شما را بررسی می‌کند.</p></div></CardContent></Card></TabsContent>)}</Tabs></div></div>; }
function SellerStat({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) { return <Card><CardContent className="flex items-center gap-4 p-5"><span className="grid h-11 w-11 place-items-center rounded-xl bg-emerald-50 text-emerald-600 [&_svg]:h-5 [&_svg]:w-5">{icon}</span><div><p className="text-xs text-slate-500">{label}</p><div className="mt-1 text-lg font-black">{value}</div></div></CardContent></Card>; }