import { redirect } from 'next/navigation';
import type { Metadata } from 'next';
import { getCurrentAccount } from '@/lib/account';
import { logoutAccount } from './actions';
import { ProfileForm } from '@/components/auth/profile-form';
import { ResendVerificationButton } from '@/components/auth/resend-verification-button';
import { ROUTES } from '@/lib/routes';

export const metadata: Metadata = { title: 'My Account' };

export default async function AccountPage() {
  const account = await getCurrentAccount();

  if (!account) {
    redirect(`${ROUTES.login}?redirect=${ROUTES.account}`);
    return;
  }

  return (
    <div className="grid gap-8 lg:grid-cols-3">
      {!account.email_verified && (
        <div className="rounded-md border border-gold-200 bg-gold-50 px-4 py-3 lg:col-span-3">
          <p className="text-sm font-semibold text-navy-800">Please verify your email address.</p>
          <p className="mt-0.5 text-xs text-navy-600">
            We sent a verification link to {account.email} when you registered. Check your inbox (and spam folder).
          </p>
          <ResendVerificationButton />
        </div>
      )}

      <div className="card h-fit p-6 lg:col-span-1">
        <h1 className="font-serif text-xl font-bold text-navy-800">My Account</h1>
        <dl className="mt-4 space-y-3 text-sm">
          <div>
            <dt className="text-navy-500">Name</dt>
            <dd className="font-medium text-navy-800">{account.name}</dd>
          </div>
          <div>
            <dt className="text-navy-500">Email</dt>
            <dd className="font-medium text-navy-800">{account.email}</dd>
          </div>
          <div>
            <dt className="text-navy-500">Phone</dt>
            <dd className="font-medium text-navy-800">{account.phone_number || '—'}</dd>
          </div>
          <div>
            <dt className="text-navy-500">Account Type</dt>
            <dd className="font-medium capitalize text-navy-800">{account.account_type.replace(/_/g, ' ')}</dd>
          </div>
          {account.vendor_profile && (
            <div>
              <dt className="text-navy-500">Vendor Store</dt>
              <dd className="font-medium text-navy-800">{account.vendor_profile.store_name ?? '—'}</dd>
            </div>
          )}
        </dl>

        <form action={logoutAccount} className="mt-6">
          <button
            type="submit"
            className="w-full rounded-md border border-navy-200 px-4 py-2 text-sm font-semibold text-navy-800 hover:bg-navy-50"
          >
            Sign Out
          </button>
        </form>
      </div>

      <div className="card p-6 lg:col-span-2">
        <h2 className="font-serif text-lg font-bold text-navy-800">Edit Profile</h2>
        <p className="mt-1 text-xs text-navy-500">Update your name, phone number, or password.</p>
        <ProfileForm initialName={account.name} initialPhone={account.phone_number ?? ''} />
      </div>
    </div>
  );
}