import { Icon } from "@iconify/react";
import { IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import {
  asignarTurnoEmpleado,
  eliminarAsignacionTurno,
  getAsignacionesTurno,
  getEmpleadosPresentismo,
  getTurnosPresentismo,
} from "../../../api/rrhh-presentismo.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";

const emptyAsignacion = () => ({
  empleado_id: "",
  turno_id: "",
  tipo_asignacion: "PERPETUA",
  fecha_inicio: "",
  fecha_fin: "",
  prioridad: 100,
  observacion: "",
});

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

export function AsignacionTurnosPresentismoTab() {
  const { confirm, dialogs } = useConfirmDialog();
  const [turnos, setTurnos] = useState([]);
  const [empleados, setEmpleados] = useState([]);
  const [asigForm, setAsigForm] = useState(emptyAsignacion());
  const [asignaciones, setAsignaciones] = useState([]);
  const [loadingAsig, setLoadingAsig] = useState(false);

  const loadTurnos = async () => {
    try {
      const res = await getTurnosPresentismo({ page: 1, limit: 200, activo: true });
      setTurnos(res?.data || []);
    } catch {
      toast.error("No se pudieron cargar turnos");
    }
  };

  const loadEmpleados = async () => {
    try {
      const res = await getEmpleadosPresentismo({ page: 1, limit: 200, estado: "ACTIVO" });
      setEmpleados(res?.data || []);
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudieron cargar empleados");
    }
  };

  const loadAsignaciones = async (empleadoId) => {
    if (!empleadoId) {
      setAsignaciones([]);
      return;
    }
    try {
      setLoadingAsig(true);
      const res = await getAsignacionesTurno(empleadoId, {});
      setAsignaciones(Array.isArray(res) ? res : res?.data || []);
    } catch {
      toast.error("No se pudieron cargar asignaciones");
    } finally {
      setLoadingAsig(false);
    }
  };

  useEffect(() => {
    loadTurnos();
    loadEmpleados();
  }, []);

  useEffect(() => {
    loadAsignaciones(asigForm.empleado_id);
  }, [asigForm.empleado_id]);

  const saveAsignacion = async () => {
    if (!asigForm.empleado_id || !asigForm.turno_id) {
      return toast.error("Empleado y turno son obligatorios");
    }
    if (asigForm.tipo_asignacion === "OCASIONAL" && (!asigForm.fecha_inicio || !asigForm.fecha_fin)) {
      return toast.error("Las asignaciones ocasionales requieren fecha inicio y fecha fin");
    }

    try {
      const payload = {
        turno_id: asigForm.turno_id,
        tipo_asignacion: asigForm.tipo_asignacion,
        prioridad: Number(asigForm.prioridad || 100),
        observacion: asigForm.observacion || undefined,
      };
      if (asigForm.tipo_asignacion === "OCASIONAL") {
        payload.fecha_inicio = asigForm.fecha_inicio;
        payload.fecha_fin = asigForm.fecha_fin;
      }
      await asignarTurnoEmpleado(asigForm.empleado_id, payload);
      toast.success("Asignación creada");
      setAsigForm((p) => ({ ...emptyAsignacion(), empleado_id: p.empleado_id }));
      loadAsignaciones(asigForm.empleado_id);
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo asignar");
    }
  };

  const removeAsignacion = async (asign) => {
    const ok = await confirm({
      title: "Eliminar asignación",
      message: "¿Eliminar esta asignación de turno?",
      confirmText: "Eliminar",
      confirmColor: "error",
    });
    if (!ok) return;
    try {
      await eliminarAsignacionTurno(asign.empleado_id, asign.id);
      toast.success("Asignación eliminada");
      loadAsignaciones(asign.empleado_id);
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo eliminar");
    }
  };

  return (
    <>
      <FormPanel>
        <SectionTitle><Icon icon="lucide:user-check" /> Asignación de turnos a empleados</SectionTitle>
        <FieldsGrid $cols={4}>
          <Field $span={2}>
            <label>Empleado</label>
            <SearchableSelect
              options={empleados}
              value={asigForm.empleado_id}
              onChange={(id) => setAsigForm((p) => ({ ...p, empleado_id: id || "" }))}
              getOptionLabel={empleadoLabel}
              placeholder="Buscar empleado"
            />
          </Field>
          <Field $span={2}>
            <label>Turno</label>
            <SearchableSelect
              options={turnos}
              value={asigForm.turno_id}
              onChange={(id) => setAsigForm((p) => ({ ...p, turno_id: id || "" }))}
              getOptionLabel={(t) => `${t.nombre} (${t.tipo})`}
              placeholder="Buscar turno"
            />
          </Field>
          <Field>
            <label>Tipo asignación</label>
            <input value={asigForm.tipo_asignacion} onChange={(e) => setAsigForm((p) => ({ ...p, tipo_asignacion: e.target.value === "OCASIONAL" ? "OCASIONAL" : "PERPETUA" }))} />
          </Field>
          {asigForm.tipo_asignacion === "OCASIONAL" && (
            <>
              <Field>
                <label>Fecha inicio</label>
                <input type="date" value={asigForm.fecha_inicio} onChange={(e) => setAsigForm((p) => ({ ...p, fecha_inicio: e.target.value }))} />
              </Field>
              <Field>
                <label>Fecha fin</label>
                <input type="date" value={asigForm.fecha_fin} onChange={(e) => setAsigForm((p) => ({ ...p, fecha_fin: e.target.value }))} />
              </Field>
            </>
          )}
          <Field>
            <label>Prioridad</label>
            <input type="number" min="0" value={asigForm.prioridad} onChange={(e) => setAsigForm((p) => ({ ...p, prioridad: e.target.value }))} />
          </Field>
        </FieldsGrid>
        <Footer>
          <FooterActionButton type="button" $variant="primary" onClick={saveAsignacion}>
            <Icon icon="lucide:plus" /> Asignar turno
          </FooterActionButton>
        </Footer>
      </FormPanel>

      <ListPanel>
        <ListBody>
          <SectionTitle><Icon icon="lucide:list" /> Asignaciones</SectionTitle>
          {!asigForm.empleado_id ? (
            <RRHHEmptyState
              icon="lucide:user-round-search"
              titulo="Seleccioná un empleado"
              descripcion="Elegí primero un empleado activo para ver y administrar sus asignaciones de turno."
              guiaSeccion="presentismo"
            />
          ) : loadingAsig ? (
            <EmptyState>Cargando...</EmptyState>
          ) : (
            <TableWrap>
              <table>
                <thead>
                  <tr>
                    <th>Turno</th>
                    <th>Tipo</th>
                    <th>Inicio</th>
                    <th>Fin</th>
                    <th>Prioridad</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {asignaciones.map((a) => (
                    <tr key={a.id}>
                      <td>{a.turno?.nombre || "-"}</td>
                      <td>{a.tipo_asignacion}</td>
                      <td>{a.fecha_inicio ? String(a.fecha_inicio).slice(0, 10) : "-"}</td>
                      <td>{a.fecha_fin ? String(a.fecha_fin).slice(0, 10) : "-"}</td>
                      <td>{a.prioridad}</td>
                      <td>
                        <RowActions>
                          <Tooltip title="Eliminar">
                            <IconButton size="small" onClick={() => removeAsignacion(a)} sx={actionIconSx("error.main")}>
                              <Icon icon="lucide:trash-2" width={16} />
                            </IconButton>
                          </Tooltip>
                        </RowActions>
                      </td>
                    </tr>
                  ))}
                  {asignaciones.length === 0 && <tr><td colSpan={6}>Sin asignaciones para este empleado.</td></tr>}
                </tbody>
              </table>
            </TableWrap>
          )}
        </ListBody>
      </ListPanel>
      {dialogs}
    </>
  );
}