"use client";

import React, { useState, useEffect } from "react";
import { useChatWidgetStore } from "@/hooks/useChatWidgetStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { useChatStore } from "@/hooks/useChatStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { ChatHeader } from "./ChatHeader";
import { ChatMessages } from "./ChatMessages";
import { ChatInput } from "./ChatInput";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Users, Lock, MessageSquare, Hash, UserPlus, ArrowLeft, Check, X } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export function ChatWidget() {
  const { isMinimized, toggleMinimized } = useChatWidgetStore();
  const { fetchRooms, rooms, activeRoomId, setActiveRoom, setupSSE, createRoom, fetchMessages } = useChatStore();
  const { presenceData, fetchPresenceData } = usePresenceStore();
  const { user: currentUser, login } = useAuthStore();
  
  const [showRoomSidebar, setShowRoomSidebar] = useState(false);
  const [view, setView] = useState<'chat' | 'users'>('chat');
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  const [groupName, setGroupName] = useState("");
  const [isCreatingGroup, setIsCreatingGroup] = useState(false);

  useEffect(() => {
    if (!currentUser) {
      fetch("/api/auth/session")
        .then(res => res.json())
        .then(session => {
          if (session?.user) login(session.user);
        });
    }
    fetchRooms();
    fetchPresenceData();
    fetchMessages();
    const cleanup = setupSSE();
    return () => { if (typeof cleanup === 'function') cleanup(); };
  }, [fetchRooms, setupSSE, fetchPresenceData, fetchMessages, currentUser, login]);

  if (isMinimized) return null;

  const activeRoom = rooms.find(r => r.id === activeRoomId) || rooms[0];

  const handleToggleUser = (userId: string) => {
    setSelectedUsers(prev => 
      prev.includes(userId) ? prev.filter(id => id !== userId) : [...prev, userId]
    );
  };

  const handleCreateChat = async () => {
    if (selectedUsers.length === 0) return;

    const isGroup = selectedUsers.length > 1 || groupName.length > 0;
    const roomId = await createRoom({
      name: isGroup ? (groupName || "Neue Gruppe") : undefined,
      type: isGroup ? 'group' : 'direct',
      participantIds: selectedUsers
    });

    if (roomId) {
      setActiveRoom(roomId);
      setView('chat');
      setSelectedUsers([]);
      setGroupName("");
      setIsCreatingGroup(false);
    }
  };

  return (
    <div className="fixed bottom-24 right-6 z-[9998] w-[400px] h-[600px] bg-background border border-border rounded-md shadow-lg overflow-hidden flex flex-col animate-in slide-in-from-bottom-2 duration-200 font-sans">
      <ChatHeader 
        presenceData={presenceData}
        activeRoom={activeRoom}
        onMinimize={toggleMinimized}
        onToggleRooms={() => setShowRoomSidebar(!showRoomSidebar)}
      />
      
      <div className="flex flex-1 overflow-hidden relative text-foreground">
        {/* Rooms Sidebar Overlay */}
        <div className={cn(
          "absolute inset-y-0 left-0 bg-background border-r border-border transition-all duration-300 z-30 flex flex-col shadow-lg",
          showRoomSidebar ? "w-64" : "w-0 opacity-0 pointer-events-none"
        )}>
          <div className="p-3 border-b border-border flex items-center justify-between">
            <span className="text-xs font-semibold text-muted-foreground">Kanäle</span>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6"
              onClick={() => setShowRoomSidebar(false)}
              aria-label="Zurück"
            >
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </div>
          <ScrollArea className="flex-1">
            <div className="p-1 space-y-0.5">
              {rooms.map(room => (
                <button
                  key={room.id}
                  onClick={() => {
                    setActiveRoom(room.id);
                    setShowRoomSidebar(false);
                    setView('chat');
                  }}
                  className={cn(
                    "w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors",
                    activeRoomId === room.id 
                      ? "bg-primary text-primary-foreground font-medium" 
                      : "hover:bg-muted text-muted-foreground"
                  )}
                >
                  {room.type === 'direct' ? <Users className="h-3.5 w-3.5" /> : <Hash className="h-3.5 w-3.5" />}
                  <span className="truncate">{room.name || "Direktnachricht"}</span>
                </button>
              ))}
            </div>
          </ScrollArea>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col bg-background">
          {view === 'chat' ? (
            <div className="flex flex-col h-full overflow-hidden">
              <div className="flex-1 overflow-hidden">
                <ChatMessages />
              </div>
              <ChatInput />
            </div>
          ) : (
            <div className="flex-1 flex flex-col h-full overflow-hidden">
              <div className="p-3 border-b border-border bg-muted/10 space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="text-xs font-semibold text-muted-foreground">Team Mitglieder</h4>
                  {selectedUsers.length > 0 && (
                    <Badge className="bg-primary text-white text-xs">{selectedUsers.length} gewählt</Badge>
                  )}
                </div>
                
                {selectedUsers.length > 1 && (
                  <div className="flex gap-2 animate-in slide-in-from-top-1">
                    <Input 
                      placeholder="Gruppenname (optional)" 
                      value={groupName}
                      onChange={e => setGroupName(e.target.value)}
                      className="h-8 text-xs bg-background border-border/50"
                    />
                  </div>
                )}
              </div>

              <ScrollArea className="flex-1">
                <div className="p-2 space-y-1">
                  {presenceData?.users?.filter(u => u.email !== currentUser?.email).map(u => {
                    const isSelected = selectedUsers.includes(u.id);
                    return (
                      <button
                        key={u.email}
                        onClick={() => handleToggleUser(u.id)}
                        className={cn(
                          "w-full flex items-center gap-3 p-2 rounded-md transition-all text-left group",
                          isSelected ? "bg-primary/5 border border-primary/20" : "hover:bg-muted border border-transparent"
                        )}
                      >
                        <div className="relative shrink-0">
                          <Avatar className="h-8 w-8 border border-border shadow-sm">
                            <AvatarImage src={u.image || undefined} />
                            <AvatarFallback className="text-xs font-semibold">{u.name?.charAt(0)}</AvatarFallback>
                          </Avatar>
                          {isSelected ? (
                            <div className="absolute -top-1 -right-1 bg-primary text-white rounded-full p-0.5 shadow-sm">
                              <Check className="h-2 w-2 stroke-[4px]" />
                            </div>
                          ) : (
                            <span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 border-2 border-background"></span>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="text-xs font-semibold truncate text-foreground">{u.name}</div>
                          <div className="text-xs text-muted-foreground/70 truncate">{u.email}</div>
                        </div>
                      </button>
                    );
                  })}
                  {(!presenceData?.users || presenceData.users.filter(u => u.email !== currentUser?.email).length === 0) && (
                    <div className="py-12 text-center text-muted-foreground text-xs italic opacity-50">Niemand online.</div>
                  )}
                </div>
              </ScrollArea>

              <div className="p-3 border-t border-border flex gap-2 bg-muted/5">
                <Button 
                  variant="ghost" 
                  className="flex-1 text-xs font-semibold h-8 text-foreground"
                  onClick={() => { setView('chat'); setSelectedUsers([]); }}
                >
                  Abbrechen
                </Button>
                {selectedUsers.length > 0 && (
                  <Button 
                    className="flex-1 text-xs font-semibold h-8 shadow-sm"
                    onClick={handleCreateChat}
                  >
                    {selectedUsers.length > 1 ? 'Gruppe starten' : 'Chat starten'}
                  </Button>
                )}
              </div>
            </div>
          )}
          
          <div className="p-1 border-t border-border bg-muted/10 flex gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setView(view === 'users' ? 'chat' : 'users')}
              className={cn(
                "flex-1 h-7 text-xs font-semibold transition-all",
                view === 'users' ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-primary"
              )}
            >
              <UserPlus className="h-3.5 w-3.5 mr-1.5" />
              {view === 'users' ? 'Zurück zum Chat' : 'Neu / Gruppe'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}