'use client';

import { useState, useEffect, useCallback } from 'react';
import { finesService, type Fine, type FineStatus, type FinesStats, type CreateFineDto, type FineSettings, type UpdateFineSettingsDto, type FineSettingsPaymentDetails } from '@/services/fines.service';
import { adminService } from '@/services/admin.service';
import type { UserProfile } from '@/types/admin.types';
import { getErrorMessage } from '@/lib/errors';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { TableSkeleton } from '@/components/priority/skeletons';
import { SortableTable, type SortableColumn } from '@/components/tables/SortableTable';
import EmptyState from '@/components/EmptyState';
import {
  Search, X, Plus, Eye, CheckCircle2, XCircle, AlertTriangle, RefreshCw,
  DollarSign, Filter, Clock, User, Save, Settings, Trash2,
} from 'lucide-react';

type StatusFilter = 'ALL' | FineStatus;

const STATUS_COLORS: Record<string, string> = {
  PENDING: 'bg-amber-500/20 text-amber-300',
  ACTIVE: 'bg-blue-500/20 text-blue-300',
  PAID: 'bg-emerald-500/20 text-emerald-300',
  EXPIRED: 'bg-slate-500/20 text-slate-300',
  CANCELLED: 'bg-red-500/20 text-red-300',
};

function ConfirmDialog({
  title, description, confirmLabel, confirmVariant = 'danger', onConfirm, onClose, loading, reason, setReason,
}: {
  title: string;
  description: string;
  confirmLabel: string;
  confirmVariant?: 'danger' | 'primary' | 'warning';
  onConfirm: (reason: string) => void;
  onClose: () => void;
  loading?: boolean;
  reason: string;
  setReason: (r: string) => void;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div className="w-full max-w-lg rounded-xl border border-white/10 bg-slate-900 shadow-2xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-white/10 p-5">
          <h2 className="text-lg font-semibold text-white">{title}</h2>
          <button onClick={onClose} className="rounded-lg p-1 text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
        </div>
        <div className="p-5 space-y-4">
          <p className="text-sm text-slate-400">{description}</p>
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Reason <span className="text-red-400">*</span></label>
            <textarea
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              placeholder="Provide a reason for this action..."
              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>
        <div className="flex justify-end gap-3 border-t border-white/10 p-5">
          <Tooltip>
            <TooltipTrigger asChild>
              <button onClick={onClose} className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5">Cancel</button>
            </TooltipTrigger>
            <TooltipContent>Close this dialog without making any changes.</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <button
                onClick={() => onConfirm(reason)}
                disabled={Boolean(loading || !reason.trim())}
                className={cn(
                  'rounded-lg px-4 py-2 text-sm font-semibold text-white disabled:opacity-50',
                  confirmVariant === 'danger' && 'bg-red-600 hover:bg-red-700',
                  confirmVariant === 'primary' && 'bg-blue-600 hover:bg-blue-700',
                  confirmVariant === 'warning' && 'bg-amber-600 hover:bg-amber-700',
                )}
              >
                {loading ? <span className="inline-flex items-center gap-2"><svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" /> Processing</span> : confirmLabel}
              </button>
            </TooltipTrigger>
            <TooltipContent>Confirm and execute this action.</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </div>
  );
}

function FineDetailModal({ fine, onClose, onRefresh }: { fine: Fine; onClose: () => void; onRefresh: () => void }) {
  const [actionLoading, setActionLoading] = useState(false);
  const [actionError, setActionError] = useState<string | null>(null);
  const [showConfirm, setShowConfirm] = useState<'pay' | 'cancel' | null>(null);
  const [confirmReason, setConfirmReason] = useState('');

  const handleAction = async () => {
    if (!showConfirm) return;
    setActionLoading(true);
    setActionError(null);
    try {
      if (showConfirm === 'pay') {
        await finesService.payFine(fine.id);
      } else if (showConfirm === 'cancel') {
        await finesService.cancelFine(fine.id, confirmReason);
      }
      onRefresh();
      onClose();
    } catch (err: any) {
      setActionError(getErrorMessage(err));
    } finally {
      setActionLoading(false);
      setShowConfirm(null);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div className="w-full max-w-2xl rounded-xl border border-white/10 bg-slate-900 shadow-2xl max-h-[90vh] overflow-hidden flex flex-col" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-white/10 p-5 shrink-0">
          <div>
            <h2 className="text-lg font-semibold text-white">Fine Details</h2>
            <p className="text-sm text-slate-400">ID: {fine.id}</p>
          </div>
          <div className="flex items-center gap-2">
            {(fine.status === 'PENDING' || fine.status === 'ACTIVE') && (
              <>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button onClick={() => setShowConfirm('pay')} className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs font-medium text-emerald-300 hover:bg-emerald-500/20 flex items-center gap-1.5">
                      <CheckCircle2 className="h-4 w-4" /> Mark Paid
                    </button>
                  </TooltipTrigger>
                  <TooltipContent>Record that the user has paid this fine. This removes the fine from their account.</TooltipContent>
                </Tooltip>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button onClick={() => setShowConfirm('cancel')} className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs font-medium text-red-300 hover:bg-red-500/20 flex items-center gap-1.5">
                      <XCircle className="h-4 w-4" /> Cancel Fine
                    </button>
                  </TooltipTrigger>
                  <TooltipContent>Cancel this fine and remove it from the user's account. Use only if the fine was issued by mistake.</TooltipContent>
                </Tooltip>
              </>
            )}
            <button onClick={onClose} className="rounded-lg p-1 text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
          </div>
        </div>
        <div className="flex-1 overflow-y-auto p-5 space-y-4">
          {actionError && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{actionError}</div>}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <DetailField label="User ID" value={fine.userId} />
            <DetailField label="Amount" value={`$${Number(fine.amount).toFixed(2)}`} />
            <DetailField label="Status" value={fine.status} />
            <DetailField label="Reason" value={fine.reason} />
            <DetailField label="Effective Date" value={new Date(fine.effectiveDate).toLocaleDateString()} />
            <DetailField label="Expiry Date" value={new Date(fine.expiryDate).toLocaleDateString()} />
            <DetailField label="Paid At" value={fine.paidAt ? new Date(fine.paidAt).toLocaleString() : 'Not paid'} />
            <DetailField label="Created" value={new Date(fine.createdAt).toLocaleString()} />
          </div>
          {fine.metadata && Object.keys(fine.metadata).length > 0 && (
            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
              <p className="text-xs font-medium text-slate-400 mb-2">Metadata</p>
              <pre className="text-xs text-slate-300 whitespace-pre-wrap">{JSON.stringify(fine.metadata, null, 2)}</pre>
            </div>
          )}
        </div>
        {showConfirm && (
          <ConfirmDialog
            title={showConfirm === 'pay' ? 'Mark Fine as Paid' : 'Cancel Fine'}
            description={showConfirm === 'pay' ? 'Are you sure you want to mark this fine as paid? This action cannot be undone.' : 'Are you sure you want to cancel this fine? Provide a reason below.'}
            confirmLabel={showConfirm === 'pay' ? 'Mark Paid' : 'Cancel Fine'}
            confirmVariant={showConfirm === 'pay' ? 'primary' : 'danger'}
            onConfirm={handleAction}
            onClose={() => setShowConfirm(null)}
            loading={actionLoading}
            reason={confirmReason}
            setReason={setConfirmReason}
          />
        )}
      </div>
    </div>
  );
}

function CreateFineDialog({ onClose, onSuccess, users }: { onClose: () => void; onSuccess: () => void; users: UserProfile[] }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [userSearch, setUserSearch] = useState('');
  const [showUserDropdown, setShowUserDropdown] = useState(false);
  const [selectedUser, setSelectedUser] = useState<UserProfile | null>(null);
  const [form, setForm] = useState({
    userId: '',
    amount: '',
    reason: '',
    effectiveDate: '',
    expiryDate: '',
    freezeWallet: false,
    penaltyAmount: '',
  });

  const filteredUsers = users.filter((u) => {
    if (!userSearch) return true;
    const q = userSearch.toLowerCase();
    return (
      u.email?.toLowerCase().includes(q) ||
      u.firstName?.toLowerCase().includes(q) ||
      u.lastName?.toLowerCase().includes(q) ||
      u.id?.toLowerCase().includes(q)
    );
  });

  const handleSelectUser = (user: UserProfile) => {
    setSelectedUser(user);
    setForm({ ...form, userId: user.id });
    setUserSearch(`${user.firstName} ${user.lastName} (${user.email})`);
    setShowUserDropdown(false);
  };

  const parseDateToIso = (dateStr: string): string => {
    if (!dateStr) return '';
    // Handle YYYY-MM-DD format (standard HTML date input)
    if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
      return new Date(dateStr + 'T00:00:00.000Z').toISOString();
    }
    // Handle DD-MM-YYYY format
    if (/^\d{2}-\d{2}-\d{4}$/.test(dateStr)) {
      const [day, month, year] = dateStr.split('-');
      return new Date(`${year}-${month}-${day}T00:00:00.000Z`).toISOString();
    }
    // Handle MM/DD/YYYY format
    if (/^\d{2}\/\d{2}\/\d{4}$/.test(dateStr)) {
      const [month, day, year] = dateStr.split('/');
      return new Date(`${year}-${month}-${day}T00:00:00.000Z`).toISOString();
    }
    // Try parsing as-is
    const parsed = new Date(dateStr);
    return isNaN(parsed.getTime()) ? '' : parsed.toISOString();
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    if (!form.userId || !form.amount || !form.reason || !form.effectiveDate) {
      setError('Please fill in all required fields');
      return;
    }
    if (form.freezeWallet && form.penaltyAmount) {
      const penalty = parseFloat(form.penaltyAmount);
      if (isNaN(penalty) || penalty <= 0) {
        setError('Penalty amount must be a positive number');
        return;
      }
    }
    setLoading(true);
    try {
      const effectiveDateIso = parseDateToIso(form.effectiveDate);
      const expiryDateIso = form.expiryDate ? parseDateToIso(form.expiryDate) : new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString();

      if (!effectiveDateIso) {
        setError('Invalid effective date format');
        return;
      }

      const createdFine = await finesService.createFine({
        userId: form.userId,
        amount: parseFloat(form.amount),
        reason: form.reason,
        effectiveDate: effectiveDateIso,
        expiryDate: expiryDateIso,
      } as CreateFineDto);

      if (form.freezeWallet) {
        await finesService.createFineWithFreeze({
          fineId: createdFine.id,
          reason: form.reason,
        });
        if (form.penaltyAmount) {
          await finesService.createFine({
            userId: form.userId,
            amount: parseFloat(form.penaltyAmount),
            reason: `Freeze penalty: ${form.reason}`,
            effectiveDate: effectiveDateIso,
            expiryDate: expiryDateIso,
          } as CreateFineDto);
        }
      }

      onSuccess();
      onClose();
    } catch (err: any) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div className="w-full max-w-lg rounded-xl border border-white/10 bg-slate-900 shadow-2xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-white/10 p-5">
          <h2 className="text-lg font-semibold text-white">Create New Fine</h2>
          <button onClick={onClose} className="rounded-lg p-1 text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
        </div>
        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          {error && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div>}
          <div className="relative">
            <label className="mb-1 block text-sm font-medium text-slate-300">User <span className="text-red-400">*</span></label>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
              <input
                type="text"
                placeholder="Search by name, email, or ID..."
                value={userSearch}
                onChange={(e) => {
                  setUserSearch(e.target.value);
                  setShowUserDropdown(true);
                  if (selectedUser) {
                    setSelectedUser(null);
                    setForm({ ...form, userId: '' });
                  }
                }}
                onFocus={() => setShowUserDropdown(true)}
                className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
              />
            </div>
            {showUserDropdown && userSearch && filteredUsers.length > 0 && (
              <div className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-white/10 bg-slate-800 shadow-xl">
                {filteredUsers.slice(0, 10).map((u) => (
                  <button
                    key={u.id}
                    type="button"
                    onClick={() => handleSelectUser(u)}
                    className="w-full px-4 py-2 text-left text-sm text-slate-300 hover:bg-white/5"
                  >
                    {u.firstName} {u.lastName} <span className="text-slate-500">({u.email})</span>
                  </button>
                ))}
              </div>
            )}
            {selectedUser && (
              <div className="mt-1 flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5">
                <CheckCircle2 className="h-4 w-4 text-emerald-400" />
                <span className="text-sm text-emerald-300">{selectedUser.firstName} {selectedUser.lastName}</span>
                <button type="button" onClick={() => { setSelectedUser(null); setUserSearch(''); setForm({ ...form, userId: '' }); }} className="ml-auto text-slate-400 hover:text-white">
                  <X className="h-3 w-3" />
                </button>
              </div>
            )}
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Amount <span className="text-red-400">*</span></label>
            <input type="number" step="0.01" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} placeholder="0.00" 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">Reason <span className="text-red-400">*</span></label>
            <textarea value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })} placeholder="Reason for the fine..." 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="grid grid-cols-2 gap-4">
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Effective Date <span className="text-red-400">*</span></label>
              <input type="date" value={form.effectiveDate} onChange={(e) => setForm({ ...form, effectiveDate: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Expiry Date</label>
              <input type="date" value={form.expiryDate} onChange={(e) => setForm({ ...form, expiryDate: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none" />
              <p className="mt-1 text-xs text-slate-400">Leave empty for no expiry (stays until paid)</p>
            </div>
          </div>
          <div className="rounded-lg border border-amber-500/20 bg-amber-500/5 p-4 space-y-3">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="freezeWallet"
                checked={form.freezeWallet}
                onChange={(e) => setForm({ ...form, freezeWallet: e.target.checked })}
                className="rounded border-white/10 bg-white/5"
              />
              <label htmlFor="freezeWallet" className="text-sm font-medium text-slate-300">
                Freeze wallet and disable sell
              </label>
            </div>
            <p className="text-xs text-slate-400">
              When enabled: the user's wallet will be frozen (isFrozen=true) and a SELL restriction will
              be created, preventing them from selling until the fine payment is verified.
            </p>
            {form.freezeWallet && (
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">
                  Freeze Penalty Amount (USDT) <span className="text-xs text-slate-400 font-normal">(optional)</span>
                </label>
                <input
                  type="number"
                  step="0.01"
                  value={form.penaltyAmount}
                  onChange={(e) => setForm({ ...form, penaltyAmount: e.target.value })}
                  placeholder="0.00"
                  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"
                  min={0.01}
                />
                <p className="mt-1 text-xs text-slate-400">
                  Optional additional penalty amount applied when freezing the wallet.
                </p>
              </div>
            )}
          </div>
          <div className="flex justify-end gap-3 border-t border-white/10 pt-4">
            <Tooltip>
              <TooltipTrigger asChild>
                <button type="button" onClick={onClose} className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5">Cancel</button>
              </TooltipTrigger>
              <TooltipContent>Close this dialog without making any changes.</TooltipContent>
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
                <button type="submit" disabled={loading} className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50">{loading ? 'Creating...' : 'Create Fine'}</button>
              </TooltipTrigger>
              <TooltipContent>Issue a new fine to a user. Fines are penalties for breaking platform rules.</TooltipContent>
            </Tooltip>
          </div>
        </form>
      </div>
    </div>
  );
}

function DetailField({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border border-white/10 bg-white/5 p-3">
      <p className="text-xs font-medium uppercase text-slate-400 mb-1">{label}</p>
      <p className="text-sm text-white">{value || 'N/A'}</p>
    </div>
  );
}

function FineSettingsSection({ settings, onUpdate, loading, onRefresh }: {
  settings: FineSettings | null;
  onUpdate: (payload: UpdateFineSettingsDto) => Promise<void>;
  loading: boolean;
  onRefresh: () => void;
}) {
  const [local, setLocal] = useState<FineSettings | null>(settings);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  useEffect(() => {
    setLocal(settings);
  }, [settings]);

  const updateField = <K extends keyof UpdateFineSettingsDto>(key: K, value: UpdateFineSettingsDto[K]) => {
    setLocal((prev) => (prev ? { ...prev, [key]: value } : prev));
  };

  const paymentDetails = local?.paymentDetails ?? ({} as FineSettingsPaymentDetails);

  const handlePaymentField = (key: 'walletAddress' | 'network' | 'currency', value: string) => {
    setLocal((prev) =>
      prev
        ? {
            ...prev,
            paymentDetails: { ...prev.paymentDetails, [key]: value },
          }
        : prev,
    );
  };

  const handleSave = async () => {
    if (!local) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    const payload: UpdateFineSettingsDto = {
      enabled: local.enabled,
      minAmount: local.minAmount,
      maxAmount: local.maxAmount ?? undefined,
      currency: paymentDetails.currency || local.currency,
      walletAddress: paymentDetails.walletAddress,
      network: paymentDetails.network || local.paymentDetails?.network || '',
      expiryDays: local.expiryDays,
    };
    try {
      await onUpdate(payload);
      setSuccess('Fine settings saved successfully');
      onRefresh();
    } catch (err: any) {
      setError(err?.message || getErrorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="rounded-xl border border-white/10 bg-white/[0.02]">
      <div className="flex items-center justify-between border-b border-white/10 p-5">
        <div className="flex items-center gap-3">
          <div className="rounded-lg bg-blue-500/10 p-2">
            <Settings className="h-5 w-5 text-blue-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Fine Settings</h2>
            <p className="text-sm text-slate-400">Configure default fine behavior and payment destination.</p>
          </div>
        </div>
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              onClick={handleSave}
              disabled={saving || loading}
              className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
            >
              <Save className="h-4 w-4" /> {saving ? 'Saving...' : 'Save'}
            </button>
          </TooltipTrigger>
          <TooltipContent>Save the fine system settings like minimum/maximum amounts and payment details.</TooltipContent>
        </Tooltip>
      </div>

      <div className="p-5 space-y-4">
        {error && (
          <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div>
        )}
        {success && (
          <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">{success}</div>
        )}

        {loading ? (
          <div className="text-slate-400">Loading settings...</div>
        ) : local ? (
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 text-slate-400">
                <AlertTriangle className="h-5 w-5" />
              </div>
              <label className="flex cursor-pointer items-center gap-2">
                <input
                  type="checkbox"
                  checked={local.enabled}
                  onChange={(e) => updateField('enabled', e.target.checked)}
                  className="h-4 w-4 rounded border-white/10 bg-white/5"
                />
                <span className="text-sm text-slate-300">Enable Fines System</span>
              </label>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Minimum Amount ($)</label>
              <input
                type="number"
                step="0.01"
                value={local.minAmount}
                onChange={(e) => updateField('minAmount', e.target.value)}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
              />
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Maximum Amount ($)</label>
              <input
                type="number"
                step="0.01"
                value={local.maxAmount ?? ''}
                onChange={(e) => updateField('maxAmount', e.target.value ? e.target.value : null)}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                placeholder="Unlimited"
              />
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Currency</label>
              <input
                type="text"
                value={paymentDetails.currency || local.currency}
                onChange={(e) => handlePaymentField('currency', e.target.value)}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
              />
            </div>

            <div className="md:col-span-2">
              <p className="mb-3 text-xs font-medium uppercase text-slate-400">Payment Destination</p>
              <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">Wallet Address</label>
                  <input
                    type="text"
                    value={paymentDetails.walletAddress || ''}
                    onChange={(e) => handlePaymentField('walletAddress', e.target.value)}
                    className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white font-mono text-xs focus:border-blue-500 focus:outline-none"
                    placeholder="0x..."
                  />
                </div>
                <div>
                  <label className="mb-1 block text-sm font-medium text-slate-300">Network</label>
                  <input
                    type="text"
                    value={paymentDetails.network || local.paymentDetails?.network || ''}
                    onChange={(e) => handlePaymentField('network', e.target.value)}
                    className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                    placeholder="e.g. Ethereum, Solana"
                  />
                </div>
              </div>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Expiry (days)</label>
              <input
                type="number"
                min={1}
                value={local.expiryDays}
                onChange={(e) => updateField('expiryDays', parseInt(e.target.value) || 0)}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
              />
            </div>
          </div>
        ) : (
          <p className="text-slate-400">No fine settings configured.</p>
        )}
      </div>
    </div>
  );
}


export default function SuperAdminFinesPage() {
  const [fines, setFines] = useState<Fine[]>([]);
  const [stats, setStats] = useState<FinesStats | null>(null);
  const [users, setUsers] = useState<UserProfile[]>([]);
  const [fineSettings, setFineSettings] = useState<FineSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [settingsLoading, setSettingsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedFine, setSelectedFine] = useState<Fine | null>(null);
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [actionLoading, setActionLoading] = useState(false);
  const [actionError, setActionError] = useState<string | null>(null);
  const [offset, setOffset] = useState(0);
  const [sortBy, setSortBy] = useState<string | null>(null);
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null);
  const limit = 20;

  const loadData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [finesRes, statsRes] = await Promise.all([
        finesService.getFinesHistory({
          status: statusFilter === 'ALL' ? undefined : statusFilter,
          limit,
          offset,
          sortBy: sortBy ?? undefined,
          sortOrder: sortOrder ?? undefined,
        }),
        finesService.getFinesStats().catch(() => null),
      ]);
      setFines(finesRes.data);
      setStats(statsRes);
    } catch (err: any) {
      setError(err?.message || 'Failed to load fines');
    } finally {
      setLoading(false);
    }
  }, [statusFilter, offset, sortBy, sortOrder]);

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

  useEffect(() => {
    adminService.listUsers({ page: 1, limit: 100 }).then((r: any) => setUsers(r.data || [])).catch(() => setUsers([]));
  }, []);

  const loadFineSettings = useCallback(async () => {
    setSettingsLoading(true);
    try {
      const res = await finesService.getFineSettings();
      setFineSettings(res);
    } catch (err: any) {
      // silenty ignore settings load errors
    } finally {
      setSettingsLoading(false);
    }
  }, []);

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

  const handleRefresh = () => {
    setOffset(0);
    loadData();
    loadFineSettings();
  };

  const filteredFines = fines.filter((f) => {
    if (!searchQuery) return true;
    const q = searchQuery.toLowerCase();
    return f.reason.toLowerCase().includes(q) || f.userId.toLowerCase().includes(q);
  });

  const tableData = filteredFines.map((f) => ({
    ...f,
    userEmail: f.user?.email || f.userId,
    userName: f.user ? `${f.user.firstName || ''} ${f.user.lastName || ''}`.trim() : f.userId,
  }));

  const columns: SortableColumn[] = [
    {
      key: 'userEmail',
      label: 'User',
      sortable: true,
      render: (val: any, row: any) => (
        <div>
          <p className="text-white">{row.userName}</p>
          <p className="text-xs text-slate-400 font-mono">{val}</p>
        </div>
      ),
    },
    {
      key: 'amount',
      label: 'Amount',
      sortable: true,
      render: (val: any) => <span className="text-white font-medium">${Number(val).toFixed(2)}</span>,
    },
    {
      key: 'status',
      label: 'Status',
      sortable: true,
      render: (val: any) => (
        <span className={`rounded-full px-2 py-1 text-xs font-medium ${STATUS_COLORS[val] || 'bg-slate-500/20 text-slate-300'}`}>
          {val}
        </span>
      ),
    },
    {
      key: 'reason',
      label: 'Reason',
      sortable: true,
      render: (val: any) => <span className="max-w-[200px] truncate block">{val}</span>,
    },
    {
      key: 'effectiveDate',
      label: 'Effective Date',
      sortable: true,
      render: (val: any) => <span className="whitespace-nowrap">{new Date(val).toLocaleDateString()}</span>,
    },
    {
      key: 'expiryDate',
      label: 'Expiry Date',
      sortable: true,
      render: (val: any) => <span className="whitespace-nowrap">{new Date(val).toLocaleDateString()}</span>,
    },
    {
      key: 'createdAt',
      label: 'Created At',
      sortable: true,
      render: (val: any) => <span className="whitespace-nowrap">{new Date(val).toLocaleDateString()}</span>,
    },
    {
      key: 'actions',
      label: 'Actions',
      sortable: false,
      render: (_: any, row: any) => (
          <div onClick={(e) => e.stopPropagation()}>
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  onClick={() => setSelectedFine(row)}
                  className="rounded-lg border border-white/10 px-2.5 py-1 text-xs text-slate-300 hover:bg-white/5"
                >
                  View Details
                </button>
              </TooltipTrigger>
              <TooltipContent>View full details of this fine including amount, reason, and payment status.</TooltipContent>
            </Tooltip>
          </div>
      ),
    },
  ];

  const handleSortChange = (key: string, order: 'asc' | 'desc' | null) => {
    setSortBy(key);
    setSortOrder(order);
    setOffset(0);
  };

  const statCards = stats ? [
    { label: 'Pending', value: Number(stats.totalPending).toFixed(2), color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20' },
    { label: 'Active', value: Number(stats.totalActive).toFixed(2), color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/20' },
    { label: 'Collected', value: Number(stats.collectedAmount).toFixed(2), color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20' },
    { label: 'Expired', value: Number(stats.totalExpired).toFixed(2), color: 'text-slate-400', bg: 'bg-slate-500/10', border: 'border-slate-500/20' },
  ] : [];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-white">Fines Management</h1>
          <p className="text-slate-400">View, create, and manage platform fines.</p>
        </div>
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              onClick={() => setShowCreateForm(true)}
              className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
            >
              <Plus className="h-4 w-4" /> Create Fine
            </button>
          </TooltipTrigger>
          <TooltipContent>Issue a new fine to a user. Fines are penalties for breaking platform rules.</TooltipContent>
        </Tooltip>
      </div>

      {error && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">
          {error}
          <button onClick={handleRefresh} className="ml-4 underline">Retry</button>
        </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 justify-between">
          <span>{actionError}</span>
          <button onClick={() => setActionError(null)} className="ml-4 text-red-300 hover:text-white">&times;</button>
        </div>
      )}

      <FineSettingsSection
        settings={fineSettings}
        onUpdate={async (payload) => { await finesService.updateFineSettings(payload); }}
        loading={settingsLoading}
        onRefresh={loadFineSettings}
      />

      {statCards.length > 0 && (
        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          {statCards.map((s) => (
            <div key={s.label} className={`rounded-xl border ${s.border} ${s.bg} p-4`}>
              <p className="text-xs font-medium text-slate-400 uppercase">{s.label}</p>
              <p className={`text-xl font-bold ${s.color}`}>${s.value}</p>
            </div>
          ))}
        </div>
      )}

      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div className="flex flex-1 items-center gap-3">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
            <input
              type="text"
              placeholder="Search by user ID or reason..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-sm text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
            />
          </div>
          <select
            value={statusFilter}
            onChange={(e) => { setStatusFilter(e.target.value as StatusFilter); setOffset(0); }}
            className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="ALL">All Statuses</option>
            <option value="PENDING">Pending</option>
            <option value="ACTIVE">Active</option>
            <option value="PAID">Paid</option>
            <option value="EXPIRED">Expired</option>
            <option value="CANCELLED">Cancelled</option>
          </select>
        </div>
        <Tooltip>
          <TooltipTrigger asChild>
            <button onClick={handleRefresh} className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-400 hover:bg-white/5">
              <RefreshCw className="h-4 w-4" /> Refresh
            </button>
          </TooltipTrigger>
          <TooltipContent>Reload fines data to see the latest information.</TooltipContent>
        </Tooltip>
      </div>

      {loading ? (
        <TableSkeleton rows={8} />
      ) : tableData.length === 0 ? (
        <EmptyState message="No fines found" description="No fines match the current filters." />
      ) : (
        <SortableTable
          data={tableData}
          columns={columns}
          onRowClick={(fine) => setSelectedFine(fine)}
          sortBy={sortBy}
          sortOrder={sortOrder}
          onSortChange={handleSortChange}
        />
      )}

      {selectedFine && (
        <FineDetailModal fine={selectedFine} onClose={() => setSelectedFine(null)} onRefresh={loadData} />
      )}

      {showCreateForm && (
        <CreateFineDialog onClose={() => setShowCreateForm(false)} onSuccess={loadData} users={users} />
      )}
    </div>
  );
}