"use client";

import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { ArrowLeft, Banknote, Check, Info, LockKeyhole } from "lucide-react";
import { formatPrice } from "@/data/category-showcases";
import { cartSummary, type CheckoutDetails, type CheckoutErrors, type DeliveryZone } from "@/lib/commerce";
import { useDemoStore } from "@/components/shop/demo-store";
import { CommerceHeading } from "./commerce-heading";
import { CommerceLoading, EmptyBag } from "./commerce-state";
import { OrderSummary } from "./order-summary";
import { CheckoutAddresses } from "@/components/account/checkout-addresses";

type TextField = "name" | "phone" | "email" | "address" | "district" | "area" | "notes";

export function CheckoutPage() {
  const router = useRouter();
  const { cart, hydrated, checkoutDraft: draft, updateCheckoutDraft, setDeliveryZone, placeOrder } = useDemoStore();
  const [errors, setErrors] = useState<CheckoutErrors>({});
  const [message, setMessage] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const submissionLock = useRef(false);
  const checkoutKey = useRef("");
  const summary = cartSummary(cart, draft.deliveryZone);

  function fieldProps(name: TextField) {
    return { id: `checkout-${name}`, name, value: draft[name], onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { updateCheckoutDraft({ [name]: event.target.value }); setErrors((current) => ({ ...current, [name]: undefined })); }, "aria-invalid": !!errors[name], "aria-describedby": errors[name] ? `checkout-${name}-error` : undefined };
  }
  function error(name: keyof CheckoutDetails) { return errors[name] ? <span className="field-error" id={`checkout-${name}-error`}>{errors[name]}</span> : null; }
  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (submissionLock.current) return;
    submissionLock.current = true;
    setSubmitting(true);
    if (!checkoutKey.current) checkoutKey.current = crypto.randomUUID();
    const result = placeOrder(checkoutKey.current);
    if (result.ok) { router.replace("/order-confirmation"); return; }
    setErrors(result.errors); setMessage(result.message); setSubmitting(false); submissionLock.current = false;
    const first = Object.keys(result.errors)[0];
    requestAnimationFrame(() => document.getElementById(first ? `checkout-${first}` : "checkout-error-summary")?.focus());
  }

  return <><CommerceHeading step={2} title="The final little details." description="Tell us where your everyday favourites should go." />{!hydrated ? <CommerceLoading /> : submitting ? <div className="commerce-state" role="status"><Check size={32} /><p>Preparing your demo confirmation…</p></div> : !summary.lines.length ? <EmptyBag checkout /> : <div className="commerce-layout checkout-layout section-padding"><form id="checkout-form" className="checkout-form" onSubmit={submit} noValidate><div className="checkout-form-heading"><span className="form-section-number">01</span><div><h2>Delivery details</h2><p>Checkout as a guest. No account needed.</p></div></div>{message && <div id="checkout-error-summary" tabIndex={-1} className="commerce-error" role="alert">{message}</div>}<CheckoutAddresses onApplied={(fields) => { setMessage(""); setErrors((current) => { const next = { ...current }; for (const field of fields) delete next[field]; return next; }); }} /><div className="checkout-fields"><label className="form-field" htmlFor="checkout-name"><span>Full name <i>*</i></span><input {...fieldProps("name")} autoComplete="name" maxLength={80} placeholder="Your full name" required />{error("name")}</label><label className="form-field" htmlFor="checkout-phone"><span>Mobile number <i>*</i></span><input {...fieldProps("phone")} type="tel" inputMode="tel" autoComplete="tel" maxLength={25} placeholder="01XXXXXXXXX" required />{error("phone")}</label><label className="form-field field-full" htmlFor="checkout-email"><span>Email address <small>Optional</small></span><input {...fieldProps("email")} type="email" autoComplete="email" maxLength={120} placeholder="you@example.com" />{error("email")}</label><label className="form-field field-full" htmlFor="checkout-address"><span>Delivery address <i>*</i></span><textarea {...fieldProps("address")} autoComplete="street-address" rows={3} maxLength={300} placeholder="House, road, building, apartment and nearby landmark" required />{error("address")}</label><label className="form-field" htmlFor="checkout-deliveryZone"><span>Delivery area <i>*</i></span><select id="checkout-deliveryZone" name="deliveryZone" value={draft.deliveryZone} aria-invalid={!!errors.deliveryZone} aria-describedby={errors.deliveryZone ? "checkout-deliveryZone-error" : undefined} onChange={(event) => { setDeliveryZone(event.target.value as DeliveryZone); setErrors((current) => ({ ...current, deliveryZone: undefined, district: undefined })); }}><option value="dhaka">Inside Dhaka city</option><option value="outside">Outside Dhaka city</option></select>{error("deliveryZone")}</label><label className="form-field" htmlFor="checkout-district"><span>District <i>*</i></span><input {...fieldProps("district")} autoComplete="address-level1" maxLength={60} readOnly={draft.deliveryZone === "dhaka"} placeholder="Your district" required />{error("district")}</label><label className="form-field field-full" htmlFor="checkout-area"><span>Area / Upazila <i>*</i></span><input {...fieldProps("area")} autoComplete="address-level2" maxLength={80} placeholder="Your area or upazila" required />{error("area")}</label><label className="form-field field-full" htmlFor="checkout-notes"><span>Delivery note <small>Optional</small></span><textarea {...fieldProps("notes")} rows={2} maxLength={500} placeholder="Anything that helps us find your address" />{error("notes")}</label></div><div className="checkout-form-heading payment-heading"><span className="form-section-number">02</span><div><h2>Payment method</h2><p>Keep it simple with cash on delivery.</p></div></div><label className="payment-option"><input type="radio" name="payment" value="cod" checked={draft.payment === "cod"} onChange={() => updateCheckoutDraft({ payment: "cod" })} /><Banknote size={23} /><span><strong>Cash on delivery</strong><small>Selected for this demo order</small></span><Check size={18} /></label>{error("payment")}<div className="payment-unavailable"><span>Online payment</span><small>Coming soon</small></div><div className="checkout-demo-disclosure"><Info size={18} /><p>This is a demo checkout. No payment is collected and no real order or delivery is arranged. Your confirmation is saved in this browser.</p></div><Link href="/cart" className="commerce-back-link"><ArrowLeft size={15} /> Back to shopping bag</Link></form><OrderSummary summary={summary} items={<div className="checkout-order-items">{summary.lines.map((line) => <div className="checkout-order-item" key={line.variantId}><div className="checkout-item-image"><Image src={line.variant.images[0]} alt={`${line.product.name}, ${line.variant.color}`} width={48} height={50} /><span>{line.quantity}</span></div><div><strong>{line.product.name}</strong><small>{line.variant.color} / {line.variant.size}</small></div><span>{formatPrice(line.lineTotal)}</span></div>)}</div>}>{summary.issues.length > 0 && <div className="commerce-error" role="alert">{summary.issues.join(" ")}<Link href="/cart">Update your bag</Link></div>}<button type="submit" form="checkout-form" disabled={submitting || !!summary.issues.length} className="button button-primary place-order-button"><LockKeyhole size={15} /> Place demo order — {formatPrice(summary.total)}</button><p className="summary-payment-note">Demo only · Nothing will be charged</p></OrderSummary></div>}</>;
}