import { Icon } from "@iconify/react";
import { IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import {
  actualizarCargo,
  crearCargo,
  eliminarCargo,
  getCargos,
} from "../../api/rrhh.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";
import { MonedaInput } from "../common/MonedaInput";

const EMPTY = { codigo: "", nombre: "", salario_minimo_cargo: 0, salario_maximo_cargo: 0 };

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

  const load = async () => {
    try {
      setLoading(true);
      setData(await getCargos());
    } catch {
      toast.error("Error al cargar cargos");
    } finally {
      setLoading(false);
    }
  };

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

  const handleGuardar = async () => {
    if (!form.nombre.trim()) return toast.error("Nombre requerido");
    try {
      const payload = {
        codigo: form.codigo || undefined,
        nombre: form.nombre,
        salario_minimo_cargo: form.salario_minimo_cargo ? Number(form.salario_minimo_cargo) : undefined,
        salario_maximo_cargo: form.salario_maximo_cargo ? Number(form.salario_maximo_cargo) : undefined,
      };
      if (editingId) {
        await actualizarCargo(editingId, payload);
        toast.success("Cargo actualizado");
      } else {
        await crearCargo(payload);
        toast.success("Cargo creado");
      }
      setForm(EMPTY);
      setEditingId(null);
      load();
      reloadPrereqs();
    } catch (error) {
      toast.error(error?.response?.data?.message || "Error al guardar");
    }
  };

  const handleEditar = (c) => {
    setEditingId(c.id);
    setForm({
      codigo: c.codigo || "",
      nombre: c.nombre || "",
      salario_minimo_cargo: Number(c.salario_minimo_cargo) || 0,
      salario_maximo_cargo: Number(c.salario_maximo_cargo) || 0,
    });
  };

  const handleEliminar = async (c) => {
    const ok = await confirm({
      title: "Eliminar cargo",
      message: `¿Eliminar cargo "${c.nombre}"? Esta acción no se puede deshacer.`,
      confirmText: "Eliminar",
      confirmColor: "error",
    });
    if (!ok) return;
    try {
      await eliminarCargo(c.id);
      toast.success("Cargo 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="cargos" />
      <FormPanel>
        <FormHead>
          <SectionTitle>
            <Icon icon={editingId ? "lucide:edit-3" : "lucide:plus-circle"} />
            {editingId ? "Editar cargo" : "Nuevo cargo"}
          </SectionTitle>
          {editingId && (
            <GhostButton onClick={() => { setForm(EMPTY); setEditingId(null); }}>
              <Icon icon="lucide:x" /> Cancelar edición
            </GhostButton>
          )}
        </FormHead>

        <FieldsGrid $cols={4}>
          <Field>
            <label>Código</label>
            <input value={form.codigo} placeholder="Ej: GTE" onChange={(e) => updateField("codigo", e.target.value)} />
          </Field>
          <Field $span={2}>
            <label>Nombre *</label>
            <input value={form.nombre} placeholder="Ej: Gerente de Operaciones" onChange={(e) => updateField("nombre", e.target.value)} />
          </Field>
          <MonedaInput
            label="Salario mínimo"
            fullWidth
            helperText="Opcional — piso salarial del cargo"
            value={form.salario_minimo_cargo}
            onChange={(v) => updateField("salario_minimo_cargo", v)}
          />
          <MonedaInput
            label="Salario máximo"
            fullWidth
            helperText="Opcional — techo salarial del cargo"
            value={form.salario_maximo_cargo}
            onChange={(v) => updateField("salario_maximo_cargo", v)}
          />
        </FieldsGrid>

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

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

          {loading ? (
            <EmptyState>Cargando...</EmptyState>
          ) : data.length === 0 ? (
            <RRHHEmptyState
              icon="lucide:badge-check"
              titulo="Sin cargos registrados"
              descripcion="Los cargos definen la jerarquía y los rangos salariales de tu plantilla. Sin al menos un cargo, no podrás crear empleados."
              guiaSeccion="cargos"
            />
          ) : (
            <TableWrap>
              <table>
                <thead>
                  <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th style={{ textAlign: "right" }}>Salario mín.</th>
                    <th style={{ textAlign: "right" }}>Salario máx.</th>
                    <th>Estado</th>
                    <th style={{ textAlign: "center" }}>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((c) => (
                    <tr key={c.id}>
                      <td>{c.codigo || "-"}</td>
                      <td>{c.nombre}</td>
                      <td style={{ textAlign: "right" }}>
                        {c.salario_minimo_cargo ? Number(c.salario_minimo_cargo).toLocaleString("es-PY") : "-"}
                      </td>
                      <td style={{ textAlign: "right" }}>
                        {c.salario_maximo_cargo ? Number(c.salario_maximo_cargo).toLocaleString("es-PY") : "-"}
                      </td>
                      <td><Badge $state={c.activo ? "ACTIVO" : "INACTIVO"}>{c.activo ? "Activo" : "Inactivo"}</Badge></td>
                      <td style={{ textAlign: "center" }}>
                        <RowActions>
                          <Tooltip title="Editar">
                            <IconButton size="small" onClick={() => handleEditar(c)}>
                              <Icon icon="lucide:pencil" width={16} />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Eliminar">
                            <IconButton size="small" color="error" onClick={() => handleEliminar(c)}>
                              <Icon icon="lucide:trash-2" width={16} />
                            </IconButton>
                          </Tooltip>
                        </RowActions>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </TableWrap>
          )}
        </ListBody>
      </ListPanel>
      {dialogs}
    </Container>
  );
}