import { useState } 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 {
  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 Conversation {
  id: string;
  title: string;
  lastMessage: string;
  timestamp: string;
  folderId?: string;
}

interface ChatFolder {
  id: string;
  name: string;
}

interface ChatSidebarProps {
  isCollapsed: boolean;
  onToggleCollapse: () => void;
}

export const ChatSidebar = ({ isCollapsed, onToggleCollapse }: ChatSidebarProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
  const [isEditFolderOpen, setIsEditFolderOpen] = useState(false);
  const [isDeleteFolderOpen, setIsDeleteFolderOpen] = useState(false);
  const [newFolderName, setNewFolderName] = useState("");
  const [editingFolder, setEditingFolder] = useState<ChatFolder | null>(null);
  const [deletingFolder, setDeletingFolder] = useState<ChatFolder | null>(null);
  const [selectedConversation, setSelectedConversation] = useState<string | null>("1");

  const [folders, setFolders] = useState<ChatFolder[]>([
    { id: "work", name: "Trabalho" },
    { id: "personal", name: "Pessoal" },
  ]);

  const [conversations, setConversations] = useState<Conversation[]>([
    {
      id: "1",
      title: "Conversa sobre IA",
      lastMessage: "Como funciona o machine learning?",
      timestamp: "Há 5 min",
    },
    {
      id: "2",
      title: "Projeto HGTX",
      lastMessage: "Discutindo arquitetura do sistema",
      timestamp: "Há 1 hora",
      folderId: "work",
    },
    {
      id: "3",
      title: "Ideias criativas",
      lastMessage: "Brainstorm para novo produto",
      timestamp: "Ontem",
      folderId: "personal",
    },
  ]);

  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(["work", "personal"]));

  const handleCreateFolder = () => {
    if (newFolderName.trim()) {
      const newFolder: ChatFolder = {
        id: Date.now().toString(),
        name: newFolderName,
      };
      setFolders([...folders, newFolder]);
      setNewFolderName("");
      setIsCreateFolderOpen(false);
    }
  };

  const handleEditFolder = () => {
    if (editingFolder && newFolderName.trim()) {
      setFolders(
        folders.map((f) =>
          f.id === editingFolder.id ? { ...f, name: newFolderName } : f
        )
      );
      setNewFolderName("");
      setEditingFolder(null);
      setIsEditFolderOpen(false);
    }
  };

  const handleDeleteFolder = () => {
    if (deletingFolder) {
      // Remove folder and move conversations back to "no folder"
      setConversations(
        conversations.map((conv) =>
          conv.folderId === deletingFolder.id ? { ...conv, folderId: undefined } : conv
        )
      );
      setFolders(folders.filter((f) => f.id !== deletingFolder.id));
      setDeletingFolder(null);
      setIsDeleteFolderOpen(false);
    }
  };

  const openEditFolder = (folder: ChatFolder) => {
    setEditingFolder(folder);
    setNewFolderName(folder.name);
    setIsEditFolderOpen(true);
  };

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

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

  const moveToFolder = (conversationId: string, folderId: string) => {
    setConversations(
      conversations.map((conv) =>
        conv.id === conversationId ? { ...conv, folderId } : conv
      )
    );
  };

  const removeFromFolder = (conversationId: string) => {
    setConversations(
      conversations.map((conv) =>
        conv.id === conversationId ? { ...conv, folderId: undefined } : conv
      )
    );
  };

  const filteredConversations = conversations.filter(
    (conv) =>
      conv.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      conv.lastMessage.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const conversationsWithoutFolder = filteredConversations.filter((c) => !c.folderId);
  const conversationsByFolder = folders.reduce((acc, folder) => {
    acc[folder.id] = filteredConversations.filter((c) => c.folderId === folder.id);
    return acc;
  }, {} as Record<string, Conversation[]>);

  if (isCollapsed) {
    return (
      <div className="w-12 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 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">
          <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>

        {/* Edit Folder Dialog */}
        <Dialog open={isEditFolderOpen} onOpenChange={setIsEditFolderOpen}>
          <DialogContent className="glass-effect bg-card border-border z-50">
            <DialogHeader>
              <DialogTitle>Editar Pasta</DialogTitle>
              <DialogDescription>
                Renomeie sua pasta de conversas.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="edit-folder-name">Nome da Pasta</Label>
                <Input
                  id="edit-folder-name"
                  value={newFolderName}
                  onChange={(e) => setNewFolderName(e.target.value)}
                  placeholder="Digite o novo nome..."
                  onKeyDown={(e) => e.key === "Enter" && handleEditFolder()}
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsEditFolderOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleEditFolder} disabled={!newFolderName.trim()}>
                Salvar
              </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. As conversas dentro da pasta serão movidas para "Sem Pasta".
              </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">
          {/* 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">
                    {conversationsByFolder[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={() => openEditFolder(folder)}
                    >
                      <Edit className="w-3 h-3" />
                      Editar Nome
                    </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) && conversationsByFolder[folder.id]?.length > 0 && (
                <div className="ml-6 space-y-1">
                  {conversationsByFolder[folder.id].map((conv) => (
                    <ConversationItem
                      key={conv.id}
                      conversation={conv}
                      isSelected={selectedConversation === conv.id}
                      onSelect={() => setSelectedConversation(conv.id)}
                      folders={folders}
                      onMoveToFolder={moveToFolder}
                      onRemoveFromFolder={removeFromFolder}
                    />
                  ))}
                </div>
              )}
            </div>
          ))}

          {/* Conversations without folder */}
          {conversationsWithoutFolder.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>
              {conversationsWithoutFolder.map((conv) => (
                <ConversationItem
                  key={conv.id}
                  conversation={conv}
                  isSelected={selectedConversation === conv.id}
                  onSelect={() => setSelectedConversation(conv.id)}
                  folders={folders}
                  onMoveToFolder={moveToFolder}
                  onRemoveFromFolder={removeFromFolder}
                />
              ))}
            </div>
          )}
        </div>
      </ScrollArea>
    </div>
  );
};

