"use client";

import { FormEvent, useEffect, useState } from "react";
import Link from "next/link";
import { CalendarClock, CheckCircle2, ChevronLeft, CreditCard, MapPin, PackageCheck, Store, Truck } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { useCart } from "@/components/cart-provider";
import { StoreShell } from "@/components/store-shell";
import { DEFAULT_SITE_SETTINGS, resolveSiteSettings, type SiteSettings } from "@/data/site-defaults";
import { formatPrice } from "@/lib/commerce";

export function CheckoutPageClient({ categories }: { categories: string[] }) {
  const cart = useCart();
  const [paymentMethod, setPaymentMethod] = useState("cod");
  const [deliverySlot, setDeliverySlot] = useState("اولین زمان ممکن");
  const [submitting, setSubmitting] = useState(false);
  const [order, setOrder] = useState<{ orderNumber: string; total: number } | null>(null);
  const [settings, setSettings] = useState<SiteSettings>(DEFAULT_SITE_SETTINGS);
  useEffect(() => { fetch("/api/settings").then((response) => response.ok ? response.json() : null).then((payload) => payload?.settings && setSettings(resolveSiteSettings(payload.settings))).catch(() => undefined); }, []);
  useEffect(() => {
    if (paymentMethod === "cod" && !settings.checkout.codEnabled) setPaymentMethod(settings.checkout.onlinePaymentEnabled ? "online" : "wallet");
    if (deliverySlot === "تحویل حضوری" && !settings.checkout.storePickupEnabled) setDeliverySlot("اولین زمان ممکن");
  }, [settings, paymentMethod, deliverySlot]);
  const shipping = cart.subtotal >= settings.checkout.freeShippingThreshold ? 0 : settings.checkout.shippingCost;

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!cart.items.length) return;
    const form = new FormData(event.currentTarget);
    setSubmitting(true);
    try {
      const response = await fetch("/api/orders", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ customerName: form.get("name"), customerEmail: form.get("email"), customerPhone: form.get("phone"), address: { province: form.get("province"), city: form.get("city"), postalCode: form.get("postalCode"), address: form.get("address") }, items: cart.items.map((item) => ({ productId: item.product.id, quantity: item.quantity })), deliverySlot, paymentMethod, couponCode: form.get("couponCode"), note: form.get("note") }) });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "ثبت سفارش انجام نشد");
      setOrder(payload.order);
      cart.clearCart();
      if (payload.paymentRequired) toast.info("سفارش ثبت شد؛ اتصال درگاه از تنظیمات مدیریت انجام می‌شود");
    } catch (error) { toast.error(error instanceof Error ? error.message : "ثبت سفارش انجام نشد"); }
    finally { setSubmitting(false); }
  }

  if (order) return <StoreShell categories={categories}><div className="container-shell grid min-h-[65vh] place-items-center py-10"><div className="w-full max-w-xl rounded-[28px] border bg-white p-8 text-center shadow-xl dark:bg-slate-900"><span className="mx-auto grid h-20 w-20 place-items-center rounded-full bg-emerald-100 text-emerald-600"><CheckCircle2 className="h-10 w-10" /></span><h1 className="mt-6 text-2xl font-black">سفارش با موفقیت ثبت شد</h1><p className="mt-3 text-slate-500">شماره سفارش</p><div className="mt-2 text-2xl font-black" dir="ltr">{order.orderNumber}</div><p className="mt-4 text-sm text-slate-500">مبلغ سفارش: {formatPrice(order.total)} {settings.currency}</p><div className="mt-7 flex justify-center gap-3"><Button asChild><Link href="/account">پیگیری سفارش</Link></Button><Button asChild variant="outline"><Link href="/">بازگشت به فروشگاه</Link></Button></div></div></div></StoreShell>;

  if (!cart.items.length) return <StoreShell categories={categories}><div className="container-shell grid min-h-[60vh] place-items-center text-center"><div><PackageCheck className="mx-auto h-20 w-20 text-slate-300" /><h1 className="mt-5 text-2xl font-black">کالایی برای ثبت سفارش نیست</h1><Button asChild className="mt-5"><Link href="/search">رفتن به فروشگاه</Link></Button></div></div></StoreShell>;

  return (
    <StoreShell categories={categories}>
      <form onSubmit={submit} className="container-shell grid items-start gap-5 py-7 lg:grid-cols-[minmax(0,1fr)_360px]">
        <div className="space-y-5">
          <section className="rounded-[28px] border bg-white p-5 md:p-7 dark:bg-slate-900"><div className="mb-6 flex items-center gap-3"><span className="grid h-11 w-11 place-items-center rounded-2xl bg-emerald-50 text-[var(--shop-primary)] dark:bg-emerald-950/40"><MapPin /></span><div><h1 className="text-xl font-black">نشانی و گیرنده</h1><p className="mt-1 text-xs text-slate-500">اطلاعات تحویل سفارش را وارد کنید</p></div></div><div className="grid gap-4 md:grid-cols-2"><Field label="نام و نام خانوادگی" name="name" required /><Field label="شماره موبایل" name="phone" type="tel" required /><Field label="ایمیل" name="email" type="email" required /><Field label="استان" name="province" required /><Field label="شهر" name="city" required /><Field label="کد پستی" name="postalCode" required /><div className="md:col-span-2"><Label htmlFor="address">نشانی کامل</Label><Textarea id="address" name="address" required className="mt-2 min-h-24" placeholder="خیابان، کوچه، پلاک و واحد" /></div></div></section>
          <section className="rounded-[28px] border bg-white p-5 md:p-7 dark:bg-slate-900"><div className="mb-5 flex items-center gap-3"><CalendarClock className="text-[var(--shop-primary)]" /><h2 className="text-xl font-black">زمان و روش ارسال</h2></div><RadioGroup value={deliverySlot} onValueChange={setDeliverySlot} className="grid gap-3 md:grid-cols-3"><DeliveryOption value="اولین زمان ممکن" icon={<Truck />} title="ارسال سریع" text="حدود ۳۰ تا ۹۰ دقیقه" /><DeliveryOption value="امروز ۱۸ تا ۲۰" icon={<CalendarClock />} title="امروز" text="ساعت ۱۸ تا ۲۰" />{settings.checkout.storePickupEnabled && <DeliveryOption value="تحویل حضوری" icon={<Store />} title="تحویل حضوری" text="بدون هزینه ارسال" />}</RadioGroup></section>
          <section className="rounded-[28px] border bg-white p-5 md:p-7 dark:bg-slate-900"><div className="mb-5 flex items-center gap-3"><CreditCard className="text-[var(--shop-primary)]" /><h2 className="text-xl font-black">شیوه پرداخت</h2></div><RadioGroup value={paymentMethod} onValueChange={setPaymentMethod} className="grid gap-3">{settings.checkout.codEnabled && <PaymentOption value="cod" title="پرداخت در محل" text="پرداخت هنگام تحویل سفارش" />}{settings.checkout.onlinePaymentEnabled && <PaymentOption value="online" title="پرداخت اینترنتی" text="پس از اتصال درگاه بانکی در پنل مدیریت" />}{settings.modules.wallet && <PaymentOption value="wallet" title="کیف پول barzinmarket" text="استفاده از اعتبار باشگاه مشتریان" />}</RadioGroup></section>
          <section className="rounded-[28px] border bg-white p-5 dark:bg-slate-900"><Label htmlFor="note">توضیحات سفارش</Label><Textarea id="note" name="note" className="mt-2" placeholder="نکته‌ای برای آماده‌سازی یا تحویل دارید؟" /></section>
        </div>
        <aside className="sticky top-32 rounded-[24px] border bg-white p-5 dark:bg-slate-900"><h2 className="font-black">صورتحساب</h2><div className="mt-5 space-y-4 text-sm"><div className="flex justify-between text-slate-500"><span>جمع کالاها</span><span>{formatPrice(cart.subtotal)} {settings.currency}</span></div><div className="flex justify-between text-slate-500"><span>ارسال</span><span>{shipping ? `${formatPrice(shipping)} ${settings.currency}` : "رایگان"}</span></div><div><Label htmlFor="couponCode">کد تخفیف</Label><Input id="couponCode" name="couponCode" className="mt-2" placeholder="مثلاً BARZIN10" /></div><Separator /><div className="flex justify-between text-base font-black"><span>قابل پرداخت</span><span>{formatPrice(cart.subtotal + shipping)} {settings.currency}</span></div></div><Button type="submit" disabled={submitting} className="mt-5 h-12 w-full rounded-xl text-base font-black">{submitting ? "در حال ثبت…" : "ثبت نهایی سفارش"}<ChevronLeft className="mr-2 h-5 w-5" /></Button><p className="mt-4 text-center text-xs leading-6 text-slate-400">با ثبت سفارش، قوانین فروشگاه را می‌پذیرید.</p></aside>
      </form>
    </StoreShell>
  );
}

