"use client";

import React, { useState } from "react";
import useSWR, { mutate } from "swr";
import axios from "@/lib/axios";
import { useToast } from "@/context/ToastContext";
import Button from "@/components/ui/button/Button";
import Input from "@/components/form/input/InputField";
import Label from "@/components/form/Label";
import { Modal } from "@/components/ui/modal";
import { useModal } from "@/hooks/useModal";
import Badge from "@/components/ui/badge/Badge";
import Link from "next/link";
import { 
  ShieldCheck, 
  History, 
  Link2, 
  AlertTriangle, 
  Mail,
  Smartphone,
  Globe,
  Monitor,
  Trash2,
  Lock,
  Bell,
  Palette,
  Send,
  Languages,
  Download,
  Key,
  ChevronRight,
  LogOut,
  DoorOpen,
  Sun,
  Moon,
  Laptop
} from "lucide-react";

import { useTheme } from "@/context/ThemeContext";

import Switch from "@/components/form/switch/Switch";
import { useRouter, useSearchParams } from "next/navigation";
import PageLoader from "@/components/ui/PageLoader";
import { useTranslations } from "next-intl";
import { useI18n } from "@/components/providers/I18nProvider";

import { useAuth } from "@/hooks/useAuth";

const fetcher = (url: string) => axios.get(url).then((res) => res.data);

