'use client';

import { useState, useEffect, useCallback, useMemo } from 'react';
import { finesService as fineSettingsService, type FineSettings, type UpdateFineSettingsDto } from '@/services/fines.service';
import { subscriptionService as subscriptionSettingsService, type SubscriptionSettings, type UpdateSubscriptionSettingsDto } from '@/services/subscription.service';
import { useSystemConfig } from '@/hooks/useSystemConfig';
import { systemService } from '@/services/system.service';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  RefreshCw, Save, Wallet, Network, DollarSign,
  CheckCircle2,
} from 'lucide-react';

type Tab = 'fines' | 'subscriptions';

function normalizePaymentDetails<T>(raw: T | null): T | null {
  if (!raw) return raw;
  const r = raw as any;
  if (r.paymentDetails && r.paymentDetails.walletAddress != null && r.paymentDetails.walletAddress !== '') {
    return raw;
  }
  return {
    ...r,
    paymentDetails: {
      walletAddress: r.paymentWallet ?? r.walletAddress ?? r.wallet ?? '',
      network: r.network ?? r.chain ?? '',
      currency: r.currency ?? r.coin ?? 'USDT',
    },
  };
}

  const getPaymentDetailsSafe = (settings: any): { walletAddress: string; network: string; currency: string } => {
    if (!settings) return { walletAddress: '', network: '', currency: 'USDT' };
    if (!settings.paymentDetails) return { walletAddress: settings.walletAddress ?? '', network: settings.network ?? '', currency: settings.currency ?? 'USDT' };
    const pd = settings.paymentDetails;
    return {
      walletAddress: pd.walletAddress ?? pd.paymentWallet ?? pd.wallet ?? '',
      network: pd.network ?? pd.chain ?? '',
      currency: pd.currency ?? pd.coin ?? 'USDT',
    };
  };

