"use client";

import { useEffect, useMemo, useState } from "react";
import { money } from "@/lib/format";
import {
  HOLAFLY_DESTINATIONS,
  HOLAFLY_DURATIONS,
  type HolaflyDuration,
  quoteEsim,
  usd,
} from "@/lib/holafly";

function PriceLine({
  label,
  usdAmount,
  rate,
  loading,
  accent,
  bold,
}: {
  label: string;
  usdAmount: number;
  rate: number | null;
  loading: boolean;
  accent?: boolean;
  bold?: boolean;
}) {
  const mxn = rate ? Math.round(usdAmount * rate * 100) / 100 : null;
  const rowClass = bold
    ? "flex justify-between px-4 py-3 font-bold"
    : "flex justify-between border-b border-slate-100 px-4 py-2 text-sm";

  return (
    <div className={rowClass}>
      <span className={bold ? undefined : "text-slate-500"}>{label}</span>
      <span className={bold ? "text-lg text-blue-600" : accent ? "text-emerald-600" : undefined}>
        {loading ? (
          <span className="text-slate-400">…</span>
        ) : mxn != null ? (
          <span>
            {money(mxn)}
            <span className="ml-1 text-xs font-normal text-slate-400">({usd(usdAmount)})</span>
          </span>
        ) : (
          usd(usdAmount)
        )}
      </span>
    </div>
  );
}

