"use client";

import * as React from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { signOut, useSession } from "next-auth/react";
import { apiFetch } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Plus, Search, Settings, LogOut, MoreHorizontal, Trash2, Pencil, User, EyeOff } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { groupChatsByDate, GROUP_ORDER, cn } from "@/lib/utils";
import { toast } from "sonner";

interface ChatListItem {
  id: string;
  title: string;
  model: string;
  updatedAt: string;
  createdAt: string;
}

export function Sidebar() {
  const router = useRouter();
  const params = useParams<{ id?: string }>();
  const { data: session } = useSession();
  const qc = useQueryClient();
  const [search, setSearch] = React.useState("");
  const [editingId, setEditingId] = React.useState<string | null>(null);
  const [editValue, setEditValue] = React.useState("");

  const chatsQuery = useQuery({
    queryKey: ["chats"],
    queryFn: () => apiFetch<{ chats: ChatListItem[] }>("/api/chats"),
    refetchInterval: 10_000,
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => apiFetch(`/api/chats/${id}`, { method: "DELETE" }),
    onSuccess: (_, id) => {
      qc.invalidateQueries({ queryKey: ["chats"] });
      if (params?.id === id) router.push("/chat");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const renameMutation = useMutation({
    mutationFn: ({ id, title }: { id: string; title: string }) =>
      apiFetch(`/api/chats/${id}`, {
        method: "PATCH",
        body: JSON.stringify({ title }),
      }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["chats"] }),
    onError: (e: Error) => toast.error(e.message),
  });

  const chats = chatsQuery.data?.chats ?? [];
  const filtered = search.trim()
    ? chats.filter((c) => c.title.toLowerCase().includes(search.toLowerCase()))
    : chats;
  const grouped = groupChatsByDate(filtered.map((c) => ({ ...c, updatedAt: new Date(c.updatedAt) })));

  function startEdit(chat: ChatListItem) {
    setEditingId(chat.id);
    setEditValue(chat.title);
  }
  function commitEdit() {
    if (!editingId) return;
    const trimmed = editValue.trim();
    if (trimmed) renameMutation.mutate({ id: editingId, title: trimmed });
    setEditingId(null);
  }

  const userInitial = (session?.user?.username ?? "U")[0]?.toUpperCase() ?? "U";

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between p-3">
        <Link href="/chat" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary font-serif text-primary-foreground">
            O
          </div>
          <span className="font-serif text-base font-medium">Ollama</span>
        </Link>
      </div>

      <div className="space-y-1.5 px-3 pb-2">
        <Button asChild className="w-full justify-start gap-2" variant="secondary">
          <Link href="/chat">
            <Plus className="h-4 w-4" />
            New chat
            <span className="ml-auto rounded bg-background/60 px-1.5 py-0.5 text-[10px] text-muted-foreground">
              ⌘K
            </span>
          </Link>
        </Button>
        <Button asChild className="w-full justify-start gap-2" variant="ghost">
          <Link href="/chat/temp">
            <EyeOff className="h-4 w-4" />
            Conversation temporaire
            <span className="ml-auto rounded bg-muted/60 px-1.5 py-0.5 text-[10px] text-muted-foreground">
              ⌘⇧K
            </span>
          </Link>
        </Button>
      </div>

      <div className="px-3 pb-2">
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search chats"
            className="h-8 pl-8 text-xs"
          />
        </div>
      </div>

      <div className="scroll-area flex-1 overflow-y-auto px-2">
        {chatsQuery.isLoading ? (
          <div className="px-2 py-4 text-xs text-muted-foreground">Loading chats…</div>
        ) : filtered.length === 0 ? (
          <div className="px-2 py-4 text-xs text-muted-foreground">No chats yet.</div>
        ) : (
          [...GROUP_ORDER, ...Object.keys(grouped).filter((k) => !GROUP_ORDER.includes(k))]
            .filter((g) => grouped[g]?.length)
            .map((group) => (
              <div key={group} className="mb-2">
                <div className="px-2 py-1.5 text-[11px] font-medium uppercase tracking-wider text-sidebar-muted">
                  {group}
                </div>
                <div className="space-y-0.5">
                  {grouped[group]!.map((chat) => {
                    const active = params?.id === chat.id;
                    const editing = editingId === chat.id;
                    return (
                      <div
                        key={chat.id}
                        className={cn(
                          "group flex items-center gap-1 rounded-lg px-2 py-1.5 text-sm transition-colors",
                          active
                            ? "bg-sidebar-hover text-sidebar-foreground"
                            : "text-sidebar-foreground hover:bg-sidebar-hover/60",
                        )}
                      >
                        {editing ? (
                          <Input
                            value={editValue}
                            onChange={(e) => setEditValue(e.target.value)}
                            onBlur={commitEdit}
                            onKeyDown={(e) => {
                              if (e.key === "Enter") commitEdit();
                              if (e.key === "Escape") setEditingId(null);
                            }}
                            autoFocus
                            className="h-7 px-2 py-1 text-xs"
                          />
                        ) : (
                          <Link
                            href={`/chat/${chat.id}`}
                            className="min-w-0 flex-1 truncate"
                            title={chat.title}
                          >
                            {chat.title || "New chat"}
                          </Link>
                        )}
                        {!editing && (
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon-sm"
                                className="h-6 w-6 opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100"
                                aria-label="Chat options"
                              >
                                <MoreHorizontal />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => startEdit(chat)}>
                                <Pencil />
                                Rename
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => deleteMutation.mutate(chat.id)}
                                className="text-destructive focus:text-destructive"
                              >
                                <Trash2 />
                                Delete
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            ))
        )}
      </div>

      <div className="border-t border-border p-2">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="w-full justify-start gap-2 px-2">
              <Avatar className="h-6 w-6">
                <AvatarFallback className="text-[10px]">{userInitial}</AvatarFallback>
              </Avatar>
              <span className="truncate text-sm">{session?.user?.username ?? "Account"}</span>
              {session?.user?.role === "admin" && (
                <span className="ml-auto rounded bg-primary/15 px-1.5 py-0.5 text-[10px] text-primary">
                  admin
                </span>
              )}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-[15rem]">
            <DropdownMenuItem asChild>
              <Link href="/settings">
                <Settings />
                Settings
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <Link href="/settings">
                <User />
                Account
              </Link>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
              <LogOut />
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}