'use client';

import { useEffect, useState } from 'react';
import { adminService } from '@/services/admin.service';
import { configService } from '@/services/config.service';
import { safeArray } from '@/lib/safe-array';
import type { SystemFlag } from '@/types/admin.types';
import {
  RefreshCw,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Shield,
  Wallet,
  ArrowDownUp,
  ArrowRightLeft,
  Users,
  FileCheck2,
  UserPlus,
  Power,
} from 'lucide-react';

interface ControlItem {
  key: string;
  label: string;
  description: string;
  icon: typeof Shield;
  enabled: boolean;
}

export default function SuperAdminMaintenancePage() {
  const [controls, setControls] = useState<ControlItem[]>([]);
  const [presets, setPresets] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [lastResult, setLastResult] = useState<string | null>(null);

  const [confirmDialog, setConfirmDialog] = useState<{
    open: boolean;
    key: string;
    action: 'enable' | 'disable';
    label: string;
    reason: string;
    reasonText: string;
  }>({
    open: false,
    key: '',
    action: 'disable',
    label: '',
    reason: '',
    reasonText: '',
  });

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

  const loadData = async () => {
    setLoading(true);
    setError(null);
    try {
      const [flagsRes, statusRes, presetRes] = await Promise.all([
        adminService.getSystemState().catch(() => [] as SystemFlag[]),
        adminService.getMaintenanceStatus().catch(() => null as any),
        configService.getEmergencyPresets().catch(() => []),
      ]);

      const flags = safeArray<SystemFlag>(flagsRes);
      const flag = (k: string) => !!flags.find((f) => f.key === k)?.value;

      // Build controls from the PERSISTENT SystemState flags so the active
      // state is correct after a page refresh (Module 4). Falls back to the
      // legacy maintenance status when a flag is absent.
      const status = statusRes as any;
      setControls([
        {
          key: 'isTradingKilled',
          label: 'Trading',
          description: 'Kill or restore all trading activity across the platform.',
          icon: ArrowDownUp,
          enabled: !(flag('isTradingKilled') ?? status?.trading ?? true),
        },
        {
          key: 'isWalletFrozen',
          label: 'Wallets',
          description: 'Freeze or unfreeze all wallet operations globally.',
          icon: Wallet,
          enabled: !(flag('isWalletFrozen') ?? status?.wallets ?? true),
        },
        {
          key: 'isDepositDisabled',
          label: 'Deposits',
          description: 'Enable or disable all deposit requests.',
          icon: ArrowRightLeft,
          enabled: !(flag('isDepositDisabled') ?? status?.deposits ?? true),
        },
        {
          key: 'isWithdrawalDisabled',
          label: 'Withdrawals',
          description: 'Enable or disable all withdrawal requests.',
          icon: ArrowRightLeft,
          enabled: !(flag('isWithdrawalDisabled') ?? status?.withdrawals ?? true),
        },
        {
          key: 'isReferralDisabled',
          label: 'Referrals',
          description: 'Enable or disable the referral program.',
          icon: Users,
          enabled: !(flag('isReferralDisabled') ?? status?.referrals ?? true),
        },
        {
          key: 'isKycDisabled',
          label: 'KYC',
          description: 'Enable or disable KYC verification requirements.',
          icon: FileCheck2,
          enabled: !(flag('isKycDisabled') ?? status?.kyc ?? true),
        },
        {
          key: 'isRegistrationDisabled',
          label: 'Registration',
          description: 'Enable or disable new user registration.',
          icon: UserPlus,
          enabled: !(flag('isRegistrationDisabled') ?? status?.registration ?? true),
        },
      ]);

      setPresets(safeArray<any[]>(presetRes));
    } catch (err: any) {
      setError(err?.message || 'Failed to load maintenance data');
    } finally {
      setLoading(false);
    }
  };

  const openConfirm = (control: ControlItem, action: 'enable' | 'disable') => {
    setConfirmDialog({
      open: true,
      key: control.key,
      action,
      label: action === 'enable' ? `Enable ${control.label}` : `Disable ${control.label}`,
      reason: action === 'disable' ? 'Emergency shutdown' : 'Restoration',
      reasonText: '',
    });
  };

  const handleExecute = async (presetKey: string) => {
    setActionLoading(presetKey);
    setError(null);
    try {
      await configService.executeEmergency(presetKey, `Manual activation by super admin`);
      setLastResult(`Activated: ${presetKey}`);
    } catch (err: any) {
      setError(err?.message || 'Failed to activate preset');
    } finally {
      setActionLoading(null);
    }
  };

  const handleRestore = async (presetKey: string) => {
    setActionLoading(presetKey);
    setError(null);
    try {
      await configService.restoreEmergency(presetKey, `Manual restoration by super admin`);
      setLastResult(`Restored: ${presetKey}`);
    } catch (err: any) {
      setError(err?.message || 'Failed to restore preset');
    } finally {
      setActionLoading(null);
    }
  };

  const handleConfirm = async () => {
    if (!confirmDialog.open) return;
    const control = (controls ?? []).find((c) => c.key === confirmDialog.key);
    if (!control) return;

    setActionLoading(confirmDialog.key);
    setError(null);
    try {
      // control.enabled === true means the feature is ON.
      // 'disable' -> set the persistent kill flag to true; 'enable' -> false.
      const flagValue = confirmDialog.action === 'enable' ? false : true;
      await adminService.setSystemStateFlag(control.key, flagValue, confirmDialog.reason);

      setControls((prev) =>
        prev.map((c) => (c.key === control.key ? { ...c, enabled: !flagValue } : c)),
      );
      setLastResult(`${confirmDialog.action === 'enable' ? 'Enabled' : 'Disabled'}: ${control.label}`);
    } catch (err: any) {
      setError(err?.message || `Failed to ${confirmDialog.action} ${control.label}`);
    } finally {
      setActionLoading(null);
      setConfirmDialog((prev) => ({ ...prev, open: false }));
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Maintenance & Emergency Control</h1>
          <p className="text-sm text-slate-400">Manage platform availability and emergency modes.</p>
        </div>
        <button
          onClick={loadData}
          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>
      </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}</div>
      )}

      {lastResult && (
        <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" /> {lastResult}
        </div>
      )}

      {loading ? (
        <div className="text-center text-slate-400">Loading maintenance controls...</div>
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
          {controls.map((control) => {
            const Icon = control.icon;
            return (
              <div key={control.key} className="rounded-xl border border-white/10 bg-white/[0.02] p-5">
                <div className="flex items-center gap-2">
                  <div
                    className={`rounded-lg p-2 ${
                      control.enabled ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'
                    }`}
                  >
                    <Icon className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-medium text-white">{control.label}</p>
                      <span
                        className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase ${
                          control.enabled ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'
                        }`}
                      >
                        {control.enabled ? 'ON' : 'OFF'}
                      </span>
                    </div>
                    <p className="text-xs text-slate-500">{control.description}</p>
                  </div>
                </div>
                <div className="mt-4 flex items-center gap-2">
                  <button
                    onClick={() => openConfirm(control, 'disable')}
                    disabled={actionLoading === control.key || !control.enabled}
                    className="flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-50"
                  >
                    <Power className="h-3.5 w-3.5" /> Disable
                  </button>
                  <button
                    onClick={() => openConfirm(control, 'enable')}
                    disabled={actionLoading === control.key || control.enabled}
                    className="flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
                  >
                    <Power className="h-3.5 w-3.5" /> Enable
                  </button>
                </div>
              </div>
            );
          })}

          {presets.map((preset) => (
            <div key={preset.key} className="rounded-xl border border-white/10 bg-white/[0.02] p-5">
              <div className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-amber-400" />
                <div>
                  <p className="text-sm font-medium text-white">{preset.name}</p>
                  <p className="text-xs font-mono text-slate-500">{preset.key}</p>
                </div>
              </div>
              <p className="mt-2 text-xs text-slate-400">{preset.description}</p>
              <div className="mt-4 flex items-center gap-2">
                <button
                  onClick={() => handleExecute(preset.key)}
                  disabled={actionLoading === preset.key}
                  className="flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-50"
                >
                  <XCircle className="h-3.5 w-3.5" /> Activate
                </button>
                <button
                  onClick={() => handleRestore(preset.key)}
                  disabled={actionLoading === preset.key}
                  className="flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
                >
                  <CheckCircle2 className="h-3.5 w-3.5" /> Restore
                </button>
              </div>
            </div>
          ))}

          {controls.length === 0 && presets.length === 0 && (
            <div className="col-span-full text-center text-slate-400">No maintenance controls available.</div>
          )}
        </div>
      )}

      {confirmDialog.open && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-amber-400" />
              <h3 className="text-lg font-semibold text-white">{confirmDialog.label}</h3>
            </div>
            <p className="mt-2 text-sm text-slate-400">
              You are about to {confirmDialog.action === 'enable' ? 'enable' : 'disable'}{' '}
              <span className="font-medium text-white">{confirmDialog.label}</span>. This action may affect all
              users. Please provide a reason.
            </p>
            <div className="mt-4 space-y-3">
              <div>
                <label className="block text-xs font-medium text-slate-300">Reason</label>
                <select
                  value={confirmDialog.reason}
                  onChange={(e) =>
                    setConfirmDialog((prev) => ({ ...prev, reason: e.target.value }))
                  }
                  className="mt-1 w-full 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="">Select a reason</option>
                  <option value="Emergency shutdown">Emergency shutdown</option>
                  <option value="Planned maintenance">Planned maintenance</option>
                  <option value="Security incident">Security incident</option>
                  <option value="Bug fix deployment">Bug fix deployment</option>
                  <option value="Restoration">Restoration</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-medium text-slate-300">Additional Details</label>
                <textarea
                  value={confirmDialog.reasonText}
                  onChange={(e) =>
                    setConfirmDialog((prev) => ({ ...prev, reasonText: e.target.value }))
                  }
                  rows={3}
                  placeholder="Provide additional context..."
                  className="mt-1 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-blue-500 focus:outline-none"
                />
              </div>
            </div>
            <div className="mt-6 flex items-center justify-end gap-2">
              <button
                onClick={() => setConfirmDialog((prev) => ({ ...prev, open: false }))}
                className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
              >
                Cancel
              </button>
              <button
                onClick={handleConfirm}
                disabled={!confirmDialog.reason}
                className={`rounded-lg px-4 py-2 text-sm font-medium text-white disabled:opacity-50 ${
                  confirmDialog.action === 'enable'
                    ? 'bg-emerald-600 hover:bg-emerald-700'
                    : 'bg-red-600 hover:bg-red-700'
                }`}
              >
                {confirmDialog.action === 'enable' ? 'Enable' : 'Disable'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}