import { useEffect, useState } from "react";
import {
  Alert,
  Box,
  Button,
  Chip,
  Container,
  Divider,
  FormControlLabel,
  MenuItem,
  Paper,
  Skeleton,
  Stack,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import { ScreenGuia } from "../../components/_standards";
import ModoCarteraBadge from "../../components/cartera-inteligente/ModoCarteraBadge";
import OnboardingWizard from "../../components/cartera-inteligente/OnboardingWizard";
import { usePermission } from "../../hooks/usePermission";
import {
  actualizarCarteraConfig,
  getCarteraConfig,
} from "../../api/cartera.service";

const MODOS_OPERATIVOS = [
  {
    value: "operacional",
    label: "Operacional",
    desc: "El equipo trabaja todo desde Cartera Inteligente. Es la fuente de verdad.",
  },
  {
    value: "co-pilot",
    label: "Co-pilot (sólo recomendaciones)",
    desc: "El equipo sigue trabajando en el sistema actual. El módulo da worklist + sugerencias IA.",
  },
  {
    value: "hibrido",
    label: "Híbrido",
    desc: "Mix configurable: algunas features acá, otras en el sistema actual.",
  },
];

export default function CarteraInteligenteHub() {
  const qc = useQueryClient();
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const canVer = canCobranzas("COB_CART_VER");
  const canConfigurar = canCobranzas("COB_CART_CONFIGURAR");

  const { data: config, isLoading } = useQuery({
    queryKey: ["cartera", "config"],
    queryFn: getCarteraConfig,
    enabled: canVer,
  });

  const necesitaOnboarding = !!config && !config.onboarding_completado_en && canConfigurar;

  const [form, setForm] = useState({
    modo_operativo: "operacional",
    fuente_default: "erp-novasis",
    recomendaciones_auto_activas: false,
    recomendaciones_auto_hora: 7,
    marca_nombre: "",
    marca_logo_url: "",
    marca_color_primario: "",
  });

  useEffect(() => {
    if (config) {
      setForm({
        modo_operativo: config.modo_operativo,
        fuente_default: config.fuente_default,
        recomendaciones_auto_activas: !!config.recomendaciones_auto_activas,
        recomendaciones_auto_hora: config.recomendaciones_auto_hora ?? 7,
        marca_nombre: config.marca_nombre ?? "",
        marca_logo_url: config.marca_logo_url ?? "",
        marca_color_primario: config.marca_color_primario ?? "",
      });
    }
  }, [config]);

  const guardar = useMutation({
    mutationFn: () => actualizarCarteraConfig(form),
    onSuccess: () => {
      toast.success("Configuración guardada");
      qc.invalidateQueries({ queryKey: ["cartera", "config"] });
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message ?? "Error al guardar");
    },
  });

  if (!canVer) {
    return (
      <Container maxWidth="xl" sx={{ py: 3 }}>
        <Typography variant="body2" color="text.secondary">
          No tenés permisos para ver esta sección.
        </Typography>
      </Container>
    );
  }

  if (isLoading) {
    return (
      <Container maxWidth="lg" sx={{ py: 3 }}>
        <Stack spacing={2}>
          <Skeleton variant="rounded" height={80} />
          <Skeleton variant="rounded" height={120} />
          <Skeleton variant="rounded" height={120} />
          <Skeleton variant="rounded" height={120} />
        </Stack>
      </Container>
    );
  }

  const modoDesc = MODOS_OPERATIVOS.find((m) => m.value === form.modo_operativo)?.desc;

  return (
    <Container maxWidth="lg" sx={{ py: 3 }}>
      {/* Hero header */}
      <Paper
        elevation={0}
        sx={{
          p: 3,
          mb: 2,
          borderRadius: 2,
          border: 1,
          borderColor: "divider",
          background: (theme) =>
            theme.palette.mode === "dark"
              ? "linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(168,85,247,0.05) 100%)"
              : "linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.04) 100%)",
        }}
      >
        <Stack direction="row" alignItems="center" spacing={2}>
          {config?.marca_logo_url ? (
            <Box
              component="img"
              src={config.marca_logo_url}
              alt={config.marca_nombre || "Logo"}
              sx={{
                width: 56,
                height: 56,
                borderRadius: 2,
                objectFit: "contain",
                bgcolor: "background.paper",
                boxShadow: 3,
                p: 0.5,
              }}
              onError={(e) => {
                e.currentTarget.style.display = "none";
              }}
            />
          ) : (
            <Box
              sx={{
                width: 56,
                height: 56,
                borderRadius: 2,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                bgcolor: config?.marca_color_primario || "primary.main",
                color: "primary.contrastText",
                boxShadow: 3,
              }}
            >
              <Icon icon="lucide:brain" width={32} />
            </Box>
          )}
          <Box sx={{ flex: 1 }}>
            <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
              <Typography variant="h5" fontWeight={700}>
                {config?.marca_nombre || "Cartera Inteligente"}
              </Typography>
              <ModoCarteraBadge modo={form.modo_operativo} />
            </Stack>
            <Typography variant="body2" color="text.secondary" mt={0.5}>
              {config?.marca_nombre
                ? "Plataforma de cobranza inteligente"
                : "Capa de cobranza inteligente: worklist priorizada, recomendaciones IA, campañas masivas y webhooks."}
            </Typography>
          </Box>
        </Stack>
      </Paper>

      <ScreenGuia titulo="¿Cómo funciona Cartera Inteligente?">
        <Typography variant="body2" component="div">
          Configurás cómo querés operar y el módulo adapta el comportamiento:
          <ul style={{ marginTop: 8, marginBottom: 8 }}>
            <li><strong>Operacional:</strong> usás Cartera Inteligente para todo (worklist + gestiones + cobros).</li>
            <li><strong>Co-pilot:</strong> seguís usando tu flujo actual; el módulo te da recomendaciones IA sobre a quién contactar y cómo.</li>
            <li><strong>Híbrido:</strong> combinás ambos modos por feature.</li>
          </ul>
          La fuente de datos por defecto define de dónde lee la cartera. Para clientes del ERP es <code>erp-novasis</code> (lee de facturas + cuotas existentes).
        </Typography>
      </ScreenGuia>

      {/* Sección: Operación diaria */}
      <Typography variant="overline" color="text.secondary" sx={{ mt: 3, display: "block", fontWeight: 700, letterSpacing: 0.5 }}>
        Operación diaria
      </Typography>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(3, 1fr)" },
          gap: 2,
          mt: 1,
        }}
      >
        <HubTile
          to="/cartera-inteligente/mi-dia"
          icon="lucide:calendar-days"
          iconColor="primary.main"
          title="Mi día"
          desc="Agenda priorizada del día con seguimientos, cuentas críticas y resumen IA."
          accent="primary.main"
          badge="Entrada recomendada"
        />
        <HubTile
          to="/cartera-inteligente/worklist"
          icon="lucide:list-checks"
          iconColor="info.main"
          title="Worklist"
          desc="Cuentas pendientes priorizadas por mora desde la fuente configurada."
        />
        <HubTile
          to="/cartera-inteligente/dashboard"
          icon="lucide:bar-chart-3"
          iconColor="secondary.main"
          title="Dashboard"
          desc="KPIs agregados: tasa de mora, cumplimiento de promesas, tendencias."
        />
        <HubTile
          to="/cartera-inteligente/promesas"
          icon="lucide:handshake"
          iconColor="warning.main"
          title="Promesas"
          desc="Compromisos del cliente con recordatorio D-1 automático vía Twilio."
        />
        <HubTile
          to="/cartera-inteligente/campanas"
          icon="lucide:megaphone"
          iconColor="success.main"
          title="Campañas"
          desc="Envío masivo WhatsApp/SMS con templates dinámicos y tracking."
        />
        <HubTile
          to="/cartera-inteligente/importar"
          icon="lucide:upload"
          iconColor="text.primary"
          title="Importar cartera"
          desc="Excel/CSV con cartera externa si no usás el ERP completo."
          disabled={!canConfigurar}
        />
      </Box>

      {/* Sección: Integraciones */}
      <Typography variant="overline" color="text.secondary" sx={{ mt: 4, display: "block", fontWeight: 700, letterSpacing: 0.5 }}>
        Integraciones
      </Typography>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" },
          gap: 2,
          mt: 1,
        }}
      >
        <HubTile
          to="/cartera-inteligente/webhooks"
          icon="lucide:webhook"
          iconColor="info.main"
          title="Webhooks salientes"
          desc="URLs que reciben eventos firmados HMAC: gestión, promesa, cobro, campaña."
        />
        <HubTile
          to="/cartera-inteligente/api-keys"
          icon="lucide:plug"
          iconColor="info.main"
          title="API REST"
          desc="Endpoints para que tu sistema externo sincronice cartera + notifique cobros/gestiones."
        />
      </Box>

      <Typography variant="overline" color="text.secondary" sx={{ mt: 4, display: "block", fontWeight: 700, letterSpacing: 0.5 }}>
        Configuración del tenant
      </Typography>

      <Paper variant="outlined" sx={{ p: 3, mt: 2 }}>
        <Stack spacing={2}>
          <Typography variant="subtitle1" fontWeight={700}>
            Configuración operativa
          </Typography>
          <Divider />
          <TextField
            select
            label="Modo operativo"
            value={form.modo_operativo}
            onChange={(e) => setForm((f) => ({ ...f, modo_operativo: e.target.value }))}
            disabled={!canConfigurar}
            size="small"
            fullWidth
          >
            {MODOS_OPERATIVOS.map((m) => (
              <MenuItem key={m.value} value={m.value}>
                {m.label}
              </MenuItem>
            ))}
          </TextField>
          {modoDesc && (
            <Alert severity="info" sx={{ fontSize: 13 }}>
              {modoDesc}
            </Alert>
          )}
          <TextField
            select
            label="Fuente de datos (default)"
            value={form.fuente_default}
            onChange={(e) => setForm((f) => ({ ...f, fuente_default: e.target.value }))}
            disabled={!canConfigurar}
            size="small"
            fullWidth
            helperText="De dónde lee la cartera el worklist"
          >
            <MenuItem value="erp-novasis">ERP Novasis (facturas + cuotas)</MenuItem>
            <MenuItem value="cartera-importada">Cartera importada (Excel)</MenuItem>
          </TextField>

          <Divider sx={{ my: 1 }}>
            <Typography variant="caption" color="text.secondary" fontWeight={700} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
              Recomendaciones IA automáticas
            </Typography>
          </Divider>

          <FormControlLabel
            control={
              <Switch
                checked={form.recomendaciones_auto_activas}
                onChange={(e) => setForm((f) => ({ ...f, recomendaciones_auto_activas: e.target.checked }))}
                disabled={!canConfigurar}
              />
            }
            label={
              <Box>
                <Typography variant="body2" fontWeight={600}>
                  Generar resumen IA del día automáticamente
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  Un cron diario genera el resumen y dispara webhooks <code>recomendacion.alta_prioridad</code> por cada cliente priorizado. Consume tokens IA.
                </Typography>
              </Box>
            }
            sx={{ alignItems: "flex-start", m: 0 }}
          />

          {form.recomendaciones_auto_activas && (
            <TextField
              select
              size="small"
              label="Hora de ejecución"
              value={form.recomendaciones_auto_hora}
              onChange={(e) => setForm((f) => ({ ...f, recomendaciones_auto_hora: Number(e.target.value) }))}
              disabled={!canConfigurar}
              helperText="Hora del día (zona horaria del servidor) en la que corre el cron"
              sx={{ maxWidth: 240 }}
            >
              {Array.from({ length: 24 }, (_, h) => (
                <MenuItem key={h} value={h}>
                  {String(h).padStart(2, "0")}:00
                </MenuItem>
              ))}
            </TextField>
          )}

          <Divider sx={{ my: 1 }}>
            <Typography variant="caption" color="text.secondary" fontWeight={700} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
              Marca (white-label)
            </Typography>
          </Divider>

          <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
            <TextField
              size="small"
              label="Nombre de la marca"
              value={form.marca_nombre ?? ""}
              onChange={(e) => setForm((f) => ({ ...f, marca_nombre: e.target.value }))}
              disabled={!canConfigurar}
              placeholder="Cartera Inteligente"
              helperText="Reemplaza el título en el header"
              fullWidth
            />
            <TextField
              size="small"
              label="Color primario"
              value={form.marca_color_primario ?? ""}
              onChange={(e) => setForm((f) => ({ ...f, marca_color_primario: e.target.value }))}
              disabled={!canConfigurar}
              placeholder="#4F46E5"
              helperText="Color hex (futuro)"
              sx={{ minWidth: 200 }}
            />
          </Stack>
          <TextField
            size="small"
            label="URL del logo"
            value={form.marca_logo_url ?? ""}
            onChange={(e) => setForm((f) => ({ ...f, marca_logo_url: e.target.value }))}
            disabled={!canConfigurar}
            placeholder="https://cdn.tuempresa.com/logo.png"
            helperText="Logo cuadrado, mínimo 128×128. Si está vacío se usa el ícono cerebro."
            fullWidth
          />

          <Box>
            <Button
              variant="contained"
              disabled={!canConfigurar || guardar.isPending}
              startIcon={<Icon icon="lucide:save" width={18} />}
              onClick={() => guardar.mutate()}
            >
              {guardar.isPending ? "Guardando…" : "Guardar configuración"}
            </Button>
          </Box>
        </Stack>
      </Paper>

      <OnboardingWizard open={necesitaOnboarding} onComplete={() => qc.invalidateQueries({ queryKey: ["cartera", "config"] })} />
    </Container>
  );
}

