"use client";

import { useEffect, useState } from "react";
import { Scissors, RefreshCw, Users, AlertCircle } from "lucide-react";
import ProtectedRoute from "@/components/auth/ProtectedRoute";

type ClienteCorte = {
  Id_cliente: number;
  nombre_cliente: string;
  rut_cliente: string;
  direccion: string;
  nombre_sector?: string;
  boletas_pendientes?: number;
  total_deuda?: number;
};

type Reposicion = {
  Id_reposicion: number;
  Id_cliente: number;
  fecha_corte: string | null;
  fecha_reposicion: string | null;
  estado: number | boolean;
  nombre_cliente?: string;
  rut_cliente?: string;
  nombre_sector?: string;
};

type Tab = "candidatos" | "cortados" | "reposiciones";

export default function CortesPage() {
  return (
    <ProtectedRoute requiredPermission={{ module: "cortes", action: "escritura" }}>
      <CortesContent />
    </ProtectedRoute>
  );
}

function CortesContent() {
  const [tab, setTab] = useState<Tab>("candidatos");
  const [loading, setLoading] = useState(true);
  const [workingId, setWorkingId] = useState<number | null>(null);
  const [mensaje, setMensaje] = useState<{ tipo: "error" | "success"; texto: string } | null>(null);

  const [candidatos, setCandidatos] = useState<ClienteCorte[]>([]);
  const [cortados, setCortados] = useState<ClienteCorte[]>([]);
  const [reposiciones, setReposiciones] = useState<Reposicion[]>([]);

  const title = {
    candidatos: "Candidatos a Corte",
    cortados: "Socios Cortados",
    reposiciones: "Reposiciones",
  }[tab];

  const cargar = async (tipo: Tab) => {
    setLoading(true);
    setMensaje(null);
    try {
      const res = await fetch(`/api/cortes?tipo=${tipo}`);
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al cargar cortes");

      if (tipo === "candidatos") setCandidatos(data);
      if (tipo === "cortados") setCortados(data);
      if (tipo === "reposiciones") setReposiciones(data);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al cargar" });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void cargar(tab);
  }, [tab]);

  const ejecutarCorte = async (clienteId: number) => {
    const ok = confirm("¿Está seguro de ejecutar el corte de servicio para este socio?");
    if (!ok) return;

    setWorkingId(clienteId);
    setMensaje(null);
    try {
      const res = await fetch("/api/cortes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ clienteId, accion: "corte" }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al ejecutar corte");
      setMensaje({ tipo: "success", texto: data?.message || "Corte ejecutado" });
      await cargar(tab);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al ejecutar corte" });
    } finally {
      setWorkingId(null);
    }
  };

  const ejecutarReposicion = async (clienteId: number, reposicionId: number) => {
    setWorkingId(clienteId);
    setMensaje(null);
    try {
      const res = await fetch("/api/cortes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ clienteId, accion: "reposicion", reposicionId }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al ejecutar reposición");
      setMensaje({ tipo: "success", texto: data?.message || "Reposición ejecutada" });
      await cargar(tab);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al ejecutar reposición" });
    } finally {
      setWorkingId(null);
    }
  };

  const anularCorte = async (clienteId: number) => {
    const ok = confirm("¿Está seguro de anular el corte de servicio para este socio?");
    if (!ok) return;

    setWorkingId(clienteId);
    setMensaje(null);
    try {
      const res = await fetch("/api/cortes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ clienteId, accion: "anular" }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al anular corte");
      setMensaje({ tipo: "success", texto: data?.message || "Corte anulado" });
      await cargar(tab);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al anular corte" });
    } finally {
      setWorkingId(null);
    }
  };

  const formatMoney = (valor: any) => {
    const n = typeof valor === "number" ? valor : Number(valor || 0);
    return new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(n);
  };

  const formatDate = (value: any) => {
    if (!value) return "-";
    const d = value instanceof Date ? value : new Date(value);
    if (Number.isNaN(d.getTime())) return String(value);
    return d.toLocaleDateString("es-CL");
  };

  const renderContent = () => {
    if (loading) {
      return <div className="text-center py-8 text-gray-500">Cargando...</div>;
    }

    if (tab === "candidatos") {
      if (candidatos.length === 0) {
        return <div className="text-center py-8 text-gray-500">No hay candidatos a corte</div>;
      }
      return (
        <div className="space-y-4">
          {candidatos.map((c) => (
            <div key={c.Id_cliente} className="border border-gray-200 rounded-lg p-4 space-y-3">
              <div>
                <h3 className="font-semibold text-gray-900">{c.nombre_cliente}</h3>
                <p className="text-sm text-gray-600 font-mono">{c.rut_cliente}</p>
                <p className="text-sm text-gray-500">{c.direccion}</p>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-gray-500">Sector:</span>
                  <p className="font-medium">{c.nombre_sector || "-"}</p>
                </div>
                <div>
                  <span className="text-gray-500">Boletas:</span>
                  <p className="font-medium">{c.boletas_pendientes ?? "-"}</p>
                </div>
                <div className="col-span-2">
                  <span className="text-gray-500">Deuda:</span>
                  <p className="font-medium text-lg">{formatMoney(c.total_deuda)}</p>
                </div>
              </div>
              <button
                className="btn-danger w-full disabled:opacity-50"
                disabled={workingId === c.Id_cliente}
                onClick={() => ejecutarCorte(c.Id_cliente)}
              >
                {workingId === c.Id_cliente ? "Procesando..." : "Cortar Servicio"}
              </button>
            </div>
          ))}
        </div>
      );
    }

    if (tab === "cortados") {
      if (cortados.length === 0) {
        return <div className="text-center py-8 text-gray-500">No hay socios cortados</div>;
      }
      return (
        <div className="space-y-4">
          {cortados.map((c) => (
            <div key={c.Id_cliente} className="border border-gray-200 rounded-lg p-4 space-y-3">
              <div>
                <h3 className="font-semibold text-gray-900">{c.nombre_cliente}</h3>
                <p className="text-sm text-gray-600 font-mono">{c.rut_cliente}</p>
                <p className="text-sm text-gray-500">{c.direccion}</p>
              </div>
              <div className="text-sm">
                <span className="text-gray-500">Deuda:</span>
                <p className="font-medium text-lg">{formatMoney(c.total_deuda)}</p>
              </div>
              <button
                className="btn-secondary w-full disabled:opacity-50"
                disabled={workingId === c.Id_cliente}
                onClick={() => anularCorte(c.Id_cliente)}
              >
                {workingId === c.Id_cliente ? "Procesando..." : "Anular Corte"}
              </button>
            </div>
          ))}
        </div>
      );
    }

    if (tab === "reposiciones") {
      if (reposiciones.length === 0) {
        return <div className="text-center py-8 text-gray-500">No hay reposiciones</div>;
      }
      return (
        <div className="space-y-4">
          {reposiciones.map((r) => {
            const estadoNum = typeof r.estado === "number" ? r.estado : Number(r.estado);
            const estadoPendiente = estadoNum === 0;
            return (
              <div key={r.Id_reposicion} className="border border-gray-200 rounded-lg p-4 space-y-3">
                <div>
                  <h3 className="font-semibold text-gray-900">{r.nombre_cliente || r.Id_cliente}</h3>
                  <p className="text-sm text-gray-600 font-mono">{r.rut_cliente || "-"}</p>
                  <p className="text-sm text-gray-500">{r.nombre_sector || "-"}</p>
                </div>
                <div className="text-sm">
                  <span className="text-gray-500">Fecha Corte:</span>
                  <p className="font-medium">{formatDate(r.fecha_corte)}</p>
                </div>
                <div className="flex items-center gap-2">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      estadoPendiente
                        ? "bg-yellow-100 text-yellow-800"
                        : "bg-green-100 text-green-800"
                    }`}
                  >
                    {estadoPendiente ? "Pendiente" : "Repuesta"}
                  </span>
                </div>
                {estadoPendiente && (
                  <button
                    className="btn-success w-full disabled:opacity-50"
                    disabled={!estadoPendiente || workingId === r.Id_cliente}
                    onClick={() => ejecutarReposicion(r.Id_cliente, r.Id_reposicion)}
                  >
                    {workingId === r.Id_cliente ? "Procesando..." : "Reponer Servicio"}
                  </button>
                )}
              </div>
            );
          })}
        </div>
      );
    }
  };

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-6">
        <h1 className="page-title flex items-center gap-2">
          <Scissors className="w-6 h-6 md:w-8 md:h-8" />
          Cortes y Reposiciones
        </h1>
      </div>

      {mensaje && (
        <div
          className={`mb-4 p-4 rounded-lg flex items-center gap-2 ${
            mensaje.tipo === "error"
              ? "bg-red-50 text-red-700"
              : "bg-green-50 text-green-700"
          }`}
        >
          <AlertCircle className="w-5 h-5" />
          {mensaje.texto}
          <button onClick={() => setMensaje(null)} className="ml-auto font-bold">
            ×
          </button>
        </div>
      )}

      {/* Tabs Mobile-Friendly */}
      <div className="card mb-6">
        <div className="flex gap-2 border-b border-gray-200 mb-4">
          <button
            className={`flex-1 py-3 px-4 text-center font-medium border-b-2 transition-colors ${
              tab === "candidatos"
                ? "border-blue-600 text-blue-600"
                : "border-transparent text-gray-600 hover:text-gray-900"
            }`}
            onClick={() => setTab("candidatos")}
          >
            <Users className="w-5 h-5 mx-auto mb-1" />
            <span className="text-sm">Candidatos</span>
          </button>
          <button
            className={`flex-1 py-3 px-4 text-center font-medium border-b-2 transition-colors ${
              tab === "cortados"
                ? "border-red-600 text-red-600"
                : "border-transparent text-gray-600 hover:text-gray-900"
            }`}
            onClick={() => setTab("cortados")}
          >
            <Scissors className="w-5 h-5 mx-auto mb-1" />
            <span className="text-sm">Cortados</span>
          </button>
          <button
            className={`flex-1 py-3 px-4 text-center font-medium border-b-2 transition-colors ${
              tab === "reposiciones"
                ? "border-green-600 text-green-600"
                : "border-transparent text-gray-600 hover:text-gray-900"
            }`}
            onClick={() => setTab("reposiciones")}
          >
            <RefreshCw className="w-5 h-5 mx-auto mb-1" />
            <span className="text-sm">Reposiciones</span>
          </button>
        </div>
        <div className="flex items-center gap-2 mb-4">
          {tab === "candidatos" ? (
            <Users className="w-5 h-5 text-blue-600" />
          ) : tab === "cortados" ? (
            <Scissors className="w-5 h-5 text-red-600" />
          ) : (
            <RefreshCw className="w-5 h-5 text-green-600" />
          )}
          <span className="font-medium">{title}</span>
        </div>
        {renderContent()}
      </div>
    </div>
  );
}