'use client';

import { useState, useEffect, useCallback } from 'react';
import { verificationSettingsService, type VerificationSettings } from '@/services/verification-settings.service';
import { cn } from '@/lib/utils';
import { TableSkeleton } from '@/components/priority/skeletons';
import {
  RefreshCw, Save, Eye, EyeOff, ShieldCheck, Mail,
} from 'lucide-react';

export default function SuperAdminVerificationSettingsPage() {
  const [settings, setSettings] = useState<VerificationSettings | 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 [showEmail, setShowEmail] = useState(false);

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

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

  const toggleVerification = async () => {
    if (!settings) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      await verificationSettingsService.toggleSettings(!settings.isEnabled);
      setSuccess(settings.isEnabled ? 'Registration verification disabled' : 'Registration verification enabled');
      loadSettings();
    } catch (err: any) {
      setError(err?.message || 'Failed to update settings');
    } finally {
      setSaving(false);
    }
  }

  const handleSave = async () => {
    if (!settings) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      await verificationSettingsService.updateSettings({
        senderName: settings.senderName,
        subjectTemplate: settings.subjectTemplate,
        bodyTemplate: settings.bodyTemplate,
        codeExpiry: settings.codeExpiry,
        maxAttempts: settings.maxAttempts,
      });
      setSuccess('Verification settings updated');
      loadSettings();
    } catch (err: any) {
      setError(err?.message || 'Failed to update settings');
    } finally {
      setSaving(false);
    }
  };

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

  if (!settings) {
    return (
      <div className="space-y-6">
        <h1 className="text-2xl font-bold text-white">Verification Settings</h1>
        <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6 text-center">
          <p className="text-sm text-slate-400">Verification settings could not be loaded.</p>
          <button
            onClick={loadSettings}
            className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Verification Settings</h1>
          <p className="text-sm text-slate-400">Configure email verification settings for the platform</p>
        </div>
        <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>

      {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>}

      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6 space-y-6">
         <div className="flex items-center gap-3 rounded-lg border border-blue-500/20 bg-blue-500/5 p-4">
           <ShieldCheck className="h-5 w-5 text-blue-400" />
           <p className="text-sm text-blue-300">Email credentials are stored securely in environment variables and are never exposed through the API.</p>
         </div>

         <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4">
           <div>
             <label className="text-sm font-medium text-slate-300">Registration Verification</label>
             <p className="text-xs text-slate-400">
               {settings?.isEnabled
                 ? 'Registration verification is enabled. New user signups require email verification.'
                 : 'Registration verification is disabled. New users can sign up without verification.'}
             </p>
           </div>
           <button
             onClick={toggleVerification}
             disabled={saving}
             className={cn(
               'relative inline-flex h-6 w-12 items-center rounded-full transition-colors',
               settings?.isEnabled ? 'bg-emerald-500' : 'bg-slate-600',
               'hover:opacity-90 disabled:opacity-50',
             )}
           >
             <span className="sr-only">Toggle verification</span>
             <span
               className={cn(
                 'inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform',
                 settings?.isEnabled ? 'translate-x-6' : 'translate-x-1',
               )}
             />
           </button>
         </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Sender Email Address</label>
            <div className="relative">
              <input
                type={showEmail ? 'text' : 'password'}
                value={settings?.senderEmail || ''}
                readOnly
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 pr-10 text-white font-mono"
              />
              <button type="button" onClick={() => setShowEmail(!showEmail)} className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white">
                {showEmail ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
            <p className="mt-1 text-xs text-slate-400">Configured via environment variables. Contact DevOps to change.</p>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Sender Name</label>
            <input
              type="text"
              value={settings?.senderName || ''}
              onChange={(e) => settings && setSettings({ ...settings, senderName: e.target.value })}
              className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white"
              placeholder="AR Wallet Support"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Email Subject Template</label>
            <input
              type="text"
              value={settings?.subjectTemplate || ''}
              onChange={(e) => settings && setSettings({ ...settings, subjectTemplate: e.target.value })}
              className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white"
              placeholder="Verify your AR Wallet account"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Code Expiry (minutes)</label>
            <input
              type="number"
              value={settings?.codeExpiry || 15}
              onChange={(e) => settings && setSettings({ ...settings, codeExpiry: parseInt(e.target.value, 10) || 15 })}
              className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white"
              min={1}
              max={1440}
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Max Attempts</label>
            <input
              type="number"
              value={settings?.maxAttempts || 5}
              onChange={(e) => settings && setSettings({ ...settings, maxAttempts: parseInt(e.target.value, 10) || 5 })}
              className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white"
              min={1}
              max={20}
            />
          </div>

           <div className="md:col-span-2">
             <label className="mb-1 block text-sm font-medium text-slate-300">Admin Message</label>
             <textarea
               value={settings?.bodyTemplate || ''}
               onChange={(e) => settings && setSettings({ ...settings, bodyTemplate: e.target.value.replace(/\{\{(?:code|verificationCode|emailVerificationCode)\}\}/gi, '') })}
               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 a plain message for super admin review notes..."
             />
             <p className="mt-1 text-xs text-slate-400">Plain text message shown to the super admin during verification review. No code placeholders — plain text or markdown only.</p>
            </div>

           <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 md:col-span-2">
            <div>
              <label className="text-sm font-medium text-slate-300">Document Verification Page</label>
              <p className="text-xs text-slate-400">
                {settings?.isVerificationPageEnabled
                  ? 'Verification page is enabled. New users must upload a document for manual review.'
                  : 'Verification page is disabled. New users are activated immediately.'}
              </p>
            </div>
            <button
              onClick={async () => {
                if (!settings) return;
                setSaving(true);
                setError(null);
                setSuccess(null);
                try {
                  await verificationSettingsService.updateSettings({
                    senderName: settings.senderName,
                    subjectTemplate: settings.subjectTemplate,
                    bodyTemplate: settings.bodyTemplate,
                    codeExpiry: settings.codeExpiry,
                    maxAttempts: settings.maxAttempts,
                    verificationMessage: settings.verificationMessage || undefined,
                    isVerificationPageEnabled: !settings.isVerificationPageEnabled,
                  });
                  setSuccess(settings.isVerificationPageEnabled ? 'Verification page disabled' : 'Verification page enabled');
                  loadSettings();
                } catch (err: any) {
                  setError(err?.message || 'Failed to update settings');
                } finally {
                  setSaving(false);
                }
              }}
              disabled={saving}
              className={cn(
                'relative inline-flex h-6 w-12 items-center rounded-full transition-colors',
                settings?.isVerificationPageEnabled ? 'bg-emerald-500' : 'bg-slate-600',
                'hover:opacity-90 disabled:opacity-50',
              )}
            >
              <span className="sr-only">Toggle verification page</span>
              <span
                className={cn(
                  'inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform',
                  settings?.isVerificationPageEnabled ? 'translate-x-6' : 'translate-x-1',
                )}
              />
            </button>
          </div>

          <div className="md:col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-300">Verification Page Message</label>
            <textarea
              value={settings?.verificationMessage || ''}
              onChange={(e) => settings && setSettings({ ...settings, verificationMessage: e.target.value })}
              rows={4}
              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 the message to display on the verification page. This will be shown to users when they are asked to upload a verification document."
            />
            <p className="mt-1 text-xs text-slate-400">This message will be displayed to users on the verification page.</p>
          </div>
        </div>

        <div className="flex justify-end">
          <button onClick={handleSave} disabled={saving} className="rounded-lg bg-blue-600 px-6 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50">
            <Save className="mr-2 inline h-4 w-4" />
            {saving ? 'Saving...' : 'Save Settings'}
          </button>
        </div>
      </div>
    </div>
  );
}