"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, MapPin, MessageCircle, Truck } from "lucide-react";
import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { formatMoney } from "@/lib/utils";
import { useCartStore } from "@/store/cart-store";

// ADR 0009, siguiente corte tras el carrito real: direccion + seleccion de
// envio contra el Store API real (mismos endpoints ya verificados en vivo
// para las shipping options). El pago (PayU custom) todavia no existe --
// el ultimo paso sigue siendo WhatsApp, ahora con el pedido completo
// (direccion, envio, total real) en vez de solo la lista de productos.

interface ShippingOption {
  id: string;
  name: string;
  amount: number;
}

type Step = "address" | "shipping" | "review";

async function postJson(url: string, body: unknown) {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  return response.json();
}

export function CheckoutClient() {
  const { cartId, items, hasHydrated } = useCartStore();
  const [step, setStep] = useState<Step>("address");
  const [form, setForm] = useState({ firstName: "", lastName: "", address1: "", city: "", province: "", phone: "", email: "" });
  const [shippingOptions, setShippingOptions] = useState<ShippingOption[]>([]);
  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
  const [shippingTotal, setShippingTotal] = useState(0);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const itemsSubtotal = items.reduce((sum, item) => sum + (item.product.price ?? 0) * item.quantity, 0);
  const currency = items[0]?.product.currency;

  async function submitAddress(event: FormEvent) {
    event.preventDefault();
    if (!cartId) return;
    setLoading(true);
    setError(null);
    try {
      const cart = await postJson("/api/cart/address", { cartId, ...form });
      if (cart.error) throw new Error(cart.error);
      const response = await fetch(`/api/cart/shipping-options?cartId=${cartId}`);
      const data = await response.json();
      const options: ShippingOption[] = data.options ?? [];
      setShippingOptions(options);
      setSelectedOptionId(options[0]?.id ?? null);
      setStep("shipping");
    } catch (submitError) {
      setError((submitError as Error).message);
    } finally {
      setLoading(false);
    }
  }

  async function submitShipping() {
    if (!cartId || !selectedOptionId) return;
    setLoading(true);
    setError(null);
    try {
      const cart = await postJson("/api/cart/shipping-method", { cartId, optionId: selectedOptionId });
      if (cart.error) throw new Error(cart.error);
      setShippingTotal(cart.shippingTotal ?? 0);
      setTotal(cart.total ?? itemsSubtotal);
      setStep("review");
    } catch (submitError) {
      setError((submitError as Error).message);
    } finally {
      setLoading(false);
    }
  }

  function continueOnWhatsApp() {
    const lines = items.map((item) => `• ${item.quantity} x ${item.product.name}`).join("\n");
    const message = `Hola Ari Shopping 👋\nQuiero confirmar mi pedido:\n\n${lines}\n\nSubtotal: ${formatMoney(itemsSubtotal, currency)}\nEnvío: ${formatMoney(shippingTotal, currency)}\nTotal: ${formatMoney(total, currency)}\n\nNombre: ${form.firstName} ${form.lastName}\nDirección: ${form.address1}, ${form.city}${form.province ? `, ${form.province}` : ""}\nTeléfono: ${form.phone}`;
    void navigator.clipboard?.writeText(message);
    window.open(process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc", "_blank", "noopener,noreferrer");
  }

  if (!hasHydrated) return null;

  if (items.length === 0) {
    return (
      <div className="mx-auto max-w-lg px-4 py-24 text-center">
        <p className="text-lg font-bold">Tu carrito está vacío.</p>
        <Button asChild variant="primary" className="mt-6"><Link href="/catalog">Ver catálogo</Link></Button>
      </div>
    );
  }

  return (
    <div className="mx-auto grid max-w-5xl gap-10 px-4 py-10 lg:grid-cols-[1fr_.8fr] lg:py-16">
      <div>
        <Link href="/" className="mb-6 inline-flex items-center gap-1.5 text-sm font-bold text-slate-500 hover:text-ari-marino"><ArrowLeft className="size-4" />Seguir comprando</Link>
        <h1 className="text-3xl font-black tracking-tight sm:text-4xl">Confirmar pedido</h1>

        {step === "address" && (
          <form onSubmit={submitAddress} className="mt-8 space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Input placeholder="Nombre" required value={form.firstName} onChange={(event) => setForm({ ...form, firstName: event.target.value })} />
              <Input placeholder="Apellido" required value={form.lastName} onChange={(event) => setForm({ ...form, lastName: event.target.value })} />
            </div>
            <Input placeholder="Dirección" required value={form.address1} onChange={(event) => setForm({ ...form, address1: event.target.value })} />
            <div className="grid gap-4 sm:grid-cols-2">
              <Input placeholder="Ciudad" required value={form.city} onChange={(event) => setForm({ ...form, city: event.target.value })} />
              <Input placeholder="Departamento" value={form.province} onChange={(event) => setForm({ ...form, province: event.target.value })} />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Input placeholder="Teléfono" required value={form.phone} onChange={(event) => setForm({ ...form, phone: event.target.value })} />
              <Input type="email" placeholder="Correo" required value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
            </div>
            {error && <p className="text-sm font-bold text-rose-600">{error}</p>}
            <Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>{loading ? "Guardando…" : "Continuar a envío"}</Button>
          </form>
        )}

        {step === "shipping" && (
          <div className="mt-8 space-y-4">
            <p className="flex items-center gap-2 text-sm font-bold text-slate-500"><MapPin className="size-4" />{form.address1}, {form.city}{form.province ? `, ${form.province}` : ""}</p>
            <div className="space-y-3">
              {shippingOptions.map((option) => (
                <label key={option.id} className={`flex cursor-pointer items-center justify-between rounded-2xl border-2 p-4 transition ${selectedOptionId === option.id ? "border-ari-marino bg-ari-marino/5" : "border-slate-200"}`}>
                  <span className="flex items-center gap-3 font-bold"><Truck className="size-5 text-ari-marino" />{option.name}</span>
                  <span className="flex items-center gap-3">
                    <span className="font-black">{formatMoney(option.amount, currency)}</span>
                    <input type="radio" name="shipping" checked={selectedOptionId === option.id} onChange={() => setSelectedOptionId(option.id)} />
                  </span>
                </label>
              ))}
              {shippingOptions.length === 0 && <p className="text-sm text-slate-500">No hay opciones de envío disponibles para esta dirección.</p>}
            </div>
            {error && <p className="text-sm font-bold text-rose-600">{error}</p>}
            <Button variant="primary" size="lg" className="w-full" disabled={loading || !selectedOptionId} onClick={submitShipping}>{loading ? "Guardando…" : "Continuar"}</Button>
          </div>
        )}

        {step === "review" && (
          <div className="mt-8 space-y-4">
            <div className="rounded-2xl border border-slate-200 p-5">
              <p className="text-xs font-black uppercase tracking-wide text-slate-400">Entrega</p>
              <p className="mt-1 font-bold">{form.firstName} {form.lastName}</p>
              <p className="text-sm text-slate-500">{form.address1}, {form.city}{form.province ? `, ${form.province}` : ""}</p>
              <p className="text-sm text-slate-500">{form.phone}</p>
            </div>
            <p className="text-sm text-slate-500">El pago en línea todavía no está disponible — confirmamos tu pedido por WhatsApp con estos datos.</p>
            <Button variant="primary" size="lg" className="w-full" onClick={continueOnWhatsApp}><MessageCircle className="size-5" />Confirmar por WhatsApp</Button>
          </div>
        )}
      </div>

      <div className="h-fit rounded-3xl border border-slate-200 p-6">
        <h2 className="font-black">Tu pedido</h2>
        <div className="mt-4 space-y-3">
          {items.map((item) => (
            <div key={item.lineItemId} className="flex items-center gap-3">
              <div className="relative size-14 shrink-0 overflow-hidden rounded-xl bg-slate-100"><Image src={item.product.thumbnail} alt={item.product.name} fill sizes="56px" className="object-cover" /></div>
              <div className="flex-1"><p className="text-sm font-bold leading-5">{item.product.name}</p><p className="text-xs text-slate-500">Cantidad: {item.quantity}</p></div>
              <p className="text-sm font-black">{formatMoney((item.product.price ?? 0) * item.quantity, item.product.currency)}</p>
            </div>
          ))}
        </div>
        <div className="mt-5 space-y-2 border-t border-slate-100 pt-4 text-sm">
          <div className="flex justify-between"><span className="text-slate-500">Subtotal</span><span className="font-bold">{formatMoney(itemsSubtotal, currency)}</span></div>
          {step === "review" && <div className="flex justify-between"><span className="text-slate-500">Envío</span><span className="font-bold">{formatMoney(shippingTotal, currency)}</span></div>}
          <div className="flex justify-between text-base"><span className="font-black">Total</span><span className="font-black">{formatMoney(step === "review" ? total : itemsSubtotal, currency)}</span></div>
        </div>
      </div>
    </div>
  );
}