// eslint-disable-next-line react/prop-types
function HubTile({ to, icon, iconColor, title, desc, accent, badge, disabled = false }) {
  const inner = (
    <Paper
      elevation={0}
      sx={{
        p: 2.5,
        height: "100%",
        borderRadius: 2,
        border: 1,
        borderColor: "divider",
        position: "relative",
        overflow: "hidden",
        cursor: disabled ? "default" : "pointer",
        opacity: disabled ? 0.55 : 1,
        transition: "all 0.2s",
        "&:hover": !disabled
          ? {
              borderColor: accent ?? iconColor,
              boxShadow: 3,
              transform: "translateY(-2px)",
            }
          : undefined,
        ...(accent && {
          "&::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: 3,
            bgcolor: accent,
          },
        }),
      }}
    >
      <Stack direction="row" alignItems="flex-start" spacing={2}>
        <Box
          sx={{
            width: 44,
            height: 44,
            borderRadius: 1.5,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            bgcolor: (theme) => {
              const palette = theme.palette;
              const key = iconColor.split(".")[0];
              const tone = palette[key]?.main ?? palette.text.primary;
              return `${tone}15`;
            },
            color: iconColor,
            flexShrink: 0,
          }}
        >
          <Icon icon={icon} width={22} />
        </Box>
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
            <Typography variant="subtitle1" fontWeight={700}>
              {title}
            </Typography>
            {badge && (
              <Chip
                size="small"
                label={badge}
                color="primary"
                variant="outlined"
                sx={{ height: 18, fontSize: 9, fontWeight: 700 }}
              />
            )}
            {disabled && (
              <Chip size="small" label="Próximamente" variant="outlined" sx={{ height: 18, fontSize: 9 }} />
            )}
          </Stack>
          <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 0.5, lineHeight: 1.4 }}>
            {desc}
          </Typography>
        </Box>
      </Stack>
    </Paper>
  );

  if (disabled) return inner;
  return (
    <Link to={to} style={{ textDecoration: "none", color: "inherit" }}>
      {inner}
    </Link>
  );
}