'use client';

import { useState, useEffect } from 'react';
import { api } from '@/lib/api';

const methodLabels: Record<string, string> = { gcash: 'GCash', maya: 'Maya', cash: 'Cash', bank_transfer: 'Bank Transfer' };

export default function PortalPaymentsPage() {
  const [payments, setPayments] = useState<any[]>([]);
  useEffect(() => { api.get('/payments').then((r) => setPayments(r.data.data || r.data)).catch(() => {}); }, []);

  return (
    <div>
      <h1 className="text-xl font-bold text-surface-900">Payment History</h1>
      <p className="mt-1 text-sm text-surface-500">Your payment records</p>

      <div className="mt-5 bg-white rounded-xl border border-surface-200 overflow-hidden">
        <table className="min-w-full divide-y divide-surface-200">
          <thead className="bg-surface-50/50"><tr>
            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Date</th>
            <th className="px-5 py-3 text-right text-xs font-medium text-surface-500 uppercase">Amount</th>
            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Method</th>
            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Invoice</th>
          </tr></thead>
          <tbody className="divide-y divide-surface-100">
            {payments.map((p) => (
              <tr key={p.id} className="hover:bg-surface-50/50">
                <td className="px-5 py-3.5 text-sm text-surface-500">{new Date(p.createdAt).toLocaleDateString()}</td>
                <td className="px-5 py-3.5 text-sm text-right font-medium text-surface-900">PHP {Number(p.amount).toLocaleString()}</td>
                <td className="px-5 py-3.5 text-sm text-surface-600">{methodLabels[p.method] || p.method}</td>
                <td className="px-5 py-3.5 text-sm font-mono text-surface-500">{p.invoice?.number || '—'}</td>
              </tr>
            ))}
            {payments.length === 0 && <tr><td colSpan={4} className="px-5 py-8 text-center text-surface-400">No payments yet</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}