import type { Metadata } from 'next';
import { getAccountToken } from '@/lib/account-session';
import { backendApi, type ApiVendorProfile } from '@/lib/backend-api';
import { VendorProfileForm } from '@/components/vendor/vendor-profile-form';

export const metadata: Metadata = { title: 'Store Profile' };
export const dynamic = 'force-dynamic';

export default async function VendorProfilePage() {
  const token = getAccountToken();
  let profile: ApiVendorProfile = {};

  if (token) {
    try {
      const res = await backendApi.getVendorProfile(token);
      profile = res.data ?? {};
    } catch {
      // Fail soft — the form still renders and lets the vendor fill it in from scratch.
    }
  }

  return (
    <div className="space-y-5">
      <h1 className="font-serif text-2xl font-bold text-navy-800">Store Profile</h1>
      <p className="-mt-3 text-xs text-navy-500">
        This information appears on your public storefront page, where buyers can browse your products and contact you.
      </p>
      <div className="card p-6">
        <VendorProfileForm profile={profile} />
      </div>
    </div>
  );
}