/* eslint-disable react/prop-types */
import { Icon } from "@iconify/react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { toast } from "sonner";
import { getEmpleados } from "../../../api/rrhh.service";
import {
  anularDocumentoLegajo,
  getCompletitudLegajo,
  getLegajoEmpleado,
} from "../../../api/rrhh-legajos.service";
import { useConfirmDialog } from "../../../hooks/useConfirmDialog";
import {
  EmptyState,
  Field,
  FieldsGrid,
  Footer,
  FooterActionButton,
  FormPanel,
  ListBody,
  ListPanel,
  SectionTitle,
  TableWrap,
} from "../../ui/FormShell";
import { SearchableSelect } from "../../ui/SearchableSelect";
import { RRHHEmptyState } from "../_shared/RRHHEmptyState";
import { LegajoCompletitudPanel } from "./LegajoCompletitudPanel";
import { LegajoDocumentRow } from "./LegajoDocumentRow";
import { LegajoUploadDialog } from "./LegajoUploadDialog";

export function LegajoFuncionarioTab() {
  const [searchParams, setSearchParams] = useSearchParams();
  const empleadoIdFromUrl = searchParams.get("empleadoId") || "";
  const { confirm, prompt, dialogs } = useConfirmDialog();

  const [empleados, setEmpleados] = useState([]);
  const [empleadoId, setEmpleadoId] = useState(empleadoIdFromUrl);
  const [documentos, setDocumentos] = useState([]);
  const [completitud, setCompletitud] = useState(null);
  const [loadingDocs, setLoadingDocs] = useState(false);
  const [uploadOpen, setUploadOpen] = useState(false);
  const [uploadMode, setUploadMode] = useState("crear"); // "crear" | "reemplazar"
  const [docEnEdicion, setDocEnEdicion] = useState(null);
  const [tipoPreseleccionado, setTipoPreseleccionado] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const res = await getEmpleados({ estado: "ACTIVO" });
        const rows = Array.isArray(res) ? res : res?.data || [];
        setEmpleados(rows);
      } catch {
        toast.error("No se pudieron cargar empleados");
      }
    })();
  }, []);

  const cargarLegajo = useCallback(async () => {
    if (!empleadoId) {
      setDocumentos([]);
      setCompletitud(null);
      return;
    }
    setLoadingDocs(true);
    try {
      const [docs, comp] = await Promise.all([
        getLegajoEmpleado(empleadoId),
        getCompletitudLegajo(empleadoId),
      ]);
      setDocumentos(Array.isArray(docs) ? docs : docs?.data || []);
      setCompletitud(comp);
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo cargar el legajo");
    } finally {
      setLoadingDocs(false);
    }
  }, [empleadoId]);

  useEffect(() => {
    cargarLegajo();
  }, [cargarLegajo]);

  // Persistir empleado seleccionado en query string para que el botón "Ver legajo"
  // desde EmpleadosTab.jsx lo preserve al navegar.
  useEffect(() => {
    setSearchParams(
      (prev) => {
        const params = new URLSearchParams(prev);
        if (empleadoId) params.set("empleadoId", empleadoId);
        else params.delete("empleadoId");
        return params;
      },
      { replace: true },
    );
  }, [empleadoId, setSearchParams]);

  const empleadoOptions = useMemo(
    () =>
      empleados.map((e) => ({
        id: e.id,
        label: `${e.numero_empleado || ""} — ${e.apellidos || ""} ${e.nombres || ""}`.trim(),
        ...e,
      })),
    [empleados],
  );

  const empleadoActual = useMemo(
    () => empleados.find((e) => e.id === empleadoId),
    [empleados, empleadoId],
  );

  const documentosPorTipo = useMemo(() => {
    const map = new Map();
    for (const d of documentos) {
      const codigo = d.tipo_documento?.codigo || "OTRO";
      if (!map.has(codigo)) map.set(codigo, []);
      map.get(codigo).push(d);
    }
    return map;
  }, [documentos]);

  const onCargarNuevo = (tipoId) => {
    if (!empleadoId) {
      toast.error("Seleccioná un funcionario primero");
      return;
    }
    setTipoPreseleccionado(tipoId || "");
    setDocEnEdicion(null);
    setUploadMode("crear");
    setUploadOpen(true);
  };

  const onReemplazar = (doc) => {
    setDocEnEdicion(doc);
    setUploadMode("reemplazar");
    setUploadOpen(true);
  };

  const onAnular = async (doc) => {
    const motivo = await prompt({
      title: "Anular documento",
      message: `Documento: ${doc.nombre_original}`,
      label: "Motivo de anulación",
      required: true,
      minLength: 5,
    });
    if (!motivo) return;

    const ok = await confirm({
      title: "Confirmar anulación",
      message:
        "Esta acción marca el documento como ANULADO. El archivo permanece en el storage pero deja de aparecer en el legajo activo.",
      confirmText: "Anular",
      confirmColor: "error",
    });
    if (!ok) return;

    try {
      await anularDocumentoLegajo(doc.id, { motivo });
      toast.success("Documento anulado");
      cargarLegajo();
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo anular el documento");
    }
  };

  return (
    <>
      <FormPanel>
        <SectionTitle>
          <Icon icon="lucide:user-search" /> Funcionario
        </SectionTitle>
        <FieldsGrid $cols={3}>
          <Field $span={2}>
            <label>Empleado</label>
            <SearchableSelect
              options={empleadoOptions}
              value={empleadoId}
              onChange={(id) => setEmpleadoId(id || "")}
              placeholder="Buscar por nombre, apellido o número..."
              getOptionLabel={(o) => o.label}
              fullWidth
            />
          </Field>
          <Field>
            <Footer style={{ paddingTop: 18 }}>
              <FooterActionButton type="button" $variant="primary" onClick={() => onCargarNuevo()} disabled={!empleadoId}>
                <Icon icon="lucide:upload-cloud" /> Cargar documento
              </FooterActionButton>
            </Footer>
          </Field>
        </FieldsGrid>
      </FormPanel>

      {empleadoId && completitud && (
        <LegajoCompletitudPanel reporte={completitud} onCargarTipo={(tipoId) => onCargarNuevo(tipoId)} />
      )}

      <ListPanel>
        <ListBody>
          <SectionTitle>
            <Icon icon="lucide:folder-open" /> Documentos activos
          </SectionTitle>

          {!empleadoId ? (
            <RRHHEmptyState
              icon="lucide:user"
              titulo="Seleccioná un funcionario"
              descripcion="Elegí un empleado para ver su legajo digital, cargar documentos y revisar vencimientos."
            />
          ) : loadingDocs ? (
            <EmptyState>Cargando...</EmptyState>
          ) : documentos.length === 0 ? (
            <RRHHEmptyState
              icon="lucide:folder"
              titulo="Legajo vacío"
              descripcion="Este funcionario aún no tiene documentos cargados. Usá 'Cargar documento' para empezar."
              guiaSeccion="legajos"
            />
          ) : (
            <TableWrap>
              <table>
                <thead>
                  <tr>
                    <th>Documento</th>
                    <th>Fecha</th>
                    <th>Vencimiento</th>
                    <th>Estado</th>
                    <th>Tamaño</th>
                    <th>Subido</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {Array.from(documentosPorTipo.entries()).map(([codigo, docs]) => (
                    <>
                      <tr key={`group-${codigo}`}>
                        <td colSpan={7} style={{ background: "#f5f7fa", fontWeight: 600, fontSize: 12 }}>
                          {codigo} — {docs[0]?.tipo_documento?.nombre || codigo}
                        </td>
                      </tr>
                      {docs.map((d) => (
                        <LegajoDocumentRow
                          key={d.id}
                          doc={d}
                          onReemplazar={onReemplazar}
                          onAnular={onAnular}
                        />
                      ))}
                    </>
                  ))}
                </tbody>
              </table>
            </TableWrap>
          )}
        </ListBody>
      </ListPanel>

      <LegajoUploadDialog
        open={uploadOpen}
        onClose={() => setUploadOpen(false)}
        empleadoId={empleadoId}
        empleadoNombre={
          empleadoActual ? `${empleadoActual.apellidos || ""} ${empleadoActual.nombres || ""}`.trim() : undefined
        }
        modo={uploadMode}
        documentoActual={docEnEdicion}
        tipoIdInicial={tipoPreseleccionado}
        onSuccess={() => cargarLegajo()}
      />

      {dialogs}
    </>
  );
}