import { Icon } from "@iconify/react";
import { Box, IconButton, Tab, Tabs, Tooltip, Typography } from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
  actualizarSolicitudVacaciones,
  aprobarSolicitudVacaciones,
  cancelarSolicitudVacaciones,
  crearSolicitudVacaciones,
  eliminarSolicitudVacaciones,
  getEmpleados,
  getSaldosVacaciones,
  getSolicitudesVacaciones,
  recalcularSaldosVacaciones,
  rechazarSolicitudVacaciones,
} from "../../api/rrhh.service";
import {
  Badge,
  Container,
  EmptyState,
  Field,
  FieldsGrid,
  Footer,
  FooterActionButton,
  FormHead,
  FormPanel,
  GhostButton,
  ListBody,
  ListPanel,
  RowActions,
  SectionTitle,
  TableWrap,
  ToolBar,
} from "../ui/FormShell";
import { TablePaginationBar } from "../_standards";
import { SearchableSelect } from "../ui/SearchableSelect";
import { useConfirmDialog } from "../../hooks/useConfirmDialog";
import { RRHHGuia } from "./_shared/RRHHGuia";
import { RRHHPrereqChecklist } from "./_shared/RRHHPrereqChecklist";
import { RRHHEmptyState } from "./_shared/RRHHEmptyState";
import { useRRHHContext } from "./_shared/RRHHContext";
import { hoyISO } from "../../utils/fecha";

const empleadoOptionLabel = (e) => `${e.numero_empleado} — ${e.apellidos}, ${e.nombres}`;

const TIPO_OPTIONS = [
  { id: "VACACION", label: "Vacación" },
  { id: "PERMISO", label: "Permiso" },
  { id: "LICENCIA_MEDICA", label: "Licencia médica" },
  { id: "LICENCIA_MATERNIDAD", label: "Licencia maternidad" },
];

const ESTADO_OPTIONS = [
  { id: "SOLICITADO", label: "Solicitado" },
  { id: "APROBADO", label: "Aprobado" },
  { id: "RECHAZADO", label: "Rechazado" },
  { id: "CANCELADO", label: "Cancelado" },
];

const todayYmd = () => hoyISO();

const fmtFecha = (value) => {
  if (!value) return "-";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "-";
  return d.toLocaleDateString("es-PY");
};

const yearOptions = () => {
  const cur = new Date().getFullYear();
  const list = [];
  for (let y = cur + 1; y >= cur - 5; y--) list.push({ id: y, label: String(y) });
  return list;
};

