import type { Metadata } from 'next';
import { getAccountToken } from '@/lib/account-session';
import { getCurrentAccount } from '@/lib/account';
import { backendApi, BackendApiError, type ApiVendorSubscriptionInfo, type ApiSubscriptionPlan } from '@/lib/backend-api';
import { isSubscriptionVendor } from '@/lib/vendor';
import { SubscriptionForm } from '@/components/vendor/subscription-form';
import { getSiteSettings } from '@/lib/site-settings';

export const metadata: Metadata = { title: 'Subscription' };

export default async function VendorSubscriptionPage() {
  const [account, token, settings] = await Promise.all([
    getCurrentAccount(),
    Promise.resolve(getAccountToken()),
    getSiteSettings(),
  ]);

  if (!isSubscriptionVendor(account)) {
    return (
      <div className="card p-6">
        <h1 className="font-serif text-2xl font-bold text-navy-800">Subscription</h1>
        <p className="mt-2 text-sm text-navy-600">
          Marketplace vendors pay per sale via commission instead of a monthly subscription — there&apos;s nothing to
          manage here. Check the <span className="font-semibold">Sales</span> tab for your commission payouts.
        </p>
      </div>
    );
  }

  let info: ApiVendorSubscriptionInfo | null = null;
  let plans: ApiSubscriptionPlan[] = [];
  let loadError: string | null = null;

  if (token) {
    try {
      const [infoRes, plansRes] = await Promise.all([backendApi.getVendorSubscription(token), backendApi.getSubscriptionPlans()]);
      info = infoRes.data;
      plans = plansRes.data;
    } catch (err) {
      loadError = err instanceof BackendApiError ? err.message : 'Could not load your subscription right now.';
    }
  }

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl font-bold text-navy-800">Subscription</h1>

      {loadError && <p className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{loadError}</p>}

      {info && (
        <div className="card p-5">
          {info.subscription ? (
            <>
              <p className="text-sm text-navy-600">
                Current plan: <span className="font-semibold text-navy-800">{info.subscription.plan_name}</span> ·{' '}
                <span className="capitalize">{info.subscription.status}</span>
              </p>
              <p className="mt-1 text-sm text-navy-600">
                Products used: {info.products_used}
                {info.subscription.product_limit > 0 ? ` / ${info.subscription.product_limit}` : ' (unlimited)'}
              </p>
              {info.latest_payment_status && (
                <p className="mt-1 text-xs capitalize text-navy-500">Latest payment: {info.latest_payment_status}</p>
              )}
            </>
          ) : (
            <p className="text-sm text-navy-600">You don&apos;t have an active plan yet.</p>
          )}
        </div>
      )}

      {plans.length > 0 && (
        <div className="card p-6">
          <h2 className="font-serif text-lg font-bold text-navy-800">Choose a Plan</h2>
          <p className="mt-1 text-xs text-navy-500">Subscribing to a paid plan is reviewed by an admin before it activates.</p>
          <div className="mt-4">
            <SubscriptionForm plans={plans} currency={settings.currency} />
          </div>
        </div>
      )}
    </div>
  );
}