import { Icon } from "@iconify/react";
import {
  Box,
  Chip,
  Collapse,
  Divider,
  Grid,
  IconButton,
  Paper,
  Stack,
  Tooltip,
  Typography,
} from "@mui/material";
import { useState } from "react";

const PASOS = [
  {
    icon: "mdi:account-search",
    color: "#4f8ef7",
    titulo: "1. Seleccionar cliente",
    desc: "Buscá por nombre, RUC o CI en el panel izquierdo. Navegá con ↑↓ del teclado. Si tiene varias cuentas, elegí la factura con los chips de «Cuenta a editar».",
  },
  {
    icon: "mdi:currency-usd-off",
    color: "#a78bfa",
    titulo: "2. Ajustar saldo",
    desc: "El campo «Saldo pendiente (editable)» refleja lo que debe el cliente. Corregilo si el importe en el sistema no coincide con el real — el saldo del cliente se actualiza automáticamente al guardar.",
  },
  {
    icon: "mdi:refresh",
    color: "#f59e0b",
    titulo: "3. Regenerar cuotas",
    desc: "Elegí una condición de pago (preset) o configurá frecuencia y cantidad de cuotas manualmente. El primer vencimiento se auto-calcula pero podés editarlo. «Regenerar» reemplaza las cuotas pendientes sin tocar las que ya tienen cobros.",
  },
  {
    icon: "mdi:check-circle-outline",
    color: "#22c55e",
    titulo: "4. Guardar y avanzar",
    desc: "«Guardar y Siguiente» graba el saldo, marca al cliente como revisado (✓ verde) y pasa al siguiente. «Siguiente sin guardar» avanza sin modificar nada. «Marcar como Pagada» cierra la cuenta con saldo cero sin generar recibo.",
  },
  {
    icon: "mdi:check-decagram-outline",
    color: "#ef4444",
    titulo: "5. Marcar NC como consumida",
    desc: "Bajo el bloque de cuentas aparecen las Notas de Crédito disponibles del cliente. Si una NC ya fue aplicada fuera del sistema (cobro previo a la migración, ajuste manual, etc.), tocá «Marcar consumida» para anular su saldo y que deje de aparecer en recibos multi-factura.",
  },
];

const NOTAS = [
  { icon: "mdi:shield-check-outline", text: "Las cuotas con cobros registrados nunca son eliminadas por «Regenerar Cuotas» — el sistema las protege automáticamente." },
  { icon: "mdi:account-check-outline", text: "«Guardar y Siguiente» marca al cliente con ✓ verde en la lista. Filtrá los revisados para saber cuánto avanzaste." },
  { icon: "mdi:cash-off", text: "«Marcar como Pagada» es un ajuste contable manual: cierra saldo y cuotas pendientes sin crear recibo ni movimiento de caja. Usalo cuando el pago se realizó fuera del sistema." },
  { icon: "mdi:check-decagram-outline", text: "«Marcar consumida» en una NC pone su saldo disponible en 0 y la quita del wizard de recibos multi-factura. Es un ajuste manual sin recibo asociado — usalo solo para NC ya aplicadas fuera del sistema o importadas de Marangatu que pertenecen a períodos previos a la migración." },
  { icon: "mdi:file-document-multiple-outline", text: "Las NC importadas desde Marangatu vienen con modo «ESTRICTO» si encontraron su factura asociada por CDC, o «FLEXIBLE» si quedaron libres para aplicar a cualquier factura desde Recibos Multi-Facturas." },
  { icon: "mdi:calculator-variant-outline", text: "El monto por cuota se calcula automáticamente con redondeo al millar (≥10.000) o centena (≥1.000). La última cuota absorbe la diferencia por redondeo." },
  { icon: "mdi:calendar-clock", text: "El primer vencimiento se auto-sugiere como hoy + el intervalo de la frecuencia o condición elegida, pero podés cambiarlo libremente." },
  { icon: "mdi:keyboard", text: "Navegación rápida: usá ↑↓ del teclado para moverte entre clientes sin usar el mouse. Ideal para revisar muchos clientes seguidos." },
  { icon: "mdi:filter-outline", text: "Activá «Solo migrados desde Access» para trabajar únicamente con cuentas históricas importadas de sistemas anteriores." },
];

export function RevisionCxCGuia() {
  const [open, setOpen] = useState(false);

  return (
    <Paper variant="outlined" sx={{ overflow: "hidden", mb: 1.5 }}>
      <Box
        sx={{ px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1.5, cursor: "pointer", userSelect: "none" }}
        onClick={() => setOpen((v) => !v)}
      >
        <Icon icon="mdi:information-outline" width={20} color="#60a5fa" />
        <Typography variant="subtitle2" fontWeight={600} sx={{ flex: 1 }}>
          ¿Cómo funciona Revisión CxC?
        </Typography>
        <Chip size="small" label={open ? "Ocultar" : "Ver guía"} variant="outlined" sx={{ fontSize: "0.7rem" }} />
        <Tooltip title={open ? "Ocultar guía" : "Ver guía"}>
          <IconButton size="small" onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}>
            <Icon icon={open ? "mdi:chevron-up" : "mdi:chevron-down"} width={18} />
          </IconButton>
        </Tooltip>
      </Box>

      <Collapse in={open}>
        <Divider />
        <Box sx={{ px: 2.5, py: 2 }}>
          <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 2 }}>
            Esta pantalla permite revisar, corregir y replanificar las cuentas a cobrar de clientes — especialmente útil para sanear datos migrados desde sistemas anteriores y ajustar saldos o cuotas que no reflejan la realidad.
          </Typography>

          <Grid container spacing={2} sx={{ mb: 2.5 }}>
            {PASOS.map((p) => (
              <Grid item xs={12} sm={6} md={3} key={p.titulo}>
                <Paper
                  variant="outlined"
                  sx={{ p: 1.5, height: "100%", borderLeft: `3px solid ${p.color}` }}
                >
                  <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 0.75 }}>
                    <Icon icon={p.icon} width={18} color={p.color} />
                    <Typography variant="caption" fontWeight={700}>{p.titulo}</Typography>
                  </Stack>
                  <Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.5 }}>
                    {p.desc}
                  </Typography>
                </Paper>
              </Grid>
            ))}
          </Grid>

          <Divider sx={{ mb: 1.5 }} />

          <Typography variant="caption" fontWeight={600} color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: 0.5, display: "block", mb: 1 }}>
            Consideraciones importantes
          </Typography>

          <Stack spacing={0.75}>
            {NOTAS.map((n, i) => (
              <Stack key={i} direction="row" spacing={1} alignItems="flex-start">
                <Icon icon={n.icon} width={15} style={{ marginTop: 2, flexShrink: 0, color: "#94a3b8" }} />
                <Typography variant="caption" color="text.secondary">{n.text}</Typography>
              </Stack>
            ))}
          </Stack>
        </Box>
      </Collapse>
    </Paper>
  );
}