interface ConversationItemProps {
  conversation: Conversation;
  isSelected: boolean;
  onSelect: () => void;
  folders: ChatFolder[];
  onMoveToFolder: (conversationId: string, folderId: string) => void;
  onRemoveFromFolder: (conversationId: string) => void;
}

const ConversationItem = ({
  conversation,
  isSelected,
  onSelect,
  folders,
  onMoveToFolder,
  onRemoveFromFolder,
}: ConversationItemProps) => {
  return (
    <div
      className={`group flex items-start gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all ${
        isSelected
          ? "bg-sidebar-accent cyber-border"
          : "hover:bg-muted/50"
      }`}
      onClick={onSelect}
    >
      <MessageSquare className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{conversation.title}</p>
        <p className="text-xs text-muted-foreground truncate">
          {conversation.lastMessage}
        </p>
        <p className="text-xs text-muted-foreground mt-0.5">
          {conversation.timestamp}
        </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"
          >
            <MoreVertical className="w-3 h-3" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
          <DropdownMenuItem className="gap-2">
            <Edit className="w-3 h-3" />
            Renomear
          </DropdownMenuItem>
          
          {conversation.folderId && (
            <DropdownMenuItem
              className="gap-2"
              onClick={() => onRemoveFromFolder(conversation.id)}
            >
              <FolderInput className="w-3 h-3" />
              Remover da Pasta
            </DropdownMenuItem>
          )}

          {folders.map((folder) => (
            <DropdownMenuItem
              key={folder.id}
              className="gap-2"
              onClick={() => onMoveToFolder(conversation.id, folder.id)}
            >
              <Folder className="w-3 h-3" />
              Mover para {folder.name}
            </DropdownMenuItem>
          ))}

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