import { Icon } from "@iconify/react";
import { IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import {
  actualizarDepartamento,
  crearDepartamento,
  eliminarDepartamento,
  getDepartamentos,
} from "../../api/rrhh.service";
import { getSucursales } from "../../api/sucursales.service";
import { useConfirmDialog } from "../../hooks/useConfirmDialog";
import {
  Badge,
  Container,
  EmptyState,
  Field,
  FieldsGrid,
  FormHead,
  FormPanel,
  Footer,
  FooterActionButton,
  GhostButton,
  ListBody,
  ListPanel,
  RowActions,
  SectionTitle,
  TableWrap,
} from "../ui/FormShell";
import { RRHHGuia } from "./_shared/RRHHGuia";
import { RRHHEmptyState } from "./_shared/RRHHEmptyState";
import { useRRHHContext } from "./_shared/RRHHContext";

const EMPTY = { codigo: "", nombre: "", sucursal_id: "" };

export function DepartamentosTab() {
  const { reloadPrereqs } = useRRHHContext();
  const { confirm, dialogs } = useConfirmDialog();
  const [data, setData] = useState([]);
  const [sucursales, setSucursales] = useState([]);
  const [loading, setLoading] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [form, setForm] = useState(EMPTY);

  const load = async () => {
    try {
      setLoading(true);
      const [deps, sucResp] = await Promise.all([getDepartamentos(), getSucursales(1, 100)]);
      setData(deps);
      setSucursales(sucResp?.data || sucResp || []);
    } catch {
      toast.error("Error al cargar departamentos");
    } finally {
      setLoading(false);
    }
  };

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

  const handleGuardar = async () => {
    if (!form.nombre.trim() || !form.sucursal_id) return toast.error("Sucursal y nombre son requeridos");
    try {
      const payload = { ...form, codigo: form.codigo || undefined };
      if (editingId) {
        await actualizarDepartamento(editingId, payload);
        toast.success("Departamento actualizado");
      } else {
        await crearDepartamento(payload);
        toast.success("Departamento creado");
      }
      setForm(EMPTY);
      setEditingId(null);
      load();
      reloadPrereqs();
    } catch (error) {
      toast.error(error?.response?.data?.message || "Error al guardar");
    }
  };

  const handleEditar = (d) => {
    setEditingId(d.id);
    setForm({ codigo: d.codigo || "", nombre: d.nombre || "", sucursal_id: d.sucursal_id || "" });
  };

  const handleEliminar = async (d) => {
    const ok = await confirm({
      title: "Eliminar departamento",
      message: `¿Eliminar departamento "${d.nombre}"?`,
      confirmText: "Eliminar",
      confirmColor: "error",
    });
    if (!ok) return;
    try {
      await eliminarDepartamento(d.id);
      toast.success("Departamento eliminado");
      load();
      reloadPrereqs();
    } catch (error) {
      toast.error(error?.response?.data?.message || "No se pudo eliminar");
    }
  };

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

  return (
    <Container>
      <RRHHGuia seccion="departamentos" />
      <FormPanel>
        <FormHead>
          <SectionTitle>
            <Icon icon={editingId ? "lucide:edit-3" : "lucide:plus-circle"} />
            {editingId ? "Editar departamento" : "Nuevo departamento"}
          </SectionTitle>
          {editingId && (
            <GhostButton onClick={() => { setForm(EMPTY); setEditingId(null); }}>
              <Icon icon="lucide:x" /> Cancelar edición
            </GhostButton>
          )}
        </FormHead>

        <FieldsGrid $cols={4}>
          <Field>
            <label>Sucursal *</label>
            <select value={form.sucursal_id} onChange={(e) => updateField("sucursal_id", e.target.value)}>
              <option value="">— Seleccionar —</option>
              {sucursales.map((s) => (
                <option key={s.id} value={s.id}>{s.descripcion || s.codigo || "Sin nombre"}</option>
              ))}
            </select>
          </Field>
          <Field $span={2}>
            <label>Nombre *</label>
            <input value={form.nombre} placeholder="Ej: Recursos Humanos" onChange={(e) => updateField("nombre", e.target.value)} />
          </Field>
          <Field>
            <label>Código</label>
            <input value={form.codigo} placeholder="Ej: RRHH" onChange={(e) => updateField("codigo", e.target.value)} />
          </Field>
        </FieldsGrid>

        <Footer>
          <FooterActionButton type="button" $variant="primary" onClick={handleGuardar}>
            <Icon icon={editingId ? "lucide:check-circle" : "lucide:plus"} />
            {editingId ? "Actualizar departamento" : "Crear departamento"}
          </FooterActionButton>
        </Footer>
      </FormPanel>

      <ListPanel>
        <ListBody>
          <SectionTitle>
            <Icon icon="lucide:list" /> Departamentos registrados
          </SectionTitle>

          {loading ? (
            <EmptyState>Cargando...</EmptyState>
          ) : data.length === 0 ? (
            <RRHHEmptyState
              icon="lucide:building-2"
              titulo="Sin departamentos registrados"
              descripcion="Los departamentos agrupan empleados por área (Ventas, Administración, etc.). Son necesarios al crear o clasificar empleados."
              guiaSeccion="departamentos"
            />
          ) : (
            <TableWrap>
              <table>
                <thead>
                  <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th>Sucursal</th>
                    <th>Responsable</th>
                    <th>Estado</th>
                    <th style={{ textAlign: "center" }}>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((d) => (
                    <tr key={d.id}>
                      <td>{d.codigo || "-"}</td>
                      <td>{d.nombre}</td>
                      <td>{d.sucursal?.descripcion || "-"}</td>
                      <td>{d.responsable ? `${d.responsable.nombres} ${d.responsable.apellidos}` : "-"}</td>
                      <td><Badge $state={d.activo ? "ACTIVO" : "INACTIVO"}>{d.activo ? "Activo" : "Inactivo"}</Badge></td>
                      <td style={{ textAlign: "center" }}>
                        <RowActions>
                          <Tooltip title="Editar">
                            <IconButton size="small" onClick={() => handleEditar(d)}>
                              <Icon icon="lucide:pencil" width={16} />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Eliminar">
                            <IconButton size="small" color="error" onClick={() => handleEliminar(d)}>
                              <Icon icon="lucide:trash-2" width={16} />
                            </IconButton>
                          </Tooltip>
                        </RowActions>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </TableWrap>
          )}
        </ListBody>
      </ListPanel>
      {dialogs}
    </Container>
  );
}