'use client';
import Link from 'next/link';
import Image from 'next/image';
import { useEffect, useMemo, useState } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { useCart } from '@/contexts/CartContext';

function formatPrice(cents: number) {
  return `€${(cents / 100).toFixed(2)}`;
}

interface ShippingMethod {
  id: string;
  zoneId?: string;
  name: string;
  baseCostCents: number;
  freeShippingThresholdCents: number | null;
  description: string | null;
}

interface SavedAddress {
  id: string;
  label: string | null;
  recipientName: string;
  street: string;
  city: string;
  postalCode: string;
  country: string;
  isDefault: boolean;
}

function splitName(fullName: string): { firstName: string; lastName: string } {
  const trimmed = fullName.trim().replace(/\s+/g, ' ');
  if (!trimmed) return { firstName: '', lastName: '' };
  const parts = trimmed.split(' ');
  if (parts.length === 1) return { firstName: parts[0], lastName: '' };
  return { firstName: parts.slice(0, -1).join(' '), lastName: parts[parts.length - 1] };
}

function addressToForm(addr: SavedAddress) {
  const { firstName, lastName } = splitName(addr.recipientName);
  return {
    firstName,
    lastName,
    phone: '',
    address: addr.street,
    city: addr.city,
    postalCode: addr.postalCode ?? '',
    country: addr.country ?? '',
  };
}

