"use client";

import { Dispatch, SetStateAction, useState, useMemo } from "react";
import ArchiveConfigModal from "./dashboard/ArchiveConfigModal";
import type { StageFromBack, StageTable } from "../types/migration";

type TableReportData = {
  table: string;
  status: "OK" | "ERROR";
  tag: string;
  isCritical: boolean;
  compareBy: string;
  metrics: {
    rows: { source: number; target: number };
    columns: { source: number; target: number };
  };
  match: number;
  maxId: number;
};

type Props = {
  tables: TableReportData[];
  page: number;
  totalPages: number;
  search: string;
  setPage: Dispatch<SetStateAction<number>>;
  setSearch: Dispatch<SetStateAction<string>>;
  onSelect: (table: TableReportData) => void;
  onRefresh: () => void;
  backendStages?: StageFromBack[];
};

function ChecksumBadge({ value }: { value: number }) {
  if (value === 1)
    return (
      <span className="text-green-400 font-bold text-[11px] bg-green-500/10 px-1.5 py-0.5 rounded border border-green-500/20">
        ✓ OK
      </span>
    );
  if (value === 0)
    return (
      <span className="text-red-400 font-bold text-[11px] bg-red-500/10 px-1.5 py-0.5 rounded border border-red-500/20">
        ✗ Error
      </span>
    );
  return <span className="text-gray-600 text-[11px]">—</span>;
}