export default function SettingsClient() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { user, mutate: mutateUser } = useAuth();
  const { data: loginHistory, isLoading: historyLoading } = useSWR("/api/profile/login-history", fetcher);
  const { data: sessions, isLoading: sessionsLoading } = useSWR("/api/profile/sessions", fetcher);
  const { data: apiKeys } = useSWR("/api/api-keys", fetcher);
  
  const { addToast } = useToast();
  const { theme: currentTheme, setTheme } = useTheme();
  const { isOpen, openModal, closeModal } = useModal();
  const { setLocale } = useI18n();
  const t = useTranslations("Settings");
  
  const [isSavingPassword, setIsSavingPassword] = useState(false);
  const [isDeletingAccount, setIsDeletingAccount] = useState(false);
  const [passwordData, setPasswordData] = useState({
    current_password: "",
    password: "",
    password_confirmation: "",
  });

  // 2FA State
  const [twoFactorMode, setTwoFactorMode] = useState<'enable' | 'disable' | 'recovery' | null>(null);
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [setupSecret, setSetupSecret] = useState<string | null>(null);
  const [verificationCode, setVerificationCode] = useState("");
  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
  const [confirmPassword, setConfirmPassword] = useState("");
  const [isProcessing2FA, setIsProcessing2FA] = useState(false);

  const enable2FA = async () => {
      try {
          setIsProcessing2FA(true);
          const { data } = await axios.post('/api/auth/2fa/enable');
          setQrCode(data.qr_code);
          setSetupSecret(data.secret);
          setTwoFactorMode('enable');
      } catch (error) {
          addToast(t("toast_2fa_setup_failed"), "error");
      } finally {
          setIsProcessing2FA(false);
      }
  };

  const confirmEnable2FA = async () => {
      try {
          setIsProcessing2FA(true);
          const { data } = await axios.post('/api/auth/2fa/confirm', { code: verificationCode });
          addToast(t("toast_2fa_enabled"), "success");
          setRecoveryCodes(data.recovery_codes);
          setTwoFactorMode('recovery'); // Show recovery codes immediately
          mutateUser();
      } catch (error: any) {
          addToast(error.response?.data?.message || t("toast_2fa_setup_failed"), "error");
      } finally {
          setIsProcessing2FA(false);
      }
  };

  const disable2FA = async () => {
      try {
          setIsProcessing2FA(true);
          await axios.delete('/api/auth/2fa/disable', { data: { password: confirmPassword } });
          addToast(t("toast_2fa_disabled"), "success");
          setTwoFactorMode(null);
          setConfirmPassword("");
          mutateUser();
      } catch (error: any) {
          addToast(error.response?.data?.message || t("toast_2fa_disable_failed"), "error");
      } finally {
          setIsProcessing2FA(false);
      }
  };

  const showRecoveryCodes = async () => {
      try {
          const { data } = await axios.get('/api/auth/2fa/recovery-codes');
          setRecoveryCodes(data.recovery_codes);
          setTwoFactorMode('recovery');
      } catch (error) {
          addToast(t("toast_recovery_failed"), "error");
      }
  };

  const close2FAModal = () => {
      setTwoFactorMode(null);
      setQrCode(null);
      setVerificationCode("");
      setRecoveryCodes([]);
      setConfirmPassword("");
  };
  
  // Handle Success/Error Alerts from URL (e.g. from OAuth Callback)
  React.useEffect(() => {
    const success = searchParams.get("success");
    const error = searchParams.get("error");

    if (success) {
        if (success === 'account_connected') addToast(t("toast_connected"), "success");
        // Clear params
        router.replace("/dashboard/settings");
    }

    if (error) {
        if (error === 'already_connected') addToast(t("toast_already_connected"), "warning");
        if (error === 'connected_to_other_account') addToast(t("toast_connected_other"), "error");
        if (error === 'login_required_to_connect') addToast(t("toast_login_required"), "error");
        // Clear params
        router.replace("/dashboard/settings");
    }
  }, [searchParams, router, addToast, t]);

  const connectAccount = async (provider: string) => {
      try {
          addToast(t("toast_connect_init"), "info");
          // Get secure link token to identify user during redirect
          const { data } = await axios.get('/api/auth/link-token');
          // Redirect to backend auth endpoint with context and token
          window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/auth/${provider}/redirect?context=connect&link_token=${data.token}`;
      } catch (error) {
          addToast(t("toast_connect_failed"), "error");
      }
  };

  const disconnectAccount = async (provider: string) => {
      // confirm disconnect?
      try {
        addToast(t("toast_disconnect_init"), "info");
        await axios.delete(`/api/auth/social/${provider}`);
        addToast(t("toast_disconnected"), "success");
        mutateUser(); // Refresh user state
      } catch (error: any) {
        addToast(error.response?.data?.message || t("toast_disconnect_failed"), "error");
      }
  };

  const savePreference = async (key: string, value: any) => {
    try {
        // Optimistic update could go here, but for simplicity we rely on SWR revalidation or just wait
        await axios.patch('/api/profile', {
            [key]: value
        });

        if (key === 'theme') setTheme(value);
        if (key === 'language') setLocale(value);

        mutateUser(); // Refresh user data to confirm sync
        addToast(t("toast_settings_updated"), "success");
    } catch (err) {
        addToast(t("toast_settings_failed"), "error");
    }
  };

  const handlePasswordChange = (field: string, value: string) => {
    setPasswordData((prev) => ({ ...prev, [field]: value }));
  };

  const updatePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (passwordData.password !== passwordData.password_confirmation) {
      addToast(t("toast_password_mismatch"), "error");
      return;
    }

    setIsSavingPassword(true);
    try {
      await axios.put("/api/profile/password", passwordData);
      addToast(t("toast_password_updated"), "success");
      setPasswordData({
        current_password: "",
        password: "",
        password_confirmation: "",
      });
    } catch (err: any) {
      const message = err.response?.data?.message || t("toast_password_failed");
      addToast(message, "error");
    } finally {
      setIsSavingPassword(false);
    }
  };

  const revokeSession = async (id: string) => {
    try {
      await axios.delete(`/api/profile/sessions/${id}`);
      mutate("/api/profile/sessions");
      addToast(t("toast_session_revoked"), "success");
    } catch (err) {
      addToast(t("toast_revoke_failed"), "error");
    }
  };

  const handleDeleteAccount = async () => {
    setIsDeletingAccount(true);
    try {
      await axios.delete("/api/profile");
      addToast(t("toast_account_deleted"), "success");
      setTimeout(() => {
        window.location.href = "/signin";
      }, 2000);
    } catch (err) {
      addToast(t("toast_delete_failed"), "error");
    } finally {
      setIsDeletingAccount(false);
      closeModal();
    }
  };

  const getDeviceIcon = (deviceType: string) => {
    switch (deviceType?.toLowerCase()) {
      case 'ios':
      case 'android':
        return <Smartphone className="w-5 h-5 text-gray-500" />;
      case 'mac':
      case 'windows':
      case 'linux':
        return <Monitor className="w-5 h-5 text-gray-500" />;
      default:
        return <Globe className="w-5 h-5 text-gray-500" />;
    }
  };

  return (
    <div className="space-y-6">
      {/* Account Verification & Summary */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
          <div className="flex items-center gap-4">
            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-50 dark:bg-blue-500/10">
              <Mail className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">
                {t("email_verification")}
              </h4>
              <div className="flex flex-wrap items-center gap-2 mt-1">
                {user?.email_verified_at ? (
                  <Badge color="success" size="sm" variant="light" startIcon={<ShieldCheck className="w-3.5 h-3.5" />}>
                     {t("verified")}
                  </Badge>
                ) : (
                  <Badge color="warning" size="sm" variant="light">
                     {t("not_verified")}
                  </Badge>
                )}
                <span className="text-sm text-gray-500 dark:text-gray-400 font-medium">
                  {user?.email}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
          <div className="flex items-center gap-4">
            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-50 dark:bg-purple-500/10">
              <Key className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
            <div>
              <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">
                {t("api_keys_summary")}
              </h4>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                {t("api_keys_desc", { count: apiKeys?.data?.filter((k: any) => k.is_active).length || 0 })}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Security: Update Password */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <h4 className="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          {t("security_password")}
        </h4>
        <form onSubmit={updatePassword} className="space-y-5">
          <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-6">
            <div className="col-span-1 lg:col-span-2">
              <Label>{t("current_password")}</Label>
              <Input
                type="password"
                value={passwordData.current_password}
                onChange={(e) => handlePasswordChange("current_password", e.target.value)}
                placeholder={t("current_password")}
                required
              />
            </div>
            <div>
              <Label>{t("new_password")}</Label>
              <Input
                type="password"
                value={passwordData.password}
                onChange={(e) => handlePasswordChange("password", e.target.value)}
                placeholder={t("new_password")}
                required
              />
            </div>
            <div>
              <Label>{t("confirm_new_password")}</Label>
              <Input
                type="password"
                value={passwordData.password_confirmation}
                onChange={(e) => handlePasswordChange("password_confirmation", e.target.value)}
                placeholder={t("confirm_new_password")}
                required
              />
            </div>
          </div>
          <div className="flex justify-end">
            <Button type="submit" loading={isSavingPassword}>
              {t("update_password")}
            </Button>
          </div>
        </form>
      </div>

      {/* Active Sessions Management */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <h4 className="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          {t("active_sessions")}
        </h4>
        {sessionsLoading ? (
           <PageLoader text={t("loading_sessions")} className="py-10" />
        ) : sessions?.length > 0 ? (
          <div className="space-y-4">
            {sessions.map((session: any) => (
              <div key={session.id} className="flex items-center justify-between p-4 border border-gray-100 rounded-xl dark:border-gray-800">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-gray-100 rounded-lg dark:bg-gray-800">
                    <Monitor className="w-5 h-5 text-gray-500" />
                  </div>
                  <div>
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                        {session.name || "Default Session"}
                      </p>
                      {session.is_current && (
                        <Badge color="success" size="sm" variant="light">
                          {t("session_current")}
                        </Badge>
                      )}
                    </div>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      Last active: {new Date(session.last_active * 1000).toLocaleString()}
                    </p>
                  </div>
                </div>
                {!session.is_current && (
                  <button 
                    onClick={() => revokeSession(session.id)}
                    className="p-2 text-red-500 transition-colors rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10"
                    title={t("logout_device")}
                  >
                    <LogOut className="w-5 h-5" />
                  </button>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="py-10 text-center text-gray-500 border-2 border-dashed border-gray-100 rounded-xl dark:border-gray-800">
            {t("no_sessions")}
          </div>
        )}
      </div>

      {/* Login History (Last 30 Days) */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
          <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">
            {t("login_activity")}
          </h4>
          <Badge color="light" size="sm" variant="light">
            {t("last_month")}
          </Badge>
        </div>

        {historyLoading ? (
           <PageLoader text="Loading activity..." className="py-10" />
        ) : loginHistory?.length > 0 ? (
          <div className="overflow-x-auto border border-gray-100 rounded-xl dark:border-gray-800">
            <table className="min-w-[600px] w-full text-left">
              <thead>
                <tr className="bg-gray-50 dark:bg-white/[0.02]">
                  <th className="px-5 py-4 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 w-[30%]">{t("browser_os")}</th>
                  <th className="px-5 py-4 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 w-[20%]">{t("ip_address")}</th>
                  <th className="px-5 py-4 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 w-[25%]">{t("location")}</th>
                  <th className="px-5 py-4 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 w-[25%] text-right">{t("time")}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                {loginHistory.map((item: any) => (
                  <tr key={item.id} className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01]">
                    <td className="px-5 py-4">
                      <div className="flex items-center gap-3">
                        {getDeviceIcon(item.device_type)}
                        <div>
                          <p className="text-sm font-medium text-gray-800 dark:text-white/90">{item.browser}</p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">{item.os}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-5 py-4">
                      <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">{item.ip_address}</span>
                    </td>
                    <td className="px-5 py-4">
                      <div className="flex items-center gap-2">
                        {item.country_code && (
                          <div className="flex-shrink-0 w-5 h-3.5 overflow-hidden rounded-[2px] shadow-sm border border-gray-100 dark:border-gray-800">
                            <img 
                              src={`https://flagcdn.com/${item.country_code.toLowerCase()}.svg`}
                              alt={item.country}
                              className="block w-full h-full object-cover"
                            />
                          </div>
                        )}
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          {item.city && item.country ? `${item.city}, ${item.country}` : "Unknown"}
                        </p>
                      </div>
                    </td>
                    <td className="px-5 py-4 text-right whitespace-nowrap">
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        {new Date(item.created_at).toLocaleString()}
                      </p>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="py-10 text-center text-gray-500 border-2 border-dashed border-gray-100 rounded-xl dark:border-gray-800">
            {t("no_activity")}
          </div>
        )}
      </div>

      {/* Advanced Security & UI Placeholders */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* 2FA Section */}
        <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
          <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
            <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
              <Lock className="w-5 h-5" />
              <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">{t("2fa_title")}</h4>
            </div>
            {user?.two_factor_confirmed_at ? (
                 <Badge color="success" size="sm" variant="light">Enabled</Badge>
            ) : (
                 <Badge color="warning" size="sm" variant="light">Disabled</Badge>
            )}
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {t("2fa_desc")}
          </p>
          <div className="mt-4">
             {user?.two_factor_confirmed_at ? (
                <div className="flex gap-3">
                    <Button variant="danger" size="sm" className="w-full" onClick={() => setTwoFactorMode('disable')}>
                        {t("disable_2fa")}
                    </Button>
                     <Button variant="outline" size="sm" className="w-full" onClick={showRecoveryCodes}>
                        {t("view_recovery_codes")}
                    </Button>
                </div>
             ) : (
                <Button variant="outline" size="sm" className="w-full" onClick={enable2FA}>
                    {t("setup_2fa")}
                </Button>
             )}
          </div>
        </div>

        {/* Notifications Placeholder */}
        <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
          <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
            <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
              <Bell className="w-5 h-5" />
              <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">{t("notifications")}</h4>
            </div>
            {/* Badge Removed */}
          </div>
          <div className="space-y-4">
             <div className="flex items-center justify-between">
                <div>
                    <span className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t("email_alerts")}</span>
                    <span className="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{t("email_alerts_desc")}</span>
                </div>
                <Switch 
                    label="" 
                    defaultChecked={!!user?.settings_email_alerts} 
                    onChange={(checked) => savePreference('settings_email_alerts', checked)} 
                    disabled={!user}
                />
             </div>
             <div className="flex items-center justify-between">
                <div>
                    <span className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t("cert_renewal")}</span>
                     <span className="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{t("cert_renewal_desc")}</span>
                </div>
                <Switch 
                    label="" 
                    defaultChecked={!!user?.settings_certificate_renewal} 
                    onChange={(checked) => savePreference('settings_certificate_renewal', checked)} 
                    disabled={!user}
                />
             </div>
          </div>
          {(user?.role === 'admin' || user?.role === 'owner') && (
            <div className="mt-5 pt-5 border-t border-gray-100 dark:border-gray-800">
               <Link href="/dashboard/admin/smtp-tester">
                  <Button variant="outline" size="sm" className="w-full flex items-center justify-center gap-2">
                     <Send className="w-4 h-4" /> {t("smtp_tester")}
                  </Button>
               </Link>
            </div>
          )}
        </div>

      {/* Appearance Settings */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
            <Palette className="w-5 h-5" />
            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">{t("appearance")}</h4>
          </div>
        </div>
        
        <div className="space-y-6">
          <div>
            <Label className="mb-3 block text-sm font-medium">{t('theme')}</Label>
            <div className="grid grid-cols-3 gap-3">
              {[
                { id: 'light', label: t('light'), icon: <Sun className="w-4 h-4" /> },
                { id: 'dark', label: t('dark'), icon: <Moon className="w-4 h-4" /> },
                { id: 'system', label: t('system'), icon: <Laptop className="w-4 h-4" /> },
              ].map((t) => (
                <button
                  key={t.id}
                  onClick={() => savePreference('theme', t.id as any)}
                  className={`flex flex-col items-center justify-center p-3 border rounded-xl transition-all gap-2 ${
                    user?.theme === t.id
                      ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-500/10 text-brand-600 dark:text-brand-400'
                      : 'border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400 hover:border-brand-200'
                  }`}
                >
                  {t.icon}
                  <span className="text-xs font-medium">{t.label}</span>
                </button>
              ))}
            </div>
          </div>

          <div>
            <Label className="mb-3 block text-sm font-medium">{t('language')}</Label>
            <div className="relative">
              <select 
                value={user?.language || 'en'}
                onChange={(e) => savePreference('language', e.target.value)}
                className="w-full bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl px-4 py-3 text-sm text-gray-700 dark:text-gray-300 focus:border-brand-500 outline-none appearance-none transition-all cursor-pointer"
              >
                <option value="en" className="bg-white dark:bg-gray-900">{t('english')}</option>
                <option value="id" className="bg-white dark:bg-gray-900">{t('indonesian')}</option>
              </select>
              <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
                <ChevronRight className="w-4 h-4 rotate-90" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Export & Data Placeholder */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
            <Download className="w-5 h-5" />
            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">{t("privacy_data")}</h4>
          </div>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{t("privacy_desc")}</p>
        <Button variant="outline" size="sm" disabled className="w-full flex items-center justify-center gap-2">
          <Download className="w-4 h-4" /> {t("export_data")}
        </Button>
      </div>

      {/* Landing Page Selection */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6 lg:col-span-2">
        <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
              <DoorOpen className="w-5 h-5" />
              <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">{t("landing_page")}</h4>
           </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            {[
                { id: '/dashboard', label: t('landing_page_dashboard'), icon: <Monitor className="w-4 h-4" /> },
                { id: '/dashboard/support', label: t('landing_page_support'), icon: <Smartphone className="w-4 h-4" /> },
                { id: '/dashboard/certificates', label: t('landing_page_certs'), icon: <ShieldCheck className="w-4 h-4" /> },
                { id: '/dashboard/api-keys', label: t('landing_page_keys'), icon: <Key className="w-4 h-4" /> },
            ].map((option) => (
                <button
                    key={option.id}
                    onClick={() => savePreference('default_landing_page', option.id)}
                    className={`flex items-center justify-between p-4 border rounded-xl transition-all ${
                        user?.default_landing_page === option.id
                            ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-500/10 text-brand-600 dark:text-brand-400 font-bold'
                            : 'border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400 hover:border-brand-200'
                    }`}
                >
                    <div className="flex items-center gap-2">
                        {option.icon}
                        <span className="text-sm">{option.label}</span>
                    </div>
                    {user?.default_landing_page === option.id && (
                        <div className="w-2 h-2 rounded-full bg-brand-500" />
                    )}
                </button>
            ))}
        </div>
      </div>

      {/* Linked Accounts */}
      <div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
        <h4 className="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          {t("linked_accounts")}
        </h4>
        <div className="space-y-4">
          <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl dark:border-gray-800">
            <div className="flex items-center gap-3">
                <div className="flex items-center justify-center w-10 h-10 border border-gray-100 rounded-full dark:border-gray-800">
                  <svg width="20" height="20" viewBox="0 0 48 48">
                    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.97-6.19z"/>
                    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                    <path fill="none" d="M0 0h48v48H0z"/>
                  </svg>
                </div>
              <div>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">{t("google_account")}</p>
                <div className="mt-1">
                  {user?.social_accounts?.some((a: any) => a.provider === 'google') ? (
                    <Badge color="success" size="sm" variant="light">{t("connected")}</Badge>
                  ) : (
                    <Badge color="light" size="sm" variant="light">{t("not_connected")}</Badge>
                  )}
                </div>
              </div>
            </div>
            {user?.social_accounts?.some((a: any) => a.provider === 'google') ? (
                <Button variant="outline" size="sm" onClick={() => disconnectAccount('google')}>
                  {t("disconnect")}
                </Button>
            ) : (
                <Button variant="outline" size="sm" onClick={() => connectAccount('google')}>
                  {t("connect")}
                </Button>
            )}
          </div>

          <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl dark:border-gray-800">
            <div className="flex items-center gap-3">
                <div className="flex items-center justify-center w-10 h-10 border border-gray-100 rounded-full dark:border-gray-800">
                  <svg width="20" height="20" viewBox="0 0 24 24" className="text-gray-800 dark:text-white" fill="currentColor">
                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                  </svg>
                </div>
              <div>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">{t("github_account")}</p>
                <div className="mt-1">
                  {user?.social_accounts?.some((a: any) => a.provider === 'github') ? (
                    <Badge color="success" size="sm" variant="light">{t("connected")}</Badge>
                  ) : (
                    <Badge color="light" size="sm" variant="light">{t("not_connected")}</Badge>
                  )}
                </div>
              </div>
            </div>
            {user?.social_accounts?.some((a: any) => a.provider === 'github') ? (
                <Button variant="outline" size="sm" onClick={() => disconnectAccount('github')}>
                  {t("disconnect")}
                </Button>
            ) : (
                <Button variant="outline" size="sm" onClick={() => connectAccount('github')}>
                  {t("connect")}
                </Button>
            )}
          </div>
        </div>
      </div>

      {/* Danger Zone */}
      <div className="p-5 border border-red-200 bg-red-50 rounded-2xl dark:border-red-500/15 dark:bg-red-500/5 lg:p-6">
        <div className="flex items-start gap-4">
          <div className="flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-sm dark:bg-red-500/10">
            <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-500" />
          </div>
          <div className="flex-1">
            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90">
              {t("danger_zone")}
            </h4>
            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
              {t("delete_account_desc")}
            </p>
            <div className="mt-6">
              <Button variant="danger" onClick={openModal}>
                {t("delete_account_button")}
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Delete Confirmation Modal */}
      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[450px] m-4">
        <div className="p-6 sm:p-8">
           <div className="flex flex-col items-center text-center">
              <div className="flex items-center justify-center w-16 h-16 mb-4 bg-red-50 rounded-full dark:bg-red-500/10">
                <Trash2 className="w-8 h-8 text-red-600 dark:text-red-500" />
              </div>
              <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">{t("delete_modal_title")}</h3>
              <p className="mb-8 text-sm text-gray-600 dark:text-gray-400">
                {t("delete_modal_desc")}
              </p>
              <div className="flex flex-col w-full gap-3 sm:flex-row sm:justify-center">
                <Button variant="outline" className="w-full sm:w-auto" onClick={closeModal} disabled={isDeletingAccount}>
                  {t("delete_modal_cancel")}
                </Button>
                <Button variant="danger" className="w-full sm:w-auto" onClick={handleDeleteAccount} loading={isDeletingAccount}>
                  {t("delete_modal_confirm")}
                </Button>
              </div>
           </div>
        </div>
      </Modal>

      {/* 2FA Modals */}
      <Modal isOpen={twoFactorMode !== null} onClose={close2FAModal} className="max-w-[450px] m-4">
        <div className="p-6 sm:p-8">
            {twoFactorMode === 'enable' && (
                <div className="flex flex-col items-center text-center">
                    <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-50 rounded-full dark:bg-blue-500/10">
                        <Smartphone className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                    </div>
                    <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">{t("setup_2fa_modal_title")}</h3>
                    <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
                        {t("setup_2fa_modal_desc")}
                    </p>
                    
                    {!qrCode ? (
                        <div className="py-8">
                             <PageLoader text={t("loading_sessions")} />
                        </div>
                    ) : (
                        <div className="w-full space-y-6">
                          <div className="p-4 bg-white border border-gray-100 rounded-xl dark:bg-white/5 dark:border-gray-800">
                              <p className="mb-3 text-xs font-bold text-gray-400 uppercase tracking-wider">{t("2fa_step_1")}</p>
                              <div className="flex justify-center mb-4 bg-white p-2 rounded-lg inline-block mx-auto">
                                <div dangerouslySetInnerHTML={{ __html: qrCode }} />
                              </div>
                              <p className="text-xs text-gray-500 dark:text-gray-400">
                                {t("2fa_step_1_desc")}
                              </p>
                          </div>

                          <div className="p-4 bg-gray-50 border border-gray-100 rounded-xl dark:bg-white/5 dark:border-gray-800 text-left">
                               <p className="mb-2 text-xs font-bold text-gray-400 uppercase tracking-wider">{t("2fa_step_2")}</p>
                               <div className="flex gap-2">
                                   <input
                                      type="text"
                                      placeholder={t("code_placeholder")}
                                      className="flex-1 px-4 py-2 bg-white dark:bg-black/20 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent outline-none transition-all font-mono text-center tracking-widest text-lg"
                                      value={verificationCode}
                                      onChange={(e) => setVerificationCode(e.target.value.replace(/[^0-9]/g, '').slice(0, 6))}
                                      maxLength={6}
                                   />
                                   <Button 
                                      onClick={confirmEnable2FA} 
                                      loading={isProcessing2FA}
                                      disabled={verificationCode.length !== 6}
                                   >
                                      {t("verify_enable")}
                                   </Button>
                               </div>
                               <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                  {t("2fa_step_2_desc")}
                               </p>
                          </div>
                        </div>
                    )}
                </div>
            )}

            {twoFactorMode === 'recovery' && (
                <div className="flex flex-col items-center text-center">
                    <div className="flex items-center justify-center w-12 h-12 mb-4 bg-green-50 rounded-full dark:bg-green-500/10">
                        <Lock className="w-6 h-6 text-green-600 dark:text-green-400" />
                    </div>
                    <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">{t("recovery_codes_title")}</h3>
                    <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
                        {t("recovery_codes_desc")}
                    </p>
                    
                    <div className="w-full bg-gray-50 dark:bg-black/20 border border-gray-200 dark:border-gray-800 rounded-xl p-4 mb-6">
                        <div className="grid grid-cols-2 gap-3 text-sm font-mono font-medium text-gray-800 dark:text-gray-200">
                            {recoveryCodes.map((code, idx) => (
                                <div key={idx} className="bg-white dark:bg-white/5 px-2 py-1 rounded border border-gray-100 dark:border-gray-700/50">
                                    {code}
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="flex w-full gap-3">
                         <Button variant="outline" className="flex-1" onClick={() => {
                             navigator.clipboard.writeText(recoveryCodes.join("\n"));
                             addToast("Codes copied to clipboard", "success");
                         }}>
                            {t("copy_codes")}
                         </Button>
                         <Button className="flex-1" onClick={close2FAModal}>
                            {t("done")}
                         </Button>
                    </div>
                </div>
            )}

            {twoFactorMode === 'disable' && (
                <div className="flex flex-col items-center text-center">
                    <div className="flex items-center justify-center w-16 h-16 mb-4 bg-red-50 rounded-full dark:bg-red-500/10">
                        <Lock className="w-8 h-8 text-red-600 dark:text-red-500" />
                    </div>
                    <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">{t("disable_2fa")}?</h3>
                    <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
                        {t("disable_2fa_warning")}
                    </p>
                    
                     <div className="w-full mb-6 text-left">
                          <Label className="mb-2 block">{t("current_password")}</Label>
                          <Input 
                             type="password"
                             value={confirmPassword}
                             onChange={(e) => setConfirmPassword(e.target.value)}
                             placeholder={t("current_password")}
                          />
                    </div>

                    <div className="flex flex-col w-full gap-3 sm:flex-row sm:justify-center">
                        <Button variant="outline" className="w-full sm:w-auto" onClick={close2FAModal}>
                            {t("cancel")}
                        </Button>
                        <Button variant="danger" className="w-full sm:w-auto" onClick={disable2FA} loading={isProcessing2FA} disabled={!confirmPassword}>
                            {t("confirm_disable_2fa")}
                        </Button>
                    </div>
                </div>
            )}
        </div>
      </Modal>
    </div>
    </div>
  );
}