"use client";

import { useRouter } from "next/navigation";
import { useAuth } from "@/hooks/useAuth";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Phone, Building2, AtSign, CalendarDays, LogOut } from "lucide-react";

const ROLE_COLORS: Record<string, string> = {
  admin: "bg-destructive/15 text-destructive border-destructive/20",
  organizer: "bg-purple-soft text-purple-accent border-purple-accent/20",
  member: "bg-rose-soft text-rose-accent border-rose-accent/20",
};

export default function ProfilePage() {
  const router = useRouter();
  const user = useAuth((s) => s.user);
  const logout = useAuth((s) => s.logout);

  if (!user) return null;

  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
  const joinedDate = new Date(user.created_at).toLocaleDateString("en-GB", { month: "long", year: "numeric" });

  async function handleLogout() {
    await logout();
    router.push("/login");
  }

  return (
    <div className="max-w-md mx-auto space-y-6 animate-fade-in">
      <div className="flex flex-col items-center gap-4 pt-4">
        {/* Avatar with gradient ring */}
        <div className="relative">
          <div className="absolute -inset-1 rounded-full bg-gradient-to-br from-rose-accent via-purple-accent to-gold-accent opacity-50 blur-sm" />
          <Avatar className="relative h-20 w-20 border-2 border-background">
            <AvatarFallback className="bg-surface-elevated text-rose-accent text-2xl font-bold">
              {initials}
            </AvatarFallback>
          </Avatar>
        </div>

        <div className="text-center">
          <p className="font-display text-2xl font-bold tracking-wide">{user.full_name}</p>
          <p className="text-sm text-muted-foreground mt-1">{user.email}</p>
        </div>

        <Badge className={`${ROLE_COLORS[user.role] ?? "bg-surface-elevated text-muted-foreground"} border capitalize`}>
          {user.role}
        </Badge>
      </div>

      <Separator className="bg-border/30" />

      <div className="space-y-1 rounded-xl bg-surface-elevated border border-border/30 p-4">
        {user.phone && (
          <div className="flex items-center justify-between py-2">
            <span className="flex items-center gap-2 text-sm text-dim">
              <Phone size={14} />
              Phone
            </span>
            <span className="text-sm text-foreground">{user.phone}</span>
          </div>
        )}
        {user.organization_name && (
          <div className="flex items-center justify-between py-2">
            <span className="flex items-center gap-2 text-sm text-dim">
              <Building2 size={14} />
              Organization
            </span>
            <span className="text-sm text-foreground">{user.organization_name}</span>
          </div>
        )}
        {user.instagram_handle && (
          <div className="flex items-center justify-between py-2">
            <span className="flex items-center gap-2 text-sm text-dim">
              <AtSign size={14} />
              Instagram
            </span>
            <span className="text-sm text-foreground">{user.instagram_handle}</span>
          </div>
        )}
        <div className="flex items-center justify-between py-2">
          <span className="flex items-center gap-2 text-sm text-dim">
            <CalendarDays size={14} />
            Member since
          </span>
          <span className="text-sm text-foreground">{joinedDate}</span>
        </div>
      </div>

      <Button
        variant="outline"
        className="w-full border-destructive/30 text-destructive hover:bg-destructive/10 hover:border-destructive/50"
        onClick={handleLogout}
      >
        <LogOut size={16} />
        Sign out
      </Button>
    </div>
  );
}
