'use client';

import { useState, useEffect, useCallback } from 'react';
import { finesService as fineSettingsService, type FineSettings, type UpdateFineSettingsDto } from '@/services/fines.service';
import { finesService, type Fine, type FineStatus } from '@/services/fines.service';
import { getErrorMessage } from '@/lib/errors';
import { cn } from '@/lib/utils';
import { useSystemConfig } from '@/hooks/useSystemConfig';
import { TableSkeleton } from '@/components/priority/skeletons';
import EmptyState from '@/components/EmptyState';
import {
  Settings, Save, RefreshCw, DollarSign, Wallet, Network, Clock, AlertTriangle,
  ToggleLeft, ToggleRight, Search, X, ChevronUp, ChevronDown,
} from 'lucide-react';

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',
};

export default function SuperAdminFineSettingsPage() {
  const sysConfig = useSystemConfig();
  const [settings, setSettings] = useState<FineSettings | null>(null);
  const [local, setLocal] = useState<FineSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const [history, setHistory] = useState<Fine[]>([]);
  const [historyLoading, setHistoryLoading] = useState(true);
  const [historyOffset, setHistoryOffset] = useState(0);
  const [historyMeta, setHistoryMeta] = useState<{ total: number; limit: number; offset: number } | null>(null);
  const [historyStatusFilter, setHistoryStatusFilter] = useState<FineStatus | 'ALL'>('ALL');
  const [historySearch, setHistorySearch] = useState('');
  const historyLimit = 15;

  const loadSettings = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await fineSettingsService.getFineSettings();
      setSettings(data);
      setLocal(data);
    } catch (err: any) {
      setError(err?.message || 'Failed to load fine settings');
    } finally {
      setLoading(false);
    }
  }, []);

  const loadHistory = useCallback(async () => {
    setHistoryLoading(true);
    try {
      const res = await finesService.getAdminFinesHistory({
        status: historyStatusFilter === 'ALL' ? undefined : historyStatusFilter,
        page: Math.floor(historyOffset / historyLimit) + 1,
        limit: historyLimit,
      });
      setHistory(res.data);
      setHistoryMeta(res.meta);
    } catch {
      setHistory([]);
      setHistoryMeta(null);
    } finally {
      setHistoryLoading(false);
    }
  }, [historyStatusFilter, historyOffset]);

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

  useEffect(() => {
    setHistoryOffset(0);
  }, [historyStatusFilter]);

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

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

  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);
    try {
      const payload: UpdateFineSettingsDto = {
        enabled: local.enabled,
        minAmount: local.minAmount,
        maxAmount: local.maxAmount ?? undefined,
        currency: local.paymentDetails.currency || local.currency,
        walletAddress: local.paymentDetails.walletAddress,
        network: local.paymentDetails.network || '',
        expiryDays: local.expiryDays,
      };
      await fineSettingsService.updateFineSettings(payload);
      setSuccess('Fine settings saved successfully');
      loadSettings();
    } catch (err: any) {
      setError(err?.message || 'Failed to update settings');
    } finally {
      setSaving(false);
    }
  };

  const filteredHistory = history.filter((f) => {
    if (!historySearch) return true;
    const q = historySearch.toLowerCase();
    return f.reason.toLowerCase().includes(q) || f.userId.toLowerCase().includes(q);
  });

  const paymentDetails = local?.paymentDetails ?? ({} as FineSettings['paymentDetails']);

  if (loading) return <TableSkeleton rows={5} />;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-white">Fine Settings</h1>
          <p className="text-sm text-slate-400">Configure fines behavior, payment destinations, and view payment history.</p>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={loadSettings} className="rounded-lg border border-white/10 p-2 text-slate-300 hover:bg-white/5">
            <RefreshCw className={cn('h-5 w-5', loading && 'animate-spin')} />
          </button>
        </div>
      </div>

      {error && (
        <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>{error}</span>
          <button onClick={() => setError(null)} className="text-red-300 hover:text-white">&times;</button>
        </div>
      )}
      {success && (
        <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 justify-between">
          <span>{success}</span>
          <button onClick={() => setSuccess(null)} className="text-emerald-300 hover:text-white">&times;</button>
        </div>
      )}

      {local && (
        <div className="rounded-xl border border-white/10 bg-slate-900/50">
          <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 Configuration</h2>
                <p className="text-sm text-slate-400">Set fine amounts, payment details, and system behavior.</p>
              </div>
            </div>
            <button
              onClick={handleSave}
              disabled={saving}
              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 Settings'}
            </button>
          </div>

          <div className="p-5 space-y-6">
            {error && saving === false && (
              <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="grid grid-cols-1 gap-6 md:grid-cols-2">
              <div className="md:col-span-2">
                <p className="mb-3 text-xs font-medium uppercase text-slate-400">System Status</p>
                <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.02] p-4">
                  <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 font-medium text-slate-300">
                      {local.enabled ? 'Fines System Enabled' : 'Fines System Disabled'}
                    </span>
                  </label>
                  {local.enabled ? (
                    <ToggleRight className="h-6 w-6 text-emerald-400 ml-auto" />
                  ) : (
                    <ToggleLeft className="h-6 w-6 text-slate-500 ml-auto" />
                  )}
                </div>
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Minimum Fine Amount ($)</label>
                <div className="relative">
                  <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    value={local.minAmount}
                    onChange={(e) => updateField('minAmount', e.target.value)}
                    className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Maximum Fine Amount ($)</label>
                <div className="relative">
                  <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    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 pl-9 pr-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                    placeholder="Unlimited"
                  />
                </div>
                <p className="mt-1 text-xs text-slate-400">Leave empty for no upper limit.</p>
              </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"
                  placeholder={sysConfig.currency}
                />
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Expiry (days)</label>
                <div className="relative">
                  <Clock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                  <input
                    type="number"
                    min={1}
                    value={local.expiryDays}
                    onChange={(e) => updateField('expiryDays', parseInt(e.target.value, 10) || 0)}
                    className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                  />
                </div>
                <p className="mt-1 text-xs text-slate-400">Number of days before a fine expires.</p>
              </div>
            </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>
                  <div className="relative">
                    <Wallet className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                    <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 pl-9 pr-4 py-2 text-white font-mono text-xs focus:border-blue-500 focus:outline-none"
                      placeholder="0x..."
                    />
                  </div>
                </div>
                <div>
                  <label className="mb-1 block text-sm font-medium text-slate-300">Network / Chain</label>
                  <div className="relative">
                    <Network className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                    <input
                      type="text"
                      value={paymentDetails.network || ''}
                      onChange={(e) => handlePaymentField('network', e.target.value)}
                      className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                      placeholder="e.g. Ethereum, Solana"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="rounded-xl border border-white/10 bg-slate-900/50">
        <div className="flex items-center justify-between border-b border-white/10 p-5">
          <div>
            <h2 className="text-lg font-semibold text-white">Fine Payment History</h2>
            <p className="text-sm text-slate-400">View all fine payments and their status.</p>
          </div>
        </div>

        <div className="p-5">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-4">
            <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={historySearch}
                onChange={(e) => { setHistorySearch(e.target.value); setHistoryOffset(0); }}
                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={historyStatusFilter}
              onChange={(e) => { setHistoryStatusFilter(e.target.value as FineStatus | 'ALL'); setHistoryOffset(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>

          {historyLoading ? (
            <TableSkeleton rows={5} />
          ) : filteredHistory.length === 0 ? (
            <EmptyState message="No fine payments found" description="No fines match the current filters." />
          ) : (
            <>
              <div className="overflow-x-auto rounded-xl border border-white/10">
                <table className="w-full text-left text-sm">
                  <thead className="bg-white/5 text-xs uppercase text-slate-400">
                    <tr>
                      <th className="px-4 py-3">User ID</th>
                      <th className="px-4 py-3">Amount</th>
                      <th className="px-4 py-3">Reason</th>
                      <th className="px-4 py-3">Effective Date</th>
                      <th className="px-4 py-3">Expiry Date</th>
                      <th className="px-4 py-3">Status</th>
                      <th className="px-4 py-3">Paid At</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-white/5">
                    {filteredHistory.map((fine) => (
                      <tr key={fine.id} className="hover:bg-white/5">
                        <td className="px-4 py-3 text-slate-300 font-mono text-xs">{fine.userId}</td>
                        <td className="px-4 py-3 text-white font-medium">${Number(fine.amount).toFixed(2)}</td>
                        <td className="px-4 py-3 text-slate-300 max-w-[200px] truncate">{fine.reason}</td>
                        <td className="px-4 py-3 text-slate-300 whitespace-nowrap">{new Date(fine.effectiveDate).toLocaleDateString()}</td>
                        <td className="px-4 py-3 text-slate-300 whitespace-nowrap">{new Date(fine.expiryDate).toLocaleDateString()}</td>
                        <td className="px-4 py-3">
                          <span className={`rounded-full px-2 py-1 text-xs font-medium ${STATUS_COLORS[fine.status] || 'bg-slate-500/20 text-slate-300'}`}>
                            {fine.status}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-slate-300 whitespace-nowrap">
                          {fine.paidAt ? new Date(fine.paidAt).toLocaleDateString() : 'N/A'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {historyMeta && historyMeta.total > historyLimit && (
                <div className="mt-4 flex items-center justify-between">
                  <p className="text-xs text-slate-400">
                    Showing {historyOffset + 1}-{Math.min(historyOffset + historyLimit, historyMeta.total)} of {historyMeta.total}
                  </p>
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => setHistoryOffset((prev) => Math.max(0, prev - historyLimit))}
                      disabled={historyOffset === 0}
                      className="rounded-lg border border-white/10 px-3 py-1.5 text-sm text-slate-300 hover:bg-white/5 disabled:opacity-50"
                    >
                      Previous
                    </button>
                    <button
                      onClick={() => setHistoryOffset((prev) => prev + historyLimit)}
                      disabled={historyOffset + historyLimit >= historyMeta.total}
                      className="rounded-lg border border-white/10 px-3 py-1.5 text-sm text-slate-300 hover:bg-white/5 disabled:opacity-50"
                    >
                      Next
                    </button>
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}