function Field({ label, name, type = "text", required = false }: { label: string; name: string; type?: string; required?: boolean }) { return <div><Label htmlFor={name}>{label}</Label><Input id={name} name={name} type={type} required={required} className="mt-2" /></div>; }
function DeliveryOption({ value, icon, title, text }: { value: string; icon: React.ReactNode; title: string; text: string }) { return <Label htmlFor={`delivery-${value}`} className="flex cursor-pointer items-center gap-3 rounded-2xl border p-4 has-[[data-state=checked]]:border-[var(--shop-primary)] has-[[data-state=checked]]:bg-emerald-50 dark:has-[[data-state=checked]]:bg-emerald-950/30"><RadioGroupItem id={`delivery-${value}`} value={value} /><span className="text-[var(--shop-primary)] [&_svg]:h-5 [&_svg]:w-5">{icon}</span><span><b className="block">{title}</b><small className="mt-1 block text-slate-500">{text}</small></span></Label>; }
function PaymentOption({ value, title, text }: { value: string; title: string; text: string }) { return <Label htmlFor={`pay-${value}`} className="flex cursor-pointer items-center gap-4 rounded-2xl border p-4 has-[[data-state=checked]]:border-[var(--shop-primary)] has-[[data-state=checked]]:bg-emerald-50 dark:has-[[data-state=checked]]:bg-emerald-950/30"><RadioGroupItem id={`pay-${value}`} value={value} /><span><b className="block">{title}</b><small className="mt-1 block text-slate-500">{text}</small></span></Label>; }