export default function SuperAdminPaymentAddressesPage() {
  const sysConfig = useSystemConfig();
  const [activeTab, setActiveTab] = useState<Tab>('fines');
  const [fineSettings, setFineSettings] = useState<FineSettings | null>(null);
  const [subscriptionSettings, setSubscriptionSettings] = useState<SubscriptionSettings | null>(null);
  const [fineLocal, setFineLocal] = useState<FineSettings | null>(null);
  const [subsLocal, setSubsLocal] = useState<SubscriptionSettings | 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 [customChain, setCustomChain] = useState('');
  const [chains, setChains] = useState<string[]>(sysConfig.chains);
  const [savingChains, setSavingChains] = useState(false);

  useEffect(() => {
    setChains(sysConfig.chains);
  }, [sysConfig.chains]);

  const chainOptions = useMemo(() => chains, [chains]);

  const handleAddChain = async () => {
    const v = customChain.trim().toUpperCase();
    if (!v) return;
    if (chains.includes(v)) {
      setError(`Chain "${v}" is already in the list`);
      return;
    }
    const next = [...chains, v];
    setChains(next);
    setCustomChain('');
    setError(null);
    await persistChains(next);
  };

  const handleRemoveChain = async (chain: string) => {
    const next = chains.filter((c) => c !== chain);
    setChains(next);
    setError(null);
    await persistChains(next);
  };

  const persistChains = async (next: string[]) => {
    setSavingChains(true);
    try {
      await systemService.setStringValue('platform_chains', next.join(','));
      setSuccess(`Network list updated (${next.length} chain${next.length === 1 ? '' : 's'})`);
    } catch (err: any) {
      setError(err?.message || 'Failed to save network list');
    } finally {
      setSavingChains(false);
    }
  };

  const loadSettings = useCallback(async () => {
    setLoading(true);
    setError(null);
    setSuccess(null);
    try {
      const [fineRes, subsRes] = await Promise.allSettled([
        fineSettingsService.getFineSettings(),
        subscriptionSettingsService.getSubscriptionSettings(),
      ]);
      if (fineRes.status === 'fulfilled') {
        const data = normalizePaymentDetails(fineRes.value);
        setFineSettings(data);
        setFineLocal(data);
      }
      if (subsRes.status === 'fulfilled') {
        const data = normalizePaymentDetails(subsRes.value);
        setSubscriptionSettings(data);
        setSubsLocal(data);
      }
    } catch (err: any) {
      setError(err?.message || 'Failed to load payment settings');
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleSaveFineSettings = async () => {
    if (!fineLocal) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      const details = getPaymentDetails(fineLocal);
      const payload: UpdateFineSettingsDto = {
        walletAddress: details.walletAddress,
        paymentWallet: details.walletAddress,
        network: details.network,
        currency: details.currency,
      };
      const updated = normalizePaymentDetails(await fineSettingsService.updateFineSettings(payload));
      setFineSettings(updated);
      setFineLocal(updated);
      setSuccess('Fine payment settings saved successfully');
    } catch (err: any) {
      setError(err?.message || 'Failed to save fine settings');
    } finally {
      setSaving(false);
    }
  };

  const handleSaveSubsSettings = async () => {
    if (!subsLocal) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      const details = getPaymentDetails(subsLocal);
      const payload: UpdateSubscriptionSettingsDto = {
        walletAddress: details.walletAddress,
        paymentWallet: details.walletAddress,
        network: details.network,
        currency: details.currency,
      };
      const updated = normalizePaymentDetails(await subscriptionSettingsService.updateSubscriptionSettings(payload));
      setSubscriptionSettings(updated);
      setSubsLocal(updated);
      setSuccess('Subscription payment settings saved successfully');
    } catch (err: any) {
      setError(err?.message || 'Failed to save subscription settings');
    } finally {
      setSaving(false);
    }
  };

  const currentSettings = activeTab === 'fines' ? fineLocal : subsLocal;

  const getPaymentDetails = (settings: FineSettings | SubscriptionSettings | null) => {
    return getPaymentDetailsSafe(settings);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Payment Addresses</h1>
          <p className="mt-1 text-sm text-slate-400">Manage wallet addresses for fines and subscriptions</p>
        </div>
        <button onClick={loadSettings} disabled={loading} className="rounded-lg border border-white/10 p-2 text-slate-300 hover:bg-white/5 disabled:opacity-50">
          <RefreshCw className={cn('h-5 w-5', loading && 'animate-spin')} />
        </button>
      </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="ml-4 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 gap-2"><CheckCircle2 className="h-4 w-4" />{success}</div>}

      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-5">
        <div className="mb-3 flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-slate-300">Supported Networks</p>
            <p className="text-xs text-slate-500">One source of truth for the chain dropdown across all payment settings.</p>
          </div>
          {savingChains && <span className="text-xs text-slate-400">Saving...</span>}
        </div>
        <div className="mb-3 flex flex-wrap gap-2">
          {chains.map((c) => (
            <span key={c} className="inline-flex items-center gap-2 rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-xs text-blue-200">
              {c}
              <button
                onClick={() => handleRemoveChain(c)}
                className="text-blue-300 hover:text-white"
                aria-label={`Remove ${c}`}
              >
                &times;
              </button>
            </span>
          ))}
          {chains.length === 0 && (
            <span className="text-xs text-slate-500">No networks configured. Add one below.</span>
          )}
        </div>
        <div className="flex gap-2">
          <Input
            value={customChain}
            onChange={(e) => setCustomChain(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault();
                handleAddChain();
              }
            }}
            placeholder="e.g. AVAXC, ARBITRUM, OPTIMISM"
            className="bg-white/5"
          />
          <Button onClick={handleAddChain} disabled={!customChain.trim() || savingChains} variant="secondary">
            Add Network
          </Button>
        </div>
      </div>

      <div className="flex gap-2 border-b border-white/10">
        {[
          { id: 'fines' as Tab, label: 'Fine Payments', icon: <DollarSign className="h-4 w-4" /> },
          { id: 'subscriptions' as Tab, label: 'Subscription Payments', icon: <Wallet className="h-4 w-4" /> },
        ].map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={cn(
              'flex items-center gap-2 rounded-t-lg px-4 py-2 text-sm font-medium whitespace-nowrap',
              activeTab === tab.id ? 'bg-blue-600/20 text-blue-300' : 'text-slate-400 hover:text-white',
            )}
          >
            {tab.icon}
            {tab.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-24 animate-pulse rounded-xl bg-white/5" />
          ))}
        </div>
      ) : currentSettings ? (
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <div className="rounded-xl border border-white/10 bg-slate-900/50 overflow-hidden">
            <div className="border-b border-white/10 bg-white/5 px-4 py-3">
              <p className="text-sm font-medium text-slate-300">
                {activeTab === 'fines' ? 'Fine Payment Settings' : 'Subscription Payment Settings'}
              </p>
            </div>
            <div className="p-5 space-y-4">
              <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-400" />
                  <Input
                    value={getPaymentDetails(currentSettings).walletAddress}
                    onChange={(e) => {
                      if (activeTab === 'fines') {
                        if (!fineLocal) return;
                        setFineLocal({ ...fineLocal, paymentDetails: { ...getPaymentDetails(fineLocal), walletAddress: e.target.value } });
                      } else {
                        if (!subsLocal) return;
                        setSubsLocal({ ...subsLocal!, paymentDetails: { ...getPaymentDetails(subsLocal), walletAddress: e.target.value } });
                      }
                    }}
                    className="bg-white/5 pl-10"
                    placeholder="Enter wallet address"
                  />
                </div>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Network</label>
                <div className="relative">
                  <Network className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <select
                    value={getPaymentDetails(currentSettings).network}
                    onChange={(e) => {
                      if (activeTab === 'fines') {
                        setFineLocal({ ...fineLocal!, paymentDetails: { ...getPaymentDetails(fineLocal), network: e.target.value } });
                      } else {
                        setSubsLocal({ ...subsLocal!, paymentDetails: { ...getPaymentDetails(subsLocal), network: e.target.value } });
                      }
                    }}
                    className="w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 py-2 text-white appearance-none"
                  >
                    {chainOptions.map((c) => (
                      <option key={c} value={c}>{c}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Currency</label>
                <div className="relative">
                  <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <Input
                    value={getPaymentDetails(currentSettings).currency}
                    onChange={(e) => {
                      if (activeTab === 'fines') {
                        setFineLocal({ ...fineLocal!, paymentDetails: { ...getPaymentDetails(fineLocal), currency: e.target.value } });
                      } else {
                        setSubsLocal({ ...subsLocal!, paymentDetails: { ...getPaymentDetails(subsLocal), currency: e.target.value } });
                      }
                    }}
                    className="bg-white/5 pl-10"
                    placeholder="USDT"
                  />
                </div>
              </div>
              <Button
                onClick={activeTab === 'fines' ? handleSaveFineSettings : handleSaveSubsSettings}
                loading={saving}
                className="w-full"
              >
                <Save className="mr-2 h-4 w-4" />
                Save {activeTab === 'fines' ? 'Fine' : 'Subscription'} Settings
              </Button>
            </div>
          </div>

          <div className="rounded-xl border border-white/10 bg-slate-900/50 overflow-hidden">
            <div className="border-b border-white/10 bg-white/5 px-4 py-3">
              <p className="text-sm font-medium text-slate-300">Payment Instructions Template</p>
            </div>
            <div className="p-5 space-y-4">
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Instruction Message</label>
                <textarea
                  value={`Please send ${activeTab === 'fines' ? 'the required fine amount' : 'your subscription fee'} (${getPaymentDetails(currentSettings).currency}) to: ${getPaymentDetails(currentSettings).walletAddress} on the ${getPaymentDetails(currentSettings).network} network.`}
                  onChange={() => {}}
                  rows={6}
                  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"
                  placeholder="Enter payment instructions template..."
                  readOnly
                />
              </div>
              <div className="rounded-lg border border-white/10 bg-white/5 p-3 space-y-1">
                <p className="text-xs font-medium text-slate-300">Generated Instructions Preview</p>
                <p className="text-xs text-slate-400">
                  Please send <span className="text-white font-medium">{activeTab === 'fines' ? 'the required fine amount' : 'your subscription fee'}</span> to the following address:
                </p>
                  <code className="block rounded bg-slate-800 px-2 py-1 text-xs text-slate-300 break-all">
                    {getPaymentDetails(currentSettings).walletAddress}
                  </code>
                  <p className="text-xs text-slate-400">
                    Network: <span className="text-white">{getPaymentDetails(currentSettings).network}</span> | Currency: <span className="text-white">{getPaymentDetails(currentSettings).currency}</span>
                  </p>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="p-6 text-center text-slate-400">
          No payment settings configured yet.
        </div>
      )}
    </div>
  );
}