"use client";

import { useState } from "react";
import { Loader2, Ticket, CheckCircle2, Search, Lock, Download } from "lucide-react";

type Order = {
  id: string;
  createdAt: string | Date;
  totalAmount: number;
  status: string;
  paymentGateway: string | null;
  shippingAddress?: string | null;
  shippingComuna?: string | null;
  shippingRegion?: string | null;
  shippingNotes?: string | null;
  user: { name: string | null; email: string | null; phone: string | null };
  tickets: { id: string; ticketNum: string }[];
  items: {
    id: string;
    quantity: number;
    product?: { name: string; type?: string; ticketCount?: number | null };
  }[];
};

type OtpAction = "CONFIRM_OR_RESEND" | "SYNC_FLOW" | "SYNC_MP" | "SYNC_PAYKU";

function formatOrderDate(value: string | Date): string {
  const date = new Date(value);
  // Timezone explícito para que servidor y cliente generen el mismo string (evita React #418)
  return new Intl.DateTimeFormat("es-CL", {
    timeZone: "America/Santiago",
    day: "2-digit",
    month: "2-digit",
    year: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).format(date);
}

function formatPrice(value: number): string {
  return `$${new Intl.NumberFormat("es-CL").format(value)}`;
}

export default function AdminOrdersClient({ initialOrders }: { initialOrders: Order[] }) {
  const [orders, setOrders] = useState<Order[]>(initialOrders);
  const [confirmingId, setConfirmingId] = useState<string | null>(null);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [filterStatus, setFilterStatus] = useState<string>("");
  const [filterSearch, setFilterSearch] = useState("");
  const [otpModalOpen, setOtpModalOpen] = useState(false);
  const [otpOrderId, setOtpOrderId] = useState<string>("");
  const [otpAction, setOtpAction] = useState<OtpAction>("CONFIRM_OR_RESEND");
  const [otpValue, setOtpValue] = useState("");
  const [otpError, setOtpError] = useState("");
  const [isExporting, setIsExporting] = useState(false);

  const filteredOrders = orders.filter((o) => {
    if (filterStatus && o.status !== filterStatus) return false;
    if (filterSearch.trim()) {
      const q = filterSearch.trim().toLowerCase();
      const matchEmail = o.user.email?.toLowerCase().includes(q);
      const matchName = o.user.name?.toLowerCase().includes(q);
      const matchPhone = (o.user.phone || "").includes(q);
      const matchId = o.id.toLowerCase().includes(q);
      const matchTicket = o.tickets.some((t) => t.ticketNum.toLowerCase().includes(q));
      if (!matchEmail && !matchName && !matchPhone && !matchId && !matchTicket) return false;
    }
    return true;
  });

  const requestOtp = async (orderId: string, action: OtpAction) => {
    setConfirmingId(orderId);
    setMessage("");
    setError("");
    setOtpError("");
    try {
      const res = await fetch(`/api/admin/orders/${orderId}/otp/request`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "No se pudo solicitar el código OTP");
        return;
      }

      setOtpOrderId(orderId);
      setOtpAction(action);
      setOtpValue("");
      setOtpModalOpen(true);
    } catch {
      setError("Error de red al solicitar OTP");
    } finally {
      setConfirmingId(null);
    }
  };

  const verifyOtp = async () => {
    if (!otpOrderId) return;
    if (!otpValue || otpValue.length !== 6) {
      setOtpError("Ingresa el código de 6 dígitos");
      return;
    }

    setConfirmingId(otpOrderId);
    setOtpError("");
    setError("");
    try {
      const res = await fetch(`/api/admin/orders/${otpOrderId}/otp/verify`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ otp: otpValue, action: otpAction }),
      });
      const data = await res.json();
      if (!res.ok) {
        setOtpError(data.error || "OTP inválido");
        return;
      }

      // IMPORTANTE: el endpoint OTP SOLO valida. La acción real la ejecutamos con
      // los endpoints existentes para no tocar lógica de pagos.
      const confirmRes = await fetch(`/api/admin/orders/${otpOrderId}/confirm`, {
        method: "POST",
      });
      const confirmData = await confirmRes.json();
      if (!confirmRes.ok) {
        setError(confirmData.error || "No se pudo ejecutar confirm/reenviar");
        return;
      }

      setMessage(confirmData.message || "Acción realizada");
      if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("email-sent"));

      const refreshed = await fetch("/api/admin/orders");
      const refreshedData = await refreshed.json();
      if (refreshed.ok && refreshedData.orders) setOrders(refreshedData.orders);

      setOtpModalOpen(false);
      setOtpValue("");
      setOtpOrderId("");
      setOtpAction("CONFIRM_OR_RESEND");
    } catch {
      setOtpError("Error de red al verificar OTP");
    } finally {
      setConfirmingId(null);
    }
  };

  const syncFlow = async (orderId: string) => {
    setConfirmingId(orderId);
    setMessage("");
    setError("");
    try {
      const res = await fetch(`/api/admin/orders/${orderId}/sync-flow`, { method: "POST" });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "No se pudo sincronizar con Flow");
        return;
      }
      setMessage(data.message || "Orden sincronizada");
      const refreshed = await fetch("/api/admin/orders");
      const refreshedData = await refreshed.json();
      if (refreshed.ok && refreshedData.orders) setOrders(refreshedData.orders);
    } catch {
      setError("Error de red al sincronizar");
    } finally {
      setConfirmingId(null);
    }
  };

  const syncMp = async (orderId: string) => {
    setConfirmingId(orderId);
    setMessage("");
    setError("");
    try {
      const res = await fetch(`/api/admin/orders/${orderId}/sync-mp`, { method: "POST" });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "No se pudo sincronizar con Mercado Pago");
        return;
      }
      setMessage(data.message || "Orden sincronizada");
      const refreshed = await fetch("/api/admin/orders");
      const refreshedData = await refreshed.json();
      if (refreshed.ok && refreshedData.orders) setOrders(refreshedData.orders);
    } catch {
      setError("Error de red al sincronizar");
    } finally {
      setConfirmingId(null);
    }
  };

  const syncPayku = async (orderId: string) => {
    setConfirmingId(orderId);
    setMessage("");
    setError("");
    try {
      const res = await fetch(`/api/admin/orders/${orderId}/sync-payku`, { method: "POST" });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "No se pudo sincronizar con Payku");
        return;
      }
      setMessage(data.message || "Orden sincronizada");
      const refreshed = await fetch("/api/admin/orders");
      const refreshedData = await refreshed.json();
      if (refreshed.ok && refreshedData.orders) setOrders(refreshedData.orders);
    } catch {
      setError("Error de red al sincronizar");
    } finally {
      setConfirmingId(null);
    }
  };

  const confirmOrder = async (orderId: string) => {
    await requestOtp(orderId, "CONFIRM_OR_RESEND");
  };

  const handleExport = async () => {
    setIsExporting(true);
    try {
      const res = await fetch("/api/admin/export/orders");
      if (!res.ok) throw new Error("Error al exportar");
      const blob = await res.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `pedidos_${new Date().toISOString().split("T")[0]}.xlsx`;
      document.body.appendChild(a);
      a.click();
      a.remove();
    } catch (err) {
      setError("No se pudo exportar el archivo Excel.");
    } finally {
      setIsExporting(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 className="text-3xl font-bold flex items-center gap-3">
          <Ticket className="text-neon-blue w-8 h-8" />
          Gestión de Pedidos & Tickets
        </h1>
        <div className="flex flex-wrap items-center gap-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
            <input
              type="text"
              placeholder="Buscar por email, nombre, teléfono, ID..."
              value={filterSearch}
              onChange={(e) => setFilterSearch(e.target.value)}
              className="pl-9 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-neon-blue w-64"
            />
          </div>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white focus:outline-none focus:border-neon-blue"
          >
            <option value="">Todos los estados</option>
            <option value="PAID">PAID (pagados)</option>
            <option value="PENDING">PENDING (pendientes)</option>
            <option value="FAILED">FAILED (fallidos)</option>
          </select>
          <button
            onClick={handleExport}
            disabled={isExporting}
            className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-800/50 text-white rounded-lg text-sm font-semibold transition-colors shadow-lg border border-green-500/30"
          >
            {isExporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
            Exportar Todo
          </button>
        </div>
      </div>

      {message && (
        <div className="bg-green-500/10 text-green-400 border border-green-500/20 rounded-xl px-4 py-3 text-sm">
          {message}
        </div>
      )}
      {error && (
        <div className="bg-red-500/10 text-red-400 border border-red-500/20 rounded-xl px-4 py-3 text-sm">
          {error}
        </div>
      )}

      {otpModalOpen && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
          <div className="glass-panel w-full max-w-md p-6 rounded-2xl border border-white/10 bg-black/60">
            <div className="flex items-start justify-between gap-4">
              <div>
                <h3 className="text-xl font-bold text-white">Confirmar acción</h3>
                <p className="text-sm text-gray-400 mt-1">
                  Ingresa el OTP de 6 dígitos enviado a tu correo del admin. Válido por 10 minutos.
                </p>
              </div>
              <button
                type="button"
                onClick={() => {
                  setOtpModalOpen(false);
                  setOtpValue("");
                  setOtpOrderId("");
                  setOtpAction("CONFIRM_OR_RESEND");
                  setOtpError("");
                }}
                className="text-gray-400 hover:text-white"
                aria-label="Cerrar"
              >
                ✕
              </button>
            </div>

            <div className="mt-5">
              <label className="block text-xs text-gray-500 mb-2">Código OTP</label>
              <input
                type="text"
                inputMode="numeric"
                pattern="[0-9]*"
                maxLength={6}
                value={otpValue}
                onChange={(e) => setOtpValue(e.target.value.replace(/\D/g, "").slice(0, 6))}
                className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue transition-colors font-mono tracking-widest"
                placeholder="000000"
              />
              {otpError && (
                <div className="mt-3 bg-red-500/10 text-red-400 border border-red-500/20 rounded-lg px-3 py-2 text-sm">
                  {otpError}
                </div>
              )}
            </div>

            <div className="flex gap-3 mt-6">
              <button
                type="button"
                onClick={verifyOtp}
                disabled={confirmingId === otpOrderId}
                className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-sm font-semibold"
              >
                {confirmingId === otpOrderId ? <Loader2 className="w-4 h-4 animate-spin" /> : "Verificar OTP"}
              </button>
              <button
                type="button"
                onClick={() => {
                  setOtpModalOpen(false);
                  setOtpValue("");
                  setOtpOrderId("");
                  setOtpAction("CONFIRM_OR_RESEND");
                  setOtpError("");
                }}
                className="px-4 py-3 rounded-lg bg-white/5 text-gray-300 border border-white/10 hover:bg-white/10 disabled:opacity-50 transition-colors text-sm font-semibold"
              >
                Cancelar
              </button>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse min-w-[1200px]">
            <thead>
              <tr className="bg-white/10 text-sm text-gray-300">
                <th className="p-4 font-semibold">ID / Fecha</th>
                <th className="p-4 font-semibold">Nombre</th>
                <th className="p-4 font-semibold">Email</th>
                <th className="p-4 font-semibold">Teléfono</th>
                <th className="p-4 font-semibold">Total</th>
                <th className="p-4 font-semibold">Medio</th>
                <th className="p-4 font-semibold">Estado</th>
                <th className="p-4 font-semibold">Productos</th>
                <th className="p-4 font-semibold">Envío</th>
                <th className="p-4 font-semibold">Números de Ticket</th>
                <th className="p-4 font-semibold">Acciones</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5 text-sm">
              {filteredOrders.map((order) => (
                <tr key={order.id} className="hover:bg-white/5 transition-colors align-top">
                  <td className="p-4">
                    <div className="font-mono text-xs text-gray-500 mb-1">{order.id}</div>
                    <div className="text-gray-300">{formatOrderDate(order.createdAt)}</div>
                  </td>
                  <td className="p-4">
                    <div className="font-bold">{order.user.name || "—"}</div>
                  </td>
                  <td className="p-4">
                    <div className="text-gray-300 font-mono text-xs">{order.user.email || "—"}</div>
                  </td>
                  <td className="p-4">
                    <div className="text-neon-blue font-mono text-xs">{order.user.phone ? `+56 ${order.user.phone}` : "—"}</div>
                  </td>
                  <td className="p-4">
                    <div className="font-black text-neon-blue">{formatPrice(order.totalAmount)}</div>
                    <div className="text-xs text-gray-400 mt-1">
                      {order.items.reduce((acc, item) => acc + item.quantity, 0)} ítems
                    </div>
                  </td>
                  <td className="p-4">
                    <span className="text-xs text-gray-400 font-mono">
                      {order.paymentGateway === "FLOW"
                        ? "Flow"
                        : order.paymentGateway === "MERCADOPAGO"
                          ? "Mercado Pago"
                          : order.paymentGateway === "PAYKU"
                            ? "Payku"
                            : order.paymentGateway === "WEBPAY"
                              ? "Webpay"
                              : order.paymentGateway === "POS"
                                ? "POS"
                                : "—"}
                    </span>
                  </td>
                  <td className="p-4">
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-bold border ${
                        order.status === "PAID"
                          ? "bg-green-500/20 text-green-400 border-green-500/50"
                          : "bg-orange-500/20 text-orange-400 border-orange-500/50"
                      }`}
                    >
                      {order.status}
                    </span>
                  </td>
                  <td className="p-4 max-w-[200px]">
                    <ul className="space-y-1 text-xs">
                      {order.items.map((item) => (
                        <li key={item.id} className="text-gray-300">
                          {item.product?.name ?? "Producto"} ×{item.quantity}
                          {item.product?.type === "PHYSICAL" && (
                            <span className="ml-1 text-[#0ea5c6] font-semibold">[Merch]</span>
                          )}
                        </li>
                      ))}
                    </ul>
                  </td>
                  <td className="p-4 max-w-[180px] text-xs">
                    {order.shippingAddress ? (
                      <div className="text-gray-300 space-y-0.5">
                        <p>{order.shippingAddress}</p>
                        <p className="text-gray-400">
                          {order.shippingComuna}, {order.shippingRegion}
                        </p>
                        {order.shippingNotes && (
                          <p className="text-gray-500 italic">{order.shippingNotes}</p>
                        )}
                      </div>
                    ) : (
                      <span className="text-gray-500 italic">—</span>
                    )}
                  </td>
                  <td className="p-4 max-w-[320px]">
                    <div className="flex flex-wrap gap-2">
                      {order.tickets.map((t) => (
                        <span
                          key={t.id}
                          className="bg-black/50 border border-white/20 px-2 py-1 rounded text-xs font-mono font-bold text-neon-purple shadow-sm"
                        >
                          {t.ticketNum}
                        </span>
                      ))}
                      {order.tickets.length === 0 && (
                        <span className="text-gray-500 text-xs italic">Sin tickets</span>
                      )}
                    </div>
                  </td>
                  <td className="p-4">
                    {order.status === "PAID" ? (
                      <button
                        type="button"
                        onClick={() => confirmOrder(order.id)}
                        disabled={confirmingId === order.id}
                        className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                      >
                        {confirmingId === order.id ? (
                          <Loader2 className="w-4 h-4 animate-spin" />
                        ) : (
                          <Lock className="w-4 h-4" />
                        )}
                        Reenviar correo
                      </button>
                    ) : (
                      order.paymentGateway === "FLOW" && order.tickets.length === 0 ? (
                        <div className="flex flex-col sm:flex-row gap-2">
                          <button
                            type="button"
                            onClick={() => syncFlow(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30 hover:bg-green-500/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle2 className="w-4 h-4" />}
                            Sincronizar con Flow
                          </button>
                          <button
                            type="button"
                            onClick={() => confirmOrder(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Lock className="w-4 h-4" />}
                            Confirmar manualmente
                          </button>
                        </div>
                      ) : order.paymentGateway === "MERCADOPAGO" && order.tickets.length === 0 ? (
                        <div className="flex flex-col sm:flex-row gap-2">
                          <button
                            type="button"
                            onClick={() => syncMp(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30 hover:bg-green-500/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle2 className="w-4 h-4" />}
                            Sincronizar con Mercado Pago
                          </button>
                          <button
                            type="button"
                            onClick={() => confirmOrder(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Lock className="w-4 h-4" />}
                            Confirmar manualmente
                          </button>
                        </div>
                      ) : order.paymentGateway === "PAYKU" && order.tickets.length === 0 ? (
                        <div className="flex flex-col sm:flex-row gap-2">
                          <button
                            type="button"
                            onClick={() => syncPayku(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30 hover:bg-green-500/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle2 className="w-4 h-4" />}
                            Sincronizar con Payku
                          </button>
                          <button
                            type="button"
                            onClick={() => confirmOrder(order.id)}
                            disabled={confirmingId === order.id}
                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                          >
                            {confirmingId === order.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Lock className="w-4 h-4" />}
                            Confirmar manualmente
                          </button>
                        </div>
                      ) : (
                        <button
                          type="button"
                          onClick={() => confirmOrder(order.id)}
                          disabled={confirmingId === order.id}
                          className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-neon-blue/20 text-neon-blue border border-neon-blue/30 hover:bg-neon-blue/30 disabled:opacity-50 transition-colors text-xs font-semibold"
                        >
                          {confirmingId === order.id ? (
                            <Loader2 className="w-4 h-4 animate-spin" />
                          ) : (
                            <Lock className="w-4 h-4" />
                          )}
                          Confirmar manualmente
                        </button>
                      )
                    )}
                  </td>
                </tr>
              ))}
              {filteredOrders.length === 0 && (
                <tr>
                  <td colSpan={9} className="p-8 text-center text-gray-500">
                    {orders.length === 0 ? "No hay órdenes registradas." : "Ninguna orden coincide con los filtros."}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}