'use client';

import { useEffect, useState, useCallback } from 'react';
import { adminService } from '@/services/admin.service';
import type { WalletInfo, PaginationMeta, TransactionEntry, WalletFreezeEntry } from '@/types/admin.types';

function StatusBadge({ label, color }: { label: string; color: 'green' | 'red' | 'yellow' | 'blue' | 'gray' }) {
  const colors = {
    green: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
    red: 'bg-red-500/20 text-red-400 border-red-500/30',
    yellow: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
    blue: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    gray: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
  };
  return <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase ${colors[color]}`}>{label}</span>;
}

function WalletDetailModal({ walletId, onClose }: { walletId: string; onClose: () => void }) {
  const [wallet, setWallet] = useState<WalletInfo | null>(null);
  const [txns, setTxns] = useState<TransactionEntry[]>([]);
  const [logs, setLogs] = useState<WalletFreezeEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState<'details' | 'transactions' | 'logs'>('details');
  const [freezeReason, setFreezeReason] = useState('SUSPICIOUS_ACTIVITY');
  const [freezeText, setFreezeText] = useState('');
  const [adjustAmount, setAdjustAmount] = useState(0);
  const [adjustType, setAdjustType] = useState<'CREDIT' | 'DEBIT'>('CREDIT');
  const [actionMsg, setActionMsg] = useState('');
  const [freezeDepositsLoading, setFreezeDepositsLoading] = useState(false);
  const [unfreezeDepositsLoading, setUnfreezeDepositsLoading] = useState(false);
  const [freezeWithdrawalsLoading, setFreezeWithdrawalsLoading] = useState(false);
  const [unfreezeWithdrawalsLoading, setUnfreezeWithdrawalsLoading] = useState(false);

  useEffect(() => {
    Promise.all([
      adminService.getWalletById(walletId),
      adminService.getWalletTransactions(walletId),
      adminService.getWalletLogs(walletId),
    ]).then(([walletRes, txnRes, logRes]) => {
      if (walletRes) setWallet(walletRes);
      setTxns(txnRes?.data || []);
      setLogs(logRes?.data || []);
      setLoading(false);
    });
  }, [walletId]);

  const handleFreeze = async () => {
    try {
      const res = await adminService.freezeWallet({ walletId, reason: freezeReason, reasonText: freezeText || undefined });
      setWallet(res); setActionMsg('Wallet frozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleUnfreeze = async () => {
    try {
      const res = await adminService.unfreezeWallet({ walletId, reason: 'Admin action' });
      setWallet(res); setActionMsg('Wallet unfrozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleAdjustBalance = async () => {
    if (adjustAmount <= 0) return;
    try {
      const res = await adminService.adjustBalance({ walletId, amount: adjustAmount, type: adjustType, description: 'Admin adjustment' });
      setWallet(res); setActionMsg(`Balance adjusted ${adjustType} ${adjustAmount}`);
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleFreezeDeposits = async () => {
    try {
      setFreezeDepositsLoading(true);
      const res = await adminService.freezeWalletDeposits(walletId, 'ADMIN_ACTION', 'Admin freeze');
      setWallet(res); setActionMsg('Deposits frozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
    finally { setFreezeDepositsLoading(false); }
  };

  const handleUnfreezeDeposits = async () => {
    try {
      setUnfreezeDepositsLoading(true);
      const res = await adminService.unfreezeWalletDeposits(walletId, 'ADMIN_ACTION');
      setWallet(res); setActionMsg('Deposits unfrozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
    finally { setUnfreezeDepositsLoading(false); }
  };

  const handleFreezeWithdrawals = async () => {
    try {
      setFreezeWithdrawalsLoading(true);
      const res = await adminService.freezeWalletWithdrawals(walletId, 'ADMIN_ACTION', 'Admin freeze');
      setWallet(res); setActionMsg('Withdrawals frozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
    finally { setFreezeWithdrawalsLoading(false); }
  };

  const handleUnfreezeWithdrawals = async () => {
    try {
      setUnfreezeWithdrawalsLoading(true);
      const res = await adminService.unfreezeWalletWithdrawals(walletId, 'ADMIN_ACTION');
      setWallet(res); setActionMsg('Withdrawals unfrozen');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
    finally { setUnfreezeWithdrawalsLoading(false); }
  };

  if (loading) return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="animate-pulse rounded-xl bg-slate-900 p-6 text-white">Loading wallet...</div>
    </div>
  );

  if (!wallet) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 backdrop-blur-sm pt-10">
      <div className="relative w-full max-w-3xl rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
        <button onClick={onClose} className="absolute right-4 top-4 text-white/50 hover:text-white text-2xl">&times;</button>

        <h2 className="text-xl font-bold text-white">Wallet Details</h2>
        <p className="text-sm text-slate-400">{wallet.user?.email} ({wallet.user?.firstName} {wallet.user?.lastName})</p>

        <div className="mt-4 grid grid-cols-3 gap-3">
          <div className="rounded-lg bg-white/5 p-3">
            <p className="text-xs text-slate-500">Balance</p>
            <p className="text-lg font-bold text-white">${Number(wallet.balance).toLocaleString()}</p>
          </div>
          <div className="rounded-lg bg-white/5 p-3">
            <p className="text-xs text-slate-500">Locked</p>
            <p className="text-lg font-bold text-white">${Number(wallet.locked).toLocaleString()}</p>
          </div>
          <div className="rounded-lg bg-white/5 p-3">
            <p className="text-xs text-slate-500">Status</p>
            <p className="mt-1">{wallet.isFrozen ? <StatusBadge label="Frozen" color="red" /> : <StatusBadge label="Active" color="green" />}</p>
          </div>
        </div>

        {actionMsg && <div className="mt-4 rounded-lg bg-blue-500/10 p-3 text-sm text-blue-400">{actionMsg}</div>}

        <div className="mt-4 flex flex-wrap gap-3">
          {!wallet.isFrozen ? (
            <div className="flex items-center gap-2">
              <select value={freezeReason} onChange={(e) => setFreezeReason(e.target.value)} className="rounded-lg bg-slate-800 px-3 py-2 text-xs text-white border border-slate-700">
                <option value="SUSPICIOUS_ACTIVITY">Suspicious Activity</option>
                <option value="UNDER_INVESTIGATION">Under Investigation</option>
                <option value="COURT_ORDER">Court Order</option>
                <option value="SECURITY_BREACH">Security Breach</option>
                <option value="USER_REQUEST">User Request</option>
                <option value="OTHER">Other</option>
              </select>
              <input type="text" placeholder="Details..." value={freezeText} onChange={(e) => setFreezeText(e.target.value)} className="rounded-lg bg-slate-800 px-3 py-2 text-xs text-white border border-slate-700 w-32" />
              <button onClick={handleFreeze} className="rounded-lg bg-red-500/20 px-4 py-2 text-xs font-medium text-red-400 hover:bg-red-500/30">Freeze</button>
            </div>
          ) : (
            <button onClick={handleUnfreeze} className="rounded-lg bg-emerald-500/20 px-4 py-2 text-xs font-medium text-emerald-400 hover:bg-emerald-500/30">Unfreeze</button>
          )}
        </div>

        <div className="mt-4 flex items-center gap-2">
          <span className="text-xs text-slate-400">Adjust Balance:</span>
          <select value={adjustType} onChange={(e) => setAdjustType(e.target.value as 'CREDIT' | 'DEBIT')} className="rounded-lg bg-slate-800 px-3 py-2 text-xs text-white border border-slate-700">
            <option value="CREDIT">Credit (+)</option>
            <option value="DEBIT">Debit (-)</option>
          </select>
          <input type="number" min="0.01" step="0.01" value={adjustAmount} onChange={(e) => setAdjustAmount(Number(e.target.value))} className="rounded-lg bg-slate-800 px-3 py-2 text-xs text-white border border-slate-700 w-24" />
          <button onClick={handleAdjustBalance} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">Apply</button>
        </div>

        <div className="mt-4 flex flex-wrap items-center gap-3 border-t border-white/5 pt-4">
          <span className="text-xs font-medium text-slate-400">Deposit Controls:</span>
          <button onClick={handleFreezeDeposits} disabled={freezeDepositsLoading} className="rounded-lg bg-blue-500/20 px-4 py-2 text-xs font-medium text-blue-400 hover:bg-blue-500/30 disabled:opacity-50">Freeze Deposits</button>
          <button onClick={handleUnfreezeDeposits} disabled={unfreezeDepositsLoading} className="rounded-lg bg-emerald-500/20 px-4 py-2 text-xs font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50">Unfreeze Deposits</button>
          <span className="text-xs font-medium text-slate-400 ml-2">Withdrawal Controls:</span>
          <button onClick={handleFreezeWithdrawals} disabled={freezeWithdrawalsLoading} className="rounded-lg bg-blue-500/20 px-4 py-2 text-xs font-medium text-blue-400 hover:bg-blue-500/30 disabled:opacity-50">Freeze Withdrawals</button>
          <button onClick={handleUnfreezeWithdrawals} disabled={unfreezeWithdrawalsLoading} className="rounded-lg bg-emerald-500/20 px-4 py-2 text-xs font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50">Unfreeze Withdrawals</button>
        </div>

        {/* Tabs */}
        <div className="mt-6 flex gap-4 border-b border-white/10">
          {(['details', 'transactions', 'logs'] as const).map((t) => (
            <button key={t} onClick={() => setTab(t)} className={`pb-2 text-sm font-medium ${tab === t ? 'text-white border-b-2 border-indigo-400' : 'text-slate-500 hover:text-slate-300'}`}>
              {t === 'details' ? 'Details' : t === 'transactions' ? 'Transactions' : 'Freeze Logs'}
            </button>
          ))}
        </div>

        {tab === 'details' && (
          <div className="mt-4 space-y-2">
            <p className="text-xs text-slate-500">Wallet ID: {wallet.id}</p>
            <p className="text-xs text-slate-500">Created: {new Date(wallet.createdAt).toLocaleString()}</p>
            <p className="text-xs text-slate-500">Updated: {new Date(wallet.updatedAt).toLocaleString()}</p>
          </div>
        )}

        {tab === 'transactions' && (
          <div className="mt-4 overflow-x-auto">
            {txns.length === 0 ? <p className="text-sm text-slate-500">No transactions</p> : (
              <table className="w-full text-left text-xs">
                <thead className="border-b border-white/5">
                  <tr><th className="pb-2 text-slate-400">Date</th><th className="pb-2 text-slate-400">Type</th><th className="pb-2 text-slate-400">Amount</th><th className="pb-2 text-slate-400">Description</th></tr>
                </thead>
                <tbody>
                  {txns.map((tx) => (
                    <tr key={tx.id} className="border-b border-white/5">
                      <td className="py-2 text-slate-300">{new Date(tx.createdAt).toLocaleString()}</td>
                      <td className="py-2">{tx.type}</td>
                      <td className="py-2 font-medium">${Number(tx.amount).toLocaleString()}</td>
                      <td className="py-2 text-slate-400">{tx.description || '-'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}

        {tab === 'logs' && (
          <div className="mt-4 space-y-2">
            {logs.length === 0 ? <p className="text-sm text-slate-500">No freeze history</p> : logs.map((log) => (
              <div key={log.id} className="rounded-lg bg-white/5 p-3">
                <p className="text-xs font-medium text-white">{log.reason}{log.reasonText ? ` - ${log.reasonText}` : ''}</p>
                <p className="text-xs text-slate-400">Frozen by: {log.frozenByUser.email} on {new Date(log.createdAt).toLocaleString()}</p>
                {log.unfrozenAt && <p className="text-xs text-emerald-400">Unfrozen: {new Date(log.unfrozenAt).toLocaleString()}</p>}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default function AdminWalletManagementPage() {
  const [wallets, setWallets] = useState<WalletInfo[]>([]);
  const [meta, setMeta] = useState<PaginationMeta | null>(null);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterFrozen, setFilterFrozen] = useState('');
  const [page, setPage] = useState(1);
  const [selectedWalletId, setSelectedWalletId] = useState<string | null>(null);

  const fetchWallets = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = { page, limit: 20 };
      if (search) params.search = search;
      if (filterFrozen !== '') params.isFrozen = filterFrozen === 'true';
      const res = await adminService.listWallets(params);
      setWallets(res.data);
      setMeta(res.meta);
    } catch (e) { console.error(e); }
    finally { setLoading(false); }
  }, [page, search, filterFrozen]);

  useEffect(() => { fetchWallets(); }, [fetchWallets]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Wallet Management</h1>
          <p className="mt-1 text-sm text-white/50">Freeze, unfreeze, adjust balances</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-3">
        <input type="text" placeholder="Search by user email/name..." value={search} onChange={(e) => { setSearch(e.target.value); setPage(1); }} className="flex-1 min-w-[200px] rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
        <select value={filterFrozen} onChange={(e) => setFilterFrozen(e.target.value)} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white">
          <option value="">All Wallets</option>
          <option value="true">Frozen</option>
          <option value="false">Active</option>
        </select>
      </div>

      <div className="overflow-x-auto rounded-xl border border-white/5">
        <table className="w-full text-left text-sm">
          <thead className="border-b border-white/5 bg-white/[0.02]">
            <tr>
              <th className="px-4 py-3 font-medium text-slate-400">User</th>
              <th className="px-4 py-3 font-medium text-slate-400">Balance</th>
              <th className="px-4 py-3 font-medium text-slate-400">Locked</th>
              <th className="px-4 py-3 font-medium text-slate-400">Status</th>
              <th className="px-4 py-3 font-medium text-slate-400">Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={5} className="px-4 py-8 text-center text-slate-500">Loading...</td></tr>
            ) : wallets.length === 0 ? (
              <tr><td colSpan={5} className="px-4 py-8 text-center text-slate-500">No wallets found</td></tr>
            ) : (
              wallets.map((w) => (
                <tr key={w.id} className="border-b border-white/5 hover:bg-white/[0.02]">
                  <td className="px-4 py-3">
                    <p className="text-white font-medium">{w.user?.firstName} {w.user?.lastName}</p>
                    <p className="text-xs text-slate-400">{w.user?.email}</p>
                  </td>
                  <td className="px-4 py-3 font-mono text-white">${Number(w.balance).toLocaleString()}</td>
                  <td className="px-4 py-3 font-mono text-slate-300">${Number(w.locked).toLocaleString()}</td>
                  <td className="px-4 py-3">{w.isFrozen ? <StatusBadge label="Frozen" color="red" /> : <StatusBadge label="Active" color="green" />}</td>
                  <td className="px-4 py-3">
                    <button onClick={() => setSelectedWalletId(w.id)} className="rounded-lg bg-indigo-500/10 px-3 py-1.5 text-xs font-medium text-indigo-400 hover:bg-indigo-500/20">Manage</button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {meta && (
        <div className="flex items-center justify-between">
          <p className="text-xs text-slate-500">Showing {(meta.page - 1) * meta.limit + 1}-{Math.min(meta.page * meta.limit, meta.total)} of {meta.total}</p>
          <div className="flex gap-2">
            <button disabled={page <= 1} onClick={() => setPage(page - 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Previous</button>
            <button disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Next</button>
          </div>
        </div>
      )}

      {selectedWalletId && <WalletDetailModal walletId={selectedWalletId} onClose={() => { setSelectedWalletId(null); fetchWallets(); }} />}
    </div>
  );
}