import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { useAuthStore } from "@/store/auth";
import { toast } from "sonner";
import { Camera, Check } from "lucide-react";

export const Route = createFileRoute("/_public/account/profile")({
  head: () => ({ meta: [
    { title: "Profile — Purple Zone Account" },
    { name: "description", content: "Manage your public profile, avatar, bio and visibility." },
  ]}),
  component: ProfilePage,
});

function ProfilePage() {
  const { user } = useAuthStore();
  const [nickname, setNickname] = useState(user?.name ?? "");
  const [tagline, setTagline] = useState("Purple Zone regular · Retakes main");
  const [country, setCountry] = useState("GE");
  const [bio, setBio] = useState("CS2 competitive player — mostly retakes and 5v5. Add me if you'd like to queue.");
  const [publicStats, setPublicStats] = useState(true);
  const [publicInventory, setPublicInventory] = useState(false);
  const [publicFriends, setPublicFriends] = useState(true);

  return (
    <div className="space-y-6">
      <PageHeader
        title="Profile"
        description="How other players see you across Purple Zone."
        actions={<Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Profile saved")}><Check className="mr-1 h-4 w-4" /> Save changes</Button>}
      />

      <section className="rounded-xl border border-border bg-card p-6">
        <SectionHeader title="Identity" description="Public-facing name and avatar." />
        <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
          <div className="relative">
            <Avatar className="h-24 w-24 ring-2 ring-primary/40">
              <AvatarImage src={user?.avatar} />
              <AvatarFallback>{nickname[0]}</AvatarFallback>
            </Avatar>
            <Button size="icon" variant="secondary" className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full"><Camera className="h-4 w-4" /></Button>
          </div>
          <div className="grid flex-1 gap-4 sm:grid-cols-2">
            <div className="space-y-1.5">
              <Label htmlFor="nick">Nickname</Label>
              <Input id="nick" value={nickname} onChange={(e) => setNickname(e.target.value)} />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="country">Country</Label>
              <Input id="country" value={country} onChange={(e) => setCountry(e.target.value)} />
            </div>
            <div className="sm:col-span-2 space-y-1.5">
              <Label htmlFor="tag">Tagline</Label>
              <Input id="tag" value={tagline} onChange={(e) => setTagline(e.target.value)} />
            </div>
            <div className="sm:col-span-2 space-y-1.5">
              <Label htmlFor="bio">Bio</Label>
              <Textarea id="bio" rows={4} value={bio} onChange={(e) => setBio(e.target.value)} />
            </div>
          </div>
        </div>
      </section>

      <section className="rounded-xl border border-border bg-card p-6">
        <SectionHeader title="Privileges & badges" description="Displayed next to your name." />
        <div className="flex flex-wrap gap-2">
          <Badge variant="outline" className="border-secondary/40 text-secondary">VIP</Badge>
          <Badge variant="outline" className="border-primary/40 text-primary">Subscriber</Badge>
          <Badge variant="outline">Veteran · 2y</Badge>
          <Badge variant="outline">Top 5% rating</Badge>
        </div>
      </section>

      <section className="rounded-xl border border-border bg-card p-6">
        <SectionHeader title="Visibility" description="Choose what other players can see on your profile." />
        <div className="divide-y divide-border/60">
          <VisRow label="Public statistics" hint="Kills, K/D, rank" value={publicStats} onChange={setPublicStats} />
          <VisRow label="Public inventory" hint="Skins and loadouts" value={publicInventory} onChange={setPublicInventory} />
          <VisRow label="Friend list" hint="Show who you play with" value={publicFriends} onChange={setPublicFriends} />
        </div>
      </section>
    </div>
  );
}

function VisRow({ label, hint, value, onChange }: { label: string; hint: string; value: boolean; onChange: (v: boolean) => void }) {
  return (
    <div className="flex items-center justify-between py-3">
      <div>
        <div className="font-medium">{label}</div>
        <div className="text-xs text-muted-foreground">{hint}</div>
      </div>
      <Switch checked={value} onCheckedChange={onChange} />
    </div>
  );
}