import { useState, useEffect } from "react";
import { Search, Folder, FolderPlus, MessageSquare, MoreVertical, Trash2, Edit, FolderInput, ChevronLeft, ChevronRight, Plus } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useToast } from "@/hooks/use-toast";
import { chatService, ChatRecord, FolderRecord } from "@/services/chat";
import { formatDistanceToNow } from "date-fns";
import { ptBR } from "date-fns/locale";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface ChatSidebarProps {
  isCollapsed: boolean;
  onToggleCollapse: () => void;
  onNewChat: () => void;
  onSelectChat?: (chat: ChatRecord) => void;
  currentChatId?: string;
}

export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelectChat, currentChatId }: ChatSidebarProps) => {
  const { toast } = useToast();
  const [searchQuery, setSearchQuery] = useState("");
  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
  const [isDeleteFolderOpen, setIsDeleteFolderOpen] = useState(false);
  const [isDeleteChatOpen, setIsDeleteChatOpen] = useState(false);
  const [isRenameFolderOpen, setIsRenameFolderOpen] = useState(false);
  const [newFolderName, setNewFolderName] = useState("");
  const [renamingFolder, setRenamingFolder] = useState<FolderRecord | null>(null);
  const [renamedFolderName, setRenamedFolderName] = useState("");
  const [deletingFolder, setDeletingFolder] = useState<FolderRecord | null>(null);
  const [deletingChat, setDeletingChat] = useState<ChatRecord | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  // Estado carregado do banco de dados via chatService
  const [chats, setChats] = useState<ChatRecord[]>([]);
  const [folders, setFolders] = useState<FolderRecord[]>([]);
  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());

  // Carrega chats e pastas do banco de dados quando o componente monta
  useEffect(() => {
    loadChatsAndFolders();

    // Escuta evento customizado para recarregar quando chat é atualizado
    const handleChatUpdate = () => {
      loadChatsAndFolders();
    };

    window.addEventListener('chatUpdated', handleChatUpdate);

    // Cleanup
    return () => {
      window.removeEventListener('chatUpdated', handleChatUpdate);
    };
  }, []);

  const loadChatsAndFolders = async () => {
    setIsLoading(true);
    try {
      const data = await chatService.getChatsAndFolders();

      console.log('Dados carregados:', data);

      setChats(data.chats);
      setFolders(data.folders);

      // Expande todas as pastas por padrão
      setExpandedFolders(new Set(data.folders.map(f => f.id)));
    } catch (error: any) {
      console.error('Erro ao carregar chats e pastas:', error);
      toast({
        title: "Erro ao carregar dados",
        description: error.message || "Não foi possível carregar chats e pastas.",
        variant: "destructive",
      });

      // Define arrays vazios em caso de erro
      setChats([]);
      setFolders([]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleCreateFolder = async () => {
    if (newFolderName.trim()) {
      try {
        await chatService.createFolder(newFolderName);
        await loadChatsAndFolders();
        setNewFolderName("");
        setIsCreateFolderOpen(false);

        toast({
          title: "Pasta criada",
          description: `Pasta "${newFolderName}" criada com sucesso.`,
        });
      } catch (error: any) {
        console.error('Erro ao criar pasta:', error);
        toast({
          title: "Erro ao criar pasta",
          description: error.message || "Não foi possível criar a pasta. Tente novamente.",
          variant: "destructive",
        });
      }
    }
  };

  const handleDeleteFolder = async () => {
    if (deletingFolder) {
      try {
        await chatService.deleteFolder(deletingFolder.id);
        await loadChatsAndFolders();
        setDeletingFolder(null);
        setIsDeleteFolderOpen(false);

        toast({
          title: "Pasta excluída",
          description: "A pasta foi excluída com sucesso.",
        });
      } catch (error: any) {
        console.error('Erro ao excluir pasta:', error);
        toast({
          title: "Erro ao excluir pasta",
          description: error.message || "Não foi possível excluir a pasta. Tente novamente.",
          variant: "destructive",
        });
      }
    }
  };

  const openDeleteFolder = (folder: FolderRecord) => {
    setDeletingFolder(folder);
    setIsDeleteFolderOpen(true);
  };

  const openRenameFolder = (folder: FolderRecord) => {
    setRenamingFolder(folder);
    setRenamedFolderName(folder.name);
    setIsRenameFolderOpen(true);
  };

  const handleRenameFolder = async () => {
    if (renamingFolder && renamedFolderName.trim()) {
      try {
        await chatService.renameFolder(renamingFolder.id, renamedFolderName);
        await loadChatsAndFolders();
        setRenamingFolder(null);
        setRenamedFolderName("");
        setIsRenameFolderOpen(false);

        toast({
          title: "Pasta renomeada",
          description: `Pasta renomeada para "${renamedFolderName}" com sucesso.`,
        });
      } catch (error: any) {
        console.error('Erro ao renomear pasta:', error);
        toast({
          title: "Erro ao renomear pasta",
          description: error.message || "Não foi possível renomear a pasta. Tente novamente.",
          variant: "destructive",
        });
      }
    }
  };

  const toggleFolder = (folderId: string) => {
    const newExpanded = new Set(expandedFolders);
    if (newExpanded.has(folderId)) {
      newExpanded.delete(folderId);
    } else {
      newExpanded.add(folderId);
    }
    setExpandedFolders(newExpanded);
  };

  const moveToFolder = async (chatId: string, folderId: string) => {
    try {
      await chatService.moveChatToFolder(chatId, folderId);
      await loadChatsAndFolders();

      const folder = folders.find(f => f.id === folderId);
      toast({
        title: "Chat movido",
        description: `Movido para a pasta "${folder?.name}".`,
      });
    } catch (error: any) {
      console.error('Erro ao mover chat:', error);
      toast({
        title: "Erro ao mover chat",
        description: error.message || "Não foi possível mover o chat. Tente novamente.",
        variant: "destructive",
      });
    }
  };

  const handleDeleteChat = async () => {
    if (deletingChat) {
      try {
        await chatService.deleteChat(deletingChat.id);
        await loadChatsAndFolders();
        setDeletingChat(null);
        setIsDeleteChatOpen(false);

        toast({
          title: "Chat excluído",
          description: "A conversa foi excluída com sucesso.",
        });
      } catch (error: any) {
        console.error('Erro ao excluir chat:', error);
        toast({
          title: "Erro ao excluir chat",
          description: error.message || "Não foi possível excluir o chat. Tente novamente.",
          variant: "destructive",
        });
      }
    }
  };

  const openDeleteChat = (chat: ChatRecord) => {
    setDeletingChat(chat);
    setIsDeleteChatOpen(true);
  };

  const handleSelectChat = (chat: ChatRecord) => {
    if (onSelectChat) {
      onSelectChat(chat);
    }
  };

  // Filtrar chats pela busca
  const filteredChats = chats.filter((chat) => {
    const searchLower = searchQuery.toLowerCase();
    const titleMatch = chat.title.toLowerCase().includes(searchLower);
    return titleMatch;
  });

  // Separar chats sem pasta (folder_id é null)
  const chatsWithoutFolder = filteredChats.filter((c) => c.folder_id === null);

  // Agrupar chats por pasta (quando folder_id === folder.id)
  const chatsByFolder = folders.reduce((acc, folder) => {
    acc[folder.id] = filteredChats.filter((c) => c.folder_id === folder.id);
    return acc;
  }, {} as Record<string, ChatRecord[]>);

  if (isCollapsed) {
    return (
      <div className="w-12 h-full border-r border-border bg-card/30 backdrop-blur-sm flex flex-col items-center py-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={onToggleCollapse}
          className="text-muted-foreground hover:text-foreground"
        >
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>
    );
  }

  return (
    <div className="w-80 h-full border-r border-border bg-card/30 backdrop-blur-sm flex flex-col">
      {/* Header with collapse button */}
      <div className="px-4 pt-4 pb-2 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-foreground">Conversas</h3>
        <Button
          variant="ghost"
          size="icon"
          onClick={onToggleCollapse}
          className="h-7 w-7 text-muted-foreground hover:text-foreground"
        >
          <ChevronLeft className="w-4 h-4" />
        </Button>
      </div>

      {/* Search */}
      <div className="px-4 pb-3 border-b border-border space-y-3">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Pesquisar conversas..."
            className="pl-9 bg-muted/50"
          />
        </div>

        <Button className="w-full gap-2 cyber-glow" variant="default" onClick={onNewChat}>
          <Plus className="w-4 h-4" />
          Novo Chat
        </Button>

        <Dialog open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
          <DialogTrigger asChild>
            <Button variant="outline" className="w-full gap-2" size="sm">
              <FolderPlus className="w-4 h-4" />
              Nova Pasta
            </Button>
          </DialogTrigger>
          <DialogContent className="glass-effect bg-card border-border z-50">
            <DialogHeader>
              <DialogTitle>Criar Nova Pasta</DialogTitle>
              <DialogDescription>
                Organize suas conversas em pastas personalizadas.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="folder-name">Nome da Pasta</Label>
                <Input
                  id="folder-name"
                  value={newFolderName}
                  onChange={(e) => setNewFolderName(e.target.value)}
                  placeholder="Ex: Projetos, Estudos..."
                  onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsCreateFolderOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleCreateFolder} disabled={!newFolderName.trim()}>
                Criar Pasta
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Rename Folder Dialog */}
        <Dialog open={isRenameFolderOpen} onOpenChange={setIsRenameFolderOpen}>
          <DialogContent className="glass-effect bg-card border-border z-50">
            <DialogHeader>
              <DialogTitle>Renomear Pasta</DialogTitle>
              <DialogDescription>
                Digite o novo nome para a pasta "{renamingFolder?.name}".
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="rename-folder-name">Novo Nome</Label>
                <Input
                  id="rename-folder-name"
                  value={renamedFolderName}
                  onChange={(e) => setRenamedFolderName(e.target.value)}
                  placeholder="Ex: Projetos, Estudos..."
                  onKeyDown={(e) => e.key === "Enter" && handleRenameFolder()}
                  autoFocus
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsRenameFolderOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleRenameFolder} disabled={!renamedFolderName.trim()}>
                Renomear
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Delete Folder Alert */}
        <AlertDialog open={isDeleteFolderOpen} onOpenChange={setIsDeleteFolderOpen}>
          <AlertDialogContent className="glass-effect bg-card border-border z-50">
            <AlertDialogHeader>
              <AlertDialogTitle>Excluir Pasta?</AlertDialogTitle>
              <AlertDialogDescription>
                Esta ação não pode ser desfeita. A pasta "{deletingFolder?.name}" será excluída.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancelar</AlertDialogCancel>
              <AlertDialogAction onClick={handleDeleteFolder} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                Excluir
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>

      {/* Conversations List */}
      <ScrollArea className="flex-1">
        <div className="p-2 space-y-1">
          {isLoading ? (
            <div className="flex items-center justify-center p-8">
              <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
            </div>
          ) : (
            <>
              {/* Folders */}
              {folders.map((folder) => (
                <div key={folder.id} className="space-y-1">
                  <div className="flex items-center gap-1">
                    <button
                      onClick={() => toggleFolder(folder.id)}
                      className="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors group"
                    >
                      <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                        <Folder className="w-4 h-4 text-white" />
                      </div>
                      <span className="font-medium text-sm flex-1 text-left">
                        {folder.name}
                      </span>
                      <span className="text-xs text-muted-foreground">
                        {chatsByFolder[folder.id]?.length || 0}
                      </span>
                    </button>

                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-muted-foreground hover:text-foreground"
                        >
                          <MoreVertical className="w-3 h-3" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
                        <DropdownMenuItem
                          className="gap-2"
                          onClick={() => openRenameFolder(folder)}
                        >
                          <Edit className="w-3 h-3" />
                          Renomear Pasta
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="gap-2 text-destructive"
                          onClick={() => openDeleteFolder(folder)}
                        >
                          <Trash2 className="w-3 h-3" />
                          Excluir Pasta
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>

                  {expandedFolders.has(folder.id) && chatsByFolder[folder.id]?.length > 0 && (
                    <div className="ml-6 space-y-1">
                      {chatsByFolder[folder.id].map((chat) => (
                        <ChatItem
                          key={chat.id}
                          chat={chat}
                          isSelected={currentChatId === chat.id}
                          onSelect={() => handleSelectChat(chat)}
                          folders={folders}
                          onMoveToFolder={moveToFolder}
                          onDelete={() => openDeleteChat(chat)}
                        />
                      ))}
                    </div>
                  )}
                </div>
              ))}

              {/* Chats without folder */}
              {chatsWithoutFolder.length > 0 && (
                <div className="space-y-1">
                  <div className="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                    Sem Pasta
                  </div>
                  {chatsWithoutFolder.map((chat) => (
                    <ChatItem
                      key={chat.id}
                      chat={chat}
                      isSelected={currentChatId === chat.id}
                      onSelect={() => handleSelectChat(chat)}
                      folders={folders}
                      onMoveToFolder={moveToFolder}
                      onDelete={() => openDeleteChat(chat)}
                    />
                  ))}
                </div>
              )}

              {/* Empty state */}
              {!isLoading && chats.length === 0 && (
                <div className="flex flex-col items-center justify-center p-8 text-center">
                  <MessageSquare className="w-12 h-12 text-muted-foreground opacity-50 mb-3" />
                  <p className="text-sm text-muted-foreground">
                    Nenhuma conversa ainda
                  </p>
                  <p className="text-xs text-muted-foreground mt-1">
                    Clique em "Novo Chat" para começar
                  </p>
                </div>
              )}
            </>
          )}
        </div>
      </ScrollArea>

      {/* Delete Chat Alert */}
      <AlertDialog open={isDeleteChatOpen} onOpenChange={setIsDeleteChatOpen}>
        <AlertDialogContent className="glass-effect bg-card border-border z-50">
          <AlertDialogHeader>
            <AlertDialogTitle>Excluir Conversa?</AlertDialogTitle>
            <AlertDialogDescription>
              Esta ação não pode ser desfeita. A conversa "{deletingChat?.title}" será permanentemente excluída.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteChat} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

