import  { useCallback, useState } from 'react'
import {  Link } from '@tanstack/react-router'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import {
  ArrowLeft,
  GraduationCap,
  Edit2, Save, 
  Pencil
} from 'lucide-react'
import { ContenidoTematico } from './ContenidoTematico'
import { BibliographyItem } from './BibliographyItem'
import { IAMateriaTab } from './IAMateriaTab'
import type { 
  CampoEstructura,
  IAMessage, 
  IASugerencia, 
  UnidadTematica, 
} from '@/types/materia';
import {
  mockMateria,
  mockEstructura,
  mockDocumentoSep,
  mockHistorial
} from '@/data/mockMateriaData';
import { DocumentoSEPTab } from './DocumentoSEPTab'
import { HistorialTab } from './HistorialTab'

export interface BibliografiaEntry {
  id: string;
  tipo: 'BASICA' | 'COMPLEMENTARIA';
  cita: string;
  fuenteBibliotecaId?: string;
  fuenteBiblioteca?: any;
}
export interface BibliografiaTabProps {
  bibliografia: BibliografiaEntry[];
  onSave: (bibliografia: BibliografiaEntry[]) => void;
  isSaving: boolean;
}

export default function MateriaDetailPage() {

  // 1. Asegúrate de tener estos estados en tu componente principal
const [messages, setMessages] = useState<IAMessage[]>([]);
const [datosGenerales, setDatosGenerales] = useState({});
const [campos, setCampos] = useState<CampoEstructura[]>([]);

// 2. Funciones de manejo para la IA
const handleSendMessage = (text: string, campoId?: string) => {
  const newMessage: IAMessage = {
    id: Date.now().toString(),
    role: 'user',
    content: text,
    timestamp: new Date(),
    campoAfectado: campoId
  };
  setMessages([...messages, newMessage]);
  
  // Aquí llamarías a tu API de OpenAI/Claude
  //toast.info("Enviando consulta a la IA...");
};

const handleAcceptSuggestion = (sugerencia: IASugerencia) => {
  // Lógica para actualizar el valor del campo en tu estado de datosGenerales
  //toast.success(`Sugerencia aplicada a ${sugerencia.campoNombre}`);
};

  // Dentro de tu componente principal (donde están los Tabs)
const [bibliografia, setBibliografia] = useState<BibliografiaEntry[]>([
  {
    id: '1',
    tipo: 'BASICA',
    cita: 'Russell, S., & Norvig, P. (2020). Artificial Intelligence: A Modern Approach. Pearson.'
  }
]);
const [isSaving, setIsSaving] = useState(false);

const handleSaveBibliografia = (data: BibliografiaEntry[]) => {
  setIsSaving(true);
  // Aquí iría tu llamada a la API
  setBibliografia(data);
  
  // Simulamos un guardado
  setTimeout(() => {
    setIsSaving(false);
    //toast.success("Cambios guardados");
  }, 1000);
};

 const [isRegenerating, setIsRegenerating] = useState(false);

const handleRegenerateDocument = useCallback(() => {
    setIsRegenerating(true);
    setTimeout(() => {
      setIsRegenerating(false);
    }, 2000);
  }, []);

  return (
    <div className="w-full">
      {/* ================= HEADER ================= */}
      <section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
        <div className="max-w-7xl mx-auto px-6 py-10">
          <Link
            to="/planes"
            className="flex items-center gap-2 text-sm text-blue-200 hover:text-white mb-4"
          >
            <ArrowLeft className="w-4 h-4" />
            Volver al plan
          </Link>

          <div className="flex items-start justify-between gap-6">
            <div className="space-y-3">
              <Badge className="bg-blue-900/50 border border-blue-700">
                IA-401
              </Badge>

              <h1 className="text-3xl font-bold">
                Inteligencia Artificial Aplicada
              </h1>

              <div className="flex flex-wrap gap-4 text-sm text-blue-200">
                <span className="flex items-center gap-1">
                  <GraduationCap className="w-4 h-4" />
                  Ingeniería en Sistemas Computacionales
                </span>

                <span>Facultad de Ingeniería</span>
              </div>

              <p className="text-sm text-blue-300">
                Pertenece al plan:{' '}
                <span className="underline cursor-pointer">
                  Licenciatura en Ingeniería en Sistemas Computacionales 2024
                </span>
              </p>
            </div>

            <div className="flex flex-col gap-2 items-end">
              <Badge variant="secondary">8 créditos</Badge>
              <Badge variant="secondary">7° semestre</Badge>
              <Badge variant="secondary">Sistemas Inteligentes</Badge>
            </div>
          </div>
        </div>
      </section>

      {/* ================= TABS ================= */}
      <section className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-6">
          <Tabs defaultValue="datos">
            <TabsList className="h-auto bg-transparent p-0 gap-6">
              <TabsTrigger value="datos">Datos generales</TabsTrigger>
              <TabsTrigger value="contenido">Contenido temático</TabsTrigger>
              <TabsTrigger value="bibliografia">Bibliografía</TabsTrigger>
              <TabsTrigger value="ia">IA de la materia</TabsTrigger>
              <TabsTrigger value="sep">Documento SEP</TabsTrigger>
              <TabsTrigger value="historial">Historial</TabsTrigger>
            </TabsList>

            <Separator className="mt-2" />

            {/* ================= TAB: DATOS GENERALES ================= */}
            <TabsContent value="datos">
              <DatosGenerales />
            </TabsContent>

            <TabsContent value="contenido">
              <ContenidoTematico></ContenidoTematico>
            </TabsContent>

            <TabsContent value="bibliografia">
              <BibliographyItem 
                bibliografia={bibliografia} 
                onSave={handleSaveBibliografia} 
                isSaving={isSaving} 
              />
            </TabsContent>

            <TabsContent value="ia">
              <IAMateriaTab 
              campos={campos}
              datosGenerales={datosGenerales}
              messages={messages}
              onSendMessage={handleSendMessage}
              onAcceptSuggestion={handleAcceptSuggestion}
              onRejectSuggestion={(id) => console.log("Rechazada") /*toast.error("Sugerencia rechazada")*/}
            />
            </TabsContent>

            <TabsContent value="sep">
              <DocumentoSEPTab
                documento={mockDocumentoSep}
                materia={mockMateria}
                estructura={mockEstructura}
                datosGenerales={datosGenerales}
                onRegenerate={handleRegenerateDocument}
                isRegenerating={isRegenerating}
              />
            </TabsContent>

            <TabsContent value="historial">
               <HistorialTab historial={mockHistorial} />
            </TabsContent>
          </Tabs>
        </div>
      </section>
    </div>
  )
}

