import Link from 'next/link';
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=/account`);
  }

  return (
    <section className="bg-beige py-14">
      <div className="container-page 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>

          <Link
            href={ROUTES.orders}
            className="mt-6 block w-full rounded-md border border-navy-200 px-4 py-2 text-center text-sm font-semibold text-navy-800 hover:bg-navy-50"
          >
            Order History
          </Link>

          <form action={logoutAccount} className="mt-3">
            <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>
    </section>
  );
}