import type { Metadata } from 'next';
import { requireUser } from '@/lib/auth/session';
import { PageHeader } from '@/components/account/page-header';
import { Card, CardHeader } from '@/components/ui/primitives';
import { ProfileForm, ChangeEmailForm } from './forms';
import { AvatarForm } from './avatar-form';

export const metadata: Metadata = { title: 'Profile settings', robots: { index: false } };

export default async function SettingsPage() {
  const u = await requireUser('/account/settings');
  return (
    <>
      <PageHeader title="Profile" description="Your name, public handle, bio and display currency." />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
        <div className="space-y-4">
          <Card>
            <CardHeader title="Identity" subtitle="Shown on your public profile if you enable it." />
            <div className="p-4">
              <ProfileForm user={{ name: u.name, handle: u.handle, bio: u.bio, displayCurrency: u.displayCurrency }} />
            </div>
          </Card>
          <Card>
            <CardHeader title="E-mail address" subtitle={`Signed in as ${u.email}`} />
            <div className="p-4">
              <ChangeEmailForm pendingEmail={u.pendingEmail} />
            </div>
          </Card>
        </div>
        <div className="space-y-4">
          <Card>
            <CardHeader title="Avatar" />
            <div className="p-4">
              <AvatarForm avatarUrl={u.avatarUrl} initial={(u.name ?? u.email).slice(0, 1).toUpperCase()} />
            </div>
          </Card>
          <Card>
            <CardHeader title="Membership" />
            <dl className="grid grid-cols-2 gap-y-2 p-4 text-xs">
              <dt className="text-subtle">Plan</dt>
              <dd className="capitalize">{u.role === 'user' ? 'Free' : u.role}</dd>
              <dt className="text-subtle">Member since</dt>
              <dd>{u.createdAt.toISOString().slice(0, 10)}</dd>
              <dt className="text-subtle">E-mail verified</dt>
              <dd>{u.emailVerifiedAt ? 'Yes' : 'No'}</dd>
              <dt className="text-subtle">Authenticator</dt>
              <dd>{u.mfaEnabled ? 'Enabled' : 'Off'}</dd>
            </dl>
          </Card>
        </div>
      </div>
    </>
  );
}