import Avatar from '@/Components/shared/Avatar';
import EmptyState from '@/Components/shared/EmptyState';
import Seo from '@/Components/shared/Seo';
import ActivityItem from '@/Components/social/ActivityItem';
import FollowButton from '@/Components/social/FollowButton';
import { Button } from '@/Components/ui/button';
import PublicLayout from '@/Layouts/PublicLayout';
import { PageProps } from '@/types';
import { ActivityEvent } from '@/types/models';
import { Link, router, usePage } from '@inertiajs/react';
import { Lock, Newspaper, Settings } from 'lucide-react';
import { useState } from 'react';

type Profile = { name: string; username: string; bio: string | null; avatar: string | null; joined: string; ratings_count: number; reviews_count: number; followers_count: number; following_count: number; activity_public: boolean; is_me: boolean; is_following: boolean };

const Stat = ({ n, label }: { n: number; label: string }) => <div><p className="text-h3 tabular-nums">{n.toLocaleString()}</p><p className="text-caption">{label}</p></div>;

export default function Show({ profile: p, items, next }: { profile: Profile; items: ActivityEvent[]; next: string | null }) {
    const { auth } = usePage<PageProps>().props;
    const [loading, setLoading] = useState(false);
    const more = () => router.reload({ data: { before: next }, only: ['items', 'next'], onStart: () => setLoading(true), onFinish: () => setLoading(false) });

    return (
        <PublicLayout>
            <Seo title={`${p.name} (@${p.username})`} description={p.bio ?? `${p.name} on Aether`} image={p.avatar} type="profile" />
            <div className="mx-auto max-w-3xl space-y-8">
                <header className="flex flex-col gap-5 rounded-2xl border border-border bg-card/60 p-6 shadow-soft sm:flex-row sm:items-center">
                    <Avatar name={p.name} src={p.avatar} className="size-20 text-2xl" />
                    <div className="min-w-0 flex-1 space-y-1">
                        <h1 className="text-h1 !text-2xl">{p.name}</h1>
                        <p className="text-sm text-muted-foreground">@{p.username} · joined {new Date(`${p.joined}T00:00:00Z`).toLocaleDateString('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC' })}</p>
                        {p.bio && <p className="pt-1 text-sm text-foreground/85">{p.bio}</p>}
                    </div>
                    {p.is_me ? <Link href={route('profile.edit')}><Button variant="secondary"><Settings />Edit profile</Button></Link>
                        : auth.user ? <FollowButton username={p.username} following={p.is_following} />
                        : <Link href={route('login')}><Button>Log in to follow</Button></Link>}
                </header>

                <div className="grid grid-cols-4 gap-4 rounded-2xl border border-border bg-card/60 p-5 text-center shadow-soft">
                    <Stat n={p.ratings_count} label="Ratings" /><Stat n={p.reviews_count} label="Reviews" /><Stat n={p.followers_count} label="Followers" /><Stat n={p.following_count} label="Following" />
                </div>

                <section className="space-y-3">
                    <h2 className="text-h2">Recent activity</h2>
                    {!p.activity_public && !p.is_me ? (
                        <EmptyState icon={Lock} title="Activity is private" description={`${p.name} keeps their activity to themselves.`} />
                    ) : items.length === 0 ? (
                        <EmptyState icon={Newspaper} title="No activity yet" />
                    ) : (
                        <>
                            {p.is_me && !p.activity_public && <p className="text-caption">Only you can see this. Your activity is private.</p>}
                            <div className="space-y-3">{items.map((e) => <ActivityItem key={e.id} event={e} showUser={false} />)}</div>
                            {next && <div className="flex justify-center pt-2"><Button variant="secondary" loading={loading} onClick={more}>Load more</Button></div>}
                        </>
                    )}
                </section>
            </div>
        </PublicLayout>
    );
}