// app/admin/settings/page.tsx

'use client';

import { useState } from 'react';
import {
  Settings,
  Shield,
  Bell,
  Mail,
  Smartphone,
  Lock,
  Globe,
  DollarSign,
  Users,
  Briefcase,
  Clock,
  Save,
  Eye,
  X,
  EyeOff,
  CheckCircle,
  XCircle,
  AlertCircle,
  Copy,
  RefreshCw,
  QrCode,
  Key,
  MessageCircle,
  Loader2,
} from 'lucide-react';

// Types
interface AdminProfile {
  name: string;
  email: string;
  phone: string;
  role: string;
  avatar: string;
}

interface TwoFactorConfig {
  enabled: boolean;
  method: 'email' | 'app' | 'both' | 'none';
  emailVerified: boolean;
  appVerified: boolean;
  backupCodes: string[];
}

interface PlatformConfig {
  siteName: string;
  siteUrl: string;
  supportEmail: string;
  supportPhone: string;
  defaultCurrency: string;
  timezone: string;
  dateFormat: string;
}

interface CommissionConfig {
  careSeekerCommission: number;
  careProviderCommission: number;
  professionalPlanCommission: number;
  minimumPayout: number;
  payoutSchedule: 'weekly' | 'biweekly' | 'monthly';
}

interface NotificationConfig {
  emailNotifications: boolean;
  smsNotifications: boolean;
  pushNotifications: boolean;
  dailyDigest: boolean;
  weeklyReport: boolean;
}

