import { createResource, Show, For } from 'solid-js';

const API = '/api/gateway';

type LedgerEntry = {
  id: string;
  entry_type?: string;
  type?: string;
  order_id?: string;
  invoice_id?: string;
  user_id?: string;
  amount?: number;
  note?: string;
  created_at?: string;
};

async function loadLedger(): Promise<LedgerEntry[]> {
  try {
    const res = await fetch(`${API}/api/admin/ledger`);
    if (!res.ok) throw new Error('Failed to load');
    const data = await res.json();
    return Array.isArray(data) ? data : (data.entries || data.ledger || []);
  } catch {
    return [];
  }
}

function typeBadgeStyle(entryType: string): string {
  switch ((entryType || '').toUpperCase()) {
    case 'TRACECOIN_PURCHASE':
      return 'background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe';
    case 'PAYMENT':
      return 'background:#dcfce7;color:#166534;border-color:#bbf7d0';
    case 'DISCOUNT':
      return 'background:#fff7ed;color:#c2410c;border-color:#fed7aa';
    case 'COUPON':
      return 'background:#f3e8ff;color:#7e22ce;border-color:#e9d5ff';
    case 'INVOICE':
    default:
      return 'background:#f1f5f9;color:#475569;border-color:#e2e8f0';
  }
}

function formatAmount(entry: LedgerEntry): string {
  const t = (entry.entry_type || entry.type || '').toUpperCase();
  if (t === 'TRACECOIN_PURCHASE') {
    return entry.amount != null ? `${entry.amount} TC` : '—';
  }
  if (entry.amount == null) return '—';
  return `₹${(entry.amount / 100).toFixed(2)}`;
}

export default function LedgerPage() {
  const [entries] = createResource(loadLedger);

  return (
      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
        <div class="bg-white border-b border-gray-200 px-6 py-4">
          <h1 class="text-xl font-semibold text-gray-900">Ledger Management</h1>
          <p class="text-sm text-gray-500 mt-0.5">Platform financial ledger</p>
        </div>

        <div class="flex-1 p-6">
          <div class="table-card">
            <div class="overflow-x-auto">
              <table class="data-table w-full text-sm">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Order ID</th>
                    <th>Invoice ID</th>
                    <th>User ID</th>
                    <th>Amount</th>
                    <th>Note</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <Show when={entries.loading}>
                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
                  </Show>
                  <Show when={!entries.loading && entries.error}>
                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr>
                  </Show>
                  <Show when={!entries.loading && !entries.error && entries()?.length === 0}>
                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#94a3b8">No ledger entries found.</td></tr>
                  </Show>
                  <Show when={!entries.loading && !entries.error && (entries()?.length ?? 0) > 0}>
                    <For each={entries()}>
                      {(item) => {
                        const entryType = item.entry_type || item.type || '—';
                        return (
                          <tr class="hover:bg-slate-50">
                            <td>
                              <span style={`${typeBadgeStyle(entryType)};padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid;display:inline-block`}>
                                {entryType}
                              </span>
                            </td>
                            <td class="text-slate-500" style="font-size:12px;font-family:monospace">{item.order_id || '—'}</td>
                            <td class="text-slate-500" style="font-size:12px;font-family:monospace">{item.invoice_id || '—'}</td>
                            <td class="text-slate-500" style="font-size:12px;font-family:monospace">{item.user_id || '—'}</td>
                            <td class="font-semibold text-slate-900">{formatAmount(item)}</td>
                            <td class="text-slate-500">{item.note || '—'}</td>
                            <td class="text-slate-500">{item.created_at ? new Date(item.created_at).toLocaleString() : '—'}</td>
                          </tr>
                        );
                      }}
                    </For>
                  </Show>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
  );
}