import Link from 'next/link';
import type { Metadata } from 'next';
import { findSubscriptionPlan, getCommissionPlan } from '@/lib/catalog';
import { ROUTES } from '@/lib/routes';
import { VendorSignupForm } from '@/components/vendor/vendor-signup-form';
import { getSiteSettings, formatPrice } from '@/lib/site-settings';

export const metadata: Metadata = { title: 'Vendor Sign Up' };

export default async function VendorSignupPage({
  searchParams,
}: {
  searchParams: { plan?: string; type?: string };
}) {
  const isCommission = searchParams.type === 'commission';
  const planType = isCommission ? 'commission' : 'subscription';

  const [subscriptionPlan, commissionPlan, settings] = await Promise.all([
    !isCommission ? findSubscriptionPlan(searchParams.plan ?? 'free') : Promise.resolve(null),
    isCommission ? getCommissionPlan() : Promise.resolve(null),
    getSiteSettings(),
  ]);

  const name = isCommission ? commissionPlan!.name : subscriptionPlan!.name;
  const features = isCommission ? commissionPlan!.features : subscriptionPlan!.features;
  const priceLabel = isCommission
    ? `${commissionPlan!.rate}% commission`
    : subscriptionPlan!.price > 0
      ? `${formatPrice(subscriptionPlan!.price, settings.currency)}/month`
      : 'Free';

  return (
    <>
      <section className="bg-beige py-10">
        <div className="container-page">
          <h1 className="text-3xl font-serif font-bold text-navy-800">Vendor Sign Up</h1>
          <p className="mt-2 text-sm text-navy-600">
            You&apos;re applying for the <strong>{name}</strong> ({priceLabel}).
          </p>
        </div>
      </section>

      <section className="py-14">
        <div className="container-page grid gap-10 lg:grid-cols-[1fr_320px]">
          <div className="card p-6 sm:p-8">
            <VendorSignupForm planType={planType} planName={name} />
          </div>

          {/* Plan summary */}
          <aside className="card h-fit p-6">
            <h3 className="font-serif text-lg font-semibold text-navy-800">{name}</h3>
            {isCommission ? (
              <p className="mt-1 text-2xl font-bold text-gold-600">
                {commissionPlan!.rate}% <span className="text-sm font-normal text-navy-500">commission</span>
              </p>
            ) : (
              <p className="mt-1 text-2xl font-bold text-navy-800">
                {subscriptionPlan!.price > 0 ? formatPrice(subscriptionPlan!.price, settings.currency) : 'Free'}
                <span className="text-sm font-normal text-navy-500"> {subscriptionPlan!.price > 0 ? subscriptionPlan!.period : ''}</span>
              </p>
            )}
            <ul className="mt-4 space-y-2 text-xs text-navy-600">
              {features.map((feature) => (
                <li key={feature} className="flex items-start gap-2">
                  <span className="mt-0.5 text-gold-600" aria-hidden="true">&#10003;</span>
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <Link href={ROUTES.vendorShow} className="mt-5 block text-center text-xs font-semibold text-navy-600 hover:text-gold-600">
              &larr; Change Plan
            </Link>
          </aside>
        </div>
      </section>
    </>
  );
}