import { useState, useRef, useEffect } from 'react';
import { Send, Sparkles, Bot, User, Check, X, RefreshCw, Lightbulb, Wand2 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import type { IAMessage, IASugerencia, CampoEstructura } from '@/types/materia';
import { cn } from '@/lib/utils';
//import { toast } from 'sonner';

interface IAMateriaTabProps {
  campos: CampoEstructura[];
  datosGenerales: Record<string, any>;
  messages: IAMessage[];
  onSendMessage: (message: string, campoId?: string) => void;
  onAcceptSuggestion: (sugerencia: IASugerencia) => void;
  onRejectSuggestion: (messageId: string) => void;
}

const quickActions = [
  { id: 'mejorar-objetivos', label: 'Mejorar objetivos', icon: Wand2, prompt: 'Mejora el :objetivo_general para que sea más específico y medible' },
  { id: 'generar-contenido', label: 'Generar contenido temático', icon: Lightbulb, prompt: 'Sugiere un contenido temático completo basado en los objetivos y competencias' },
  { id: 'alinear-perfil', label: 'Alinear con perfil de egreso', icon: RefreshCw, prompt: 'Revisa las :competencias y alinéalas con el perfil de egreso del plan' },
  { id: 'ajustar-biblio', label: 'Recomendar bibliografía', icon: Sparkles, prompt: 'Recomienda bibliografía actualizada basándote en el contenido temático' },
];

export function IAMateriaTab({ campos, datosGenerales, messages, onSendMessage, onAcceptSuggestion, onRejectSuggestion }: IAMateriaTabProps) {
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [showFieldSelector, setShowFieldSelector] = useState(false);
  const [fieldSelectorPosition, setFieldSelectorPosition] = useState({ top: 0, left: 0 });
  const [cursorPosition, setCursorPosition] = useState(0);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value;
    const pos = e.target.selectionStart;
    setInput(value);
    setCursorPosition(pos);

    // Check for : character to trigger field selector
    const lastChar = value.charAt(pos - 1);
    if (lastChar === ':') {
      const rect = textareaRef.current?.getBoundingClientRect();
      if (rect) {
        setFieldSelectorPosition({ top: rect.bottom + 8, left: rect.left });
        setShowFieldSelector(true);
      }
    } else if (showFieldSelector && (lastChar === ' ' || !value.includes(':'))) {
      setShowFieldSelector(false);
    }
  };

  const insertFieldMention = (campoId: string) => {
    const beforeCursor = input.slice(0, cursorPosition);
    const afterCursor = input.slice(cursorPosition);
    const lastColonIndex = beforeCursor.lastIndexOf(':');
    const newInput = beforeCursor.slice(0, lastColonIndex) + `:${campoId}` + afterCursor;
    setInput(newInput);
    setShowFieldSelector(false);
    textareaRef.current?.focus();
  };

  const handleSend = async () => {
    if (!input.trim() || isLoading) return;

    // Extract field mention if any
    const fieldMatch = input.match(/:(\w+)/);
    const campoId = fieldMatch ? fieldMatch[1] : undefined;

    setIsLoading(true);
    onSendMessage(input, campoId);
    setInput('');

    // Simulate AI response delay
    setTimeout(() => {
      setIsLoading(false);
    }, 1500);
  };

  const handleQuickAction = (prompt: string) => {
    setInput(prompt);
    textareaRef.current?.focus();
  };

  const renderMessageContent = (content: string) => {
    // Render field mentions as styled badges
    return content.split(/(:[\w_]+)/g).map((part, i) => {
      if (part.startsWith(':')) {
        const campo = campos.find(c => c.id === part.slice(1));
        return (
          <span key={i} className="field-mention mx-0.5">
            {campo?.nombre || part}
          </span>
        );
      }
      return part;
    });
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="font-display text-2xl font-semibold text-foreground flex items-center gap-2">
            <Sparkles className="w-6 h-6 text-accent" />
            IA de la materia
          </h2>
          <p className="text-sm text-muted-foreground mt-1">
            Usa <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs font-mono">:</kbd> para mencionar campos específicos
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Chat area */}
        <Card className="lg:col-span-2 card-elevated flex flex-col h-[600px]">
          <CardHeader className="pb-2 border-b">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Conversación
            </CardTitle>
          </CardHeader>
          <CardContent className="flex-1 flex flex-col p-0">
            <ScrollArea className="flex-1 p-4" ref={scrollRef}>
              <div className="space-y-4">
                {messages.length === 0 ? (
                  <div className="text-center py-12">
                    <Bot className="w-12 h-12 mx-auto text-muted-foreground/50 mb-4" />
                    <p className="text-muted-foreground">
                      Inicia una conversación para mejorar tu materia con IA
                    </p>
                  </div>
                ) : (
                  messages.map((message) => (
                    <div key={message.id} className={cn(
                      "flex gap-3",
                      message.role === 'user' ? "justify-end" : "justify-start"
                    )}>
                      {message.role === 'assistant' && (
                        <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                          <Bot className="w-4 h-4 text-accent" />
                        </div>
                      )}
                      <div className={cn(
                        "max-w-[80%] rounded-lg px-4 py-3",
                        message.role === 'user' 
                          ? "bg-primary text-primary-foreground" 
                          : "bg-muted"
                      )}>
                        <p className="text-sm whitespace-pre-wrap">
                          {renderMessageContent(message.content)}
                        </p>
                        {message.sugerencia && !message.sugerencia.aceptada && (
                          <div className="mt-3 p-3 bg-background/80 rounded-md border">
                            <p className="text-xs font-medium text-muted-foreground mb-2">
                              Sugerencia para: {message.sugerencia.campoNombre}
                            </p>
                            <div className="text-sm text-foreground bg-accent/10 p-2 rounded mb-3 max-h-32 overflow-y-auto">
                              {message.sugerencia.valorSugerido}
                            </div>
                            <div className="flex items-center gap-2">
                              <Button 
                                size="sm" 
                                onClick={() => onAcceptSuggestion(message.sugerencia!)}
                                className="bg-success hover:bg-success/90 text-success-foreground"
                              >
                                <Check className="w-3 h-3 mr-1" />
                                Aplicar
                              </Button>
                              <Button 
                                size="sm" 
                                variant="outline"
                                onClick={() => onRejectSuggestion(message.id)}
                              >
                                <X className="w-3 h-3 mr-1" />
                                Rechazar
                              </Button>
                            </div>
                          </div>
                        )}
                        {message.sugerencia?.aceptada && (
                          <Badge className="mt-2 badge-library">
                            <Check className="w-3 h-3 mr-1" />
                            Sugerencia aplicada
                          </Badge>
                        )}
                      </div>
                      {message.role === 'user' && (
                        <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                          <User className="w-4 h-4 text-primary-foreground" />
                        </div>
                      )}
                    </div>
                  ))
                )}
                {isLoading && (
                  <div className="flex gap-3">
                    <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                      <Bot className="w-4 h-4 text-accent animate-pulse" />
                    </div>
                    <div className="bg-muted rounded-lg px-4 py-3">
                      <div className="flex items-center gap-1">
                        <div className="w-2 h-2 bg-accent rounded-full animate-bounce [animation-delay:-0.3s]" />
                        <div className="w-2 h-2 bg-accent rounded-full animate-bounce [animation-delay:-0.15s]" />
                        <div className="w-2 h-2 bg-accent rounded-full animate-bounce" />
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </ScrollArea>

            {/* Input area */}
            <div className="p-4 border-t">
              <div className="relative">
                <Textarea
                  ref={textareaRef}
                  value={input}
                  onChange={handleInputChange}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSend();
                    }
                  }}
                  placeholder="Escribe tu mensaje... Usa : para mencionar campos"
                  className="min-h-[80px] pr-12 resize-none"
                  disabled={isLoading}
                />
                <Button
                  size="sm"
                  onClick={handleSend}
                  disabled={!input.trim() || isLoading}
                  className="absolute bottom-3 right-3 h-8 w-8 p-0"
                >
                  <Send className="w-4 h-4" />
                </Button>
              </div>

              {/* Field selector popover */}
              {showFieldSelector && (
                <div className="absolute z-50 mt-1 w-64 bg-popover border rounded-lg shadow-lg">
                  <Command>
                    <CommandInput placeholder="Buscar campo..." />
                    <CommandList>
                      <CommandEmpty>No se encontró el campo</CommandEmpty>
                      <CommandGroup heading="Campos disponibles">
                        {campos.map((campo) => (
                          <CommandItem
                            key={campo.id}
                            value={campo.id}
                            onSelect={() => insertFieldMention(campo.id)}
                            className="cursor-pointer"
                          >
                            <span className="font-mono text-xs text-accent mr-2">
                              :{campo.id}
                            </span>
                            <span>{campo.nombre}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Sidebar with quick actions and fields */}
        <div className="space-y-4">
          {/* Quick actions */}
          <Card className="card-elevated">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Acciones rápidas</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {quickActions.map((action) => {
                const Icon = action.icon;
                return (
                  <Button
                    key={action.id}
                    variant="outline"
                    className="w-full justify-start text-left h-auto py-3"
                    onClick={() => handleQuickAction(action.prompt)}
                  >
                    <Icon className="w-4 h-4 mr-2 text-accent flex-shrink-0" />
                    <span className="text-sm">{action.label}</span>
                  </Button>
                );
              })}
            </CardContent>
          </Card>

          {/* Available fields */}
          <Card className="card-elevated">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Campos de la materia</CardTitle>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[280px]">
                <div className="space-y-2">
                  {campos.map((campo) => {
                    const hasValue = !!datosGenerales[campo.id];
                    return (
                      <div 
                        key={campo.id}
                        className={cn(
                          "p-2 rounded-md border cursor-pointer transition-colors hover:bg-muted/50",
                          hasValue ? "border-success/30" : "border-warning/30"
                        )}
                        onClick={() => {
                          setInput(prev => prev + `:${campo.id} `);
                          textareaRef.current?.focus();
                        }}
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-xs font-mono text-accent">:{campo.id}</span>
                          {hasValue ? (
                            <Badge variant="outline" className="text-xs text-success border-success/30">
                              Completo
                            </Badge>
                          ) : (
                            <Badge variant="outline" className="text-xs text-warning border-warning/30">
                              Vacío
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-foreground mt-1">{campo.nombre}</p>
                      </div>
                    );
                  })}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}