import { createFileRoute, Link } from "@tanstack/react-router";
import { useState, useMemo } from "react";
import { Search as SearchIcon, FileText, MessageSquare } from "lucide-react";
import { PageHeader, EmptyState } from "@/components/common/PageBits";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { MOCK_DOCUMENTS, MOCK_CHATS } from "@/lib/mock-data";
import { Badge } from "@/components/ui/badge";

export const Route = createFileRoute("/_app/search")({
  head: () => ({ meta: [{ title: "Search — Study Unique" }] }),
  component: SearchPage,
});

function SearchPage() {
  const [q, setQ] = useState("");

  const docs = useMemo(() => {
    const k = q.toLowerCase();
    return MOCK_DOCUMENTS.filter(
      (d) =>
        !k ||
        d.title.toLowerCase().includes(k) ||
        d.excerpt.toLowerCase().includes(k) ||
        d.tags.some((t) => t.toLowerCase().includes(k)),
    );
  }, [q]);
  const chats = useMemo(() => {
    const k = q.toLowerCase();
    return MOCK_CHATS.filter((c) => !k || c.title.toLowerCase().includes(k));
  }, [q]);

  return (
    <div className="mx-auto w-full max-w-5xl space-y-5 p-4 md:p-6">
      <PageHeader title="Search" description="Find documents, chats and topics across your workspace." />

      <div className="relative">
        <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          autoFocus
          placeholder="Search across everything…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          className="h-12 pl-9 text-base"
        />
      </div>

      <Tabs defaultValue="all">
        <TabsList>
          <TabsTrigger value="all">All ({docs.length + chats.length})</TabsTrigger>
          <TabsTrigger value="docs">Documents ({docs.length})</TabsTrigger>
          <TabsTrigger value="chats">Chats ({chats.length})</TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="mt-4 space-y-2">
          {docs.length + chats.length === 0 ? (
            <EmptyState icon={SearchIcon} title="No results" description="Try a different search." />
          ) : (
            <>
              {docs.map((d) => <DocRow key={d.id} d={d} />)}
              {chats.map((c) => <ChatRow key={c.id} c={c} />)}
            </>
          )}
        </TabsContent>
        <TabsContent value="docs" className="mt-4 space-y-2">
          {docs.map((d) => <DocRow key={d.id} d={d} />)}
        </TabsContent>
        <TabsContent value="chats" className="mt-4 space-y-2">
          {chats.map((c) => <ChatRow key={c.id} c={c} />)}
        </TabsContent>
      </Tabs>
    </div>
  );
}

function DocRow({ d }: { d: (typeof MOCK_DOCUMENTS)[number] }) {
  return (
    <Link
      to="/documents/$id"
      params={{ id: d.id }}
      className="flex items-start gap-3 rounded-xl border border-border bg-card p-4 hover:border-primary/40"
    >
      <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
        <FileText className="h-4 w-4" />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <p className="truncate text-sm font-medium">{d.title}</p>
          <Badge variant="outline" className="text-[10px] uppercase">{d.type}</Badge>
        </div>
        <p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{d.excerpt}</p>
      </div>
    </Link>
  );
}

function ChatRow({ c }: { c: (typeof MOCK_CHATS)[number] }) {
  return (
    <Link
      to="/chat"
      className="flex items-start gap-3 rounded-xl border border-border bg-card p-4 hover:border-primary/40"
    >
      <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
        <MessageSquare className="h-4 w-4" />
      </div>
      <div>
        <p className="text-sm font-medium">{c.title}</p>
        <p className="text-xs text-muted-foreground">Chat thread</p>
      </div>
    </Link>
  );
}