"use client";

/**
 * تسویه حساب: آدرس ← روش ارسال ← کد تخفیف ← پرداخت.
 * مبالغ همیشه از سرور گرفته می‌شود. با زدن «پرداخت» سفارش در سرور ثبت، موجودی رزرو
 * و کاربر به درگاه پرداخت (زرین‌پال یا شبیه‌ساز محلی) هدایت می‌شود.
 */
import { useState, type ReactNode } from "react";
import { AddressForm } from "@/components/account/AddressForm";
import { CartSummary, FreeShippingProgress } from "@/components/cart/CartSummary";
import { Icon } from "@/components/ui/Icon";
import { addresses, useAddresses, useCart, useCartReady } from "@/lib/client/store";
import { placeOrderAction } from "@/server/actions/checkout";
import { usePricing } from "@/lib/client/use-pricing";
import { faDigits, formatToman } from "@/lib/format";
import { discountCodeSchema } from "@/validation/common";

function Step({ n, title, children }: { n: number; title: string; children: ReactNode }) {
  return (
    <section className="border-b border-line py-6">
      <h2 className="mb-4 flex items-center gap-3 text-base font-bold">
        <span className="grid size-7 place-items-center rounded-full bg-ink text-xs text-paper">{faDigits(n)}</span>
        {title}
      </h2>
      {children}
    </section>
  );
}