/* ================= TAB CONTENT ================= */

function DatosGenerales() {
  return (
    <div className="max-w-7xl mx-auto py-8 px-4 space-y-8 animate-in fade-in duration-500">
      
      {/* Encabezado de la Sección */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b pb-6">
        <div>
          <h2 className="text-2xl font-bold tracking-tight text-slate-900">Datos Generales</h2>
          <p className="text-slate-500 mt-1">
            Información oficial estructurada bajo los lineamientos de la SEP.
          </p>
        </div>
        <div className="flex gap-3">
          <Button variant="outline" size="sm" className="gap-2">
            <Edit2 className="w-4 h-4" /> Editar borrador
          </Button>
          <Button size="sm" className="gap-2 bg-blue-600 hover:bg-blue-700">
            <Save className="w-4 h-4" /> Guardar cambios
          </Button>
        </div>
      </div>

      {/* Grid de Información */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        {/* Columna Principal (Más ancha) */}
        <div className="md:col-span-2 space-y-6">
          <div className="md:col-span-2 space-y-6">
          <InfoCard
            title="Competencias a Desarrollar"
            subtitle="Competencias profesionales que se desarrollarán"
            isList={true}
            initialContent={`• Diseñar algoritmos de machine learning para clasificación y predicción\n• Implementar redes neuronales profundas para procesamiento de imágenes\n• Evaluar y optimizar modelos de IA considerando métricas`}
          />
          
          <InfoCard
            title="Objetivo General"
            initialContent="Formar profesionales capaces de diseñar, implementar y evaluar sistemas de inteligencia artificial que resuelvan problemas complejos."
          />
        </div>
        
        <div className="space-y-6">
          <InfoCard
            title="Justificación"
            initialContent="La inteligencia artificial es una de las tecnologías más disruptivas..."
          />
        </div>
        </div>

        {/* Columna Lateral (Información Secundaria) */}
        <div className="space-y-6">
          <div className="space-y-6">
          {/* Tarjeta de Requisitos */}
          <InfoCard
            title="Requisitos y Seriación"
            type="requirements"
            initialContent={[
              { type: "Pre-requisito", code: "PA-301", name: "Programación Avanzada" },
              { type: "Co-requisito", code: "MAT-201", name: "Matemáticas Discretas" }
            ]}
          />

          {/* Tarjeta de Evaluación */}
          <InfoCard
            title="Sistema de Evaluación"
            type="evaluation"
            initialContent={[
              { label: "Exámenes parciales", value: "30%" },
              { label: "Proyecto integrador", value: "35%" },
              { label: "Prácticas de laboratorio", value: "20%" },
              { label: "Participación", value: "15%" },
            ]}
          />
        </div>
        </div>
      </div>
    </div>
  )
}

interface InfoCardProps {
  title: string,
  subtitle?: string
  isList?:boolean
  initialContent: any // Puede ser string o array de objetos
  type?: 'text' | 'list' | 'requirements' | 'evaluation'
}

function InfoCard({ title, initialContent, type = 'text' }: InfoCardProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [data, setData] = useState(initialContent)
  // Estado temporal para el área de texto (siempre editamos como texto por simplicidad)
  const [tempText, setTempText] = useState(
    type === 'text' || type === 'list' 
      ? initialContent 
      : JSON.stringify(initialContent, null, 2) // O un formato legible
  )

  const handleSave = () => {
    // Aquí podrías parsear el texto de vuelta si es necesario
    setData(tempText) 
    setIsEditing(false)
  }

  return (
    <Card className="transition-all hover:border-slate-300">
      <CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0">
        <CardTitle className="text-sm font-bold text-slate-700">{title}</CardTitle>
        {!isEditing && (
          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => setIsEditing(true)}>
            <Pencil className="h-3 w-3" />
          </Button>
        )}
      </CardHeader>

      <CardContent>
        {isEditing ? (
          <div className="space-y-3">
            <Textarea 
              value={tempText} 
              onChange={(e) => setTempText(e.target.value)}
              className="text-xs min-h-[100px]"
            />
            <div className="flex justify-end gap-2">
              <Button size="sm" variant="ghost" onClick={() => setIsEditing(false)}>Cancelar</Button>
              <Button size="sm" className="bg-[#00a878]" onClick={handleSave}>Guardar</Button>
            </div>
          </div>
        ) : (
          <div className="text-sm">
            {type === 'requirements' && <RequirementsView items={data} />}
            {type === 'evaluation' && <EvaluationView items={data} />}
            {type === 'text' && <p className="text-slate-600">{data}</p>}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// Vista de Requisitos
function RequirementsView({ items }: { items: any[] }) {
  return (
    <div className="space-y-3">
      {items.map((req, i) => (
        <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-100">
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-tight">{req.type}</p>
          <p className="text-sm font-medium text-slate-700">{req.code} {req.name}</p>
        </div>
      ))}
    </div>
  )
}

// Vista de Evaluación
function EvaluationView({ items }: { items: any[] }) {
  return (
    <div className="space-y-2">
      {items.map((item, i) => (
        <div key={i} className="flex justify-between text-sm border-b border-slate-50 pb-1.5 italic">
          <span className="text-slate-500">{item.label}</span>
          <span className="font-bold text-blue-600">{item.value}</span>
        </div>
      ))}
    </div>
  )
}



function EmptyTab({ title }: { title: string }) {
  return (
    <div className="py-16 text-center text-muted-foreground">
      {title} (pendiente)
    </div>
  )
}