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

const API = '';

function getToken(): string {
  return typeof sessionStorage !== 'undefined'
    ? sessionStorage.getItem('nxtgauge_admin_access_token') || ''
    : '';
}

function authHeaders(): Record<string, string> {
  const token = getToken();
  return {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  };
}

type LedgerEntry = {
  id: string;
  transactionType: 'ADD' | 'DEDUCT';
  amount: number;
  referenceId?: string;
  expiresAt?: string;
  createdAt?: string;
};

type ReconcileRow = {
  userId: string;
  expectedBalance: number;
  actualBalance: number;
  discrepancy: number;
};

export default function CreditPage() {
  const [activeTab, setActiveTab] = createSignal<'ledger' | 'adjust' | 'reconcile'>('ledger');

  // Balance & Ledger tab state
  const [userId, setUserId] = createSignal('');
  const [searchedUserId, setSearchedUserId] = createSignal('');
  const [searchTrigger, setSearchTrigger] = createSignal(0);
  const [balance, setBalance] = createSignal<number | null>(null);
  const [ledger, setLedger] = createSignal<LedgerEntry[]>([]);
  const [searchLoading, setSearchLoading] = createSignal(false);
  const [searchError, setSearchError] = createSignal('');
  const [ledgerSearch, setLedgerSearch] = createSignal('');
  const [ledgerTypeFilter, setLedgerTypeFilter] = createSignal<'all' | 'ADD' | 'DEDUCT'>('all');
  const [ledgerSortBy, setLedgerSortBy] = createSignal<'newest' | 'oldest' | 'amount_desc' | 'amount_asc'>('newest');
  const [ledgerSortMenuOpen, setLedgerSortMenuOpen] = createSignal(false);
  const [ledgerFilterMenuOpen, setLedgerFilterMenuOpen] = createSignal(false);

  // Reward/Deduct tab state
  const [adjUserId, setAdjUserId] = createSignal('');
  const [adjAmount, setAdjAmount] = createSignal(1);
  const [adjType, setAdjType] = createSignal<'ADD' | 'DEDUCT'>('ADD');
  const [adjReason, setAdjReason] = createSignal('');
  const [adjRefId, setAdjRefId] = createSignal('');
  const [adjLoading, setAdjLoading] = createSignal(false);
  const [adjSuccess, setAdjSuccess] = createSignal('');
  const [adjError, setAdjError] = createSignal('');

  // Reconcile tab state
  const [reconFrom, setReconFrom] = createSignal('');
  const [reconTo, setReconTo] = createSignal('');
  const [reconLoading, setReconLoading] = createSignal(false);
  const [reconResults, setReconResults] = createSignal<ReconcileRow[] | null>(null);
  const [reconError, setReconError] = createSignal('');

  const handleSearch = async () => {
    const uid = userId().trim();
    if (!uid) return;
    setSearchLoading(true);
    setSearchError('');
    setBalance(null);
    setLedger([]);
    setSearchedUserId(uid);
    try {
      const [balRes, ledRes] = await Promise.all([
        fetch(`${API}/api/admin/credits/balance?userId=${encodeURIComponent(uid)}`, { headers: authHeaders(), credentials: 'include' }),
        fetch(`${API}/api/admin/credits/ledger?userId=${encodeURIComponent(uid)}`, { headers: authHeaders(), credentials: 'include' }),
      ]);
      if (!balRes.ok || !ledRes.ok) throw new Error('Failed to fetch');
      const balData = await balRes.json();
      const ledData = await ledRes.json();
      setBalance(balData.balance ?? 0);
      setLedger(Array.isArray(ledData.entries) ? ledData.entries : []);
    } catch {
      setSearchError('Failed to fetch TraceCoin data for this user ID.');
      setBalance(null);
      setLedger([]);
    } finally {
      setSearchLoading(false);
    }
  };

  const handleAdjust = async (e: Event) => {
    e.preventDefault();
    setAdjLoading(true);
    setAdjSuccess('');
    setAdjError('');
    try {
      const res = await fetch(`${API}/api/admin/credits/adjust`, {
        method: 'POST',
        headers: authHeaders(),
        credentials: 'include',
        body: JSON.stringify({
          user_id: adjUserId(),
          amount: adjAmount(),
          type: adjType(),
          reason: adjReason(),
          reference_id: adjRefId() || undefined,
        }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        throw new Error((d as any).message || 'Failed to adjust credits');
      }
      setAdjSuccess('Credit adjusted successfully!');
      setAdjUserId('');
      setAdjAmount(1);
      setAdjType('ADD');
      setAdjReason('');
      setAdjRefId('');
    } catch (err: any) {
      setAdjError(err.message || 'Failed to adjust credits');
    } finally {
      setAdjLoading(false);
    }
  };

  const handleReconcile = async (e: Event) => {
    e.preventDefault();
    setReconLoading(true);
    setReconError('');
    setReconResults(null);
    try {
      const res = await fetch(
        `${API}/api/admin/credits/reconcile?from=${encodeURIComponent(reconFrom())}&to=${encodeURIComponent(reconTo())}`,
        { headers: authHeaders(), credentials: 'include' }
      );
      if (!res.ok) throw new Error('Failed to reconcile');
      const data = await res.json();
      setReconResults(Array.isArray(data.results) ? data.results : []);
    } catch (err: any) {
      setReconError(err.message || 'Failed to reconcile');
    } finally {
      setReconLoading(false);
    }
  };

  const tabs: { key: 'ledger' | 'adjust' | 'reconcile'; label: string }[] = [
    { key: 'ledger', label: 'Balance & Ledger' },
    { key: 'adjust', label: 'Reward / Deduct' },
    { key: 'reconcile', label: 'Reconcile' },
  ];

  const filteredLedger = createMemo(() => {
    let data = ledger();
    const q = ledgerSearch().toLowerCase().trim();
    if (q) {
      data = data.filter((entry) =>
        String(entry.referenceId || '').toLowerCase().includes(q)
        || String(entry.transactionType || '').toLowerCase().includes(q)
      );
    }
    if (ledgerTypeFilter() !== 'all') {
      data = data.filter((entry) => entry.transactionType === ledgerTypeFilter());
    }
    const sorted = [...data];
    sorted.sort((a, b) => {
      const aCreated = new Date(a.createdAt || 0).getTime();
      const bCreated = new Date(b.createdAt || 0).getTime();
      const aAmt = Number(a.amount ?? 0);
      const bAmt = Number(b.amount ?? 0);
      if (ledgerSortBy() === 'oldest') return aCreated - bCreated;
      if (ledgerSortBy() === 'amount_desc') return bAmt - aAmt;
      if (ledgerSortBy() === 'amount_asc') return aAmt - bAmt;
      return bCreated - aCreated;
    });
    return sorted;
  });

  const exportLedgerCsv = () => {
    const headers = ['Type', 'Amount', 'Ref ID', 'Expires At', 'Date'];
    const rows = filteredLedger().map((entry) => [
      entry.transactionType,
      `${entry.transactionType === 'ADD' ? '+' : '-'}${entry.amount ?? 0}`,
      entry.referenceId || '—',
      entry.expiresAt ? new Date(entry.expiresAt).toLocaleDateString() : '—',
      entry.createdAt ? new Date(entry.createdAt).toLocaleString() : '—',
    ]);
    const csv = [headers, ...rows].map((line) => line.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'credit-ledger.csv';
    link.click();
    URL.revokeObjectURL(url);
  };

  return (
      <div class="w-full space-y-6 pb-8">
        <div style="margin-bottom:1.5rem">
          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Credit Management</h1>
          <p class="mt-1 text-[14px] text-[#6B7280]">Audit TraceCoin balances and adjust credits</p>
        </div>

        {/* Tabs */}
        <div class="bg-white border-b border-gray-200 px-6 flex items-center gap-8 sticky top-0 z-10">
          <For each={tabs}>
            {(tab) => (
              <button
                type="button"
                class={activeTab() === tab.key ? 'py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium' : 'py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors'}
                onClick={() => setActiveTab(tab.key)}
              >
                {tab.label}
              </button>
            )}
          </For>
        </div>

        <div>
          {/* Balance & Ledger Tab */}
          <Show when={activeTab() === 'ledger'}>
            <div style="display:flex;flex-direction:column;gap:24px">
              <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
                <h2 style="margin:0 0 16px;font-size:16px;font-weight:700;color:#1e293b">Search Account Balance</h2>
                <div style="display:flex;gap:10px">
                  <input
                    type="text"
                    placeholder="Enter User ID..."
                    value={userId()}
                    onInput={(e) => setUserId(e.currentTarget.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                    class="rounded-lg border border-gray-200 px-3 py-2 text-sm"
                    style="flex:1"
                  />
                  <button
                    class="btn-primary"
                    onClick={handleSearch}
                    disabled={searchLoading()}
                  >
                    {searchLoading() ? 'Searching...' : 'Search'}
                  </button>
                </div>
                <Show when={searchError()}>
                  <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-top:10px">{searchError()}</div>
                </Show>
              </section>

              <Show when={balance() !== null}>
                <div style="display:grid;grid-template-columns:1fr 2fr;gap:20px">
                  <div style="background:#2563eb;border-radius:12px;padding:24px;color:#fff">
                    <p style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#bfdbfe;margin:0 0 8px">Current Balance</p>
                    <p style="font-size:36px;font-weight:900;margin:0">{balance()} TraceCoins</p>
                    <p style="font-size:12px;color:#bfdbfe;margin:8px 0 0">User: {searchedUserId()}</p>
                  </div>

                  <div class="table-card" style="overflow:hidden">
                    <h3 style="margin:0 0 16px;font-size:15px;font-weight:700;color:#0f172a">TraceCoin Ledger</h3>
                    <div style="display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #F3F4F6;position:relative;z-index:20;margin-bottom:0">
                      <input
                        type="text"
                        placeholder="Search ledger..."
                        value={ledgerSearch()}
                        onInput={(e) => setLedgerSearch(e.currentTarget.value)}
                        style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
                      />
                      <div style="position:relative;">
                        <button type="button" onClick={() => { setLedgerSortMenuOpen((v) => !v); setLedgerFilterMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
                          Sort
                        </button>
                        <Show when={ledgerSortMenuOpen()}>
                          <div style="position:absolute;right:0;top:38px;z-index:40;min-width:170px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;box-shadow:0 12px 24px rgba(2,6,23,0.12);padding:8px">
                            <For each={[
                              { key: 'newest', label: 'Newest First' },
                              { key: 'oldest', label: 'Oldest First' },
                              { key: 'amount_desc', label: 'Amount High-Low' },
                              { key: 'amount_asc', label: 'Amount Low-High' },
                            ] as { key: 'newest' | 'oldest' | 'amount_desc' | 'amount_asc'; label: string }[]}>
                              {(item) => (
                                <button type="button" onClick={() => { setLedgerSortBy(item.key); setLedgerSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${ledgerSortBy() === item.key ? '#FF5E13' : '#374151'};background:${ledgerSortBy() === item.key ? '#FFF1EB' : 'transparent'}`}>{item.label}</button>
                              )}
                            </For>
                          </div>
                        </Show>
                      </div>
                      <div style="position:relative;">
                        <button type="button" onClick={() => { setLedgerFilterMenuOpen((v) => !v); setLedgerSortMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
                          Filters
                        </button>
                        <Show when={ledgerFilterMenuOpen()}>
                          <div style="position:absolute;right:0;top:38px;z-index:40;min-width:170px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;box-shadow:0 12px 24px rgba(2,6,23,0.12);padding:8px">
                            <For each={[
                              { key: 'all', label: 'All Types' },
                              { key: 'ADD', label: 'Add' },
                              { key: 'DEDUCT', label: 'Deduct' },
                            ] as { key: 'all' | 'ADD' | 'DEDUCT'; label: string }[]}>
                              {(item) => (
                                <button type="button" onClick={() => { setLedgerTypeFilter(item.key); setLedgerFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${ledgerTypeFilter() === item.key ? '#FF5E13' : '#374151'};background:${ledgerTypeFilter() === item.key ? '#FFF1EB' : 'transparent'}`}>{item.label}</button>
                              )}
                            </For>
                          </div>
                        </Show>
                      </div>
                      <button type="button" onClick={exportLedgerCsv} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        Export
                      </button>
                    </div>
                    <Show when={filteredLedger().length === 0}>
                      <p style="text-align:center;padding:32px;color:#94a3b8;font-style:italic">No transactions found for this account.</p>
                    </Show>
                    <Show when={filteredLedger().length > 0}>
                      <div class="overflow-x-auto">
                        <table class="data-table w-full text-sm">
                          <thead>
                            <tr>
                              <th>Type</th>
                              <th>Amount</th>
                              <th>Ref ID</th>
                              <th>Expires At</th>
                              <th>Date</th>
                            </tr>
                          </thead>
                          <tbody>
                            <For each={filteredLedger()}>
                              {(entry) => (
                                <tr class="hover:bg-slate-50">
                                  <td>
                                    <span
                                      style={`display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;background:${entry.transactionType === 'ADD' ? '#dcfce7' : '#fee2e2'};color:${entry.transactionType === 'ADD' ? '#15803d' : '#b91c1c'}`}
                                    >
                                      {entry.transactionType}
                                    </span>
                                  </td>
                                  <td class={entry.transactionType === 'ADD' ? 'font-semibold text-slate-900' : 'font-semibold text-slate-900'} style={entry.transactionType === 'ADD' ? 'color:#16a34a' : 'color:#dc2626'}>
                                    {entry.transactionType === 'ADD' ? '+' : '-'}{entry.amount}
                                  </td>
                                  <td class="text-slate-500" style="font-size:12px;font-family:monospace">
                                    {entry.referenceId ? entry.referenceId.substring(0, 18) : '—'}
                                  </td>
                                  <td class="text-slate-500" style="font-size:12px">
                                    {entry.expiresAt ? new Date(entry.expiresAt).toLocaleDateString() : '—'}
                                  </td>
                                  <td class="text-slate-500" style="font-size:12px">
                                    {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : '—'}
                                  </td>
                                </tr>
                              )}
                            </For>
                          </tbody>
                        </table>
                      </div>
                    </Show>
                  </div>
                </div>
              </Show>
            </div>
          </Show>

          {/* Reward / Deduct Tab */}
          <Show when={activeTab() === 'adjust'}>
            <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="max-width:460px">
              <h2 style="margin:0 0 6px;font-size:16px;font-weight:700;color:#1e293b">Reward or Adjust TraceCoins</h2>
              <p style="margin:0 0 20px;font-size:13px;color:#64748b">
                Use this to reward TraceCoins for a valid support case, process a refund, or correct a balance manually.
              </p>
              <Show when={adjSuccess()}>
                <div style="background:#dcfce7;border:1px solid #86efac;border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:14px;color:#15803d;font-weight:600">
                  {adjSuccess()}
                </div>
              </Show>
              <Show when={adjError()}>
                <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:14px">{adjError()}</div>
              </Show>
              <form onSubmit={handleAdjust} style="display:flex;flex-direction:column;gap:14px">
                <div class="field">
                  <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">User ID</label>
                  <input
                    type="text"
                    required
                    value={adjUserId()}
                    onInput={(e) => setAdjUserId(e.currentTarget.value)}
                    style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                  />
                </div>
                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div class="field">
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Amount</label>
                    <input
                      type="number"
                      min="1"
                      required
                      value={adjAmount()}
                      onInput={(e) => setAdjAmount(Number(e.currentTarget.value))}
                      style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                    />
                  </div>
                  <div class="field">
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Type</label>
                    <select
                      value={adjType()}
                      onChange={(e) => setAdjType(e.currentTarget.value as 'ADD' | 'DEDUCT')}
                      style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                    >
                      <option value="ADD">ADD</option>
                      <option value="DEDUCT">DEDUCT</option>
                    </select>
                  </div>
                </div>
                <div class="field">
                  <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Reason</label>
                  <input
                    type="text"
                    required
                    value={adjReason()}
                    onInput={(e) => setAdjReason(e.currentTarget.value)}
                    style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                  />
                </div>
                <div class="field">
                  <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Reference ID <span style="font-weight:400;color:#94a3b8">(optional)</span></label>
                  <input
                    type="text"
                    value={adjRefId()}
                    onInput={(e) => setAdjRefId(e.currentTarget.value)}
                    style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                  />
                </div>
                <div>
                  <button class="btn-primary" type="submit" disabled={adjLoading()}>
                    {adjLoading() ? 'Adjusting...' : 'Apply Adjustment'}
                  </button>
                </div>
              </form>
            </section>
          </Show>

          {/* Reconcile Tab */}
          <Show when={activeTab() === 'reconcile'}>
            <div style="display:flex;flex-direction:column;gap:20px">
              <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="max-width:460px">
                <h2 style="margin:0 0 16px;font-size:16px;font-weight:700;color:#1e293b">Ledger Reconciliation</h2>
                <Show when={reconError()}>
                  <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:14px">{reconError()}</div>
                </Show>
                <form onSubmit={handleReconcile} style="display:flex;flex-direction:column;gap:14px">
                  <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="field">
                      <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Start Date</label>
                      <input
                        type="date"
                        required
                        value={reconFrom()}
                        onInput={(e) => setReconFrom(e.currentTarget.value)}
                        style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                      />
                    </div>
                    <div class="field">
                      <label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">End Date</label>
                      <input
                        type="date"
                        required
                        value={reconTo()}
                        onInput={(e) => setReconTo(e.currentTarget.value)}
                        style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
                      />
                    </div>
                  </div>
                  <div>
                    <button class="btn-primary" type="submit" disabled={reconLoading()}>
                      {reconLoading() ? 'Running...' : 'Run Reconciliation'}
                    </button>
                  </div>
                </form>
              </section>

              <Show when={reconResults() !== null}>
                <Show when={(reconResults()?.length ?? 0) === 0}>
                  <p style="color:#16a34a;font-weight:600;font-size:14px">No discrepancies found.</p>
                </Show>
                <Show when={(reconResults()?.length ?? 0) > 0}>
                  <div class="table-card">
                    <div class="overflow-x-auto">
                      <table class="data-table w-full text-sm">
                        <thead>
                          <tr>
                            <th>User ID</th>
                            <th>Expected Balance</th>
                            <th>Actual Balance</th>
                            <th>Discrepancy</th>
                          </tr>
                        </thead>
                        <tbody>
                          <For each={reconResults()!}>
                            {(row) => (
                              <tr class="hover:bg-slate-50">
                                <td class="font-semibold text-slate-900" style="font-family:monospace;font-size:13px">{row.userId}</td>
                                <td class="text-slate-500">{row.expectedBalance}</td>
                                <td class="text-slate-500">{row.actualBalance}</td>
                                <td style={row.discrepancy !== 0 ? 'color:#dc2626;font-weight:700' : 'color:#16a34a'}>
                                  {row.discrepancy}
                                </td>
                              </tr>
                            )}
                          </For>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </Show>
              </Show>
            </div>
          </Show>
        </div>
      </div>
  );
}