export default function EsimServices({
  defaultCountryCode,
  travelerName,
}: {
  defaultCountryCode?: string | null;
  travelerName: string;
}) {
  const initialCode =
    defaultCountryCode && HOLAFLY_DESTINATIONS.some((d) => d.code === defaultCountryCode)
      ? defaultCountryCode
      : HOLAFLY_DESTINATIONS[0]?.code ?? "ES";

  const [countryCode, setCountryCode] = useState(initialCode);
  const [days, setDays] = useState<HolaflyDuration>(7);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [paying, setPaying] = useState(false);
  const [rate, setRate] = useState<number | null>(null);
  const [loadingRate, setLoadingRate] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch("/api/exchange?from=USD&to=MXN");
        const data = await res.json();
        if (!cancelled && typeof data.rate === "number") setRate(data.rate);
      } catch {
        /* mantiene USD si falla */
      } finally {
        if (!cancelled) setLoadingRate(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const destination = useMemo(
    () => HOLAFLY_DESTINATIONS.find((d) => d.code === countryCode) ?? HOLAFLY_DESTINATIONS[0],
    [countryCode]
  );

  const quote = useMemo(() => quoteEsim(destination, days), [destination, days]);

  async function handleCardPayment() {
    setPaying(true);
    try {
      const res = await fetch("/api/esim/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          countryCode: quote.destination.code,
          days: quote.days,
          travelerName,
        }),
      });
      const data = await res.json();
      if (data.checkoutUrl) {
        window.location.href = data.checkoutUrl;
        return;
      }
      if (data.fallbackUrl) {
        window.open(data.fallbackUrl, "_blank", "noopener,noreferrer");
        setConfirmOpen(false);
        return;
      }
      alert(data.error ?? "No se pudo iniciar el pago. Intenta de nuevo.");
    } catch {
      alert("Error de conexión. Verifica tu internet e intenta de nuevo.");
    } finally {
      setPaying(false);
    }
  }

  return (
    <div className="space-y-4">
      <div className="card overflow-hidden">
        <div className="bg-gradient-to-r from-emerald-500 to-teal-600 px-5 py-4 text-white">
          <div className="flex items-center gap-3">
            <span className="text-3xl">📶</span>
            <div>
              <h2 className="font-bold">Internet eSIM Holafly</h2>
              <p className="text-sm text-white/85">Datos ilimitados en el extranjero, sin roaming.</p>
            </div>
          </div>
        </div>
        <div className="space-y-4 p-5">
          <div>
            <label className="label">País de destino</label>
            <select
              value={countryCode}
              onChange={(e) => setCountryCode(e.target.value)}
              className="input"
            >
              {HOLAFLY_DESTINATIONS.map((d) => (
                <option key={d.code} value={d.code}>
                  {d.flag} {d.name}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="label">¿Cuántos días necesitas?</label>
            <div className="grid grid-cols-3 gap-2 sm:grid-cols-6">
              {HOLAFLY_DURATIONS.map((d) => (
                <button
                  key={d}
                  type="button"
                  onClick={() => setDays(d)}
                  className={`rounded-lg border px-2 py-2 text-sm font-medium transition ${
                    days === d
                      ? "border-emerald-500 bg-emerald-50 text-emerald-700"
                      : "border-slate-200 bg-white text-slate-600 hover:border-slate-300"
                  }`}
                >
                  {d} días
                </button>
              ))}
            </div>
          </div>

          <div className="rounded-xl bg-slate-50 p-4 text-sm">
            <div className="mb-2 font-semibold text-slate-700">
              {destination.flag} eSIM {destination.name} · {days} días
            </div>
            <ul className="space-y-1 text-slate-600">
              <li>✓ Datos ilimitados</li>
              <li>✓ Instalación digital (QR por correo)</li>
              <li>✓ Conserva tu SIM física</li>
              <li>✓ Soporte Holafly 24/7</li>
            </ul>
          </div>

          <div className="rounded-xl ring-1 ring-slate-200">
            {rate != null && !loadingRate ? (
              <p className="border-b border-slate-100 px-4 py-2 text-xs text-slate-400">
                Tipo de cambio: 1 USD = {rate.toFixed(2)} MXN
              </p>
            ) : null}
            <PriceLine
              label="Precio del servicio (Holafly)"
              usdAmount={quote.baseUsd}
              rate={rate}
              loading={loadingRate}
            />
            <PriceLine
              label="Comisión de gestión (10%)"
              usdAmount={quote.markupUsd}
              rate={rate}
              loading={loadingRate}
              accent
            />
            <PriceLine
              label="Total a pagar"
              usdAmount={quote.totalUsd}
              rate={rate}
              loading={loadingRate}
              bold
            />
          </div>

          <button type="button" className="btn-primary w-full" onClick={() => setConfirmOpen(true)}>
            💳 Pagar con tarjeta
          </button>

          <p className="text-center text-xs text-slate-400">
            Servicio provisto por{" "}
            <a
              href="https://esim.holafly.com/es/"
              target="_blank"
              rel="noreferrer"
              className="text-blue-600 underline"
            >
              Holafly
            </a>
            . Recibirás tu eSIM por correo electrónico.
          </p>
        </div>
      </div>

      {confirmOpen && (
        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-4 sm:items-center">
          <div className="w-full max-w-md rounded-2xl bg-white shadow-xl">
            <div className="border-b border-slate-200 px-5 py-4">
              <h3 className="text-lg font-semibold">Confirmar compra</h3>
            </div>
            <div className="space-y-3 px-5 py-4 text-sm">
              <p>
                <b>{travelerName}</b> · {destination.flag} {destination.name} · {days} días
              </p>
              <div className="rounded-lg bg-slate-50 p-3">
                <PriceLine
                  label="Servicio Holafly"
                  usdAmount={quote.baseUsd}
                  rate={rate}
                  loading={loadingRate}
                />
                <PriceLine
                  label="Comisión agencia (10%)"
                  usdAmount={quote.markupUsd}
                  rate={rate}
                  loading={loadingRate}
                  accent
                />
                <div className="mt-2 border-t border-slate-200 pt-2">
                  <PriceLine
                    label="Total"
                    usdAmount={quote.totalUsd}
                    rate={rate}
                    loading={loadingRate}
                    bold
                  />
                </div>
              </div>
              <p className="text-xs text-slate-500">
                Al pagar, se procesará el cobro con tarjeta. La eSIM se activará según las
                instrucciones de Holafly en tu correo.
              </p>
            </div>
            <div className="flex gap-2 border-t border-slate-200 px-5 py-4">
              <button type="button" className="btn-ghost flex-1" onClick={() => setConfirmOpen(false)}>
                Cancelar
              </button>
              <button
                type="button"
                disabled={paying}
                className="btn-primary flex-1"
                onClick={handleCardPayment}
              >
                {paying ? "Procesando…" : "Confirmar pago"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}