'use client';

import Link from 'next/link';
import { usePurchases } from '@/lib/queries/use-purchases';
import type { PurchaseSummary } from '@alqove/api-client';

function formatPrice(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}

const STATUS_LABELS: Record<string, string> = {
  pending: 'Pending',
  paid: 'Paid',
  partially_shipped: 'Partially Shipped',
  shipped: 'Shipped',
  delivered: 'Delivered',
  completed: 'Completed',
  cancelled: 'Cancelled',
};

const STATUS_COLORS: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-800',
  paid: 'bg-blue-100 text-blue-800',
  partially_shipped: 'bg-indigo-100 text-indigo-800',
  shipped: 'bg-indigo-100 text-indigo-800',
  delivered: 'bg-forest-100 text-forest-800',
  completed: 'bg-forest-100 text-forest-800',
  cancelled: 'bg-slate-200 text-slate-700',
};

export function PurchasesClient() {
  const { data: response, isLoading } = usePurchases();
  const purchases = response?.data ?? [];

  if (isLoading) {
    return (
      <div className="mx-auto max-w-3xl px-4 py-8">
        <div className="animate-pulse space-y-4">
          <div className="h-8 w-48 rounded bg-slate-200" />
          <div className="h-24 rounded bg-slate-200" />
          <div className="h-24 rounded bg-slate-200" />
        </div>
      </div>
    );
  }

  if (purchases.length === 0) {
    return (
      <div className="mx-auto max-w-3xl px-4 py-16 text-center">
        <h1 className="text-2xl font-bold text-slate-900">No purchases yet</h1>
        <p className="mt-2 text-slate-500">Your purchase history will appear here after your first order.</p>
        <Link href="/items" className="mt-4 inline-block text-sm font-medium text-forest-600 hover:text-forest-700">
          Browse Items &rarr;
        </Link>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-8">
      <h1 className="text-2xl font-bold text-slate-900 mb-6">Purchase History</h1>
      <div className="space-y-3">
        {purchases.map((purchase: PurchaseSummary) => (
          <Link
            key={purchase.id}
            href={`/purchases/${purchase.id}`}
            className="block rounded-lg border border-slate-200 bg-white p-4 hover:border-slate-300 transition-colors"
          >
            <div className="flex items-center justify-between">
              <div>
                <div className="text-sm font-semibold text-slate-900">{formatPrice(purchase.total)}</div>
                <div className="text-xs text-slate-400 mt-0.5">
                  {new Date(purchase.created_at).toLocaleDateString()} &middot; {purchase.order_count} {purchase.order_count === 1 ? 'order' : 'orders'}
                </div>
              </div>
              <div className="flex items-center gap-2">
                {purchase.is_delayed && (
                  <span className="px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                    Delayed
                  </span>
                )}
                <span className={`px-2 py-0.5 rounded text-xs font-medium ${STATUS_COLORS[purchase.status] || 'bg-slate-100 text-slate-600'}`}>
                  {STATUS_LABELS[purchase.status] || purchase.status}
                </span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}