import Link from 'next/link';
import type { Metadata } from 'next';
import { getAccountToken } from '@/lib/account-session';
import { getCurrentAccount } from '@/lib/account';
import { backendApi, type ApiVendorSales, type ApiVendorSubscriptionInfo } from '@/lib/backend-api';
import { isSubscriptionVendor } from '@/lib/vendor';
import { ROUTES } from '@/lib/routes';
import { getSiteSettings, formatPrice } from '@/lib/site-settings';

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

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

  let sales: ApiVendorSales | null = null;
  let subscription: ApiVendorSubscriptionInfo | null = null;

  if (token) {
    const results = await Promise.allSettled([
      backendApi.getVendorSales(token),
      account && isSubscriptionVendor(account) ? backendApi.getVendorSubscription(token) : Promise.resolve(null),
    ]);
    if (results[0].status === 'fulfilled') sales = results[0].value.data;
    if (results[1].status === 'fulfilled' && results[1].value) subscription = results[1].value.data;
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-serif text-2xl font-bold text-navy-800">
          Welcome back{account ? `, ${account.name.split(' ')[0]}` : ''}
        </h1>
        <p className="mt-1 text-sm text-navy-500">
          {account?.vendor_profile?.store_name ?? 'Your store'} · {account?.account_type.replace(/_/g, ' ')}
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard label="Total Revenue" value={sales ? formatPrice(sales.total_revenue, settings.currency) : '—'} />
        <StatCard label="Total Orders" value={sales ? String(sales.total_orders) : '—'} />
        <StatCard label="Units Sold" value={sales ? String(sales.units_sold) : '—'} />
        <StatCard
          label="Pending Payout"
          value={sales?.pending_commission_payout != null ? formatPrice(sales.pending_commission_payout, settings.currency) : '—'}
        />
      </div>

      {subscription && (
        <div className="card p-5">
          <h2 className="font-serif text-lg font-bold text-navy-800">Subscription</h2>
          {subscription.subscription ? (
            <p className="mt-2 text-sm text-navy-600">
              <span className="font-semibold text-navy-800">{subscription.subscription.plan_name}</span> ·{' '}
              <span className="capitalize">{subscription.subscription.status}</span> · {subscription.products_used}
              {subscription.subscription.product_limit > 0 ? ` / ${subscription.subscription.product_limit}` : ''} products used
            </p>
          ) : (
            <p className="mt-2 text-sm text-navy-600">No active plan yet.</p>
          )}
          <Link href={ROUTES.vendorSubscription} className="mt-3 inline-block text-sm font-semibold text-gold-600 hover:text-gold-700">
            Manage Subscription &rarr;
          </Link>
        </div>
      )}

      <div className="grid gap-4 sm:grid-cols-2">
        <Link href={ROUTES.vendorProductNew} className="card flex items-center justify-between p-5 hover:border-gold-300">
          <span className="font-semibold text-navy-800">Add a New Product</span>
          <span aria-hidden="true" className="text-gold-600">&rarr;</span>
        </Link>
        <Link href={ROUTES.vendorOrders} className="card flex items-center justify-between p-5 hover:border-gold-300">
          <span className="font-semibold text-navy-800">View Incoming Orders</span>
          <span aria-hidden="true" className="text-gold-600">&rarr;</span>
        </Link>
      </div>
    </div>
  );
}

function StatCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="card p-4">
      <p className="text-xs text-navy-500">{label}</p>
      <p className="mt-1 text-xl font-bold text-navy-800">{value}</p>
    </div>
  );
}