export default function CheckoutClient() {
  const { user, loading: authLoading } = useAuth();
  const { items, subtotalCents, itemCount, clearCart } = useCart();
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  const [addresses, setAddresses] = useState<SavedAddress[]>([]);
  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null);
  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
  const [shippingMethodId, setShippingMethodId] = useState<string | null>(null);

  // Form state
  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    email: user?.email ?? '',
    phone: '',
    address: '',
    city: '',
    postalCode: '',
    notes: '',
    shippingMethod: 'standard',
  });

  // Fetch saved addresses when the customer is logged in.
  useEffect(() => {
    if (!user || user.role !== 'customer') {
      setAddresses([]);
      setSelectedAddressId(null);
      return;
    }
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch(`/api/users/${user.id}/addresses`, { credentials: 'include', cache: 'no-store' });
        if (!res.ok) return;
        const data = (await res.json()) as { items?: SavedAddress[] };
        if (cancelled) return;
        const list = data.items ?? [];
        setAddresses(list);
        const def = list.find((a) => a.isDefault) ?? list[0] ?? null;
        if (def) {
          setSelectedAddressId(def.id);
          setForm((f) => ({ ...f, ...addressToForm(def) }));
        }
      } catch {
        /* ignore */
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [user]);

  // Fetch shipping methods from the admin-managed catalogue.
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch('/api/shipping/methods', { cache: 'no-store' });
        if (!res.ok) return;
        const data = (await res.json()) as { items?: ShippingMethod[] };
        if (cancelled) return;
        const list = data.items ?? [];
        setShippingMethods(list);
        const def = list[0];
        if (def) {
          setShippingMethodId(def.id);
          setForm((f) => ({ ...f, shippingMethod: def.id }));
        }
      } catch {
        /* ignore */
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const selectedAddress = useMemo(
    () => addresses.find((a) => a.id === selectedAddressId) ?? null,
    [addresses, selectedAddressId],
  );

  const handleSelectAddress = (id: string) => {
    setSelectedAddressId(id);
    const addr = addresses.find((a) => a.id === id);
    if (addr) setForm((f) => ({ ...f, ...addressToForm(addr) }));
  };

  const selectedShippingMethod = useMemo(
    () => shippingMethods.find((m) => m.id === shippingMethodId) ?? null,
    [shippingMethods, shippingMethodId],
  );
  const shippingCost = selectedShippingMethod?.baseCostCents ?? 0;
  const totalCents = subtotalCents + shippingCost;

  if (authLoading) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-16 flex items-center justify-center">
        <div className="text-gray-500">Cargando...</div>
      </div>
    );
  }

  if (items.length === 0) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-16 text-center">
        <div className="text-6xl mb-4">🛒</div>
        <h1 className="text-2xl font-bold text-gray-900 mb-2">Tu carrito está vacío</h1>
        <p className="text-gray-500 mb-8">Añade productos antes de hacer el pedido.</p>
        <Link href="/products" className="inline-flex px-6 py-3 bg-[#70ad47] hover:bg-[#5a9040] text-white font-semibold rounded-xl transition-colors">
          Ver productos
        </Link>
      </div>
    );
  }

  const handlePlaceOrder = async () => {
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({
          shippingAddress: {
            firstName: form.firstName,
            lastName: form.lastName,
            email: form.email,
            phone: form.phone,
            line1: form.address,
            city: form.city,
            postalCode: form.postalCode,
            country: selectedAddress?.country || form.shippingMethod ? 'ES' : 'ES',
          },
          items: items.map((i) => ({
            productId: i.productId,
            variantId: i.variantId,
            quantity: i.quantity,
          })),
          shippingMethod: form.shippingMethod,
          notes: form.notes,
          shippingMethodId: selectedShippingMethod?.id ?? null,
        }),
      });
      if (res.status === 401) {
        setError('Debes iniciar sesión para finalizar el pedido.');
        return;
      }
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error?.message || 'Error al procesar el pedido');
      }
      const { orderId } = await res.json();
      clearCart();
      window.location.href = `/order-confirmation?orderId=${orderId}`;
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Error al procesar el pedido');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <h1 className="text-3xl font-bold text-gray-900 mb-8" style={{ fontFamily: 'var(--font-heading)' }}>
        Finalizar pedido
      </h1>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
        {/* Form */}
        <div>
          {/* Login prompt — solo si NO está autenticado */}
          {!user && (
            <div className="bg-[#70ad47]/5 border border-[#70ad47]/20 rounded-xl p-6 mb-6">
              <h2 className="font-bold text-gray-900 mb-1">¿Ya tienes cuenta?</h2>
              <p className="text-sm text-gray-600 mb-3">Inicia sesión para una experiencia más rápida.</p>
              <div className="flex gap-3">
                <Link href="/auth/login?returnTo=%2Fcheckout" className="px-4 py-2 bg-[#70ad47] hover:bg-[#5a9040] text-white text-sm font-semibold rounded-lg transition-colors">
                  Iniciar sesión
                </Link>
                <Link href="/auth/register?returnTo=%2Fcheckout" className="px-4 py-2 border border-gray-300 hover:border-[#70ad47] text-gray-700 text-sm font-semibold rounded-lg transition-colors">
                  Crear cuenta
                </Link>
              </div>
            </div>
          )}

          {/* Saved addresses selector — only when logged in */}
          {user && addresses.length > 0 && (
            <div className="bg-white border border-gray-200 rounded-xl p-6 mb-6">
              <h2 className="font-bold text-gray-900 mb-3">Direcciones guardadas</h2>
              <div className="space-y-2">
                {addresses.map((a) => {
                  const active = selectedAddressId === a.id;
                  return (
                    <label
                      key={a.id}
                      className={`flex items-start gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${
                        active ? 'border-[#70ad47] bg-[#70ad47]/5' : 'border-gray-200 hover:border-[#70ad47]'
                      }`}
                    >
                      <input
                        type="radio"
                        name="saved-address"
                        value={a.id}
                        checked={active}
                        onChange={() => handleSelectAddress(a.id)}
                        className="text-[#70ad47] mt-1"
                      />
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-gray-900">{a.recipientName}</p>
                          {a.label && (
                            <span className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-full">{a.label}</span>
                          )}
                          {a.isDefault && (
                            <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Predeterminada</span>
                          )}
                        </div>
                        <p className="text-sm text-gray-600">{a.street}</p>
                        <p className="text-sm text-gray-500">{a.postalCode} {a.city}, {a.country}</p>
                      </div>
                    </label>
                  );
                })}
              </div>
              <p className="text-xs text-gray-400 mt-3">
                También puedes editar los campos manualmente debajo; se aplicarán al pedido sin guardar nada en tu cuenta.
              </p>
            </div>
          )}

          {/* Shipping form */}
          <div className="bg-white border border-gray-200 rounded-xl p-6">
            <h2 className="font-bold text-gray-900 mb-4">Datos de envío</h2>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
                  <input
                    type="text" required placeholder="María"
                    value={form.firstName}
                    onChange={e => setForm(f => ({ ...f, firstName: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Apellidos *</label>
                  <input
                    type="text" required placeholder="García López"
                    value={form.lastName}
                    onChange={e => setForm(f => ({ ...f, lastName: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                <input
                  type="email" required placeholder="maria@ejemplo.com"
                  value={form.email}
                  onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Teléfono *</label>
                <input
                  type="tel" required placeholder="+34 600 000 000"
                  value={form.phone}
                  onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Dirección *</label>
                <input
                  type="text" required placeholder="Calle Gran Vía 42"
                  value={form.address}
                  onChange={e => setForm(f => ({ ...f, address: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                />
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Ciudad *</label>
                  <input
                    type="text" required placeholder="Madrid"
                    value={form.city}
                    onChange={e => setForm(f => ({ ...f, city: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">CP *</label>
                  <input
                    type="text" required placeholder="28013"
                    value={form.postalCode}
                    onChange={e => setForm(f => ({ ...f, postalCode: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">País</label>
                  <input type="text" disabled value="España"
                    className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-gray-50 text-gray-500" />
                </div>
              </div>

              <div className="border-t border-gray-200 pt-4 mt-4">
                <h3 className="font-semibold text-gray-900 mb-3">Método de envío</h3>
                {shippingMethods.length === 0 ? (
                  <p className="text-sm text-gray-400">No hay métodos de envío configurados.</p>
                ) : (
                  <div className="space-y-2">
                    {shippingMethods.map(opt => {
                      const active = form.shippingMethod === opt.id;
                      return (
                        <label
                          key={opt.id}
                          className={`flex items-start gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${active ? 'border-[#70ad47] bg-[#70ad47]/5' : 'border-gray-200 hover:border-[#70ad47]'}`}
                        >
                          <input
                            type="radio"
                            name="shipping"
                            value={opt.id}
                            checked={active}
                            onChange={e => setForm(f => ({ ...f, shippingMethod: e.target.value }))}
                            className="mt-1 text-[#70ad47]"
                          />
                          <div className="flex-1">
                            <p className="font-medium text-gray-900">{opt.name}</p>
                            {opt.description && (
                              <p className="text-sm text-gray-500">{opt.description}</p>
                            )}
                            {opt.freeShippingThresholdCents && subtotalCents >= opt.freeShippingThresholdCents && (
                              <p className="text-xs text-green-600 mt-1">Envío gratis aplicado</p>
                            )}
                          </div>
                          <span className="font-semibold text-[#70ad47]">{formatPrice(opt.baseCostCents)}</span>
                        </label>
                      );
                    })}
                  </div>
                )}
              </div>

              <div className="border-t border-gray-200 pt-4">
                <h3 className="font-semibold text-gray-900 mb-3">Notas del pedido</h3>
                <textarea rows={3} placeholder="Observaciones, instrucciones de entrega..."
                  value={form.notes}
                  onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none resize-none"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Order summary */}
        <div>
          <div className="bg-gray-50 rounded-xl border border-gray-200 p-6 sticky top-24">
            <h2 className="font-bold text-gray-900 mb-4">Tu pedido ({itemCount})</h2>

            <div className="space-y-3 max-h-80 overflow-y-auto mb-4">
              {items.map(item => (
                <div key={item.variantId} className="flex gap-3">
                  <div className="w-12 h-12 bg-white rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
                    {item.imageUrl
                      ? <Image src={item.imageUrl.replace('/uploads/', '/uploads/40/')} alt={item.productName} width={40} height={56} className="object-contain" />
                      : <span className="text-2xl">🌿</span>
                    }
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 line-clamp-1">{item.productName}</p>
                    <p className="text-xs text-gray-500">Cantidad: {item.quantity}</p>
                  </div>
                  <p className="text-sm font-bold text-gray-900 flex-shrink-0">
                    {formatPrice(item.priceCents * item.quantity)}
                  </p>
                </div>
              ))}
            </div>

            <div className="border-t border-gray-200 pt-4 space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-600">Subtotal</span>
                <span className="font-medium">{formatPrice(subtotalCents)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Envío</span>
                <span className="text-gray-500">{selectedShippingMethod ? formatPrice(shippingCost) : '—'}</span>
              </div>
              <div className="flex justify-between text-gray-600">
                <span>IVA</span>
                <span>Incluido</span>
              </div>
            </div>

            <div className="border-t border-gray-200 mt-4 pt-4 flex justify-between items-center">
              <span className="font-bold text-gray-900">Total</span>
              <span className="text-2xl font-bold text-[#70ad47]">{formatPrice(totalCents)}</span>
            </div>

            {error && (
              <div className="mt-3 bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-2.5 rounded-xl">
                {error}
              </div>
            )}

            <button
              onClick={handlePlaceOrder}
              disabled={submitting || !form.firstName || !form.email || !form.address || !form.city || !form.postalCode}
              className="mt-4 w-full py-3.5 bg-[#70ad47] hover:bg-[#5a9040] disabled:bg-gray-300 disabled:text-gray-500 text-white font-semibold rounded-xl transition-colors cursor-pointer"
            >
              {submitting ? 'Procesando...' : 'Finalizar pedido'}
            </button>

            <Link href="/cart" className="mt-3 w-full block text-center text-sm text-gray-500 hover:text-[#70ad47] transition-colors">
              ← Volver al carrito
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}