import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Chip,
  Collapse,
  Divider,
  Paper,
  Stack,
  Tooltip,
  Typography,
} from "@mui/material";
import { useState } from "react";
import { useRRHHContext } from "./RRHHContext";
import { RRHH_PREREQS } from "./rrhhPrereqs";

/**
 * Muestra una tarjeta de prerrequisitos en la parte superior de la pestaña.
 * `tabKey` debe coincidir con las claves de RRHH_PREREQS.
 * `overrides` permite pasar checks adicionales resueltos localmente (ej: liquidación cerrada).
 */
export function RRHHPrereqChecklist({ tabKey, overrides = {} }) {
  const { prereqs, setActiveTab } = useRRHHContext();
  const [open, setOpen] = useState(true);
  const defs = RRHH_PREREQS[tabKey];
  if (!defs || defs.length === 0) return null;

  const items = defs.map((d) => ({
    ...d,
    ok: overrides[d.key] !== undefined ? overrides[d.key] : prereqs[d.key] ?? false,
  }));

  const faltantes = items.filter((i) => !i.ok);
  if (prereqs.loading) return null;
  if (faltantes.length === 0) return null;

  return (
    <Paper
      variant="outlined"
      sx={{ mb: 2, borderColor: "warning.light", overflow: "hidden" }}
    >
      <Box
        sx={{
          px: 2.5,
          py: 1.25,
          display: "flex",
          alignItems: "center",
          gap: 1,
          cursor: "pointer",
          bgcolor: "warning.50",
          userSelect: "none",
        }}
        onClick={() => setOpen((v) => !v)}
      >
        <Icon icon="mdi:alert-circle-outline" width={18} color="#f59e0b" />
        <Typography variant="subtitle2" fontWeight={600} sx={{ flex: 1, color: "warning.dark" }}>
          Completá estos pasos antes de continuar
        </Typography>
        <Chip
          size="small"
          label={`${faltantes.length} pendiente${faltantes.length > 1 ? "s" : ""}`}
          color="warning"
          sx={{ fontSize: "0.7rem" }}
        />
        <Icon icon={open ? "mdi:chevron-up" : "mdi:chevron-down"} width={18} style={{ color: "#92400e" }} />
      </Box>

      <Collapse in={open}>
        <Divider />
        <Stack spacing={0} divider={<Divider />}>
          {items.map((item) => (
            <Stack
              key={item.key}
              direction="row"
              alignItems="center"
              spacing={1.5}
              sx={{ px: 2.5, py: 1.25, bgcolor: item.ok ? "success.50" : "background.paper" }}
            >
              <Icon
                icon={item.ok ? "mdi:check-circle" : "mdi:circle-outline"}
                width={18}
                color={item.ok ? "#22c55e" : "#d1d5db"}
              />
              <Box sx={{ flex: 1 }}>
                <Typography variant="body2" fontWeight={item.ok ? 400 : 500} color={item.ok ? "text.disabled" : "text.primary"}>
                  {item.label}
                </Typography>
                {!item.ok && item.hint && (
                  <Typography variant="caption" color="text.disabled">
                    {item.hint}
                  </Typography>
                )}
              </Box>
              {!item.ok && item.tabDestino && setActiveTab && (
                <Tooltip title={item.hint || `Ir a: ${item.tabDestino}`}>
                  <Button
                    size="small"
                    variant="outlined"
                    color="warning"
                    endIcon={<Icon icon="mdi:arrow-right" width={14} />}
                    onClick={() => setActiveTab(item.tabDestino, item.subTabDestino)}
                    sx={{ whiteSpace: "nowrap", fontSize: "0.72rem" }}
                  >
                    Ir a configurar
                  </Button>
                </Tooltip>
              )}
              {item.ok && (
                <Chip size="small" label="Listo" color="success" variant="outlined" sx={{ fontSize: "0.68rem" }} />
              )}
            </Stack>
          ))}
        </Stack>
      </Collapse>
    </Paper>
  );
}