"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useCart } from "@/lib/cart-context";
import { formatPaise } from "@/lib/format";
import { createCheckoutOrder, verifyCheckoutPayment } from "@/lib/actions/checkout";

declare global {
  interface Window {
    Razorpay: new (options: Record<string, unknown>) => { open: () => void };
  }
}

function loadRazorpayScript(): Promise<boolean> {
  return new Promise((resolve) => {
    if (typeof window !== "undefined" && window.Razorpay) return resolve(true);
    const script = document.createElement("script");
    script.src = "https://checkout.razorpay.com/v1/checkout.js";
    script.onload = () => resolve(true);
    script.onerror = () => resolve(false);
    document.body.appendChild(script);
  });
}

export type SavedAddress = {
  id: string;
  label: string | null;
  name: string;
  phone: string;
  addressLine1: string;
  addressLine2: string | null;
  city: string;
  state: string;
  pincode: string;
  isDefault: boolean;
};

export default function CheckoutForm({ savedAddresses, customerEmail }: { savedAddresses: SavedAddress[]; customerEmail: string | null }) {
  const { items, subtotal, clear } = useCart();
  const router = useRouter();
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [couponCode, setCouponCode] = useState("");
  const defaultAddress = savedAddresses.find((a) => a.isDefault) ?? savedAddresses[0];
  const [selectedAddressId, setSelectedAddressId] = useState<string>(defaultAddress?.id ?? "new");
  const [form, setForm] = useState({
    name: defaultAddress?.name ?? "",
    email: customerEmail ?? "",
    phone: defaultAddress?.phone ?? "",
    addressLine1: defaultAddress?.addressLine1 ?? "",
    addressLine2: defaultAddress?.addressLine2 ?? "",
    city: defaultAddress?.city ?? "",
    state: defaultAddress?.state ?? "",
    pincode: defaultAddress?.pincode ?? "",
  });

  function update(field: keyof typeof form, value: string) {
    setForm((f) => ({ ...f, [field]: value }));
  }

  function pickAddress(id: string) {
    setSelectedAddressId(id);
    if (id === "new") return;
    const a = savedAddresses.find((sa) => sa.id === id);
    if (!a) return;
    setForm((f) => ({
      ...f,
      name: a.name,
      phone: a.phone,
      addressLine1: a.addressLine1,
      addressLine2: a.addressLine2 ?? "",
      city: a.city,
      state: a.state,
      pincode: a.pincode,
    }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setSubmitting(true);
    try {
      const result = await createCheckoutOrder(
        items.map((i) => ({
          productId: i.productId,
          variantId: i.variantId,
          quantity: i.quantity,
          personalization: i.personalization,
        })),
        form,
        couponCode
      );

      if (!result.razorpayConfigured) {
        clear();
        router.push(`/order/${result.orderNumber}?email=${encodeURIComponent(form.email)}`);
        return;
      }

      const loaded = await loadRazorpayScript();
      if (!loaded) {
        setError("Could not load the payment gateway. Please check your connection and try again.");
        setSubmitting(false);
        return;
      }

      const razorpay = new window.Razorpay({
        key: result.keyId,
        amount: result.total,
        currency: "INR",
        name: "Iniyaval Return Gifts",
        description: `Order ${result.orderNumber}`,
        order_id: result.razorpayOrderId,
        prefill: { name: form.name, email: form.email, contact: form.phone },
        theme: { color: "#be123c" },
        handler: async (response: { razorpay_payment_id: string; razorpay_order_id: string; razorpay_signature: string }) => {
          try {
            await verifyCheckoutPayment(
              result.orderId,
              response.razorpay_order_id,
              response.razorpay_payment_id,
              response.razorpay_signature
            );
            clear();
            router.push(`/order/${result.orderNumber}?email=${encodeURIComponent(form.email)}`);
          } catch {
            setError("Payment verification failed. If money was deducted, please contact us with your order number: " + result.orderNumber);
            setSubmitting(false);
          }
        },
        modal: {
          ondismiss: () => setSubmitting(false),
        },
      });
      razorpay.open();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
      setSubmitting(false);
    }
  }

  if (items.length === 0) {
    return (
      <div className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6">
        <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Your cart is empty</h1>
        <Link href="/shop" className="mt-4 inline-block rounded-md bg-rose-700 px-6 py-3 text-sm font-semibold text-white hover:bg-rose-800">
          Browse gifts
        </Link>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Checkout</h1>

      <div className="mt-6 grid gap-8 md:grid-cols-5">
        <form onSubmit={handleSubmit} className="space-y-4 md:col-span-3">
          {savedAddresses.length > 0 && (
            <div>
              <label className="text-sm font-medium text-stone-700">Deliver to</label>
              <div className="mt-2 space-y-2">
                {savedAddresses.map((a) => (
                  <label key={a.id} className={`flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-sm ${selectedAddressId === a.id ? "border-rose-400 bg-rose-50/50" : "border-stone-200"}`}>
                    <input type="radio" name="savedAddress" checked={selectedAddressId === a.id} onChange={() => pickAddress(a.id)} className="mt-1" />
                    <span>
                      {a.label && <span className="mr-2 rounded-full bg-rose-100 px-2 py-0.5 text-xs text-rose-700">{a.label}</span>}
                      <span className="font-medium text-stone-800">{a.name}</span>
                      <span className="block text-xs text-stone-500">
                        {a.addressLine1}, {a.city}, {a.state} {a.pincode}
                      </span>
                    </span>
                  </label>
                ))}
                <label className={`flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm ${selectedAddressId === "new" ? "border-rose-400 bg-rose-50/50" : "border-stone-200"}`}>
                  <input type="radio" name="savedAddress" checked={selectedAddressId === "new"} onChange={() => pickAddress("new")} />
                  <span className="font-medium text-stone-700">Enter a new address</span>
                </label>
              </div>
            </div>
          )}

          <div className="grid gap-4 sm:grid-cols-2">
            <Field label="Full name" value={form.name} onChange={(v) => update("name", v)} required maxLength={100} />
            <Field
              label="Phone"
              value={form.phone}
              onChange={(v) => update("phone", v)}
              type="tel"
              required
              inputMode="numeric"
              pattern="\d{10}"
              maxLength={10}
              title="Enter a 10-digit mobile number"
            />
          </div>
          <Field label="Email" value={form.email} onChange={(v) => update("email", v)} type="email" required />
          <Field label="Address line 1" value={form.addressLine1} onChange={(v) => update("addressLine1", v)} required maxLength={200} />
          <Field label="Address line 2 (optional)" value={form.addressLine2} onChange={(v) => update("addressLine2", v)} maxLength={200} />
          <div className="grid gap-4 sm:grid-cols-3">
            <Field label="City" value={form.city} onChange={(v) => update("city", v)} required maxLength={100} />
            <Field label="State" value={form.state} onChange={(v) => update("state", v)} required maxLength={100} />
            <Field
              label="Pincode"
              value={form.pincode}
              onChange={(v) => update("pincode", v)}
              required
              inputMode="numeric"
              pattern="\d{6}"
              maxLength={6}
              title="Enter a 6-digit pincode"
            />
          </div>

          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}

          <button
            type="submit"
            disabled={submitting}
            className="w-full rounded-md bg-rose-700 py-3 text-sm font-semibold text-white hover:bg-rose-800 disabled:bg-stone-300"
          >
            {submitting ? "Processing…" : `Pay ${formatPaise(subtotal)}`}
          </button>
        </form>

        <div className="md:col-span-2">
          <div className="rounded-xl border border-rose-100 bg-white p-4">
            <h2 className="text-sm font-semibold text-stone-700">Order summary</h2>
            <ul className="mt-3 space-y-2">
              {items.map((item) => (
                <li key={item.key} className="flex justify-between text-sm text-stone-600">
                  <span>
                    {item.name}
                    {item.variantName ? ` (${item.variantName})` : ""} × {item.quantity}
                  </span>
                  <span>{formatPaise(item.unitPrice * item.quantity)}</span>
                </li>
              ))}
            </ul>
            <div className="mt-4 flex justify-between border-t border-rose-100 pt-3 text-sm font-semibold text-stone-800">
              <span>Subtotal</span>
              <span>{formatPaise(subtotal)}</span>
            </div>
            <p className="mt-1 text-xs text-stone-400">Shipping and discount calculated at payment.</p>

            <div className="mt-4 border-t border-rose-100 pt-3">
              <label className="text-sm font-medium text-stone-700">Coupon code (optional)</label>
              <input
                type="text"
                value={couponCode}
                onChange={(e) => setCouponCode(e.target.value)}
                maxLength={30}
                placeholder="e.g. WELCOME10"
                className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm uppercase"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({
  label,
  value,
  onChange,
  type = "text",
  required = false,
  inputMode,
  pattern,
  maxLength,
  title,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  type?: string;
  required?: boolean;
  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
  pattern?: string;
  maxLength?: number;
  title?: string;
}) {
  return (
    <div>
      <label className="text-sm font-medium text-stone-700">{label}</label>
      <input
        type={type}
        value={value}
        required={required}
        inputMode={inputMode}
        pattern={pattern}
        maxLength={maxLength}
        title={title}
        onChange={(e) => onChange(e.target.value)}
        className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
      />
    </div>
  );
}