'use client';

import { useEffect, useState } from 'react';
import { configService, type ConfigSettingInfo } from '@/services/config.service';
import { RefreshCw, Search, Save, Settings2, AlertCircle, CheckCircle2, KeyRound, MessageSquare, Globe, Mail, Users, Hash, Save as SaveIcon } from 'lucide-react';
import { apiClient } from '@/services/api-client';
import ChangePasswordDialog from '@/components/auth/ChangePasswordDialog';
import { safeArray } from '@/lib/safe-array';
import { useSystemConfig } from '@/hooks/useSystemConfig';

type StringFieldKey =
  | 'platform_project_name'
  | 'platform_currency'
  | 'platform_signup_url'
  | 'platform_support_email'
  | 'platform_support_phone'
  | 'platform_privacy_email'
  | 'platform_min_password_length'
  | 'platform_default_temp_password'
  | 'platform_verification_max_size_mb'
  | 'platform_avatar_max_size_mb'
  | 'platform_income_ranges'
  | 'platform_currency_rate_usd';

interface StringField {
  key: StringFieldKey;
  label: string;
  description: string;
  icon: any;
  placeholder: string;
  type?: 'text' | 'email' | 'url' | 'number';
}

export default function SuperAdminSettingsPage() {
  const [settings, setSettings] = useState<ConfigSettingInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [search, setSearch] = useState('');
  const [saving, setSaving] = useState<string | null>(null);
  const [editValue, setEditValue] = useState<Record<string, string>>({});
  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
  const [showChangePassword, setShowChangePassword] = useState(false);
  const [passwordChanged, setPasswordChanged] = useState(false);
  const [regMessage, setRegMessage] = useState('');
  const [regMessageDraft, setRegMessageDraft] = useState('');
  const [regMessageLoading, setRegMessageLoading] = useState(true);
  const [regMessageSaving, setRegMessageSaving] = useState(false);
  const [regMessageError, setRegMessageError] = useState<string | null>(null);
  const [regMessageSaved, setRegMessageSaved] = useState(false);

  const sysConfig = useSystemConfig();

  const [platformCfg, setPlatformCfg] = useState<Record<string, string>>({});
  const [platformCfgLoading, setPlatformCfgLoading] = useState(true);
  const [platformCfgDraft, setPlatformCfgDraft] = useState<Record<string, string>>({});
  const [platformCfgSaving, setPlatformCfgSaving] = useState<string | null>(null);
  const [platformCfgError, setPlatformCfgError] = useState<string | null>(null);
  const [platformCfgSaved, setPlatformCfgSaved] = useState<string | null>(null);

  const loadPlatformConfig = async () => {
    setPlatformCfgLoading(true);
    setPlatformCfgError(null);
    try {
      const res: any = await apiClient.get('/system/public-config');
      const value = res?.data?.data ?? {};
      setPlatformCfg(value);
      setPlatformCfgDraft(value);
    } catch (err: any) {
      setPlatformCfgError(err?.response?.data?.message || err?.message || 'Failed to load platform config');
    } finally {
      setPlatformCfgLoading(false);
    }
  };

  const savePlatformField = async (key: StringFieldKey) => {
    setPlatformCfgSaving(key);
    setPlatformCfgError(null);
    setPlatformCfgSaved(null);
    try {
      const res: any = await apiClient.patch(`/admin/system-state/string/${key}`, {
        value: platformCfgDraft[key] ?? '',
      });
      const value = res?.data?.data?.value ?? platformCfgDraft[key] ?? '';
      setPlatformCfg((prev) => ({ ...prev, [key]: value }));
      setPlatformCfgDraft((prev) => ({ ...prev, [key]: value }));
      setPlatformCfgSaved(key);
      setTimeout(() => setPlatformCfgSaved(null), 3000);
    } catch (err: any) {
      setPlatformCfgError(err?.response?.data?.message || err?.message || 'Failed to save');
    } finally {
      setPlatformCfgSaving(null);
    }
  };

  const platformFields: StringField[] = [
    { key: 'platform_project_name', label: 'Project / Brand Name', description: 'Shown in browser title, header, footer, legal pages.', icon: Globe, placeholder: 'Fasecmo' },
    { key: 'platform_currency', label: 'Platform Currency', description: 'Symbol shown in user balances and order labels.', icon: Hash, placeholder: 'USDT' },
    { key: 'platform_signup_url', label: 'Public Signup URL', description: 'Used as the default referral landing page.', icon: Globe, placeholder: 'https://example.com/signup', type: 'url' },
    { key: 'platform_support_email', label: 'Support Email', description: 'Public support address shown in contact and terms.', icon: Mail, placeholder: 'support@example.com', type: 'email' },
    { key: 'platform_support_phone', label: 'Support Phone', description: 'Public phone number shown on contact page.', icon: Hash, placeholder: '+1 555 000 0000' },
    { key: 'platform_privacy_email', label: 'Privacy Inquiries Email', description: 'Public privacy contact shown in privacy policy.', icon: Mail, placeholder: 'privacy@example.com', type: 'email' },
     { key: 'platform_min_password_length', label: 'Minimum Password Length', description: 'Minimum character count for any user password. Applied at register, reset, and admin reset.', icon: Hash, placeholder: '8', type: 'number' },
    { key: 'platform_default_temp_password', label: 'Default Temp Password', description: 'Password set when super admin / admin clicks "Reset Password" on a user.', icon: Hash, placeholder: 'TempPass123!' },
    { key: 'platform_verification_max_size_mb', label: 'Verification File Max Size (MB)', description: 'Max upload size for KYC documents (JPEG/PNG/PDF).', icon: Hash, placeholder: '10', type: 'number' },
    { key: 'platform_avatar_max_size_mb', label: 'Avatar Max Size (MB)', description: 'Max upload size for profile avatars.', icon: Hash, placeholder: '5', type: 'number' },
    { key: 'platform_income_ranges', label: 'Income Range Options', description: 'Comma-separated list of income ranges shown on the registration form.', icon: Hash, placeholder: '<10000,10000-50000,50000-200000,200000-1000000,>1000000' },
    { key: 'platform_currency_rate_usd', label: 'Currency Rate vs USD', description: 'Display rate of 1 unit of platform currency to USD (e.g. 1 USDT = 1.00 USD).', icon: Hash, placeholder: '1.00', type: 'number' },
  ];

  const loadRegistrationMessage = async () => {
    setRegMessageLoading(true);
    setRegMessageError(null);
    try {
      const res: any = await apiClient.get('/admin/system-state/string/registration_message');
      const value = res?.data?.data?.value ?? res?.data?.value ?? '';
      if (typeof value === 'string') {
        setRegMessage(value);
        setRegMessageDraft(value);
      }
    } catch (err: any) {
      setRegMessageError(err?.message || 'Failed to load registration message');
    } finally {
      setRegMessageLoading(false);
    }
  };

  const saveRegistrationMessage = async () => {
    setRegMessageSaving(true);
    setRegMessageError(null);
    setRegMessageSaved(false);
    try {
      const res: any = await apiClient.patch('/admin/system-state/string/registration_message', {
        value: regMessageDraft,
      });
      const value = res?.data?.data?.value ?? regMessageDraft;
      setRegMessage(value);
      setRegMessageDraft(value);
      setRegMessageSaved(true);
      setTimeout(() => setRegMessageSaved(false), 3000);
    } catch (err: any) {
      setRegMessageError(err?.message || 'Failed to save registration message');
    } finally {
      setRegMessageSaving(false);
    }
  };

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

  const handlePasswordChanged = () => {
    setPasswordChanged(true);
    setTimeout(() => setPasswordChanged(false), 3000);
  };

  const loadSettings = async () => {
    setLoading(true);
    setError(null);
    setSuccess(null);
    try {
      const res = await configService.getSettings({ search, page: 1, limit: 100 });
      // Defensive: the API envelope can be { success, data } OR an error
      // object; normalize to an array so settings.filter() never crashes.
      setSettings(safeArray<ConfigSettingInfo>(res));
    } catch (err: any) {
      setError(err?.message || 'Failed to load settings');
    } finally {
      setLoading(false);
    }
  };

  const validateValue = (setting: ConfigSettingInfo, rawValue: string): string | null => {
    if (setting.isSensitive && rawValue.length > 0 && rawValue.length < sysConfig.minPasswordLength) {
      return `Sensitive values must be at least ${sysConfig.minPasswordLength} characters`;
    }
    if (setting.key.includes('email') && rawValue && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rawValue)) {
      return 'Invalid email format';
    }
    if (setting.key.includes('url') && rawValue && !/^https?:\/\//.test(rawValue)) {
      return 'URL must start with http:// or https://';
    }
    if (setting.key.includes('port') && rawValue) {
      const port = parseInt(rawValue, 10);
      if (isNaN(port) || port < 1 || port > 65535) {
        return 'Port must be between 1 and 65535';
      }
    }
    if (setting.key.includes('percentage') || setting.key.includes('rate')) {
      const val = parseFloat(rawValue);
      if (isNaN(val) || val < 0 || val > 100) {
        return 'Value must be between 0 and 100';
      }
    }
    if (setting.requiresRestart && rawValue !== (setting.value ?? setting.defaultValue ?? '')) {
      return 'Changing this value requires a server restart';
    }
    return null;
  };

  const handleSave = async (setting: ConfigSettingInfo) => {
    const raw = editValue[setting.id];
    if (raw === undefined) return;

    const validationError = validateValue(setting, raw);
    if (validationError) {
      setValidationErrors((prev) => ({ ...prev, [setting.id]: validationError }));
      return;
    }
    setValidationErrors((prev) => {
      const next = { ...prev };
      delete next[setting.id];
      return next;
    });

    setSaving(setting.id);
    setError(null);
    setSuccess(null);
    try {
      let parsed: any = raw;
      try {
        parsed = JSON.parse(raw);
      } catch {
        // keep as string if not JSON
      }
      await configService.updateSetting(setting.id, { value: parsed } as any);
      setSettings((prev) => prev.map((s) => (s.id === setting.id ? { ...s, value: parsed } : s)));
      setEditValue((prev) => {
        const next = { ...prev };
        delete next[setting.id];
        return next;
      });
      setSuccess(`Setting "${setting.name}" updated successfully`);
    } catch (err: any) {
      setError(err?.message || 'Failed to update setting');
    } finally {
      setSaving(null);
    }
  };

  const startEdit = (setting: ConfigSettingInfo) => {
    setEditValue((prev) => ({
      ...prev,
      [setting.id]: JSON.stringify(setting.value ?? setting.defaultValue ?? ''),
    }));
    setValidationErrors((prev) => {
      const next = { ...prev };
      delete next[setting.id];
      return next;
    });
  };

  const cancelEdit = (settingId: string) => {
    setEditValue((prev) => {
      const next = { ...prev };
      delete next[settingId];
      return next;
    });
    setValidationErrors((prev) => {
      const next = { ...prev };
      delete next[settingId];
      return next;
    });
  };

  const filtered = (settings ?? []).filter((s) => {
    if (!search) return true;
    const q = search.toLowerCase();
    return (
      s.name.toLowerCase().includes(q) ||
      s.key.toLowerCase().includes(q) ||
      (s.description || '').toLowerCase().includes(q) ||
      s.category.toLowerCase().includes(q)
    );
  });

  const categories = Array.from(new Set(settings.map((s) => s.category)));

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">System Settings</h1>
          <p className="text-sm text-slate-400">Configure platform behavior without code changes.</p>
        </div>
        <button
          onClick={loadSettings}
          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>

      <div className="rounded-xl border border-white/10 bg-white/5 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-blue-500/10 p-2">
              <KeyRound className="h-5 w-5 text-blue-400" />
            </div>
            <div>
              <h2 className="text-sm font-semibold text-white">Change Your Password</h2>
              <p className="text-xs text-slate-400">Update your super admin account password</p>
            </div>
          </div>
          <button
            onClick={() => setShowChangePassword(true)}
            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
          >
            Change Password
          </button>
        </div>
        {passwordChanged && (
          <p className="mt-3 text-sm text-emerald-400">Password changed successfully!</p>
        )}
      </div>

      <div className="rounded-xl border border-white/10 bg-white/5 p-6">
        <div className="flex items-center gap-3">
          <div className="rounded-lg bg-indigo-500/10 p-2">
            <MessageSquare className="h-5 w-5 text-indigo-400" />
          </div>
          <div className="flex-1">
            <h2 className="text-sm font-semibold text-white">Registration Page Notice</h2>
            <p className="text-xs text-slate-400">
              Message shown to users on the public sign-up page (key: <span className="font-mono">registration_message</span>).
            </p>
          </div>
        </div>
        {regMessageLoading ? (
          <p className="mt-3 text-sm text-slate-400">Loading…</p>
        ) : (
          <div className="mt-4 space-y-2">
            <textarea
              value={regMessageDraft}
              onChange={(e) => setRegMessageDraft(e.target.value)}
              rows={4}
              maxLength={500}
              className="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-indigo-500 focus:outline-none"
              placeholder="Enter the message users will see on the registration page…"
            />
            <div className="flex items-center justify-between">
              <div className="text-xs text-slate-500">{regMessageDraft.length} / 500</div>
              <div className="flex items-center gap-2">
                {regMessageError && (
                  <span className="text-xs text-red-400">{regMessageError}</span>
                )}
                {regMessageSaved && (
                  <span className="text-xs text-emerald-400">Saved.</span>
                )}
                <button
                  onClick={saveRegistrationMessage}
                  disabled={regMessageSaving || regMessageDraft === regMessage}
                  className="flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-50"
                >
                  <Save className="h-3 w-3" /> {regMessageSaving ? 'Saving…' : 'Save'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="rounded-xl border border-white/10 bg-white/5 p-6">
        <div className="flex items-center gap-3">
          <div className="rounded-lg bg-emerald-500/10 p-2">
            <Globe className="h-5 w-5 text-emerald-400" />
          </div>
          <div className="flex-1">
            <h2 className="text-sm font-semibold text-white">Platform Config (Live Everywhere)</h2>
            <p className="text-xs text-slate-400">
              Brand name, currency, signup URL, support contact, and platform configs. Changes are picked up by the public frontend on the next page load.
            </p>
          </div>
        </div>

        {platformCfgError && (
          <p className="mt-3 text-xs text-red-400">{platformCfgError}</p>
        )}

        {platformCfgLoading ? (
          <p className="mt-3 text-sm text-slate-400">Loading…</p>
        ) : (
          <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
            {platformFields.map((field) => {
              const Icon = field.icon;
              const isSaving = platformCfgSaving === field.key;
              const draftValue = platformCfgDraft[field.key] ?? platformCfg[field.key] ?? '';
              const savedValue = platformCfg[field.key] ?? '';
              const isDirty = draftValue !== savedValue;
              return (
                <div key={field.key} className="rounded-lg border border-white/10 bg-white/[0.02] p-3">
                  <div className="flex items-center gap-2">
                    <Icon className="h-4 w-4 text-slate-400" />
                    <p className="text-sm font-medium text-white">{field.label}</p>
                  </div>
                  <p className="mt-1 text-xs text-slate-400">{field.description}</p>
                  <div className="mt-2 flex items-center gap-2">
                    <input
                      type={field.type ?? 'text'}
                      value={draftValue}
                      placeholder={field.placeholder}
                      onChange={(e) =>
                        setPlatformCfgDraft((prev) => ({ ...prev, [field.key]: e.target.value }))
                      }
                      className="flex-1 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white focus:border-emerald-500 focus:outline-none"
                    />
                    <button
                      onClick={() => savePlatformField(field.key)}
                      disabled={isSaving || !isDirty}
                      className="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700 disabled:opacity-50"
                    >
                      <SaveIcon className="h-3 w-3" /> {isSaving ? 'Saving…' : 'Save'}
                    </button>
                  </div>
                  <p className="mt-1 text-[10px] text-slate-500 font-mono">{field.key}</p>
                  {platformCfgSaved === field.key && (
                    <p className="mt-1 text-xs text-emerald-400">Saved — live now.</p>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-4">
        <div className="relative flex-1 min-w-[200px] 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 settings..."
            value={search}
            onChange={(e) => setSearch(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>
        {categories.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {categories.map((cat) => (
              <span
                key={cat}
                className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-400"
              >
                {cat}
              </span>
            ))}
          </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 gap-2">
          <AlertCircle className="h-4 w-4" /> {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 flex items-center gap-2">
          <CheckCircle2 className="h-4 w-4" /> {success}
        </div>
      )}

      {loading ? (
        <div className="text-center text-slate-400">Loading settings...</div>
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
          {filtered.map((setting) => {
            const isEditing = editValue[setting.id] !== undefined;
            const currentRaw = isEditing
              ? editValue[setting.id]
              : JSON.stringify(setting.value ?? setting.defaultValue ?? '');
            const hasError = validationErrors[setting.id];

            return (
              <div
                key={setting.id}
                className={`rounded-xl border bg-white/[0.02] p-4 ${
                  setting.isSensitive ? 'border-amber-500/20' : 'border-white/10'
                }`}
              >
                <div className="flex items-center gap-2">
                  <Settings2 className={`h-4 w-4 ${setting.isSensitive ? 'text-amber-400' : 'text-slate-500'}`} />
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-medium text-white">{setting.name}</p>
                      {setting.isSensitive && (
                        <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400 uppercase">
                          Sensitive
                        </span>
                      )}
                    </div>
                    <p className="text-xs font-mono text-slate-500">{setting.key}</p>
                  </div>
                </div>
                {setting.description && <p className="mt-2 text-xs text-slate-400">{setting.description}</p>}
                <div className="mt-3 flex items-center gap-2">
                  <input
                    type={setting.isSensitive ? 'password' : 'text'}
                    value={currentRaw}
                    onChange={(e) => {
                      setEditValue((prev) => ({ ...prev, [setting.id]: e.target.value }));
                      const err = validateValue(setting, e.target.value);
                      setValidationErrors((prev) => {
                        const next = { ...prev };
                        if (err) {
                          next[setting.id] = err;
                        } else {
                          delete next[setting.id];
                        }
                        return next;
                      });
                    }}
                    className={`flex-1 rounded-lg border bg-white/5 px-3 py-1.5 text-xs text-white focus:outline-none ${
                      hasError
                        ? 'border-red-500/50 focus:border-red-500'
                        : setting.requiresRestart
                          ? 'border-amber-500/30 focus:border-amber-500'
                          : 'border-white/10 focus:border-blue-500'
                    }`}
                  />
                  {isEditing ? (
                    <>
                      <button
                        onClick={() => handleSave(setting)}
                        disabled={saving === setting.id || !!hasError}
                        className="flex items-center gap-1 rounded-lg bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600 disabled:opacity-50"
                      >
                        <Save className="h-3 w-3" /> Save
                      </button>
                      <button
                        onClick={() => cancelEdit(setting.id)}
                        disabled={saving === setting.id}
                        className="rounded-lg border border-white/10 px-3 py-1.5 text-xs text-slate-400 hover:bg-white/5 disabled:opacity-50"
                      >
                        Cancel
                      </button>
                    </>
                  ) : (
                    <button
                      onClick={() => startEdit(setting)}
                      className="rounded-lg border border-white/10 px-3 py-1.5 text-xs text-slate-400 hover:bg-white/5"
                    >
                      Edit
                    </button>
                  )}
                </div>
                {hasError && (
                  <p className="mt-1.5 flex items-center gap-1 text-xs text-red-400">
                    <AlertCircle className="h-3 w-3" /> {hasError}
                  </p>
                )}
                {setting.requiresRestart && !hasError && (
                  <p className="mt-1.5 flex items-center gap-1 text-xs text-amber-400">
                    <AlertCircle className="h-3 w-3" /> Requires restart to apply
                  </p>
                )}
                <div className="mt-2 flex items-center gap-2 text-[10px] text-slate-500">
                  <span>Category: {setting.category}</span>
                  <span>•</span>
                  <span>Status: {setting.status}</span>
                  <span>•</span>
                  <span>v{setting.version}</span>
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div className="col-span-full text-center text-slate-400">No settings found.</div>
          )}
        </div>
      )}
      <ChangePasswordDialog
        open={showChangePassword}
        onClose={() => setShowChangePassword(false)}
        onSuccess={handlePasswordChanged}
        title="Change Your Password"
        requireCurrentPassword={true}
      />
    </div>
  );
}