"use client";

import { useCallback, useEffect, useState } from "react";
import { Sparkles, Download, Save, AlertTriangle, Info, Lock, RefreshCw, ChevronDown, ChevronRight } from "lucide-react";
import { useToast, useConfirm } from "@/components/ui/DialogProvider";

// Panel de la propuesta consultiva: generar, revisar, editar y descargar.
//
// Regla de diseno deliberada: los avisos van ARRIBA de los botones de descarga.
// El objetivo es que revisar sea mas facil que aprobar, no al reves.

type Confianza = "confirmado" | "estimado" | "por_validar";
type Urgencia = "rojo" | "ambar" | "azul" | "verde";

interface Aviso {
  regla: string;
  severidad: "bloqueante" | "advertencia";
  mensaje: string;
  ruta?: string;
}

interface Propuesta {
  hechos: {
    citas: { id: string; textoLiteral: string; quienLoDijo: string }[];
    hechos: { id: string; enunciado: string; confianza: Confianza; citas: string[] }[];
    materialesPendientes: { texto: string; bloqueaEntrega: boolean }[];
    decisionesPendientes: { texto: string; quienDecide: string }[];
    mencionesFueraDeAlcance: string[];
    redFlags: { senal: string; severidad: string }[];
  };
  diagnostico: {
    hallazgos: { id: string; urgencia: Urgencia; titulo: string; descripcion: string; confianza: Confianza; citas: string[]; hechos: string[] }[];
    valorProblema: {
      dimensiones: { tipo: string; descripcion: string; calculo: { factores: { nombre: string; valor: number }[]; montoAnualMXN: number | null }; confianza: Confianza; hechos: string[] }[];
      notaMetodologia: string;
    };
    resultados: { enunciado: string; metrica: string; lineaBase: string | null; periodoMedicion: string }[];
  };
  redaccion: {
    hero: { titulo: string; subtitulo: string };
    citaDestacadaId: string;
    alcance: { refPartida: string; descripcionResultado: string }[];
    beneficios: { etiqueta: string; texto: string; hallazgoId: string }[];
    exclusiones: { texto: string; razon: string }[];
    backlogEvolucion: { problema: string; momentoSugerido: string }[];
    notasInternas: string[];
  };
}

const COLOR_URGENCIA: Record<Urgencia, string> = {
  rojo: "bg-red-500",
  ambar: "bg-amber-500",
  azul: "bg-blue-500",
  verde: "bg-green-500",
};
const ETIQUETA_URGENCIA: Record<Urgencia, string> = {
  rojo: "Problema critico",
  ambar: "Area de mejora",
  azul: "Oportunidad",
  verde: "Ventaja existente",
};

const INPUT = "w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-primary";

