import React, { useEffect, useState } from "react"
import { supabase } from "@/auth/supabase"
import type { PlanTextFields } from "../planes/academic-sections";

// 🔹 SIMULACIÓN DE ICONO LUCIDE-REACT
const Paperclip = (props) => (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-paperclip">
        <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
    </svg>
);

// 🔹 SIMULACIÓN DE SHADCN/UI
const Dialog = ({ open, onOpenChange, children }) => open ? <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onOpenChange}>{children}</div> : null;
const DialogContent = ({ className, children }) => <div className={`bg-white rounded-xl shadow-2xl transform transition-all max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col ${className}`} onClick={(e) => e.stopPropagation()}>{children}</div>;
const DialogHeader = ({ children }) => <div className="pb-4 border-b border-gray-200">{children}</div>;
const DialogTitle = ({ className, children }) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>;
const Button = ({ onClick, disabled, className, variant, children }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
      variant === "outline" ? "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50" :
      "bg-blue-600 text-white hover:bg-blue-700"
    } ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
  >
    {children}
  </button>
);
const Card = ({ className, children }) => <div className={`bg-white rounded-2xl shadow-md ${className}`}>{children}</div>;
const CardContent = ({ className, children }) => <div className={`p-4 ${className}`}>{children}</div>;
const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>;
// ====================================================================


type AIChatModalProps = {
  open: boolean
  onClose: () => void
  edgeFunctionUrl: string
  context?: {
    section?: string
    fieldKey?: keyof PlanTextFields
    originalText?: string
  }
  onAccept?: (newText: string) => void
}

export default function AIChatModal({ open, onClose, edgeFunctionUrl, context, onAccept }: AIChatModalProps) {
  const [files, setFiles] = useState<any[]>([])
  const [attachedFile, setAttachedFile] = useState<File | null>(null)
  const [attachedPreview, setAttachedPreview] = useState<string | null>(null)
  const [messages, setMessages] = useState<{ role: string; content: string }[]>([])
  const [input, setInput] = useState("")
  const [loading, setLoading] = useState(false)
  
  // Referencia para desplazar al final del chat
  const messagesEndRef = React.useRef<HTMLDivElement>(null);

  const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  useEffect(scrollToBottom, [messages])

  useEffect(() => {
  if (!open) {
    // 🧹 Limpia mensajes y archivos al cerrar
    setMessages([])
    setInput("")
    setAttachedFile(null)
    setAttachedPreview(null)
  } else if (context) {
    // 🧩 Muestra el contexto inicial al abrir
    setMessages([
      {
        role: "system",
        content: `Contexto: ${context.section}\nTexto original:\n${context.originalText || "—"}`,
      },
    ])
  }
}, [open, context])


  // 🔹 Obtener lista de archivos del Vector Store (Lógica de API original)
  useEffect(() => {
    if (!open) return
    const fetchVectorFiles = async () => {
      // Nota: La verificación de Supabase ahora pasa por el mock.
      if (typeof supabase === 'undefined' || !supabase.auth) {
        console.error("Supabase no está disponible (Simulación). Saltando fetch de archivos.");
        return;
      }
      
      try {
        setLoading(true)
        const { data: { session } } = await supabase.auth.getSession()
        const token = session?.access_token

        // 🟢 TU LÓGICA DE FETCH ORIGINAL
        const res = await fetch(`${edgeFunctionUrl}?action=list_files`, {
          headers: { Authorization: `Bearer ${token}` },
        })
        const data = await res.json()
        if (data.files) setFiles(data.files)
        else console.warn("No se encontraron archivos en el vector store.")
      } catch (err) {
        console.error("Error al cargar archivos del vector store:", err)
      } finally {
        setLoading(false)
      }
    }
    fetchVectorFiles()
  }, [open, edgeFunctionUrl])

  // 📎 Adjuntar archivo
  const handleAttach = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setAttachedFile(file)
    setAttachedPreview(file.name)
  }

  // 🚀 Enviar prompt o archivo al Edge Function (Lógica de API original)
