import { Icon } from "@iconify/react";
import { IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { getDepartamentos } from "../../../api/rrhh.service";
import {
  actualizarToleranciaEspecial,
  crearToleranciaEspecial,
  eliminarToleranciaEspecial,
  getToleranciasEspeciales,
} from "../../../api/rrhh-presentismo.service";
import { getSucursales } from "../../../api/sucursales.service";
import { useConfirmDialog } from "../../../hooks/useConfirmDialog";
import { actionIconSx } from "../_shared/actionIconSx";
import { RRHHEmptyState } from "../_shared/RRHHEmptyState";
import {
  EmptyState,
  Field,
  FieldsGrid,
  Footer,
  FooterActionButton,
  FormPanel,
  ListBody,
  ListPanel,
  RowActions,
  SectionTitle,
  TableWrap,
} from "../../ui/FormShell";
import { SearchableSelect } from "../../ui/SearchableSelect";
import { hoyISO } from "../../../utils/fecha";

const APLICA_A_OPTIONS = [
  { id: "TODOS", label: "Todos" },
  { id: "SUCURSAL", label: "Sucursal" },
  { id: "DEPARTAMENTO", label: "Departamento" },
];

const emptyForm = () => ({
  fecha: hoyISO(),
  tolerancia_entrada_min: 5,
  tolerancia_salida_min: 5,
  motivo: "",
  aplica_a: "TODOS",
  aplica_a_id: "",
});

export function ToleranciasEspecialesPresentismoTab() {
  const { confirm, dialogs } = useConfirmDialog();
  const [editingId, setEditingId] = useState("");
  const [form, setForm] = useState(emptyForm());
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(false);
  const [sucursales, setSucursales] = useState([]);
  const [departamentos, setDepartamentos] = useState([]);

  const loadData = async () => {
    try {
      setLoading(true);
      const res = await getToleranciasEspeciales({ page: 1, limit: 200 });
      setRows(res?.data || []);
    } catch {
      toast.error("No se pudieron cargar tolerancias especiales");
    } finally {
      setLoading(false);
    }
  };

  const loadCatalogos = async () => {
    try {
      const [sucRes, depRes] = await Promise.all([
        getSucursales(1, 200),
        getDepartamentos(),
      ]);
      setSucursales(Array.isArray(sucRes) ? sucRes : sucRes?.data || []);
      setDepartamentos(Array.isArray(depRes) ? depRes : depRes?.data || depRes || []);
    } catch {
      toast.error("No se pudieron cargar sucursales/departamentos");
    }
  };

  useEffect(() => {
    loadCatalogos();
    loadData();
  }, []);

  const submit = async () => {
    if (!form.fecha) return toast.error("Fecha obligatoria");
    if (!String(form.motivo || "").trim()) return toast.error("Motivo obligatorio");
    if (form.aplica_a !== "TODOS" && !form.aplica_a_id) {
      return toast.error("Debés seleccionar la sucursal o departamento de alcance");
    }

    const payload = {
      fecha: form.fecha,
      tolerancia_entrada_min: Number(form.tolerancia_entrada_min),
      tolerancia_salida_min: Number(form.tolerancia_salida_min),
      motivo: form.motivo,
      aplica_a: form.aplica_a,
      aplica_a_id: form.aplica_a === "TODOS" ? undefined : form.aplica_a_id,
    };

    try {
      if (editingId) {
        await actualizarToleranciaEspecial(editingId, payload);
        toast.success("Tolerancia actualizada");
      } else {
        await crearToleranciaEspecial(payload);
        toast.success("Tolerancia creada");
      }
      setEditingId("");
      setForm(emptyForm());
      loadData();
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo guardar la tolerancia");
    }
  };

  const onEdit = (row) => {
    setEditingId(row.id);
    setForm({
      fecha: String(row.fecha).slice(0, 10),
      tolerancia_entrada_min: row.tolerancia_entrada_min,
      tolerancia_salida_min: row.tolerancia_salida_min,
      motivo: row.motivo || "",
      aplica_a: row.aplica_a || "TODOS",
      aplica_a_id: row.aplica_a_id || "",
    });
  };

  const onDelete = async (row) => {
    const ok = await confirm({
      title: "Eliminar tolerancia",
      message: "¿Eliminar la tolerancia especial seleccionada?",
      confirmText: "Eliminar",
      confirmColor: "error",
    });
    if (!ok) return;

    try {
      await eliminarToleranciaEspecial(row.id);
      toast.success("Tolerancia eliminada");
      if (editingId === row.id) {
        setEditingId("");
        setForm(emptyForm());
      }
      loadData();
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo eliminar");
    }
  };

  const scopeOptions = form.aplica_a === "SUCURSAL" ? sucursales : departamentos;
  const scopeLabel = form.aplica_a === "SUCURSAL" ? "Sucursal" : "Departamento";

  const describeScope = (row) => {
    if (row.aplica_a === "TODOS") return "Todos";
    if (!row.aplica_a_id) return row.aplica_a;
    if (row.aplica_a === "SUCURSAL") {
      const suc = sucursales.find((s) => String(s.id) === String(row.aplica_a_id));
      return suc ? suc.descripcion || suc.nombre || "Sucursal sin nombre" : "Sucursal";
    }
    const dep = departamentos.find((d) => String(d.id) === String(row.aplica_a_id));
    return dep ? dep.descripcion || dep.nombre || "Departamento sin nombre" : "Departamento";
  };

  return (
    <>
      <FormPanel>
        <SectionTitle><Icon icon="lucide:settings-2" /> {editingId ? "Editar tolerancia" : "Nueva tolerancia especial"}</SectionTitle>
        <FieldsGrid $cols={4}>
          <Field>
            <label>Fecha</label>
            <input type="date" value={form.fecha} onChange={(e) => setForm((p) => ({ ...p, fecha: e.target.value }))} />
          </Field>
          <Field>
            <label>Tolerancia entrada (min)</label>
            <input type="number" min="0" value={form.tolerancia_entrada_min} onChange={(e) => setForm((p) => ({ ...p, tolerancia_entrada_min: e.target.value }))} />
          </Field>
          <Field>
            <label>Tolerancia salida (min)</label>
            <input type="number" min="0" value={form.tolerancia_salida_min} onChange={(e) => setForm((p) => ({ ...p, tolerancia_salida_min: e.target.value }))} />
          </Field>
          <Field>
            <label>Aplica a</label>
            <SearchableSelect
              options={APLICA_A_OPTIONS}
              value={form.aplica_a}
              onChange={(id) => setForm((p) => ({ ...p, aplica_a: id || "TODOS", aplica_a_id: "" }))}
              clearable={false}
            />
          </Field>
          {form.aplica_a !== "TODOS" && (
            <Field $span={2}>
              <label>{scopeLabel}</label>
              <SearchableSelect
                options={scopeOptions}
                value={form.aplica_a_id}
                onChange={(id) => setForm((p) => ({ ...p, aplica_a_id: id || "" }))}
                getOptionLabel={(o) => o.descripcion || o.nombre || o.codigo || "Sin nombre"}
              />
            </Field>
          )}
          <Field $span={2}>
            <label>Motivo</label>
            <input value={form.motivo} onChange={(e) => setForm((p) => ({ ...p, motivo: e.target.value }))} />
          </Field>
        </FieldsGrid>
        <Footer>
          <FooterActionButton type="button" onClick={() => { setEditingId(""); setForm(emptyForm()); }}>
            <Icon icon="lucide:eraser" /> Limpiar
          </FooterActionButton>
          <FooterActionButton type="button" $variant="primary" onClick={submit}>
            <Icon icon="lucide:save" /> {editingId ? "Actualizar" : "Guardar"}
          </FooterActionButton>
        </Footer>
      </FormPanel>

      <ListPanel>
        <ListBody>
          <SectionTitle><Icon icon="lucide:list" /> Tolerancias especiales</SectionTitle>
          {loading ? (
            <EmptyState>Cargando...</EmptyState>
          ) : rows.length === 0 ? (
            <RRHHEmptyState
              icon="lucide:clock-alert"
              titulo="Sin tolerancias especiales"
              descripcion="Las tolerancias especiales por fecha reemplazan a la tolerancia global en el motor de presentismo."
              guiaSeccion="presentismo"
            />
          ) : (
            <TableWrap>
              <table>
                <thead>
                  <tr>
                    <th>Fecha</th>
                    <th>Entrada</th>
                    <th>Salida</th>
                    <th>Alcance</th>
                    <th>Motivo</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => (
                    <tr key={r.id}>
                      <td>{String(r.fecha).slice(0, 10)}</td>
                      <td>{r.tolerancia_entrada_min} min</td>
                      <td>{r.tolerancia_salida_min} min</td>
                      <td>{describeScope(r)}</td>
                      <td>{r.motivo}</td>
                      <td>
                        <RowActions>
                          <Tooltip title="Editar">
                            <IconButton size="small" onClick={() => onEdit(r)} sx={actionIconSx("primary.main")}>
                              <Icon icon="lucide:pencil" width={16} />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Eliminar">
                            <IconButton size="small" onClick={() => onDelete(r)} sx={actionIconSx("error.main")}>
                              <Icon icon="lucide:trash-2" width={16} />
                            </IconButton>
                          </Tooltip>
                        </RowActions>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </TableWrap>
          )}
        </ListBody>
      </ListPanel>
      {dialogs}
    </>
  );
}