export default function PropuestaIAPanel({ cotizacionId }: { cotizacionId: string; numero?: string }) {
  const toast = useToast();
  const confirm = useConfirm();

  const [abierto, setAbierto] = useState(false);
  const [cargando, setCargando] = useState(true);
  const [generando, setGenerando] = useState(false);
  const [guardando, setGuardando] = useState(false);
  const [transcripcion, setTranscripcion] = useState("");
  const [propuesta, setPropuesta] = useState<Propuesta | null>(null);
  const [avisos, setAvisos] = useState<Aviso[]>([]);
  const [editada, setEditada] = useState(false);
  const [sucio, setSucio] = useState(false);

  const cargar = useCallback(async () => {
    try {
      const r = await fetch(`/api/propuesta-ia/${cotizacionId}`);
      const d = await r.json();
      if (d.propuesta) {
        setPropuesta(d.propuesta);
        setAvisos(Array.isArray(d.avisos) ? d.avisos : []);
        setEditada(Boolean(d.editada));
        setAbierto(true);
      }
    } finally {
      setCargando(false);
    }
  }, [cotizacionId]);

  useEffect(() => {
    void cargar();
  }, [cargar]);

  async function generar() {
    if (propuesta) {
      const ok = await confirm({
        title: "Regenerar la propuesta",
        message: "Se generara una propuesta nueva. La version actual y tus ediciones quedaran reemplazadas.",
        confirmText: "Regenerar",
        danger: true,
      });
      if (!ok) return;
    }
    setGenerando(true);
    try {
      const r = await fetch(`/api/propuesta-ia/${cotizacionId}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ transcripcion }),
      });
      const d = await r.json();
      if (!r.ok) {
        toast(d.error || "No se pudo generar la propuesta", "error");
        return;
      }
      setPropuesta(d.propuesta);
      setAvisos(Array.isArray(d.avisos) ? d.avisos : []);
      setEditada(false);
      setSucio(false);
      setAbierto(true);
      const bloqueantes = (d.avisos as Aviso[]).filter((a) => a.severidad === "bloqueante").length;
      toast(
        bloqueantes > 0
          ? `Propuesta generada con ${bloqueantes} aviso(s) que debes resolver antes de enviarla.`
          : "Propuesta generada. Revisala antes de enviarla.",
        bloqueantes > 0 ? "error" : "success"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "Error al generar", "error");
    } finally {
      setGenerando(false);
    }
  }

  async function guardar() {
    if (!propuesta) return;
    setGuardando(true);
    try {
      const r = await fetch(`/api/propuesta-ia/${cotizacionId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ propuesta }),
      });
      const d = await r.json();
      if (!r.ok) {
        toast(typeof d.error === "string" ? d.error : "No se pudo guardar", "error");
        return;
      }
      setAvisos(Array.isArray(d.avisos) ? d.avisos : []);
      setEditada(true);
      setSucio(false);
      toast("Cambios guardados y revalidados.", "success");
    } finally {
      setGuardando(false);
    }
  }

  /** Aplica un cambio al objeto y marca el panel como sucio. */
  function editar(fn: (p: Propuesta) => void) {
    setPropuesta((prev) => {
      if (!prev) return prev;
      const copia = structuredClone(prev) as Propuesta;
      fn(copia);
      return copia;
    });
    setSucio(true);
  }

  const bloqueantes = avisos.filter((a) => a.severidad === "bloqueante");
  const advertencias = avisos.filter((a) => a.severidad === "advertencia");
  const citaDestacada = propuesta?.hechos.citas.find((c) => c.id === propuesta.redaccion.citaDestacadaId);

  if (cargando) {
    return (
      <div className="bg-card-bg rounded-xl border border-border p-5">
        <p className="text-sm text-muted">Cargando propuesta consultiva...</p>
      </div>
    );
  }

  return (
    <div className="bg-card-bg rounded-xl border border-border overflow-hidden">
      <button
        onClick={() => setAbierto((v) => !v)}
        className="w-full flex items-center justify-between px-5 py-4 hover:bg-gray-50"
      >
        <span className="flex items-center gap-2 font-semibold">
          <Sparkles className="w-4 h-4 text-primary" />
          Propuesta consultiva con IA
          {editada && (
            <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-primary-light text-primary">
              editada por ti
            </span>
          )}
        </span>
        {abierto ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
      </button>

      {abierto && (
        <div className="px-5 pb-5 space-y-5 border-t border-border pt-5">
          {/* ── Entrada ── */}
          <div>
            <label className="block text-sm font-medium mb-1">Transcripcion de la reunion (opcional)</label>
            <p className="text-xs text-muted mb-2">
              Pega aqui lo que se dijo en la reunion de discovery. Sin transcripcion, la IA trabaja
              solo con las observaciones y notas de la cotizacion, y marcara mas cosas por validar.
            </p>
            <textarea
              value={transcripcion}
              onChange={(e) => setTranscripcion(e.target.value)}
              rows={4}
              placeholder="Pega la transcripcion..."
              className={INPUT}
            />
            <button
              onClick={generar}
              disabled={generando}
              className="mt-3 flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-white bg-primary hover:opacity-90 disabled:opacity-50"
            >
              {generando ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
              {generando ? "Generando (tarda un par de minutos)..." : propuesta ? "Regenerar" : "Generar propuesta"}
            </button>
          </div>

          {propuesta && (
            <>
              {/* ── Avisos: van ARRIBA de las descargas a proposito ── */}
              {bloqueantes.length > 0 && (
                <div className="rounded-lg border border-red-300 bg-red-50 p-4">
                  <p className="flex items-center gap-2 text-sm font-semibold text-red-800 mb-2">
                    <AlertTriangle className="w-4 h-4" />
                    {bloqueantes.length} aviso(s) que debes resolver antes de enviar
                  </p>
                  <ul className="space-y-1">
                    {bloqueantes.map((a, i) => (
                      <li key={i} className="text-xs text-red-800">
                        <span className="font-mono font-semibold">{a.regla}</span>
                        {a.ruta && <span className="text-red-600"> · {a.ruta}</span>} — {a.mensaje}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {advertencias.length > 0 && (
                <div className="rounded-lg border border-amber-300 bg-amber-50 p-4">
                  <p className="flex items-center gap-2 text-sm font-semibold text-amber-900 mb-2">
                    <Info className="w-4 h-4" />
                    {advertencias.length} cosa(s) que conviene revisar
                  </p>
                  <ul className="space-y-1">
                    {advertencias.map((a, i) => (
                      <li key={i} className="text-xs text-amber-900">
                        <span className="font-mono font-semibold">{a.regla}</span>
                        {a.ruta && <span className="opacity-70"> · {a.ruta}</span>} — {a.mensaje}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {avisos.length === 0 && (
                <div className="rounded-lg border border-green-300 bg-green-50 p-3">
                  <p className="text-sm text-green-800">Sin avisos de validacion. Revisa el contenido de todas formas.</p>
                </div>
              )}

              {/* ── Edicion ── */}
              <div className="space-y-4">
                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-1">Titulo</label>
                  <input
                    value={propuesta.redaccion.hero.titulo}
                    onChange={(e) => editar((p) => { p.redaccion.hero.titulo = e.target.value; })}
                    className={INPUT}
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-1">Subtitulo</label>
                  <textarea
                    value={propuesta.redaccion.hero.subtitulo}
                    onChange={(e) => editar((p) => { p.redaccion.hero.subtitulo = e.target.value; })}
                    rows={2}
                    className={INPUT}
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                    Hallazgos del diagnostico
                  </label>
                  <div className="space-y-3">
                    {propuesta.diagnostico.hallazgos.map((h, i) => (
                      <div key={h.id} className="border border-border rounded-lg p-3">
                        <div className="flex items-center gap-2 mb-2">
                          <span className={`w-2.5 h-2.5 rounded-full ${COLOR_URGENCIA[h.urgencia]}`} />
                          <span className="text-[11px] text-muted">
                            {ETIQUETA_URGENCIA[h.urgencia]} · {h.confianza.replace("_", " ")}
                          </span>
                        </div>
                        <input
                          value={h.titulo}
                          onChange={(e) => editar((p) => { p.diagnostico.hallazgos[i].titulo = e.target.value; })}
                          className={`${INPUT} mb-2 font-medium`}
                        />
                        <textarea
                          value={h.descripcion}
                          onChange={(e) => editar((p) => { p.diagnostico.hallazgos[i].descripcion = e.target.value; })}
                          rows={2}
                          className={INPUT}
                        />
                      </div>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                    Alcance (la descripcion; los precios los pone el sistema)
                  </label>
                  <div className="space-y-2">
                    {propuesta.redaccion.alcance.map((a, i) => (
                      <div key={a.refPartida} className="flex gap-2 items-start">
                        <span className="text-xs font-mono text-muted mt-2.5 shrink-0">{a.refPartida}</span>
                        <textarea
                          value={a.descripcionResultado}
                          onChange={(e) => editar((p) => { p.redaccion.alcance[i].descripcionResultado = e.target.value; })}
                          rows={2}
                          className={INPUT}
                        />
                      </div>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">Exclusiones</label>
                  <div className="space-y-2">
                    {propuesta.redaccion.exclusiones.map((ex, i) => (
                      <textarea
                        key={i}
                        value={ex.texto}
                        onChange={(e) => editar((p) => { p.redaccion.exclusiones[i].texto = e.target.value; })}
                        rows={2}
                        className={INPUT}
                      />
                    ))}
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                    Por que tiene sentido
                  </label>
                  <div className="space-y-2">
                    {propuesta.redaccion.beneficios.map((b, i) => (
                      <div key={i} className="flex gap-2 items-start">
                        <input
                          value={b.etiqueta}
                          onChange={(e) => editar((p) => { p.redaccion.beneficios[i].etiqueta = e.target.value; })}
                          className={`${INPUT} max-w-[9rem] shrink-0`}
                        />
                        <textarea
                          value={b.texto}
                          onChange={(e) => editar((p) => { p.redaccion.beneficios[i].texto = e.target.value; })}
                          rows={2}
                          className={INPUT}
                        />
                      </div>
                    ))}
                  </div>
                </div>

                {/* Los grupos de abajo tambien se imprimen al cliente, asi que tambien
                    pueden disparar un aviso bloqueante. Si no fueran editables, un
                    bloqueante ahi no tendria mas salida que regenerar la propuesta. */}

                {citaDestacada && (
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-1">
                      Cita destacada
                    </label>
                    <p className="text-xs text-muted mb-2">
                      Se imprime literal. Editala solo para quitar un dato sensible, nunca para
                      mejorarle la redaccion al cliente.
                    </p>
                    <textarea
                      value={citaDestacada.textoLiteral}
                      onChange={(e) =>
                        editar((p) => {
                          const c = p.hechos.citas.find((x) => x.id === p.redaccion.citaDestacadaId);
                          if (c) c.textoLiteral = e.target.value;
                        })
                      }
                      rows={2}
                      className={`${INPUT} mb-2`}
                    />
                    <input
                      value={citaDestacada.quienLoDijo}
                      onChange={(e) =>
                        editar((p) => {
                          const c = p.hechos.citas.find((x) => x.id === p.redaccion.citaDestacadaId);
                          if (c) c.quienLoDijo = e.target.value;
                        })
                      }
                      placeholder="Quien lo dijo (usa el rol, no el nombre)"
                      className={INPUT}
                    />
                  </div>
                )}

                {propuesta.diagnostico.valorProblema.dimensiones.length > 0 && (
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                      Lo que cuesta no resolverlo
                    </label>
                    <div className="space-y-2">
                      {propuesta.diagnostico.valorProblema.dimensiones.map((dim, i) => (
                        <div key={i} className="flex gap-2 items-start">
                          <span className="text-xs text-muted mt-2.5 shrink-0 w-20">{dim.tipo}</span>
                          <textarea
                            value={dim.descripcion}
                            onChange={(e) => editar((p) => { p.diagnostico.valorProblema.dimensiones[i].descripcion = e.target.value; })}
                            rows={2}
                            className={INPUT}
                          />
                        </div>
                      ))}
                    </div>
                    <textarea
                      value={propuesta.diagnostico.valorProblema.notaMetodologia}
                      onChange={(e) => editar((p) => { p.diagnostico.valorProblema.notaMetodologia = e.target.value; })}
                      rows={2}
                      placeholder="Nota de metodologia"
                      className={`${INPUT} mt-2`}
                    />
                  </div>
                )}

                {propuesta.diagnostico.resultados.length > 0 && (
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                      Resultados a lograr
                    </label>
                    <div className="space-y-2">
                      {propuesta.diagnostico.resultados.map((r, i) => (
                        <div key={i} className="space-y-1">
                          <textarea
                            value={r.enunciado}
                            onChange={(e) => editar((p) => { p.diagnostico.resultados[i].enunciado = e.target.value; })}
                            rows={2}
                            className={INPUT}
                          />
                          <div className="flex gap-2">
                            <input
                              value={r.metrica}
                              onChange={(e) => editar((p) => { p.diagnostico.resultados[i].metrica = e.target.value; })}
                              placeholder="Metrica"
                              className={INPUT}
                            />
                            <input
                              value={r.periodoMedicion}
                              onChange={(e) => editar((p) => { p.diagnostico.resultados[i].periodoMedicion = e.target.value; })}
                              placeholder="Periodo"
                              className={INPUT}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {(propuesta.hechos.materialesPendientes.length > 0 ||
                  propuesta.hechos.decisionesPendientes.length > 0) && (
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                      Que necesitamos de ustedes
                    </label>
                    <div className="space-y-2">
                      {propuesta.hechos.materialesPendientes.map((m, i) => (
                        <input
                          key={`mat-${i}`}
                          value={m.texto}
                          onChange={(e) => editar((p) => { p.hechos.materialesPendientes[i].texto = e.target.value; })}
                          className={INPUT}
                        />
                      ))}
                      {propuesta.hechos.decisionesPendientes.map((dd, i) => (
                        <div key={`dec-${i}`} className="flex gap-2">
                          <textarea
                            value={dd.texto}
                            onChange={(e) => editar((p) => { p.hechos.decisionesPendientes[i].texto = e.target.value; })}
                            rows={1}
                            className={INPUT}
                          />
                          <input
                            value={dd.quienDecide}
                            onChange={(e) => editar((p) => { p.hechos.decisionesPendientes[i].quienDecide = e.target.value; })}
                            placeholder="Quien decide"
                            className={`${INPUT} max-w-[11rem] shrink-0`}
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {propuesta.redaccion.backlogEvolucion.length > 0 && (
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wide text-muted mb-2">
                      Registrado para mas adelante
                    </label>
                    <div className="space-y-2">
                      {propuesta.redaccion.backlogEvolucion.map((b, i) => (
                        <div key={i} className="flex gap-2">
                          <textarea
                            value={b.problema}
                            onChange={(e) => editar((p) => { p.redaccion.backlogEvolucion[i].problema = e.target.value; })}
                            rows={1}
                            className={INPUT}
                          />
                          <input
                            value={b.momentoSugerido}
                            onChange={(e) => editar((p) => { p.redaccion.backlogEvolucion[i].momentoSugerido = e.target.value; })}
                            placeholder="Cuando"
                            className={`${INPUT} max-w-[11rem] shrink-0`}
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-border">
                <button
                  onClick={guardar}
                  disabled={!sucio || guardando}
                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-white bg-primary hover:opacity-90 disabled:opacity-40"
                >
                  <Save className="w-4 h-4" />
                  {guardando ? "Guardando..." : sucio ? "Guardar cambios" : "Sin cambios"}
                </button>

                {/* El servidor devuelve 409 si hay bloqueantes; aqui se refleja para no
                    invitar a un clic que va a fallar. La descarga del anexo interno
                    sigue disponible: es la que ayuda a entender que corregir. */}
                {bloqueantes.length > 0 ? (
                  <span
                    className="flex items-center gap-2 px-4 py-2 border border-border rounded-lg text-sm text-muted bg-gray-50 cursor-not-allowed"
                    title="Resuelve los avisos bloqueantes y guarda para habilitar la descarga"
                  >
                    <Download className="w-4 h-4" />
                    Propuesta consultiva (PDF) — bloqueada
                  </span>
                ) : (
                  <a
                    href={`/api/propuesta-ia/${cotizacionId}/pdf`}
                    className="flex items-center gap-2 px-4 py-2 border border-border rounded-lg text-sm hover:bg-gray-50"
                  >
                    <Download className="w-4 h-4" />
                    Propuesta consultiva (PDF)
                  </a>
                )}

                <a
                  href={`/api/propuesta-ia/${cotizacionId}/pdf?anexo=1`}
                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm border border-red-300 bg-red-50 text-red-800 hover:bg-red-100"
                  title="Contiene ponderacion, red flags y notas internas"
                >
                  <Lock className="w-4 h-4" />
                  Anexo interno — NO ENVIAR
                </a>

                {sucio && (
                  <span className="text-xs text-amber-700">
                    Tienes cambios sin guardar. El PDF se genera con lo ultimo guardado.
                  </span>
                )}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}