// ──────────────────────────────────────────────────────────────
// Sub-tab: Saldos
// ──────────────────────────────────────────────────────────────
function SaldosSubTab({ empleados }) {
  const { confirm, dialogs } = useConfirmDialog();
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [recalculating, setRecalculating] = useState(false);
  const [anio, setAnio] = useState(new Date().getFullYear());
  const [empleadoFiltro, setEmpleadoFiltro] = useState("");
  const YEARS = useMemo(yearOptions, []);

  const load = async () => {
    try {
      setLoading(true);
      const params = { anio };
      if (empleadoFiltro) params.empleado_id = empleadoFiltro;
      setData(await getSaldosVacaciones(params));
    } catch {
      toast.error("Error al cargar saldos");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); /* eslint-disable-next-line */ }, [anio, empleadoFiltro]);

  const handleRecalcular = async () => {
    const ok = await confirm({
      title: "Recalcular saldos",
      message: `¿Recalcular saldos de ${anio} según escala legal de antigüedad (Art. 219 CT)? No se tocan saldos cerrados.`,
      confirmText: "Recalcular",
      confirmColor: "primary",
    });
    if (!ok) return;
    try {
      setRecalculating(true);
      const resp = await recalcularSaldosVacaciones({ anio });
      toast.success(
        `Procesados ${resp.empleados_procesados} empleados · ${resp.saldos_creados} creados / ${resp.saldos_actualizados} actualizados`,
      );
      load();
    } catch (error) {
      toast.error(error?.response?.data?.message || "Error al recalcular");
    } finally {
      setRecalculating(false);
    }
  };

  return (
    <>
    <ListPanel>
      <ListBody>
        <ToolBar>
          <Box sx={{ minWidth: 140 }}>
            <SearchableSelect
              label="Año"
              options={YEARS}
              value={anio}
              onChange={(id) => setAnio(id ?? new Date().getFullYear())}
              clearable={false}
            />
          </Box>
          <Box sx={{ minWidth: 280 }}>
            <SearchableSelect
              label="Empleado"
              options={empleados}
              value={empleadoFiltro}
              onChange={(id) => setEmpleadoFiltro(id || "")}
              getOptionLabel={empleadoOptionLabel}
              placeholder="Todos los empleados"
            />
          </Box>
          <Tooltip title="Refrescar">
            <GhostButton onClick={load} disabled={loading}>
              <Icon icon="lucide:refresh-cw" />
            </GhostButton>
          </Tooltip>
          <Box sx={{ flex: 1 }} />
          <FooterActionButton type="button" $variant="primary"
            disabled={recalculating} onClick={handleRecalcular}>
            <Icon icon="lucide:calculator" />
            {recalculating ? "Recalculando..." : "Recalcular saldos"}
          </FooterActionButton>
        </ToolBar>

        {loading ? (
          <EmptyState>Cargando...</EmptyState>
        ) : data.length === 0 ? (
          <RRHHEmptyState
            icon="lucide:calendar-clock"
            titulo={`Sin saldos para ${anio}`}
            descripcion="Usá el botón «Recalcular saldos» para inicializar los días según la antigüedad de cada empleado."
            guiaSeccion="vacaciones"
          />
        ) : (
          <TableWrap>
            <table>
              <thead>
                <tr>
                  <th>Empleado</th>
                  <th>Ingreso</th>
                  <th style={{ textAlign: "right" }}>Correspondidos</th>
                  <th style={{ textAlign: "right" }}>Tomados</th>
                  <th style={{ textAlign: "right" }}>Compensados</th>
                  <th style={{ textAlign: "right" }}>Pendientes</th>
                  <th style={{ textAlign: "center" }}>Estado</th>
                </tr>
              </thead>
              <tbody>
                {data.map((s) => {
                  const emp = s.empleado;
                  return (
                    <tr key={s.id}>
                      <td>
                        {emp ? (
                          <>
                            <strong>{emp.numero_empleado}</strong> — {emp.apellidos}, {emp.nombres}
                          </>
                        ) : "-"}
                      </td>
                      <td>{fmtFecha(emp?.fecha_ingreso)}</td>
                      <td style={{ textAlign: "right", fontFamily: "monospace" }}>
                        {Number(s.dias_correspondidos).toFixed(2)}
                      </td>
                      <td style={{ textAlign: "right", fontFamily: "monospace" }}>
                        {Number(s.dias_tomados).toFixed(2)}
                      </td>
                      <td style={{ textAlign: "right", fontFamily: "monospace" }}>
                        {Number(s.dias_compensados).toFixed(2)}
                      </td>
                      <td style={{ textAlign: "right", fontFamily: "monospace", fontWeight: 600 }}>
                        {Number(s.dias_pendientes).toFixed(2)}
                      </td>
                      <td style={{ textAlign: "center" }}>
                        <Badge $state={s.cerrado ? "INACTIVO" : "ACTIVO"}>
                          {s.cerrado ? "Cerrado" : "Abierto"}
                        </Badge>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </TableWrap>
        )}
      </ListBody>
    </ListPanel>
    {dialogs}
    </>
  );
}

// ──────────────────────────────────────────────────────────────
// Sub-tab: Solicitudes
// ──────────────────────────────────────────────────────────────
function SolicitudesSubTab({ empleados }) {
  const { confirm, prompt, dialogs } = useConfirmDialog();
  const { reloadBadges } = useRRHHContext();
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [estadoFiltro, setEstadoFiltro] = useState("");
  const [tipoFiltro, setTipoFiltro] = useState("");
  const [empleadoFiltro, setEmpleadoFiltro] = useState("");
  const [loading, setLoading] = useState(false);

  const [showForm, setShowForm] = useState(false);


  const [editingId, setEditingId] = useState(null);
  const [form, setForm] = useState({
    empleado_id: "",
    fecha_inicio: todayYmd(),
    fecha_fin: todayYmd(),
    tipo: "VACACION",
    afecta_salario: false,
    observacion: "",
  });
  const [saving, setSaving] = useState(false);

  const totalPages = useMemo(() => Math.max(1, Math.ceil(total / limit)), [total, limit]);

  const load = async () => {
    try {
      setLoading(true);
      const params = { page, limit };
      if (estadoFiltro) params.estado = estadoFiltro;
      if (tipoFiltro) params.tipo = tipoFiltro;
      if (empleadoFiltro) params.empleado_id = empleadoFiltro;
      const resp = await getSolicitudesVacaciones(params);
      setData(resp?.data || []);
      setTotal(resp?.total || 0);
    } catch {
      toast.error("Error al cargar solicitudes");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); /* eslint-disable-next-line */ }, [page, limit, estadoFiltro, tipoFiltro, empleadoFiltro]);

  const handleNuevo = () => {
    setEditingId(null);
    setForm({
      empleado_id: "",
      fecha_inicio: todayYmd(),
      fecha_fin: todayYmd(),
      tipo: "VACACION",
      afecta_salario: false,
      observacion: "",
    });
    setShowForm(true);
  };

  const handleEditar = (s) => {
    setEditingId(s.id);
    setForm({
      empleado_id: s.empleado_id,
      fecha_inicio: s.fecha_inicio.slice(0, 10),
      fecha_fin: s.fecha_fin.slice(0, 10),
      tipo: s.tipo,
      afecta_salario: !!s.afecta_salario,
      observacion: s.observacion || "",
    });
    setShowForm(true);
  };

  const handleGuardar = async () => {
    if (!form.empleado_id) return toast.error("Seleccioná un empleado");
    if (!form.fecha_inicio || !form.fecha_fin) return toast.error("Completá las fechas");
    if (new Date(form.fecha_fin) < new Date(form.fecha_inicio))
      return toast.error("Fecha fin no puede ser anterior a fecha inicio");

    try {
      setSaving(true);
      const payload = {
        ...form,
        observacion: form.observacion || undefined,
      };
      if (editingId) {
        const { empleado_id, ...rest } = payload;
        await actualizarSolicitudVacaciones(editingId, rest);
        toast.success("Solicitud actualizada");
      } else {
        await crearSolicitudVacaciones(payload);
        toast.success("Solicitud creada");
      }
      setShowForm(false);
      setEditingId(null);
      load();
    } catch (error) {
      toast.error(error?.response?.data?.message || "Error al guardar");
    } finally {
      setSaving(false);
    }
  };

  const handleAccion = async (s, accion, fn, etiqueta) => {
    const colorByAccion = {
      APROBADO: "success",
      RECHAZADO: "error",
      CANCELADO: "warning",
    };
    const requireComentario = accion === "RECHAZADO";
    const comentario = await prompt({
      title: `${etiqueta} solicitud`,
      message: `La solicitud pasará a estado ${accion}.`,
      label: requireComentario ? "Motivo del rechazo" : "Comentario",
      placeholder: requireComentario ? "Obligatorio" : "Opcional",
      required: requireComentario,
      confirmText: etiqueta,
      confirmColor: colorByAccion[accion] || "primary",
    });
    if (comentario === null) return;
    try {
      await fn(s.id, comentario ? { comentario } : {});
      toast.success(`Solicitud ${accion.toLowerCase()}`);
      load();
      reloadBadges();
    } catch (error) {
      toast.error(error?.response?.data?.message || `No se pudo ${etiqueta.toLowerCase()}`);
    }
  };

  const handleEliminar = async (s) => {
    const ok = await confirm({
      title: "Eliminar solicitud",
      message: "¿Eliminar esta solicitud SOLICITADO?",
      confirmText: "Eliminar",
      confirmColor: "error",
    });
    if (!ok) return;
    try {
      await eliminarSolicitudVacaciones(s.id);
      toast.success("Solicitud eliminada");
      load();
    } catch (error) {
      toast.error(error?.response?.data?.message || "No se pudo eliminar");
    }
  };

  const updateField = (key, value) => setForm((p) => ({ ...p, [key]: value }));

  if (showForm) {
    return (
      <>
      <FormPanel>
        <FormHead>
          <SectionTitle>
            <Icon icon={editingId ? "lucide:edit-3" : "lucide:plus-circle"} />
            {editingId ? "Editar solicitud" : "Nueva solicitud"}
          </SectionTitle>
          <GhostButton onClick={() => { setShowForm(false); setEditingId(null); }}>
            <Icon icon="lucide:x" /> Cerrar
          </GhostButton>
        </FormHead>

        <FieldsGrid $cols={4}>
          <Field $span={2}>
            <label>Empleado *</label>
            <SearchableSelect
              options={empleados}
              value={form.empleado_id}
              disabled={!!editingId}
              onChange={(id) => updateField("empleado_id", id || "")}
              getOptionLabel={empleadoOptionLabel}
              placeholder="Buscar por número, nombre o apellido..."
            />
          </Field>
          <Field>
            <label>Tipo *</label>
            <SearchableSelect
              options={TIPO_OPTIONS}
              value={form.tipo}
              onChange={(id) => updateField("tipo", id || "VACACION")}
              clearable={false}
            />
          </Field>
          <Field>
            <label>Afecta salario</label>
            <SearchableSelect
              options={[
                { id: "false", label: "No" },
                { id: "true", label: "Sí (descuenta)" },
              ]}
              value={form.afecta_salario ? "true" : "false"}
              onChange={(id) => updateField("afecta_salario", id === "true")}
              clearable={false}
            />
          </Field>

          <Field>
            <label>Fecha inicio *</label>
            <input type="date" value={form.fecha_inicio}
              onChange={(e) => updateField("fecha_inicio", e.target.value)} />
          </Field>
          <Field>
            <label>Fecha fin *</label>
            <input type="date" value={form.fecha_fin}
              onChange={(e) => updateField("fecha_fin", e.target.value)} />
          </Field>
          <Field $span={2}>
            <label>Observación</label>
            <input value={form.observacion}
              onChange={(e) => updateField("observacion", e.target.value)} />
          </Field>
        </FieldsGrid>

        <Footer>
          <FooterActionButton type="button" $variant="danger" disabled={saving}
            onClick={() => { setShowForm(false); setEditingId(null); }}>
            <Icon icon="lucide:x-circle" /> Cancelar
          </FooterActionButton>
          <FooterActionButton type="button" $variant="primary" disabled={saving}
            onClick={handleGuardar}>
            <Icon icon="lucide:check-circle" />
            {saving ? "Guardando..." : editingId ? "Actualizar" : "Crear solicitud"}
          </FooterActionButton>
        </Footer>
      </FormPanel>
      {dialogs}
      </>
    );
  }

  return (
    <>
    <ListPanel>
      <ListBody>
        <ToolBar>
          <Box sx={{ minWidth: 180 }}>
            <SearchableSelect label="Estado" options={ESTADO_OPTIONS} value={estadoFiltro}
              onChange={(id) => { setEstadoFiltro(id || ""); setPage(1); }}
              placeholder="Todos los estados" />
          </Box>
          <Box sx={{ minWidth: 200 }}>
            <SearchableSelect label="Tipo" options={TIPO_OPTIONS} value={tipoFiltro}
              onChange={(id) => { setTipoFiltro(id || ""); setPage(1); }}
              placeholder="Todos los tipos" />
          </Box>
          <Box sx={{ minWidth: 280 }}>
            <SearchableSelect label="Empleado" options={empleados} value={empleadoFiltro}
              onChange={(id) => { setEmpleadoFiltro(id || ""); setPage(1); }}
              getOptionLabel={empleadoOptionLabel}
              placeholder="Todos los empleados" />
          </Box>
          <Tooltip title="Refrescar">
            <GhostButton onClick={load} disabled={loading}>
              <Icon icon="lucide:refresh-cw" />
            </GhostButton>
          </Tooltip>
          <Box sx={{ flex: 1 }} />
          <FooterActionButton type="button" $variant="primary" onClick={handleNuevo}>
            <Icon icon="lucide:plus" /> Nueva solicitud
          </FooterActionButton>
        </ToolBar>

        {loading ? (
          <EmptyState>Cargando...</EmptyState>
        ) : data.length === 0 ? (
          <RRHHEmptyState
            icon="lucide:calendar-days"
            titulo="Sin solicitudes de vacaciones"
            descripcion="Las solicitudes de vacaciones, permisos o licencias permiten registrar y aprobar ausencias. Solo las solicitudes APROBADAS afectan el saldo de días."
            ctaLabel="Nueva solicitud"
            onCta={handleNuevo}
            guiaSeccion="vacaciones"
          />
        ) : (
          <TableWrap>
            <table>
              <thead>
                <tr>
                  <th>Empleado</th>
                  <th>Tipo</th>
                  <th>Desde</th>
                  <th>Hasta</th>
                  <th style={{ textAlign: "right" }}>Días háb.</th>
                  <th>Estado</th>
                  <th style={{ textAlign: "center" }}>Acciones</th>
                </tr>
              </thead>
              <tbody>
                {data.map((s) => {
                  const emp = s.empleado;
                  const isSolicitado = s.estado === "SOLICITADO";
                  const isAprobado = s.estado === "APROBADO";
                  return (
                    <tr key={s.id}>
                      <td>{emp ? `${emp.numero_empleado} — ${emp.apellidos}, ${emp.nombres}` : "-"}</td>
                      <td>{s.tipo.replace(/_/g, " ")}</td>
                      <td>{fmtFecha(s.fecha_inicio)}</td>
                      <td>{fmtFecha(s.fecha_fin)}</td>
                      <td style={{ textAlign: "right", fontFamily: "monospace" }}>{s.dias_habiles}</td>
                      <td><Badge $state={s.estado}>{s.estado}</Badge></td>
                      <td style={{ textAlign: "center" }}>
                        <RowActions>
                          {isSolicitado && (
                            <>
                              <Tooltip title="Editar">
                                <IconButton size="small" onClick={() => handleEditar(s)}>
                                  <Icon icon="lucide:pencil" width={16} />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Aprobar">
                                <IconButton size="small" color="success"
                                  onClick={() => handleAccion(s, "APROBADO", aprobarSolicitudVacaciones, "Aprobar")}>
                                  <Icon icon="lucide:check-circle" width={16} />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Rechazar">
                                <IconButton size="small" color="error"
                                  onClick={() => handleAccion(s, "RECHAZADO", rechazarSolicitudVacaciones, "Rechazar")}>
                                  <Icon icon="lucide:x-circle" width={16} />
                                </IconButton>
                              </Tooltip>
                            </>
                          )}
                          {(isSolicitado || isAprobado) && (
                            <Tooltip title="Cancelar">
                              <IconButton size="small" color="warning"
                                onClick={() => handleAccion(s, "CANCELADO", cancelarSolicitudVacaciones, "Cancelar")}>
                                <Icon icon="lucide:ban" width={16} />
                              </IconButton>
                            </Tooltip>
                          )}
                          {isSolicitado && (
                            <Tooltip title="Eliminar">
                              <IconButton size="small" color="error" onClick={() => handleEliminar(s)}>
                                <Icon icon="lucide:trash-2" width={16} />
                              </IconButton>
                            </Tooltip>
                          )}
                        </RowActions>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </TableWrap>
        )}

        <TablePaginationBar
          page={page}
          totalPages={totalPages}
          onPageChange={setPage}
          total={total}
          shown={data.length}
          noun="solicitudes"
          rowsPerPage={limit}
          onRowsPerPageChange={(n) => {
            setLimit(n);
            setPage(1);
          }}
        />
      </ListBody>
    </ListPanel>
    {dialogs}
    </>
  );
}

// ──────────────────────────────────────────────────────────────
// Tab principal
// ──────────────────────────────────────────────────────────────
const SUB_TABS = [
  { key: "saldos", label: "Saldos por empleado", icon: "lucide:calendar-clock" },
  { key: "solicitudes", label: "Solicitudes", icon: "lucide:file-check-2" },
];

export function VacacionesTab() {
  const [active, setActive] = useState("saldos");
  const [empleados, setEmpleados] = useState([]);

  useEffect(() => {
    getEmpleados({ page: 1, limit: 200 })
      .then((resp) => setEmpleados(resp?.data || []))
      .catch(() => toast.error("No se pudieron cargar empleados"));
  }, []);

  return (
    <Container>
      <RRHHGuia seccion="vacaciones" />
      <RRHHPrereqChecklist tabKey="vacaciones" />
      <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 1.5 }}>
        <Tabs value={active} onChange={(_, v) => setActive(v)} variant="scrollable" scrollButtons="auto"
          textColor="secondary" indicatorColor="secondary">
          {SUB_TABS.map((tab) => (
            <Tab key={tab.key} value={tab.key}
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
                  <Icon icon={tab.icon} width={16} />
                  <span>{tab.label}</span>
                </Box>
              } />
          ))}
        </Tabs>
      </Box>

      {active === "saldos" && <SaldosSubTab empleados={empleados} />}
      {active === "solicitudes" && <SolicitudesSubTab empleados={empleados} />}
    </Container>
  );
}