import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  MenuItem,
  Paper,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { getAiConfig, upsertAiConfig, testAiConexion, listarModelosIA } from "../../../api/ai-dashboard.service";

const PROVIDERS = [
  { id: "anthropic", label: "Anthropic (Claude)" },
  { id: "openai", label: "OpenAI (ChatGPT)" },
  { id: "deepseek", label: "DeepSeek" },
];
const msgError = (e, fb) => e?.response?.data?.mensaje || e?.response?.data?.message || e?.message || fb;

/**
 * Credencial de IA de la plataforma (holding). Edita el ai_empresa_config del holding:
 * la usan las empresas en modo PLATAFORMA para dashboard, conciliación, cartera y tesorería.
 * (El asistente NovaIA/Ayuda se configura en su propia pestaña por requerir embeddings.)
 */
export const CredencialPlataforma = () => {
  const theme = useTheme();
  const [cargando, setCargando] = useState(true);
  const [tieneKey, setTieneKey] = useState(false);
  const [form, setForm] = useState({ proveedor: "anthropic", modelo: "", api_key: "" });
  const [modelos, setModelos] = useState([]);
  const [cargandoModelos, setCargandoModelos] = useState(false);
  const [testResult, setTestResult] = useState(null);
  const [probando, setProbando] = useState(false);
  const [guardando, setGuardando] = useState(false);

  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));

  useEffect(() => {
    getAiConfig()
      .then((cfg) => {
        if (cfg) {
          setForm({ proveedor: cfg.proveedor || "anthropic", modelo: cfg.modelo || "", api_key: "" });
          setTieneKey(!!cfg.tiene_api_key);
        }
      })
      .catch(() => {})
      .finally(() => setCargando(false));
  }, []);

  const cargarModelos = async () => {
    setCargandoModelos(true);
    try {
      const r = await listarModelosIA({ proveedor: form.proveedor, api_key: form.api_key || undefined });
      setModelos(r.modelos || []);
    } catch {
      setModelos([]);
    } finally {
      setCargandoModelos(false);
    }
  };
  useEffect(() => { cargarModelos(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [form.proveedor]);

  const probar = async () => {
    setProbando(true);
    try {
      const r = await testAiConexion({ proveedor: form.proveedor, modelo: form.modelo, api_key: form.api_key || undefined });
      setTestResult({ ok: r.ok !== false, msg: r.mensaje || "Conexión exitosa" });
    } catch (e) {
      setTestResult({ ok: false, msg: msgError(e, "Error de conexión") });
    } finally {
      setProbando(false);
    }
  };

  const guardar = async () => {
    if (!form.modelo) return toast.error("Elegí un modelo");
    setGuardando(true);
    try {
      await upsertAiConfig({ proveedor: form.proveedor, modelo: form.modelo, ...(form.api_key ? { api_key: form.api_key } : {}) });
      toast.success("Credencial de plataforma guardada");
      setForm((p) => ({ ...p, api_key: "" }));
      setTieneKey(true);
      // Verificar con la key guardada.
      probar();
    } catch (e) {
      toast.error(msgError(e, "No se pudo guardar la credencial"));
    } finally {
      setGuardando(false);
    }
  };

  return (
    <Paper variant="outlined" sx={{ p: 2.5, mb: 2.5, borderRadius: 2, borderColor: theme.palette.primary.main + "40" }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 0.5 }}>
        <Icon icon="mdi:key-chain" width={20} color={theme.palette.primary.main} />
        <Typography variant="subtitle1" fontWeight={700}>Credencial de IA de la plataforma</Typography>
      </Box>
      <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 2 }}>
        La usan las empresas en modo <b>Plataforma</b> para dashboard, conciliación, cartera y tesorería. El costo es del holding.
      </Typography>

      {cargando ? (
        <Box sx={{ display: "grid", placeItems: "center", py: 3 }}><CircularProgress size={22} /></Box>
      ) : (
        <>
          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
            <TextField
              select size="small" label="Proveedor" value={form.proveedor}
              onChange={(e) => { set("proveedor", e.target.value); set("modelo", ""); }}
              sx={{ flex: "1 1 200px" }}
            >
              {PROVIDERS.map((p) => <MenuItem key={p.id} value={p.id}>{p.label}</MenuItem>)}
            </TextField>
            <TextField
              select size="small" label="Modelo" value={form.modelo}
              onChange={(e) => set("modelo", e.target.value)} sx={{ flex: "1 1 220px" }}
              disabled={cargandoModelos}
              helperText={cargandoModelos ? "Cargando modelos…" : `${modelos.length} modelos disponibles`}
            >
              {modelos.length === 0 && <MenuItem value="">—</MenuItem>}
              {modelos.map((m) => <MenuItem key={m.id} value={m.id}>{m.nombre || m.id}</MenuItem>)}
            </TextField>
          </Box>

          <TextField
            size="small" fullWidth type="password" label="API Key" sx={{ mt: 1.5 }}
            placeholder={tieneKey ? "••••••••••• (configurada)" : "Ingresá la API key del holding"}
            value={form.api_key}
            onChange={(e) => set("api_key", e.target.value)}
            helperText={
              form.proveedor === "anthropic" ? "console.anthropic.com"
                : form.proveedor === "deepseek" ? "platform.deepseek.com"
                : "platform.openai.com"
            }
            InputProps={{
              endAdornment: (
                <Button size="small" onClick={cargarModelos} disabled={cargandoModelos} sx={{ whiteSpace: "nowrap" }}
                  startIcon={<Icon icon="mdi:refresh" width={14} />}>
                  Cargar modelos
                </Button>
              ),
            }}
          />

          <Box sx={{ display: "flex", gap: 1.5, alignItems: "center", mt: 1.5, flexWrap: "wrap" }}>
            <Button variant="outlined" size="small" disabled={probando || (!form.api_key && !tieneKey)}
              startIcon={probando ? <CircularProgress size={14} /> : <Icon icon="mdi:connection" />} onClick={probar}>
              Probar conexión
            </Button>
            <Button variant="contained" size="small" disabled={guardando}
              startIcon={guardando ? <CircularProgress size={14} color="inherit" /> : <Icon icon="mdi:content-save" />} onClick={guardar}>
              Guardar credencial
            </Button>
            {testResult && (
              <Chip size="small" color={testResult.ok ? "success" : "error"} variant="outlined"
                icon={<Icon icon={testResult.ok ? "mdi:check-circle" : "mdi:alert-circle"} width={14} />}
                label={testResult.msg} sx={{ maxWidth: 420 }} />
            )}
          </Box>
        </>
      )}
    </Paper>
  );
};