'use client';

import { useState, useEffect, useCallback } from 'react';
import { adminService } from '@/services/admin.service';
import type { UserProfile, PaginatedResponse } from '@/types/admin.types';
import { cn, formatDateTime } from '@/lib/utils';
import { TableSkeleton } from '@/components/priority/skeletons';
import { SortableTable, type SortableColumn } from '@/components/tables/SortableTable';
import EmptyState from '@/components/EmptyState';
import {
  Search, User, Wallet, AlertCircle, CheckCircle2, X,
  ArrowUpRight, ArrowDownLeft, RefreshCw, UserCheck,
} from 'lucide-react';

export default function SuperAdminBalanceAdjustmentPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<UserProfile[]>([]);
  const [searchLoading, setSearchLoading] = useState(false);
  const [searchMeta, setSearchMeta] = useState<{ total: number; page: number; totalPages: number } | null>(null);
  const [selectedUser, setSelectedUser] = useState<UserProfile | null>(null);
  const [actionLoading, setActionLoading] = useState(false);
  const [actionError, setActionError] = useState<string | null>(null);
  const [actionSuccess, setActionSuccess] = useState<string | null>(null);

  const [amount, setAmount] = useState('');
  const [type, setType] = useState<'CREDIT' | 'DEBIT'>('CREDIT');
  const [description, setDescription] = useState('');

  const searchUsers = useCallback(async (query: string, page = 1) => {
    if (!query.trim()) {
      setSearchResults([]);
      setSearchMeta(null);
      return;
    }
    setSearchLoading(true);
    try {
      const res: PaginatedResponse<UserProfile> = await adminService.listUsers({
        search: query,
        page,
        limit: 20,
      });
      setSearchResults(res.data || []);
      setSearchMeta({
        total: res.meta.total,
        page: res.meta.page,
        totalPages: Math.ceil(res.meta.total / res.meta.limit),
      });
    } catch (err: any) {
      console.error(err);
    } finally {
      setSearchLoading(false);
    }
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      searchUsers(searchQuery);
    }, 400);
    return () => clearTimeout(timer);
  }, [searchQuery, searchUsers]);

  const handleSelectUser = (user: UserProfile) => {
    setSelectedUser(user);
    setSearchResults([]);
    setSearchQuery('');
    setSearchMeta(null);
    setActionError(null);
    setActionSuccess(null);
    setAmount('');
    setType('CREDIT');
    setDescription('');
  };

  const handleAdjust = async () => {
    if (!selectedUser || !amount) return;
    const numAmount = parseFloat(amount);
    if (isNaN(numAmount) || numAmount <= 0) {
      setActionError('Please enter a valid positive amount');
      return;
    }
    if (!selectedUser.wallet?.id) {
      setActionError('User has no wallet');
      return;
    }

    setActionLoading(true);
    setActionError(null);
    setActionSuccess(null);

    try {
      await adminService.adjustBalance({
        walletId: selectedUser.wallet.id,
        amount: numAmount,
        type,
        description: description || undefined,
      });
      setActionSuccess(
        `${type === 'CREDIT' ? 'Credited' : 'Debited'} ${numAmount} to ${selectedUser.email} successfully`,
      );
      const updated = await adminService.getUserById(selectedUser.id);
      setSelectedUser(updated);
      setAmount('');
      setDescription('');
    } catch (err: any) {
      setActionError(err?.message || 'Failed to adjust balance');
    } finally {
      setActionLoading(false);
    }
  };

  const resetSelection = () => {
    setSelectedUser(null);
    setAmount('');
    setType('CREDIT');
    setDescription('');
    setActionError(null);
    setActionSuccess(null);
    setSearchQuery('');
  };

  const columns: SortableColumn[] = [
    {
      key: 'email',
      label: 'Email',
      sortable: true,
      render: (val: any, row: any) => (
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/20 text-blue-300">
            <User className="h-4 w-4" />
          </div>
          <div>
            <p className="text-white font-medium">{val}</p>
            <p className="text-xs text-slate-400">
              {row.firstName || row.lastName || 'No name'}
            </p>
          </div>
        </div>
      ),
    },
    {
      key: 'role',
      label: 'Role',
      sortable: false,
      render: (val: any) => <span className="text-slate-300">{val?.name || 'USER'}</span>,
    },
    {
      key: 'isEmailVerified',
      label: 'Email Verified',
      sortable: false,
      render: (val: any) => (
        <span className={cn(
          'text-xs',
          val ? 'text-emerald-400' : 'text-red-400',
        )}>
          {val ? 'Yes' : 'No'}
        </span>
      ),
    },
    {
      key: 'wallet',
      label: 'Balance',
      sortable: false,
      render: (_: any, row: any) => (
        <span className="text-slate-300 font-mono">
          {row.wallet ? Number(row.wallet.balance).toFixed(2) : 'N/A'}
        </span>
      ),
    },
    {
      key: 'actions',
      label: 'Actions',
      sortable: false,
      render: (_: any, row: any) => (
        <button
          onClick={() => handleSelectUser(row)}
          className="rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-300 hover:bg-blue-500/20 flex items-center gap-1"
        >
          <ArrowUpRight className="h-3 w-3" />
          Select
        </button>
      ),
    },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Balance Adjustment</h1>
        <p className="text-sm text-slate-400">
          Search for a user and adjust their wallet balance. All adjustments are logged to the audit trail.
        </p>
      </div>

      {actionError && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400 flex items-center gap-2">
          <AlertCircle className="h-4 w-4" />
          {actionError}
        </div>
      )}
      {actionSuccess && (
        <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400 flex items-center gap-2">
          <CheckCircle2 className="h-4 w-4" />
          {actionSuccess}
        </div>
      )}

      {!selectedUser ? (
        <div className="rounded-xl border border-white/10 bg-slate-900/50 p-5">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              placeholder="Search by email, name, or user ID..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 py-2 text-sm text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
            />
          </div>

          {searchLoading ? (
            <TableSkeleton rows={5} />
          ) : searchResults.length === 0 ? (
            <div className="mt-4">
              {searchQuery.trim() ? (
                <EmptyState
                  icon={<User className="h-6 w-6" />}
                  message="No users found"
                  description="Try a different search term."
                />
              ) : (
                <p className="text-sm text-slate-400">Enter a search term to find users.</p>
              )}
            </div>
          ) : (
            <div className="mt-4">
              <SortableTable
                data={searchResults}
                columns={columns}
                onRowClick={(row) => handleSelectUser(row)}
              />
              {searchMeta && searchMeta.totalPages > 1 && (
                <div className="mt-3 text-center text-xs text-slate-400">
                  Page 1 of {searchMeta.totalPages} ({searchMeta.total} results)
                </div>
              )}
            </div>
          )}
        </div>
      ) : (
        <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6 space-y-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-300">
                <UserCheck className="h-5 w-5" />
              </div>
              <div>
                <p className="text-white font-medium">
                  {[selectedUser.firstName, selectedUser.lastName].filter(Boolean).join(' ') || 'N/A'}
                </p>
                <p className="text-sm text-slate-400">{selectedUser.email}</p>
              </div>
            </div>
            <button
              onClick={resetSelection}
              className="rounded-lg border border-white/10 p-1.5 text-slate-400 hover:bg-white/5"
              title="Search for a different user"
            >
              <RefreshCw className="h-4 w-4" />
            </button>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
              <p className="text-xs font-medium uppercase text-slate-400">Current Balance</p>
              <p className="mt-1 text-2xl font-bold text-white">
                {selectedUser.wallet ? Number(selectedUser.wallet.balance).toFixed(2) : 'N/A'} USDT
              </p>
            </div>
            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
              <p className="text-xs font-medium uppercase text-slate-400">Locked Balance</p>
              <p className="mt-1 text-2xl font-bold text-white">
                {selectedUser.wallet ? Number(selectedUser.wallet.locked).toFixed(2) : 'N/A'} USDT
              </p>
            </div>
            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
              <p className="text-xs font-medium uppercase text-slate-400">Wallet Status</p>
              <p className="mt-1 text-sm">
                {selectedUser.wallet?.isFrozen ? (
                  <span className="font-medium text-red-400">Frozen</span>
                ) : (
                  <span className="font-medium text-emerald-400">Active</span>
                )}
              </p>
            </div>
          </div>

          <div className="space-y-4">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Amount (USDT)</label>
                <input
                  type="number"
                  placeholder="0.00"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  min={0.01}
                  step={0.01}
                  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Adjustment Type</label>
                <div className="flex gap-3">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="radio"
                      name="type"
                      checked={type === 'CREDIT'}
                      onChange={() => setType('CREDIT')}
                      className="accent-emerald-500"
                    />
                    <span className="flex items-center gap-1 text-sm">
                      <ArrowDownLeft className="h-4 w-4 text-emerald-400" />
                      Credit
                    </span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="radio"
                      name="type"
                      checked={type === 'DEBIT'}
                      onChange={() => setType('DEBIT')}
                      className="accent-red-500"
                    />
                    <span className="flex items-center gap-1 text-sm">
                      <ArrowUpRight className="h-4 w-4 text-red-400" />
                      Debit
                    </span>
                  </label>
                </div>
              </div>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Description / Reason</label>
              <textarea
                placeholder="Enter a reason for this adjustment (visible in audit log)..."
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={3}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none resize-none"
              />
            </div>

            <div className="flex justify-end gap-3 pt-4 border-t border-white/10">
              <button
                onClick={resetSelection}
                className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
              >
                Cancel
              </button>
              <button
                onClick={handleAdjust}
                disabled={actionLoading || !amount || !selectedUser.wallet?.id || selectedUser.wallet.isFrozen}
                className={cn(
                  'rounded-lg px-6 py-2 text-sm font-semibold text-white disabled:opacity-50',
                  type === 'CREDIT'
                    ? 'bg-emerald-600 hover:bg-emerald-700'
                    : 'bg-red-600 hover:bg-red-700',
                )}
              >
                {actionLoading ? 'Processing...' : type === 'CREDIT' ? 'Credit Balance' : 'Debit Balance'}
              </button>
            </div>

            {selectedUser.wallet?.isFrozen && (
              <p className="text-xs text-red-400">
                This wallet is currently frozen. Unfreeze it first at /super-admin/wallet-management before adjusting balance.
              </p>
            )}
          </div>
        </div>
      )}
    </div>
  );
}