export default function TableList({
  tables,
  page,
  totalPages,
  search,
  setPage,
  setSearch,
  onSelect,
  onRefresh,
  backendStages = [],
}: Props) {
  const [modalConfig, setModalConfig] = useState({
    isOpen: false,
    table: null as string | null,
    type: null as "HISTORICA" | "HIBRIDA" | null,
  });

  const [selectedStageId, setSelectedStageId] = useState<number | "ALL">("ALL");

  const tablesMap = useMemo(
    () => new Map(tables.map((t) => [t.table.toLowerCase(), t])),
    [tables],
  );

  const displayData = useMemo(() => {
    const stagesToProcess =
      selectedStageId === "ALL"
        ? backendStages
        : backendStages.filter((s) => s.id === selectedStageId);

    let flat = stagesToProcess.flatMap((stage) =>
      stage.tables.map((table: StageTable) => ({
        ...table,
        stage_number: stage.stage_number,
        stage_status: stage.status,
      })),
    );

    if (search) {
      const q = search.toLowerCase();
      flat = flat.filter((t) => t.table_name.toLowerCase().includes(q));
    }

    return flat;
  }, [backendStages, selectedStageId, search]);

  const updateTag = async (data: any) => {
    try {
      const res = await fetch(`/api/tag`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      return await res.json();
    } catch {
      return null;
    }
  };

  const gridCols = "grid-cols-[0.7fr_2fr_0.8fr_1fr_1fr_1.4fr_1.1fr_0.7fr_1fr]";

  return (
    <div className="space-y-6">
      {/* CONTROLES */}
      <div className="flex flex-col lg:flex-row items-center justify-between gap-4 bg-[#141416] p-4 rounded-2xl border border-[#2c2c2e]/40 shadow-sm">
        <div className="w-full lg:w-1/2">
          <input
            type="text"
            placeholder="Filtrar tablas por nombre..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            className="w-full bg-[#111] border border-gray-800 rounded-xl px-4 py-3 text-sm text-white outline-none focus:border-blue-500 transition-all"
          />
        </div>
        <div className="w-full lg:w-auto flex items-center gap-3">
          <label className="text-xs text-gray-400 font-bold uppercase tracking-wider whitespace-nowrap">
            Filtro de Etapa:
          </label>
          <select
            value={selectedStageId}
            onChange={(e) => {
              setSelectedStageId(
                e.target.value === "ALL" ? "ALL" : Number(e.target.value),
              );
              setPage(1);
            }}
            className="w-full lg:min-w-[220px] bg-[#111] border border-gray-800 rounded-xl px-4 py-3 text-sm text-white outline-none focus:border-blue-500 transition-all cursor-pointer"
          >
            <option value="ALL">Todas las Etapas</option>
            {backendStages.map((stage) => (
              <option key={stage.id} value={stage.id}>
                Etapa {stage.stage_number} ({stage.tables.length} tablas)
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* GRILLA */}
      <div className="bg-[#141416] border border-[#2c2c2e]/40 rounded-2xl overflow-hidden shadow-sm">
        {/* HEADER */}
        <div
          className={`grid ${gridCols} gap-4 p-4 border-b border-gray-800 text-[10px] font-bold text-gray-500 uppercase tracking-wider bg-black/40`}
        >
          <div className="text-center text-purple-400">Etapa</div>
          <div className="text-left">Tabla</div>
          <div className="text-center">Estado</div>
          <div className="text-center">Registros</div>
          <div className="text-center text-emerald-400">Checksum</div>
          <div className="text-center">Coincidencia</div>
          <div className="text-center">Clasificación</div>
          <div className="text-center">Crítica</div>
          <div className="text-right">Acciones</div>
        </div>

        <div className="max-h-[60vh] overflow-y-auto custom-scrollbar bg-black/10">
          {displayData.length === 0 ? (
            <div className="p-12 text-center text-gray-500 text-sm italic">
              No se encontraron tablas para los filtros aplicados.
            </div>
          ) : (
            displayData.map((sTable) => {
              const rawStatus = (sTable.status || "").toUpperCase();
              const displayStatus =
                rawStatus === "SUCCESS" || rawStatus === "OK" ? "OK" : "ERROR";

              const sourceRows = sTable.rows_total ?? 0;
              const targetRows = sTable.rows_processed ?? 0;
              const displayMatch = sTable.match_percentage ?? 100;
              const displayTag = sTable.tag_type || "GENERAL";
              const checksumOk: number = (sTable as any).checksum_ok ?? -1;

              return (
                <div
                  key={`${sTable.id}-${sTable.stage_number}`}
                  className={`grid ${gridCols} gap-4 p-3 border-b border-gray-900/60 text-xs items-center hover:bg-[#18181a] transition-all`}
                >
                  {/* Etapa */}
                  <div className="flex justify-center">
                    <span className="text-[10px] font-bold bg-purple-500/10 text-purple-400 px-2 py-1 rounded-md border border-purple-500/20 whitespace-nowrap">
                      E-{sTable.stage_number}
                    </span>
                  </div>

                  {/* Nombre */}
                  <div
                    className="text-white font-medium text-left truncate pr-2"
                    title={sTable.table_name}
                  >
                    {sTable.table_name}
                  </div>

                  {/* Estado */}
                  <div className="flex justify-center">
                    <span
                      className={`px-2 py-0.5 rounded text-[9px] font-bold ${
                        displayStatus === "OK"
                          ? "bg-green-500/20 text-green-400"
                          : "bg-red-500/20 text-red-400"
                      }`}
                    >
                      {displayStatus}
                    </span>
                  </div>

                  {/* Registros */}
                  <div className="text-gray-300 text-center font-mono text-[11px]">
                    {sourceRows.toLocaleString()} /{" "}
                    {targetRows.toLocaleString()}
                  </div>

                  {/* Checksum */}
                  <div className="flex justify-center">
                    <ChecksumBadge value={checksumOk} />
                  </div>

                  {/* Coincidencia */}
                  <div className="flex items-center justify-center gap-2 px-1">
                    <div className="w-full bg-black rounded-full h-1.5 overflow-hidden hidden xl:block">
                      <div
                        className={`h-full ${
                          displayMatch >= 100
                            ? "bg-green-500"
                            : displayMatch >= 70
                              ? "bg-yellow-500"
                              : "bg-red-500"
                        }`}
                        style={{ width: `${displayMatch}%` }}
                      />
                    </div>
                    <span className="text-[11px] text-gray-300 font-mono min-w-[32px] text-right">
                      {displayMatch}%
                    </span>
                  </div>

                  {/* Clasificación */}
                  <div className="flex justify-center">
                    <span className="text-[10px] font-semibold text-blue-400 uppercase">
                      {displayTag}
                    </span>
                  </div>

                  {/* Crítica */}
                  <div className="text-center">
                    {sTable.is_critical ? (
                      <span className="text-red-400 font-bold text-[10px] bg-red-500/10 px-1.5 py-0.5 rounded border border-red-500/20">
                        Sí
                      </span>
                    ) : (
                      <span className="text-gray-500 text-[11px]">No</span>
                    )}
                  </div>

                  {/* Acciones */}
                  <div className="flex justify-end">
                    <button
                      onClick={() =>
                        onSelect({
                          table: sTable.table_name,
                          status: displayStatus,
                          tag: displayTag,
                          isCritical: sTable.is_critical,
                          compareBy: "CHECKSUM",
                          metrics: {
                            rows: { source: sourceRows, target: targetRows },
                            columns: { source: 0, target: 0 },
                          },
                          match: displayMatch,
                          maxId: sTable.id,
                        })
                      }
                      className="bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-semibold px-3 py-1.5 rounded-md transition-colors whitespace-nowrap"
                    >
                      Ver Detalle
                    </button>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>

      {/* PAGINACIÓN */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between border border-[#2c2c2e]/40 rounded-xl bg-[#141416] px-4 py-3 shadow-sm">
          <span className="text-xs text-gray-400 font-mono">
            Página <span className="text-white font-bold">{page}</span> de{" "}
            <span className="text-white font-bold">{totalPages}</span>
          </span>
          <div className="flex items-center gap-2">
            <button
              disabled={page === 1}
              onClick={() => setPage((p) => p - 1)}
              className="px-4 py-1.5 rounded-md bg-[#1c1c1e] border border-gray-700 text-xs font-medium text-gray-300 hover:bg-[#2c2c2e] disabled:opacity-40 disabled:cursor-not-allowed transition"
            >
              ← Anterior
            </button>
            <button
              disabled={page === totalPages}
              onClick={() => setPage((p) => p + 1)}
              className="px-4 py-1.5 rounded-md bg-blue-600 text-xs font-medium text-white hover:bg-blue-500 disabled:bg-[#1c1c1e] disabled:text-gray-500 disabled:border disabled:border-gray-700 disabled:cursor-not-allowed transition"
            >
              Siguiente →
            </button>
          </div>
        </div>
      )}

      {modalConfig.isOpen && modalConfig.table && modalConfig.type && (
        <ArchiveConfigModal
          isOpen={modalConfig.isOpen}
          onClose={() => setModalConfig({ ...modalConfig, isOpen: false })}
          tableName={modalConfig.table}
          tagType={modalConfig.type}
          onUpdateTag={updateTag}
          onRefresh={onRefresh}
        />
      )}
    </div>
  );
}