export function CheckoutView() {
  const lines = useCart();
  const ready = useCartReady();
  const saved = useAddresses();
  const [addressId, setAddressId] = useState<string>();
  const [adding, setAdding] = useState(false);
  const [methodId, setMethodId] = useState<string>();
  const [codeInput, setCodeInput] = useState("");
  const [code, setCode] = useState<string>();
  const [codeError, setCodeError] = useState("");
  const [submitError, setSubmitError] = useState("");
  const [paying, setPaying] = useState(false);

  const address = saved.find((a) => a.id === (addressId ?? saved[0]?.id));
  const { data, loading } = usePricing(lines, { discountCode: code, shippingMethodId: methodId, province: address?.province });

  if (!ready) return <p className="py-20 text-center text-sm text-muted">در حال آماده‌سازی…</p>;
  if (!lines.length) {
    return <p className="py-20 text-center text-sm text-muted">سبد خرید شما خالی است.</p>;
  }
  if (!data) return <p className="py-20 text-center text-sm text-muted">در حال آماده‌سازی…</p>;

  // اگر روش انتخاب‌شده برای استان فعلی در دسترس نیست، انتخاب را پاک می‌کنیم
  const method = data.shipping.find((m) => m.methodId === methodId);

  function applyCode(e: React.FormEvent) {
    e.preventDefault();
    const parsed = discountCodeSchema.safeParse(codeInput);
    if (!parsed.success) return setCodeError(parsed.error.issues[0].message);
    setCodeError("");
    setCode(parsed.data);
  }

  function pay() {
    if (!address) return setSubmitError("یک آدرس انتخاب یا اضافه کنید");
    if (!method) return setSubmitError("روش ارسال را انتخاب کنید");
    if (data!.lines.some((l) => l.availableQty < l.qty)) return setSubmitError("برخی کالاها ناموجود شده‌اند؛ سبد را اصلاح کنید");
    setSubmitError("");
    setPaying(true);
    // سفارش در سرور ثبت می‌شود و کاربر به درگاه پرداخت هدایت می‌شود
    placeOrderAction({ addressId: address.id, shippingMethodId: method.methodId, discountCode: data!.discountLabel ? code : undefined }).then((res) => {
      if (!res.ok) {
        setPaying(false);
        setSubmitError(res.error);
        return;
      }
      window.location.assign(res.redirectUrl);
    });
  }

  return (
    <div className={`md:grid md:grid-cols-[1fr_360px] md:gap-12 ${loading ? "[&_aside]:opacity-70" : ""}`}>
      <div>
        <Step n={1} title="آدرس تحویل">
          {saved.length > 0 && !adding && (
            <div className="space-y-2">
              {saved.map((a) => (
                <label key={a.id} className={`flex cursor-pointer gap-3 rounded-2xl border p-4 text-sm ${address?.id === a.id ? "border-ink" : "border-line"}`}>
                  <input type="radio" name="address" checked={address?.id === a.id} onChange={() => setAddressId(a.id)} className="mt-1 accent-ink" />
                  <span>
                    <b>{a.title}</b> · {a.receiver}
                    <span className="mt-1 block text-xs leading-5 text-muted">
                      {a.province}، {a.city}، {a.line} · کد پستی {faDigits(a.postalCode)}
                    </span>
                  </span>
                </label>
              ))}
              <button className="btn-ghost h-10 px-3 text-xs" onClick={() => setAdding(true)}>
                <Icon name="plus" size={16} /> افزودن آدرس جدید
              </button>
            </div>
          )}
          {(adding || saved.length === 0) && (
            <AddressForm
              onSave={async (a) => {
                const res = await addresses.save(a);
                if (res.errors) return res;
                setAddressId(res.id);
                setAdding(false);
              }}
              onCancel={saved.length ? () => setAdding(false) : undefined}
            />
          )}
        </Step>

        <Step n={2} title="روش ارسال">
          {!address && <p className="mb-3 text-xs text-muted">پیک تهران پس از انتخاب آدرسی در استان تهران نمایش داده می‌شود.</p>}
          <div className="space-y-2">
            {data.shipping.map((m) => (
              <label key={m.methodId} className={`flex cursor-pointer items-center gap-3 rounded-2xl border p-4 text-sm ${methodId === m.methodId ? "border-ink" : "border-line"}`}>
                <input type="radio" name="shipping" checked={methodId === m.methodId} onChange={() => setMethodId(m.methodId)} className="accent-ink" />
                <span className="flex-1">
                  <b>{m.name}</b>
                  <span className="block text-xs text-muted">{m.eta}</span>
                </span>
                <span className="text-xs font-bold">{m.free ? "رایگان" : formatToman(m.price)}</span>
              </label>
            ))}
          </div>
          <div className="mt-3">
            <FreeShippingProgress pricing={data} />
          </div>
        </Step>

        <Step n={3} title="کد تخفیف">
          <form onSubmit={applyCode} className="flex gap-2">
            <input className="field uppercase" dir="ltr" value={codeInput} onChange={(e) => setCodeInput(e.target.value)} placeholder="ZAHORA10" maxLength={20} aria-label="کد تخفیف" />
            <button className="btn-outline shrink-0">اعمال</button>
          </form>
          {(codeError || data.discountError) && <p className="mt-2 text-xs font-medium">⚠ {codeError || data.discountError}</p>}
          {data.discountLabel && (
            <p className="mt-2 flex items-center gap-2 text-xs">
              <Icon name="check" size={14} /> {data.discountLabel}
              <button className="underline" onClick={() => { setCode(undefined); setCodeInput(""); }}>حذف</button>
            </p>
          )}
        </Step>

        <Step n={4} title="روش پرداخت">
          <label className="flex items-center gap-3 rounded-2xl border border-ink p-4 text-sm">
            <input type="radio" checked readOnly className="accent-ink" />
            <span className="flex-1">
              <b>پرداخت اینترنتی (زرین‌پال)</b>
              <span className="block text-xs text-muted">با همه کارت‌های عضو شتاب</span>
            </span>
          </label>
        </Step>
      </div>

      <aside className="mt-6 md:mt-6">
        <div className="space-y-4 rounded-2xl border border-line p-5 md:sticky md:top-36">
          <h2 className="text-sm font-bold">خلاصه سفارش</h2>
          <CartSummary pricing={data} showShipping shippingSelected={!!method} />
          {submitError && <p className="text-xs font-medium">⚠ {submitError}</p>}
          <button className="btn-primary w-full" onClick={pay} disabled={paying}>
            {paying ? "در حال انتقال به درگاه…" : `پرداخت ${formatToman(data.total)}`}
          </button>
          <p className="text-[11px] leading-5 text-muted">پس از پرداخت به زهورا بازمی‌گردید. موجودی کالاها تا ۳۰ دقیقه برای شما رزرو می‌شود.</p>
        </div>
      </aside>
    </div>
  );
}