/**
 * Transaction Logs Page
 * Enterprise Logging System — Super Admin Console
 *
 * Paginated financial transaction logs with type/status/date filters,
 * CSV/Excel/JSON export, and balance before/after inspection.
 */

'use client';

import { useState } from 'react';
import { LogPageShell } from '@/components/logs/LogPageShell';
import { LogFilters } from '@/components/logs/LogFilters';
import { TransactionLogsTable } from '@/components/logs/TransactionLogsTable';
import { useLogsData } from '@/hooks/useLogsData';
import { loggingService } from '@/services/logging.service';
import type { TransactionLog } from '@/types/logging.types';

const TYPE_OPTIONS = [
  { label: 'Deposit', value: 'DEPOSIT' },
  { label: 'Withdrawal', value: 'WITHDRAWAL' },
  { label: 'Trade', value: 'TRADE' },
  { label: 'Transfer', value: 'TRANSFER' },
  { label: 'Referral Credit', value: 'REFERRAL_CREDIT' },
  { label: 'Commission Credit', value: 'COMMISSION_CREDIT' },
  { label: 'Wallet Update', value: 'WALLET_UPDATE' },
  { label: 'Refund', value: 'REFUND' },
];

const STATUS_OPTIONS = [
  { label: 'Pending', value: 'PENDING' },
  { label: 'Completed', value: 'COMPLETED' },
  { label: 'Failed', value: 'FAILED' },
  { label: 'Cancelled', value: 'CANCELLED' },
  { label: 'Reversed', value: 'REVERSED' },
];

export default function TransactionLogsPage() {
  const [type, setType] = useState('');
  const [status, setStatus] = useState('');
  const [filters, setFilters] = useState<{ from?: string; to?: string }>({});

  const { data, meta, loading, error, applyFilters, changePage } = useLogsData<TransactionLog>({
    type: 'transaction',
    fetcher: (params) => loggingService.getTransactionLogs(params),
  });

  const handleApply = (f: any) => {
    setFilters({ from: f.from, to: f.to });
    applyFilters({ type: type || undefined, status: status || undefined, from: f.from, to: f.to });
  };

  return (
    <LogPageShell
      title="Transaction Logs"
      description="Financial events — deposits, withdrawals, trades, transfers, referral/commission credits, wallet updates, refunds."
      logType="transaction"
      loading={loading}
      error={error}
      exportFrom={filters.from}
      exportTo={filters.to}
      filters={
        <div className="space-y-3">
          <div className="grid gap-3 sm:grid-cols-2">
            <LogFilters
              onApply={handleApply}
              typeOptions={TYPE_OPTIONS}
              typeLabel="Type"
              typeValue={type}
              onTypeChange={setType}
              showQuery
              queryPlaceholder="Search wallet ID, reference, user ID..."
            />
            <LogFilters
              onApply={handleApply}
              typeOptions={STATUS_OPTIONS}
              typeLabel="Status"
              typeValue={status}
              onTypeChange={setStatus}
              showQuery={false}
            />
          </div>
        </div>
      }
      table={
        <TransactionLogsTable
          logs={data}
          page={meta.page}
          totalPages={meta.totalPages}
          total={meta.total}
          limit={meta.limit}
          onPageChange={changePage}
        />
      }
    />
  );
}