export default function AdminSettingsPage() {
  const [activeTab, setActiveTab] = useState('general');
  const [saving, setSaving] = useState(false);
  const [showBackupCodes, setShowBackupCodes] = useState(false);
  const [verificationCode, setVerificationCode] = useState('');
  const [show2FASetup, setShow2FASetup] = useState(false);
  const [temp2FAMethod, setTemp2FAMethod] = useState<'email' | 'app'>('email');

  // Admin Profile
  const [adminProfile, setAdminProfile] = useState<AdminProfile>({
    name: 'Admin User',
    email: 'admin@americas.care',
    phone: '(555) 123-4567',
    role: 'Super Administrator',
    avatar: '',
  });

  // Two-Factor Authentication
  const [twoFactor, setTwoFactor] = useState<TwoFactorConfig>({
    enabled: false,
    method: 'none',
    emailVerified: false,
    appVerified: false,
    backupCodes: ['ABCD-1234', 'EFGH-5678', 'IJKL-9012', 'MNOP-3456', 'QRST-7890'],
  });

  // Platform Configuration
  const [platformConfig, setPlatformConfig] = useState<PlatformConfig>({
    siteName: 'americas.care',
    siteUrl: 'https://americas.care',
    supportEmail: 'support@americas.care',
    supportPhone: '(555) 123-4567',
    defaultCurrency: 'USD',
    timezone: 'America/New_York',
    dateFormat: 'MM/DD/YYYY',
  });

  // Commission Configuration
  const [commissionConfig, setCommissionConfig] = useState<CommissionConfig>({
    careSeekerCommission: 5,
    careProviderCommission: 15,
    professionalPlanCommission: 10,
    minimumPayout: 50,
    payoutSchedule: 'weekly',
  });

  // Notification Configuration
  const [notificationConfig, setNotificationConfig] = useState<NotificationConfig>({
    emailNotifications: true,
    smsNotifications: false,
    pushNotifications: true,
    dailyDigest: false,
    weeklyReport: true,
  });

  const handleSaveSettings = async () => {
    setSaving(true);
    await new Promise(resolve => setTimeout(resolve, 1500));
    setSaving(false);
    alert('Settings saved successfully!');
  };

  const handleEnable2FA = (method: 'email' | 'app') => {
    setTemp2FAMethod(method);
    setShow2FASetup(true);
  };

  const handleVerify2FA = () => {
    if (verificationCode.length === 6) {
      if (temp2FAMethod === 'email') {
        setTwoFactor({
          ...twoFactor,
          enabled: true,
          method: twoFactor.method === 'both' ? 'both' : temp2FAMethod,
          emailVerified: true,
        });
      } else {
        setTwoFactor({
          ...twoFactor,
          enabled: true,
          method: twoFactor.method === 'both' ? 'both' : temp2FAMethod,
          appVerified: true,
        });
      }
      setShow2FASetup(false);
      setVerificationCode('');
      alert(`${temp2FAMethod === 'email' ? 'Email' : 'App'} 2FA enabled successfully!`);
    } else {
      alert('Invalid verification code');
    }
  };

  const handleDisable2FA = (method: 'email' | 'app' | 'all') => {
    if (method === 'all') {
      setTwoFactor({
        ...twoFactor,
        enabled: false,
        method: 'none',
        emailVerified: false,
        appVerified: false,
      });
    } else if (method === 'email') {
      setTwoFactor({
        ...twoFactor,
        method: twoFactor.method === 'both' ? 'app' : 'none',
        emailVerified: false,
      });
    } else {
      setTwoFactor({
        ...twoFactor,
        method: twoFactor.method === 'both' ? 'email' : 'none',
        appVerified: false,
      });
    }
    alert(`${method === 'all' ? '2FA' : `${method === 'email' ? 'Email' : 'App'} 2FA`} disabled`);
  };

  const copyBackupCodes = () => {
    navigator.clipboard.writeText(twoFactor.backupCodes.join('\n'));
    alert('Backup codes copied to clipboard');
  };

  const regenerateBackupCodes = () => {
    const newCodes = Array.from({ length: 8 }, () => 
      Math.random().toString(36).substring(2, 10).toUpperCase()
    );
    setTwoFactor({ ...twoFactor, backupCodes: newCodes });
    alert('New backup codes generated');
  };

  const tabs = [
    { id: 'general', name: 'General', icon: Settings },
    { id: 'security', name: 'Security', icon: Shield },
    { id: 'platform', name: 'Platform', icon: Globe },
    { id: 'commission', name: 'Commission', icon: DollarSign },
    // { id: 'notifications', name: 'Notifications', icon: Bell },
  ];

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
        <p className="text-gray-500 mt-1">Manage platform configuration and security settings</p>
      </div>

      {/* Tabs */}
      <div className="flex flex-wrap gap-2 border-b border-gray-200">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-all rounded-t-lg ${
                isActive
                  ? 'text-emerald-600 border-b-2 border-emerald-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              <Icon className="w-4 h-4" />
              {tab.name}
            </button>
          );
        })}
      </div>

      {/* Tab Content */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {/* General Settings */}
        {activeTab === 'general' && (
          <div className="p-6 space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Admin Profile</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Full Name
                </label>
                <input
                  type="text"
                  value={adminProfile.name}
                  onChange={(e) => setAdminProfile({ ...adminProfile, name: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Email Address
                </label>
                <input
                  type="email"
                  value={adminProfile.email}
                  onChange={(e) => setAdminProfile({ ...adminProfile, email: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Phone Number
                </label>
                <input
                  type="tel"
                  value={adminProfile.phone}
                  onChange={(e) => setAdminProfile({ ...adminProfile, phone: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Role
                </label>
                <input
                  type="text"
                  value={adminProfile.role}
                  disabled
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg bg-gray-50 text-gray-500"
                />
              </div>
            </div>

            <div className="border-t border-gray-100 pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Change Password</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Current Password
                  </label>
                  <input
                    type="password"
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="Enter current password"
                  />
                </div>
                <div></div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    New Password
                  </label>
                  <input
                    type="password"
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="Enter new password"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Confirm New Password
                  </label>
                  <input
                    type="password"
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="Confirm new password"
                  />
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Security Settings (2FA) */}
        {activeTab === 'security' && (
          <div className="p-6 space-y-6">
            <div className="flex items-start justify-between">
              <div>
                <h2 className="text-lg font-semibold text-gray-900">Two-Factor Authentication</h2>
                <p className="text-sm text-gray-500 mt-1">
                  Add an extra layer of security to your account
                </p>
              </div>
              <div className={`px-3 py-1 rounded-full text-sm font-medium ${
                twoFactor.enabled ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-700'
              }`}>
                {twoFactor.enabled ? 'Enabled' : 'Disabled'}
              </div>
            </div>

            {/* 2FA Methods */}
            <div className="space-y-4">
              {/* Email 2FA */}
              <div className="border border-gray-200 rounded-xl p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                      <Mail className="w-5 h-5 text-blue-600" />
                    </div>
                    <div>
                      <h3 className="font-medium text-gray-900">Email Authentication</h3>
                      <p className="text-sm text-gray-500">Receive verification codes via email</p>
                    </div>
                  </div>
                  {twoFactor.emailVerified ? (
                    <button
                      onClick={() => handleDisable2FA('email')}
                      className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                    >
                      Disable
                    </button>
                  ) : (
                    <button
                      onClick={() => handleEnable2FA('email')}
                      className="px-3 py-1.5 text-sm text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors"
                    >
                      Enable
                    </button>
                  )}
                </div>
                {twoFactor.emailVerified && (
                  <div className="mt-3 pt-3 border-t border-gray-100">
                    <div className="flex items-center gap-2 text-sm text-emerald-600">
                      <CheckCircle className="w-4 h-4" />
                      <span>Verified with {adminProfile.email}</span>
                    </div>
                  </div>
                )}
              </div>

              {/* Authenticator App 2FA */}
              <div className="border border-gray-200 rounded-xl p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                      <Smartphone className="w-5 h-5 text-purple-600" />
                    </div>
                    <div>
                      <h3 className="font-medium text-gray-900">Authenticator App</h3>
                      <p className="text-sm text-gray-500">Use Google Authenticator, Authy, or similar</p>
                    </div>
                  </div>
                  {twoFactor.appVerified ? (
                    <button
                      onClick={() => handleDisable2FA('app')}
                      className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                    >
                      Disable
                    </button>
                  ) : (
                    <button
                      onClick={() => handleEnable2FA('app')}
                      className="px-3 py-1.5 text-sm text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors"
                    >
                      Enable
                    </button>
                  )}
                </div>
                {twoFactor.appVerified && (
                  <div className="mt-3 pt-3 border-t border-gray-100">
                    <div className="flex items-center gap-2 text-sm text-emerald-600">
                      <CheckCircle className="w-4 h-4" />
                      <span>Authenticator app connected</span>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Backup Codes */}
            {twoFactor.enabled && (
              <div className="border border-amber-200 bg-amber-50 rounded-xl p-4">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
                      <Key className="w-5 h-5 text-amber-600" />
                    </div>
                    <div>
                      <h3 className="font-medium text-gray-900">Backup Codes</h3>
                      <p className="text-sm text-gray-600">
                        Use these codes to access your account if you lose your device
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={copyBackupCodes}
                      className="p-2 text-gray-500 hover:bg-amber-100 rounded-lg transition-colors"
                      title="Copy codes"
                    >
                      <Copy className="w-4 h-4" />
                    </button>
                    <button
                      onClick={regenerateBackupCodes}
                      className="p-2 text-gray-500 hover:bg-amber-100 rounded-lg transition-colors"
                      title="Regenerate codes"
                    >
                      <RefreshCw className="w-4 h-4" />
                    </button>
                  </div>
                </div>
                {showBackupCodes ? (
                  <div className="mt-3">
                    <div className="grid grid-cols-2 gap-2 p-3 bg-white rounded-lg border border-amber-200">
                      {twoFactor.backupCodes.map((code, idx) => (
                        <code key={idx} className="text-sm font-mono text-gray-700">{code}</code>
                      ))}
                    </div>
                    <button
                      onClick={() => setShowBackupCodes(false)}
                      className="mt-2 text-sm text-amber-600 hover:text-amber-700"
                    >
                      Hide codes
                    </button>
                  </div>
                ) : (
                  <button
                    onClick={() => setShowBackupCodes(true)}
                    className="mt-3 text-sm text-amber-600 hover:text-amber-700"
                  >
                    Show backup codes
                  </button>
                )}
              </div>
            )}

            {/* Session Management */}
            <div className="border-t border-gray-100 pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Active Sessions</h2>
              <div className="space-y-3">
                {[
                  { device: 'Chrome on Windows', location: 'New York, USA', lastActive: 'Now', current: true },
                  { device: 'Safari on iPhone', location: 'New York, USA', lastActive: '2 hours ago', current: false },
                  { device: 'Firefox on Mac', location: 'Brooklyn, USA', lastActive: 'Yesterday', current: false },
                ].map((session, idx) => (
                  <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center">
                        <Shield className="w-4 h-4 text-gray-500" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-900">{session.device}</p>
                        <p className="text-xs text-gray-500">{session.location} • {session.lastActive}</p>
                      </div>
                    </div>
                    {session.current ? (
                      <span className="text-xs text-emerald-600 font-medium">Current Session</span>
                    ) : (
                      <button className="text-xs text-red-600 hover:text-red-700">Revoke</button>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Platform Configuration */}
        {activeTab === 'platform' && (
          <div className="p-6 space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Site Name
                </label>
                <input
                  type="text"
                  value={platformConfig.siteName}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, siteName: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Site URL
                </label>
                <input
                  type="url"
                  value={platformConfig.siteUrl}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, siteUrl: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Support Email
                </label>
                <input
                  type="email"
                  value={platformConfig.supportEmail}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, supportEmail: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Support Phone
                </label>
                <input
                  type="tel"
                  value={platformConfig.supportPhone}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, supportPhone: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
              </div>
              {/* <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Default Currency
                </label>
                <select
                  value={platformConfig.defaultCurrency}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, defaultCurrency: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
                >
                  <option value="USD">USD - US Dollar</option>
                  <option value="CAD">CAD - Canadian Dollar</option>
                  <option value="GBP">GBP - British Pound</option>
                  <option value="EUR">EUR - Euro</option>
                </select>
              </div> */}
              {/* <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Timezone
                </label>
                <select
                  value={platformConfig.timezone}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, timezone: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
                >
                  <option value="America/New_York">Eastern Time (ET)</option>
                  <option value="America/Chicago">Central Time (CT)</option>
                  <option value="America/Denver">Mountain Time (MT)</option>
                  <option value="America/Los_Angeles">Pacific Time (PT)</option>
                </select>
              </div> */}
              {/* <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Date Format
                </label>
                <select
                  value={platformConfig.dateFormat}
                  onChange={(e) => setPlatformConfig({ ...platformConfig, dateFormat: e.target.value })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
                >
                  <option value="MM/DD/YYYY">MM/DD/YYYY</option>
                  <option value="DD/MM/YYYY">DD/MM/YYYY</option>
                  <option value="YYYY-MM-DD">YYYY-MM-DD</option>
                </select>
              </div> */}
            </div>
          </div>
        )}

        {/* Commission Configuration */}
        {activeTab === 'commission' && (
          <div className="p-6 space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Care Seeker Commission (%)
                </label>
                <input
                  type="number"
                  step="0.5"
                  value={commissionConfig.careSeekerCommission}
                  onChange={(e) => setCommissionConfig({ ...commissionConfig, careSeekerCommission: parseFloat(e.target.value) })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
                <p className="text-xs text-gray-500 mt-1">Applied to each booking (Model 2)</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Care Provider Commission (%)
                </label>
                <input
                  type="number"
                  step="0.5"
                  value={commissionConfig.careProviderCommission}
                  onChange={(e) => setCommissionConfig({ ...commissionConfig, careProviderCommission: parseFloat(e.target.value) })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
                <p className="text-xs text-gray-500 mt-1">Starter plan commission (Model 1)</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Professional Plan Commission (%)
                </label>
                <input
                  type="number"
                  step="0.5"
                  value={commissionConfig.professionalPlanCommission}
                  onChange={(e) => setCommissionConfig({ ...commissionConfig, professionalPlanCommission: parseFloat(e.target.value) })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
                <p className="text-xs text-gray-500 mt-1">Professional plan commission (Model 1)</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Minimum Payout ($)
                </label>
                <input
                  type="number"
                  value={commissionConfig.minimumPayout}
                  onChange={(e) => setCommissionConfig({ ...commissionConfig, minimumPayout: parseFloat(e.target.value) })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                />
                <p className="text-xs text-gray-500 mt-1">Minimum amount for provider payouts</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Payout Schedule
                </label>
                <select
                  value={commissionConfig.payoutSchedule}
                  onChange={(e) => setCommissionConfig({ ...commissionConfig, payoutSchedule: e.target.value as any })}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
                >
                  <option value="weekly">Weekly</option>
                  <option value="biweekly">Bi-Weekly</option>
                  <option value="monthly">Monthly</option>
                </select>
              </div>
            </div>

            {/* Commission Info Box */}
            {/* <div className="bg-blue-50 rounded-xl p-4 border border-blue-200">
              <div className="flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-blue-800">Commission Structure</p>
                  <p className="text-sm text-blue-700 mt-1">
                    Model 1 (Job Board): Care Seekers post jobs for free. Care Providers pay {commissionConfig.careProviderCommission}% commission (or {commissionConfig.professionalPlanCommission}% with Professional plan).
                  </p>
                  <p className="text-sm text-blue-700 mt-2">
                    Model 2 (Directory): Care Seekers pay {commissionConfig.careSeekerCommission}% commission with Premium subscription.
                  </p>
                </div>
              </div>
            </div> */}
          </div>
        )}

        {/* Notification Settings */}
        {activeTab === 'notifications' && (
          <div className="p-6 space-y-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <Mail className="w-5 h-5 text-gray-500" />
                  <div>
                    <p className="font-medium text-gray-900">Email Notifications</p>
                    <p className="text-sm text-gray-500">Receive important updates via email</p>
                  </div>
                </div>
                <button
                  onClick={() => setNotificationConfig({ ...notificationConfig, emailNotifications: !notificationConfig.emailNotifications })}
                  className={`relative w-11 h-6 rounded-full transition-colors ${
                    notificationConfig.emailNotifications ? 'bg-emerald-600' : 'bg-gray-300'
                  }`}
                >
                  <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    notificationConfig.emailNotifications ? 'left-6' : 'left-1'
                  }`} />
                </button>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <Smartphone className="w-5 h-5 text-gray-500" />
                  <div>
                    <p className="font-medium text-gray-900">SMS Notifications</p>
                    <p className="text-sm text-gray-500">Receive critical alerts via text message</p>
                  </div>
                </div>
                <button
                  onClick={() => setNotificationConfig({ ...notificationConfig, smsNotifications: !notificationConfig.smsNotifications })}
                  className={`relative w-11 h-6 rounded-full transition-colors ${
                    notificationConfig.smsNotifications ? 'bg-emerald-600' : 'bg-gray-300'
                  }`}
                >
                  <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    notificationConfig.smsNotifications ? 'left-6' : 'left-1'
                  }`} />
                </button>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <Bell className="w-5 h-5 text-gray-500" />
                  <div>
                    <p className="font-medium text-gray-900">Push Notifications</p>
                    <p className="text-sm text-gray-500">Real-time notifications in browser</p>
                  </div>
                </div>
                <button
                  onClick={() => setNotificationConfig({ ...notificationConfig, pushNotifications: !notificationConfig.pushNotifications })}
                  className={`relative w-11 h-6 rounded-full transition-colors ${
                    notificationConfig.pushNotifications ? 'bg-emerald-600' : 'bg-gray-300'
                  }`}
                >
                  <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    notificationConfig.pushNotifications ? 'left-6' : 'left-1'
                  }`} />
                </button>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <Clock className="w-5 h-5 text-gray-500" />
                  <div>
                    <p className="font-medium text-gray-900">Daily Digest</p>
                    <p className="text-sm text-gray-500">Summary of daily activities</p>
                  </div>
                </div>
                <button
                  onClick={() => setNotificationConfig({ ...notificationConfig, dailyDigest: !notificationConfig.dailyDigest })}
                  className={`relative w-11 h-6 rounded-full transition-colors ${
                    notificationConfig.dailyDigest ? 'bg-emerald-600' : 'bg-gray-300'
                  }`}
                >
                  <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    notificationConfig.dailyDigest ? 'left-6' : 'left-1'
                  }`} />
                </button>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <Briefcase className="w-5 h-5 text-gray-500" />
                  <div>
                    <p className="font-medium text-gray-900">Weekly Report</p>
                    <p className="text-sm text-gray-500">Platform performance report</p>
                  </div>
                </div>
                <button
                  onClick={() => setNotificationConfig({ ...notificationConfig, weeklyReport: !notificationConfig.weeklyReport })}
                  className={`relative w-11 h-6 rounded-full transition-colors ${
                    notificationConfig.weeklyReport ? 'bg-emerald-600' : 'bg-gray-300'
                  }`}
                >
                  <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    notificationConfig.weeklyReport ? 'left-6' : 'left-1'
                  }`} />
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Save Button */}
      <div className="flex justify-end">
        <button
          onClick={handleSaveSettings}
          disabled={saving}
          className="flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 transition-colors disabled:opacity-70"
        >
          {saving ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Saving...
            </>
          ) : (
            <>
              <Save className="w-4 h-4" />
              Save All Settings
            </>
          )}
        </button>
      </div>

      {/* 2FA Setup Modal */}
      {show2FASetup && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-md w-full">
            <div className="border-b border-gray-100 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-bold text-gray-900">
                Set up {temp2FAMethod === 'email' ? 'Email' : 'Authenticator App'} 2FA
              </h2>
              <button
                onClick={() => setShow2FASetup(false)}
                className="p-2 rounded-lg hover:bg-gray-100"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              {temp2FAMethod === 'email' ? (
                <>
                  <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg">
                    <Mail className="w-5 h-5 text-blue-600" />
                    <div>
                      <p className="text-sm font-medium text-gray-900">Verification email sent</p>
                      <p className="text-sm text-gray-600">We sent a code to {adminProfile.email}</p>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Verification Code
                    </label>
                    <input
                      type="text"
                      value={verificationCode}
                      onChange={(e) => setVerificationCode(e.target.value)}
                      placeholder="Enter 6-digit code"
                      className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 text-center text-2xl tracking-widest"
                      maxLength={6}
                    />
                  </div>
                </>
              ) : (
                <>
                  <div className="text-center">
                    <div className="w-32 h-32 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                      <QrCode className="w-20 h-20 text-gray-600" />
                    </div>
                    <p className="text-sm text-gray-600 mb-2">
                      Scan this QR code with your authenticator app
                    </p>
                    <code className="text-xs bg-gray-100 px-3 py-2 rounded-lg block mb-4">
                      1234567890ABCDEF
                    </code>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Verification Code
                    </label>
                    <input
                      type="text"
                      value={verificationCode}
                      onChange={(e) => setVerificationCode(e.target.value)}
                      placeholder="Enter 6-digit code"
                      className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 text-center text-2xl tracking-widest"
                      maxLength={6}
                    />
                  </div>
                </>
              )}
            </div>
            <div className="border-t border-gray-100 px-6 py-4 flex gap-3">
              <button
                onClick={() => setShow2FASetup(false)}
                className="flex-1 px-4 py-2 border border-gray-200 rounded-lg font-medium hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                onClick={handleVerify2FA}
                disabled={verificationCode.length !== 6}
                className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 disabled:opacity-50"
              >
                Verify & Enable
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}