interface ChatItemProps {
  chat: ChatRecord;
  isSelected: boolean;
  onSelect: () => void;
  folders: FolderRecord[];
  onMoveToFolder: (chatId: string, folderId: string) => void;
  onDelete: () => void;
}

const ChatItem = ({
  chat,
  isSelected,
  onSelect,
  folders,
  onMoveToFolder,
  onDelete,
}: ChatItemProps) => {
  // Formata timestamp relativo
  const timeAgo = formatDistanceToNow(new Date(chat.updated_at), {
    addSuffix: true,
    locale: ptBR,
  });

  return (
    <div
      className={`group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all w-full ${
        isSelected
          ? "bg-sidebar-accent cyber-border"
          : "hover:bg-muted/50"
      }`}
      onClick={onSelect}
    >
      <MessageSquare className="w-4 h-4 text-primary flex-shrink-0" />
      <div className="flex-1 min-w-0 max-w-[180px]">
        <p className="text-sm font-medium truncate" title={chat.title}>
          {chat.title}
        </p>
        <p className="text-xs text-muted-foreground truncate" title={timeAgo}>
          {timeAgo}
        </p>
      </div>

      <DropdownMenu>
        <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
          >
            <MoreVertical className="w-3 h-3" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
          {/* Opções para mover para pastas */}
          {folders.filter(f => f.id !== chat.folder_id).map((folder) => (
            <DropdownMenuItem
              key={folder.id}
              className="gap-2"
              onClick={() => onMoveToFolder(chat.id, folder.id)}
            >
              <Folder className="w-3 h-3" />
              Mover para {folder.name}
            </DropdownMenuItem>
          ))}

          <DropdownMenuItem
            className="gap-2 text-destructive"
            onClick={onDelete}
          >
            <Trash2 className="w-3 h-3" />
            Excluir
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};