import { createFileRoute } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { players } from "@/features/_mock/data";
import { MessageCircle, UserPlus, UserMinus, Search } from "lucide-react";

export const Route = createFileRoute("/_public/account/friends")({
  head: () => ({ meta: [
    { title: "Friends — Purple Zone Account" },
    { name: "description", content: "Your friends list, invites and blocked users." },
  ]}),
  component: FriendsPage,
});

function FriendsPage() {
  const [q, setQ] = useState("");
  const friends = players.slice(1, 13);
  const incoming = players.slice(13, 16);
  const outgoing = players.slice(16, 18);
  const filtered = useMemo(() => friends.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())), [q, friends]);

  return (
    <div>
      <PageHeader
        title="Friends"
        description="Manage your friends, invites and blocked users."
        actions={<Button className="gradient-primary text-primary-foreground"><UserPlus className="mr-1 h-4 w-4" /> Add friend</Button>}
      />

      <div className="mb-4 relative max-w-md">
        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search friends…" className="pl-9" />
      </div>

      <Tabs defaultValue="friends">
        <TabsList>
          <TabsTrigger value="friends">Friends <Badge variant="outline" className="ml-2">{friends.length}</Badge></TabsTrigger>
          <TabsTrigger value="incoming">Incoming <Badge variant="outline" className="ml-2">{incoming.length}</Badge></TabsTrigger>
          <TabsTrigger value="outgoing">Outgoing <Badge variant="outline" className="ml-2">{outgoing.length}</Badge></TabsTrigger>
          <TabsTrigger value="blocked">Blocked</TabsTrigger>
        </TabsList>

        <TabsContent value="friends" className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
          {filtered.map((p) => (
            <div key={p.id} className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
              <Avatar className="h-11 w-11"><AvatarImage src={p.avatar} /><AvatarFallback>{p.name[0]}</AvatarFallback></Avatar>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="truncate font-medium">{p.name}</span>
                  <span className={`h-2 w-2 rounded-full ${p.onlineStatus === "online" ? "bg-success" : p.onlineStatus === "in-server" ? "bg-primary" : "bg-muted-foreground"}`} />
                </div>
                <div className="text-xs text-muted-foreground">{p.currentServer ?? p.rank}</div>
              </div>
              <Button size="icon" variant="ghost"><MessageCircle className="h-4 w-4" /></Button>
              <Button size="icon" variant="ghost" className="text-destructive"><UserMinus className="h-4 w-4" /></Button>
            </div>
          ))}
        </TabsContent>

        <TabsContent value="incoming" className="mt-4 space-y-2">
          {incoming.map((p) => (
            <div key={p.id} className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
              <Avatar className="h-10 w-10"><AvatarImage src={p.avatar} /><AvatarFallback>{p.name[0]}</AvatarFallback></Avatar>
              <div className="flex-1"><div className="font-medium">{p.name}</div><div className="text-xs text-muted-foreground">Wants to be friends</div></div>
              <Button size="sm" className="gradient-primary text-primary-foreground">Accept</Button>
              <Button size="sm" variant="ghost">Decline</Button>
            </div>
          ))}
        </TabsContent>

        <TabsContent value="outgoing" className="mt-4 space-y-2">
          {outgoing.map((p) => (
            <div key={p.id} className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
              <Avatar className="h-10 w-10"><AvatarImage src={p.avatar} /><AvatarFallback>{p.name[0]}</AvatarFallback></Avatar>
              <div className="flex-1"><div className="font-medium">{p.name}</div><div className="text-xs text-muted-foreground">Request sent</div></div>
              <Button size="sm" variant="outline">Cancel</Button>
            </div>
          ))}
        </TabsContent>

        <TabsContent value="blocked" className="mt-4 text-sm text-muted-foreground">You haven't blocked anyone.</TabsContent>
      </Tabs>
    </div>
  );
}