const handleSend = async () => {
  if (!input.trim() && !attachedFile) return

  // 🧩 Crear el mensaje visible del usuario
  let userMessageContent = input.trim()
  if (attachedFile) {
    userMessageContent += (userMessageContent ? " | " : "") + `Adjunto: ${attachedFile.name}`
  }
  if (!userMessageContent && attachedFile) {
    userMessageContent = `Consulta de archivo: ${attachedFile.name}`
  }

  setMessages((prev) => [...prev, { role: "user", content: userMessageContent }])
  setInput("")
  setLoading(true)

  try {
    if (typeof supabase === "undefined" || !supabase.functions) {
      throw new Error("Supabase no está disponible o no soporta Edge Functions.")
    }

    const formData = new FormData()

    // 🧠 Construimos un prompt limpio con el contexto del campo
    const contextText = context?.originalText || "Sin texto original"
    const section = context?.section ? `Sección: ${context.section}` : ""
    const field = context?.fieldKey ? `Campo: ${context.fieldKey}` : ""

    const fullPrompt = `
${section}
${field}

Texto original:
${contextText}

Solicitud del usuario:
${input}

Responde con una versión mejorada del texto, sin agregar frases como “Aquí tienes” ni explicaciones.
    `.trim()

    formData.append("prompt", fullPrompt)
    if (attachedFile) formData.append("file", attachedFile)

    // 🟢 Llamada a la Edge Function
    const { data, error } = await supabase.functions.invoke("simple-chat", {
      body: formData,
    })

    if (error) throw error

    setMessages((prev) => [
      ...prev,
      { role: "assistant", content: data?.text || "Sin respuesta del modelo." },
    ])
  } catch (err: any) {
    console.error("Error al enviar prompt:", err)
    setMessages((prev) => [
      ...prev,
      { role: "assistant", content: "Ocurrió un error al conectar con la API." },
    ])
  } finally {
    setLoading(false)
    setAttachedFile(null)
    setAttachedPreview(null)
  }
}



  return (
    <Dialog open={open} onOpenChange={onClose}>
      {/* DialogContent ya define el tamaño h-[85vh] y es flex-col */}
      <DialogContent className="max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col">
        
        {/* Encabezado fijo (flex-shrink-0) */}
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold">Asistente Inteligente</DialogTitle>
        </DialogHeader>

        {/* CONTENEDOR PRINCIPAL QUE AHORA GESTIONA EL SCROLL DEL CONTENIDO */}
        {/* flex-1: toma el espacio restante. overflow-y-auto: permite scroll si el contenido se desborda */}
        <div className="flex-1 overflow-y-auto pt-4"> 
            
            {/* Contenido que originalmente estaba justo debajo del header */}
            <div className="flex gap-6 min-h-full"> 
              {/* 📂 Archivos del Vector Store */}
              <Card className="w-1/3 min-w-[250px] max-w-sm flex flex-col bg-muted/20 border border-gray-200 rounded-2xl">
                {/* Se mantiene flex-1 en CardContent para el ScrollArea */}
                <CardContent className="flex flex-col flex-1 p-4">
                  <h3 className="font-semibold text-sm mb-3">Archivos del Vector Store</h3>

                  {/* ScrollArea toma el espacio disponible (flex-1) */}
                  <ScrollArea className="flex-1">
                    {files.length === 0 ? (
                      <p className="text-gray-500 text-sm text-center mt-10">
                        {loading ? "Cargando archivos..." : "No hay archivos cargados."}
                      </p>
                    ) : (
                      <ul className="space-y-2">
                        {files.map((file) => (
                          <li
                            key={file.id}
                            className="border border-gray-200 bg-white rounded-lg p-2 text-sm shadow-sm hover:shadow-lg transition-shadow cursor-pointer"
                          >
                            <strong className="block text-gray-700 truncate">{file.name}</strong>
                            <p className="text-xs text-gray-400 truncate">{file.path}</p>
                          </li>
                        ))}
                      </ul>
                    )}
                  </ScrollArea>

                  <div className="mt-4 flex-shrink-0">
                    <Button variant="outline" className="w-full">
                      Subir archivo
                    </Button>
                  </div>
                </CardContent>
              </Card>

              {/* 💬 Chat con GPT */}
              <Card className="flex-1 flex flex-col min-w-[350px] bg-background border border-gray-200 rounded-2xl">
                <CardContent className="flex flex-col flex-1 p-4">
                  <h3 className="font-semibold text-sm mb-3 flex-shrink-0">Chat con IA</h3>

                  {/* Mensajes - EL CONTENEDOR QUE DEBE HACER SCROLL */}
                   <div className="flex-1 overflow-y-auto min-h-0 border border-gray-200 rounded-lg p-3 space-y-3 bg-gray-50 break-words whitespace-pre-wrap">
                    {messages.length === 0 ? (
                      <p className="text-gray-400 text-sm text-center mt-10">
                        Inicia una conversación...
                      </p>
                    ) : (
                      messages.map((m, i) => (
                        <div
                          key={i}
                          className={`break-words whitespace-pre-wrap p-3 rounded-xl shadow-sm max-w-[85%] ${
                            m.role === "user"
                              ? "bg-blue-50 text-blue-800 ml-auto"
                              : "bg-white text-gray-800 mr-auto border border-gray-200"
                          }`}
                        >
                          <strong className="font-bold">{m.role === "user" ? "Tú:" : "IA:"}</strong>{" "}
                          {m.content}
                        </div>
                      ))
                    )}
                    {loading && (
                      <div className="flex items-center space-x-2 p-3 bg-white border border-gray-200 rounded-xl mr-auto max-w-fit shadow-sm flex-shrink-0">
                        <svg
                          className="animate-spin h-4 w-4 text-blue-500"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 
                            5.291A7.962 7.962 0 014 12H0c0 
                            3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        <span className="text-sm text-gray-600">La IA está respondiendo...</span>
                      </div>
                    )}
                    <div ref={messagesEndRef} />
                  </div>

                  {/* Archivo adjunto - flex-shrink-0 */}
                  {attachedPreview && (
                    <div className="flex items-center justify-between mt-2 p-3 border border-gray-300 rounded-xl text-sm bg-gray-100 shadow-inner flex-shrink-0">
                      <span className="truncate flex items-center gap-2 text-gray-700">
                        <Paperclip className="w-4 h-4 text-blue-500" />
                        {attachedPreview}
                      </span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-red-500 hover:bg-gray-200"
                        onClick={() => {
                          setAttachedFile(null)
                          setAttachedPreview(null)
                          setInput("")
                        }}
                      >
                        Quitar
                      </Button>
                    </div>
                  )}

                  {/* Entrada de texto y enviar - flex-shrink-0 */}
                  <div className="flex gap-2 mt-4 items-end flex-shrink-0">
                    <label className="cursor-pointer text-gray-600 hover:text-blue-600 self-center">
                      <Paperclip className="w-5 h-5" />
                      <input type="file" className="hidden" onChange={handleAttach} />
                    </label>

                    <textarea
                      value={input}
                      onChange={(e) => setInput(e.target.value)}
                      placeholder="Escribe tu pregunta..."
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && !e.shiftKey) {
                          e.preventDefault()
                          handleSend()
                        }
                      }}
                      rows={1}
                      className="flex-1 resize-none rounded-xl border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto bg-white shadow-inner"
                      style={{ minHeight: "38px" }}
                    />

                    <Button
                      onClick={handleSend}
                      disabled={loading || (!input.trim() && !attachedFile)}
                      className="shadow-md"
                    >
                      {loading ? "Enviando..." : "Enviar"}
                    </Button>
                    <Button
                      onClick={() => {
                        const lastMessage = messages[messages.length - 1]
                        if (onAccept && lastMessage?.role === "assistant") {
                          onAccept(lastMessage.content)
                          onClose()
                        }
                      }}
                      disabled={!messages.some((m) => m.role === "assistant")}
                      className="shadow-md"
                    >
                      Aplicar mejora
                    </Button>


                  </div>
                </CardContent>
              </Card>
            </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}