'use client';

import Link from 'next/link';
import { formatPrice } from '@alqove/shared';
import { useAdminFinancialsBalances } from '@/lib/queries/use-admin-financials';

export function AdminBalancesClient() {
  const { data, isLoading, isError } = useAdminFinancialsBalances();
  const summary = data?.data;

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">Store balances</h1>
      <p className="mt-1 text-sm text-slate-500">
        Pending and available cash held against each store.
      </p>

      {isLoading && (
        <div
          className="mt-4 rounded border border-slate-200 bg-white p-6 text-center text-sm text-slate-400"
          data-testid="admin-balances-loading"
        >
          Loading…
        </div>
      )}

      {isError && (
        <p
          className="mt-4 rounded bg-red-50 p-3 text-sm text-red-700"
          data-testid="admin-balances-error"
        >
          Couldn&apos;t load balances. You may need admin access.
        </p>
      )}

      {summary && (
        <>
          <section
            className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2"
            data-testid="admin-balances-summary"
          >
            <SummaryTile
              label="Total pending"
              value={formatPrice(summary.total_pending_cents)}
            />
            <SummaryTile
              label="Total available"
              value={formatPrice(summary.total_available_cents)}
            />
          </section>

          <section className="mt-4 overflow-hidden rounded border border-slate-200 bg-white">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-200">
                  <th scope="col" className="px-4 py-3 text-left font-medium text-slate-500">
                    Store
                  </th>
                  <th scope="col" className="px-4 py-3 text-right font-medium text-slate-500">
                    Pending
                  </th>
                  <th scope="col" className="px-4 py-3 text-right font-medium text-slate-500">
                    Available
                  </th>
                </tr>
              </thead>
              <tbody>
                {summary.stores.length === 0 && (
                  <tr>
                    <td
                      colSpan={3}
                      className="px-4 py-6 text-center text-sm text-slate-400"
                      data-testid="admin-balances-empty"
                    >
                      No stores with balances yet.
                    </td>
                  </tr>
                )}
                {summary.stores.map((row) => (
                  <tr
                    key={row.store_id}
                    data-testid={`admin-balances-row-${row.store_id}`}
                    className="border-b border-slate-100 last:border-0 hover:bg-slate-50"
                  >
                    <td className="px-4 py-3">
                      <Link
                        href={`/admin/stores/${row.store_id}`}
                        className="font-medium text-slate-900 hover:underline"
                      >
                        {row.store_name ?? row.store_id}
                      </Link>
                      <div className="font-mono text-xs text-slate-400">
                        {row.store_id.slice(0, 8)}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-right font-mono text-slate-700">
                      {formatPrice(row.pending_cents)}
                    </td>
                    <td className="px-4 py-3 text-right font-mono font-medium text-slate-900">
                      {formatPrice(row.available_cents)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </section>
        </>
      )}
    </div>
  );
}

function SummaryTile({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border border-slate-200 bg-white p-4">
      <div className="text-xs font-medium uppercase tracking-wide text-slate-500">
        {label}
      </div>
      <div className="mt-1 text-2xl font-bold text-slate-900">{value}</div>
    </div>
  );
}