"use client";

import React, { useEffect, useState } from "react";
import { useDebounce } from "@/hooks/useDebounce";
import { useChatStore } from "@/hooks/useChatStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { ChatMessages } from "@/components/dashboard/ChatMessages";
import { ChatInput } from "@/components/dashboard/ChatInput";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Hash,
  Users,
  Plus,
  Search,
  UserPlus,
  ArrowLeft,
  Check,
  X,
  MessageSquare,
  Calendar,
  Menu,
} from "lucide-react";
import { cn, getUserColor } from "@/lib/utils";
import { useIsMobile } from "@/hooks/useMobile";

export default function TeamChatPage() {
  const {
    fetchRooms,
    rooms,
    activeRoomId,
    setActiveRoom,
    setupSSE,
    fetchMessages,
    createRoom,
    searchMessages,
    searchResults,
    isLoading,
  } = useChatStore();
  const { user: currentUser, login } = useAuthStore();
  const { presenceData, fetchPresenceData } = usePresenceStore();
  const isMobile = useIsMobile();

  const [sidebarSearch, setSidebarSearch] = useState("");
  const [view, setView] = useState<"chat" | "users" | "search">("chat");
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  const [groupName, setGroupName] = useState("");
  const [teamSearch, setTeamSearch] = useState("");
  const [allMembers, setAllMembers] = useState<any[]>([]);
  const [isLoadingMembers, setIsLoadingMembers] = useState(false);
  const [remoteResults, setRemoteResults] = useState<any[]>([]);
  const debouncedTeamSearch = useDebounce(teamSearch, 300);
  const [globalSearchQuery, setGlobalSearchQuery] = useState("");
  const [showSidebar, setShowSidebar] = useState(true);

  // BOLT: Load all team members when selecting participants.
  // Expected impact: Provides immediate suggestions instead of an empty list.
  useEffect(() => {
    if (view === "users") {
      const fetchMembers = async () => {
        setIsLoadingMembers(true);
        try {
          if (typeof fetch === "undefined") {
            setAllMembers(presenceData?.users || []);
            return;
          }

          const res = await fetch("/api/team/members");
          if (res?.ok) {
            const data = await res.json();
            setAllMembers(data);
          } else {
            setAllMembers(presenceData?.users || []);
          }
        } catch (err) {
          console.error("Failed to load members:", err);
          setAllMembers(presenceData?.users || []);
        } finally {
          setIsLoadingMembers(false);
        }
      };
      fetchMembers();

      // BOLT: Live presence polling while in member selection.
      const interval = setInterval(fetchPresenceData, 15000);
      return () => clearInterval(interval);
    }
  }, [view, fetchPresenceData, presenceData]);

  // BOLT: Federated Search for team members.
  // Combines local presence cache with a remote search for offline/non-cached users.
  useEffect(() => {
    if (
      view !== "users" ||
      !debouncedTeamSearch ||
      debouncedTeamSearch.length < 2
    ) {
      setRemoteResults([]);
      return;
    }

    const searchTeam = async () => {
      try {
        const response = await fetch(
          `/api/team/search?q=${encodeURIComponent(debouncedTeamSearch)}`,
        );
        if (response.ok) {
          const data = await response.json();
          // Filter only users from unified search results
          setRemoteResults(data.filter((r: any) => r.type === "user"));
        }
      } catch (err) {
        console.error("Team search failed:", err);
      }
    };
    searchTeam();
  }, [debouncedTeamSearch, view]);

  useEffect(() => {
    if (isMobile) {
      setShowSidebar(true);
    }
  }, [isMobile]);

  useEffect(() => {
    if (!currentUser) {
      fetch("/api/auth/session")
        .then((res) => res.json())
        .then((session) => {
          if (session?.user) login(session.user);
        });
      return;
    }

    fetchRooms();
    fetchPresenceData();
    fetchMessages();
    const cleanup = setupSSE();
    return () => {
      if (typeof cleanup === "function") cleanup();
    };
  }, [
    fetchRooms,
    fetchMessages,
    setupSSE,
    currentUser,
    login,
    fetchPresenceData,
  ]);

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

  const handleToggleUser = (userId: string) => {
    const isSelf = String(userId) === String(currentUser?.id);
    if (isSelf) return;

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

  const handleCreateChat = async () => {
    const participantIds = selectedUsers.filter((id) => id !== currentUser?.id);
    if (participantIds.length === 0) return;

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

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

  const handleGlobalSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    if (globalSearchQuery.trim()) {
      setView("search");
      if (isMobile) setShowSidebar(false);
      await searchMessages(globalSearchQuery);
    }
  };

  const selectRoom = (roomId: string) => {
    setActiveRoom(roomId);
    setView("chat");
    if (isMobile) setShowSidebar(false);
  };

  return (
    <div className="flex h-[calc(100vh-12rem)] border border-border rounded-lg overflow-hidden bg-background shadow-lg relative">
      {/* Sidebar */}
      <div
        className={cn(
          "w-full md:w-64 border-r border-border bg-muted/10 flex flex-col absolute inset-0 z-30 transition-transform duration-300 md:relative md:translate-x-0 bg-background",
          isMobile && !showSidebar && "-translate-x-full",
        )}
      >
        <div className="p-4 border-b border-border bg-background">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-bold text-[10px] uppercase tracking-widest text-muted-foreground">
              Channels
            </h2>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6"
              onClick={() => {
                setView("users");
                if (isMobile) setShowSidebar(false);
              }}
            >
              <Plus className="h-4 w-4" />
            </Button>
          </div>
          <form onSubmit={handleGlobalSearch} className="relative">
            <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
            <input
              placeholder="Global suchen (Enter)..."
              className="w-full bg-muted/30 border border-border rounded-md py-1.5 pl-8 pr-3 text-xs outline-none focus:ring-1 focus:ring-primary/30 transition-all"
              value={globalSearchQuery}
              onChange={(e) => setGlobalSearchQuery(e.target.value)}
            />
          </form>
        </div>

        <ScrollArea className="flex-1 bg-muted/5">
          <div className="p-2 space-y-0.5">
            {rooms
              .filter(
                (r) =>
                  r.name?.toLowerCase().includes(sidebarSearch.toLowerCase()) ||
                  r.type === "direct",
              )
              .map((room) => (
                <button
                  key={room.id}
                  onClick={() => selectRoom(room.id)}
                  className={cn(
                    "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left",
                    activeRoomId === room.id && view === "chat"
                      ? "bg-primary text-primary-foreground font-semibold"
                      : "hover:bg-muted text-muted-foreground hover:text-foreground",
                  )}
                >
                  {room.type === "direct" ? (
                    <Users className="h-4 w-4" />
                  ) : (
                    <Hash className="h-4 w-4" />
                  )}
                  <span className="truncate font-medium">
                    {room.name || "Direktnachricht"}
                  </span>
                </button>
              ))}
          </div>
        </ScrollArea>

        <div className="p-2 border-t border-border bg-background">
          <Button
            variant="ghost"
            className="w-full justify-start text-[10px] uppercase font-black tracking-widest h-8"
            onClick={() => {
              setView("users");
              if (isMobile) setShowSidebar(false);
            }}
          >
            <UserPlus className="h-3.5 w-3.5 mr-2" />
            Neue Gruppe
          </Button>
        </div>
      </div>

      {/* Main Area */}
      <div className="flex-1 flex flex-col bg-background min-w-0">
        {view === "chat" ? (
          <>
            {/* Chat Header */}
            <div className="h-14 border-b border-border px-4 sm:px-6 flex items-center justify-between bg-muted/5">
              <div className="flex items-center gap-3">
                {isMobile && (
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 mr-1"
                    onClick={() => setShowSidebar(true)}
                  >
                    <Menu className="h-4 w-4" />
                  </Button>
                )}
                <div className="font-bold text-sm text-foreground flex items-center truncate">
                  {activeRoom?.type === "direct" ? (
                    <Users className="h-4 w-4 mr-2 text-primary shrink-0" />
                  ) : (
                    <Hash className="h-4 w-4 mr-2 text-primary shrink-0" />
                  )}
                  <span className="truncate">
                    {activeRoom?.name || "Kanal wählen"}
                  </span>
                </div>
              </div>
            </div>

            {/* Messages */}
            <div className="flex-1 overflow-hidden relative">
              <ChatMessages />
            </div>

            {/* Input */}
            <ChatInput />
          </>
        ) : view === "users" ? (
          <div className="flex-1 flex flex-col h-full overflow-hidden bg-background">
            <div className="p-4 sm:p-6 border-b border-border bg-muted/10 space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => {
                      setView("chat");
                      if (isMobile) setShowSidebar(true);
                    }}
                  >
                    <ArrowLeft className="h-4 w-4" />
                  </Button>
                  <h2 className="text-lg sm:text-xl font-bold tracking-tight">
                    Neue Nachricht
                  </h2>
                </div>
                {selectedUsers.length > 0 && (
                  <Badge className="bg-primary text-white px-3 py-1 font-black text-xs uppercase tracking-widest">
                    {selectedUsers.length} gewählt
                  </Badge>
                )}
              </div>

              <div className="flex flex-col gap-4">
                <p className="text-xs sm:text-sm text-muted-foreground font-medium">
                  Wähle Teammitglieder aus, um einen Chat zu starten.
                </p>

                <div className="relative">
                  <Search className="absolute left-3 top-3 h-3.5 w-3.5 text-muted-foreground" />
                  <Input
                    placeholder="Mitglied suchen..."
                    value={teamSearch}
                    onChange={(e) => setTeamSearch(e.target.value)}
                    className="h-10 bg-background border-border pl-9 focus:border-primary shadow-sm"
                  />
                </div>

                {selectedUsers.length > 1 && (
                  <div className="flex gap-2 animate-in slide-in-from-top-2 duration-300">
                    <Input
                      placeholder="Gruppenname..."
                      value={groupName}
                      onChange={(e) => setGroupName(e.target.value)}
                      className="h-10 bg-background border-primary/20 focus:border-primary shadow-sm"
                    />
                  </div>
                )}
              </div>
            </div>

            <ScrollArea className="flex-1">
              <div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                {(() => {
                  // BOLT: metadata source of truth is always the database (allMembers)
                  // to prevent "? Unbekannt" flicker from incomplete Redis data.
                  if (isLoadingMembers && !teamSearch) {
                    return Array.from({ length: 6 }).map((_, i) => (
                      <div
                        key={i}
                        className="h-20 rounded-xl border border-border bg-muted/10 animate-pulse"
                      />
                    ));
                  }

                  const visibleUsers =
                    allMembers.length > 0
                      ? allMembers
                      : presenceData?.users || [];
                  const filteredUsers = visibleUsers
                    .filter((u) => {
                      const isSelfById =
                        String(u.id) === String(currentUser?.id);
                      const isSelfByEmail = u.email === currentUser?.email;
                      return !isSelfById && !isSelfByEmail;
                    })
                    .filter((u) =>
                      teamSearch
                        ? `${u.name} ${u.email}`
                            .toLowerCase()
                            .includes(teamSearch.toLowerCase())
                        : true,
                    );

                  // Update statuses from live presenceData, keeping DB metadata
                  // BOLT: We map by email to ensure stable status dots regardless of session ID variation.
                  const usersWithLiveStatus = filteredUsers.map((u) => {
                    const email = u.email?.toLowerCase();
                    const isLiveOnline = presenceData?.users?.some(
                      (pu) => pu.email?.toLowerCase() === email,
                    );
                    return {
                      ...u,
                      status: isLiveOnline ? "online" : "offline",
                    };
                  });

                  // Add search results if they are not already in our team list
                  const searchExtras = remoteResults
                    .filter(
                      (r) =>
                        !usersWithLiveStatus.some(
                          (u) => String(u.id) === String(r.id),
                        ),
                    )
                    .filter((r) => String(r.id) !== String(currentUser?.id));

                  const allVisibleUsers = [
                    ...usersWithLiveStatus,
                    ...searchExtras,
                  ].sort((a, b) => {
                    const aStatus = (a as any).status || "offline";
                    const bStatus = (b as any).status || "offline";
                    if (aStatus === bStatus) {
                      return (a.name || "").localeCompare(b.name || "");
                    }
                    return aStatus === "online" ? -1 : 1;
                  });

                  if (allVisibleUsers.length === 0 && !isLoadingMembers) {
                    return (
                      <div className="col-span-full py-12 text-center text-muted-foreground italic text-sm">
                        Keine Teammitglieder gefunden.
                      </div>
                    );
                  }

                  return allVisibleUsers.map((u) => {
                    const isSelected = selectedUsers.includes(u.id);
                    const isOnline = (u as any).status === "online";
                    return (
                      <button
                        key={u.id}
                        onClick={() => handleToggleUser(u.id)}
                        className={cn(
                          "flex items-center gap-4 p-3 sm:p-4 rounded-xl transition-all text-left group border shadow-sm",
                          isSelected
                            ? "bg-primary/10 border-primary ring-1 ring-primary/20"
                            : "hover:bg-muted border-border bg-background",
                        )}
                      >
                        <div className="relative shrink-0">
                          <Avatar className="h-10 w-10 sm:h-12 sm:w-12 border-2 border-background shadow-md">
                            <AvatarImage src={u.image || undefined} />
                            <AvatarFallback className="text-xs font-black bg-primary/10 text-primary">
                              {u.name?.charAt(0) || "?"}
                            </AvatarFallback>
                          </Avatar>
                          {isSelected ? (
                            <div className="absolute -top-1 -right-1 bg-primary text-white rounded-full p-1 shadow-lg border-2 border-background">
                              <Check className="h-2.5 w-2.5 stroke-[3px]" />
                            </div>
                          ) : (
                            <span
                              className={cn(
                                "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background shadow-sm",
                                isOnline ? "bg-green-500" : "bg-slate-400",
                              )}
                            ></span>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between gap-2">
                            <div className="text-xs sm:text-sm font-black truncate text-foreground tracking-tight">
                              {u.name}
                            </div>
                            <span
                              className={cn(
                                "text-[9px] uppercase tracking-[0.22em] font-black rounded-full px-2 py-0.5",
                                isOnline
                                  ? "bg-emerald-100 text-emerald-700"
                                  : "bg-slate-100 text-slate-600",
                              )}
                            >
                              {isOnline ? "Online" : "Offline"}
                            </span>
                          </div>
                          <div className="text-[10px] sm:text-xs text-muted-foreground truncate font-medium">
                            {u.email}
                          </div>
                        </div>
                      </button>
                    );
                  });
                })()}
              </div>
            </ScrollArea>

            <div className="p-4 sm:p-6 border-t border-border flex gap-3 bg-muted/5">
              <Button
                variant="outline"
                className="flex-1 text-[10px] uppercase font-black h-10 sm:h-12 tracking-widest transition-all"
                onClick={() => {
                  setView("chat");
                  if (isMobile) setShowSidebar(true);
                  setSelectedUsers([]);
                }}
              >
                Abbrechen
              </Button>
              {selectedUsers.length > 0 && (
                <Button
                  className="flex-1 text-[10px] uppercase font-black h-10 sm:h-12 tracking-widest shadow-xl shadow-primary/20 transition-all hover:scale-[1.02]"
                  onClick={handleCreateChat}
                >
                  {selectedUsers.length > 1
                    ? "Gruppe erstellen"
                    : "Chat starten"}
                </Button>
              )}
            </div>
          </div>
        ) : (
          <div className="flex-1 flex flex-col h-full overflow-hidden bg-background">
            <div className="p-4 sm:p-6 border-b border-border bg-muted/10 space-y-2">
              <div className="flex items-center gap-3">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => {
                    setView("chat");
                    if (isMobile) setShowSidebar(true);
                  }}
                >
                  <ArrowLeft className="h-4 w-4" />
                </Button>
                <h2 className="text-lg sm:text-xl font-bold tracking-tight">
                  Suchergebnisse
                </h2>
              </div>
              <p className="text-xs sm:text-sm text-muted-foreground font-medium pl-11">
                {isLoading
                  ? "Suche läuft..."
                  : `${searchResults.length} Ergebnisse für "${globalSearchQuery}".`}
              </p>
            </div>

            <ScrollArea className="flex-1">
              <div className="p-4 sm:p-6 space-y-4 max-w-4xl mx-auto">
                {searchResults.map((msg) => {
                  const room = rooms.find((r) => r.id === msg.room_id);
                  const userColor = getUserColor(msg.sender_id || "default");

                  return (
                    <button
                      key={msg.id}
                      onClick={() => selectRoom(msg.room_id)}
                      className="w-full text-left p-3 sm:p-4 rounded-xl border border-border hover:border-primary/50 hover:bg-muted/30 transition-all group"
                    >
                      <div className="flex items-start gap-3 sm:gap-4">
                        <Avatar className="h-8 w-8 sm:h-9 sm:w-9 border shadow-sm">
                          <AvatarImage src={msg.sender_image} />
                          <AvatarFallback
                            className={cn("text-xs font-bold", userColor)}
                          >
                            {msg.sender_name?.charAt(0)}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1 min-w-0 space-y-1">
                          <div className="flex items-center justify-between">
                            <span className="text-[10px] sm:text-xs font-black uppercase tracking-tight text-foreground">
                              {msg.sender_name}
                            </span>
                            <div className="flex items-center gap-1.5 text-[9px] sm:text-[10px] font-medium text-muted-foreground">
                              <Calendar className="h-2.5 w-2.5 sm:h-3 sm:h-3" />
                              {new Date(msg.created_at).toLocaleDateString()}
                            </div>
                          </div>
                          <p className="text-xs sm:text-sm text-foreground/80 line-clamp-2 leading-normal">
                            {msg.message}
                          </p>
                          <div className="flex items-center gap-2 mt-2">
                            <Badge
                              variant="outline"
                              className="text-[8px] sm:text-[9px] font-black uppercase tracking-tighter px-1.5 h-4 border-primary/20 bg-primary/5 text-primary"
                            >
                              {room?.name || "Unbekannter Kanal"}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            </ScrollArea>
          </div>
        )}
      </div>
    </div>
  );
}