/**
 * Settings Page
 * Makelore application configuration.
 */
import { useEffect, useMemo, useState, type FormEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ChevronDown,
  ExternalLink,
  FileText,
  FolderPlus,
  KeyRound,
  RefreshCw,
  RotateCw,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DisclosureContent } from '@/components/ui/disclosure';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { UpdateSettings } from '@/components/settings/UpdateSettings';
import { SUPPORTED_LANGUAGES } from '@/i18n';
import { invokeIpc, toUserMessage } from '@/lib/api-client';
import {
  clearUiTelemetry,
  getUiTelemetrySnapshot,
  subscribeUiTelemetry,
  type UiTelemetryEntry,
} from '@/lib/telemetry';
import { hostApiFetch } from '@/lib/host-api';
import { cn } from '@/lib/utils';
import { useOpencodeStore } from '@/stores/opencode';
import { useProjectConfigStore } from '@/stores/project-config';
import { useSettingsStore } from '@/stores/settings';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export function Settings() {
  const { t } = useTranslation('settings');
  const navigate = useNavigate();
  const {
    setLanguage,
    launchAtStartup,
    setLaunchAtStartup,
    proxyEnabled,
    proxyServer,
    proxyHttpServer,
    proxyHttpsServer,
    proxyAllServer,
    proxyBypassRules,
    setProxyEnabled,
    setProxyServer,
    setProxyHttpServer,
    setProxyHttpsServer,
    setProxyAllServer,
    setProxyBypassRules,
    devModeUnlocked,
    unlockDevMode,
    lockDevMode,
    telemetryEnabled,
    setTelemetryEnabled,
  } = useSettingsStore();

  const opencodeStatus = useOpencodeStore((state) => state.status);
  const opencodeRuntimeConfigSummary = useOpencodeStore((state) => state.runtimeConfigSummary);
  const opencodeProjects = useOpencodeStore((state) => state.projects);
  const activeOpencodeProject = useOpencodeStore((state) => state.activeProject);
  const opencodeLoading = useOpencodeStore((state) => state.loading);
  const opencodeError = useOpencodeStore((state) => state.error);
  const refreshOpencodeStatus = useOpencodeStore((state) => state.refreshStatus);
  const restartOpencodeRuntime = useOpencodeStore((state) => state.restart);
  const loadOpencodeRuntimeConfigSummary = useOpencodeStore(
    (state) => state.loadRuntimeConfigSummary
  );
  const loadOpencodeProjects = useOpencodeStore((state) => state.loadProjects);
  const pickAndOpenOpencodeProject = useOpencodeStore((state) => state.pickAndOpenProject);
  const setActiveOpencodeProject = useOpencodeStore((state) => state.setActiveProject);
  const loadProjectConfig = useProjectConfigStore((state) => state.load);

  const [proxyServerDraft, setProxyServerDraft] = useState('');
  const [proxyHttpServerDraft, setProxyHttpServerDraft] = useState('');
  const [proxyHttpsServerDraft, setProxyHttpsServerDraft] = useState('');
  const [proxyAllServerDraft, setProxyAllServerDraft] = useState('');
  const [proxyBypassRulesDraft, setProxyBypassRulesDraft] = useState('');
  const [proxyEnabledDraft, setProxyEnabledDraft] = useState(false);
  const [savingProxy, setSavingProxy] = useState(false);
  const [showLogs, setShowLogs] = useState(false);
  const [logContent, setLogContent] = useState('');
  const [showTelemetryViewer, setShowTelemetryViewer] = useState(false);
  const [telemetryEntries, setTelemetryEntries] = useState<UiTelemetryEntry[]>([]);
  const [showAdditionalSettings, setShowAdditionalSettings] = useState(false);
  const [adminDialogOpen, setAdminDialogOpen] = useState(false);
  const [adminPassword, setAdminPassword] = useState('');
  const [adminPasswordError, setAdminPasswordError] = useState<string | null>(null);
  const [adminUnlocking, setAdminUnlocking] = useState(false);
  const [workspaceProjectError, setWorkspaceProjectError] = useState<string | null>(null);

  useEffect(() => {
    setProxyEnabledDraft(proxyEnabled);
  }, [proxyEnabled]);

  useEffect(() => {
    setProxyServerDraft(proxyServer);
  }, [proxyServer]);

  useEffect(() => {
    setProxyHttpServerDraft(proxyHttpServer);
  }, [proxyHttpServer]);

  useEffect(() => {
    setProxyHttpsServerDraft(proxyHttpsServer);
  }, [proxyHttpsServer]);

  useEffect(() => {
    setProxyAllServerDraft(proxyAllServer);
  }, [proxyAllServer]);

  useEffect(() => {
    setProxyBypassRulesDraft(proxyBypassRules);
  }, [proxyBypassRules]);

  useEffect(() => {
    if (!devModeUnlocked) return;
    setTelemetryEntries(getUiTelemetrySnapshot(200));
    const unsubscribe = subscribeUiTelemetry((entry) => {
      setTelemetryEntries((prev) => {
        const next = [...prev, entry];
        if (next.length > 200) {
          next.splice(0, next.length - 200);
        }
        return next;
      });
    });
    return unsubscribe;
  }, [devModeUnlocked]);

  useEffect(() => {
    void Promise.allSettled([
      refreshOpencodeStatus(),
    ]);
  }, [refreshOpencodeStatus]);

  useEffect(() => {
    if (!devModeUnlocked) return;
    void Promise.allSettled([
      loadOpencodeRuntimeConfigSummary(),
      loadOpencodeProjects(),
    ]);
  }, [devModeUnlocked, loadOpencodeProjects, loadOpencodeRuntimeConfigSummary]);

  const proxySettingsDirty = useMemo(() => {
    return (
      proxyEnabledDraft !== proxyEnabled ||
      proxyServerDraft.trim() !== proxyServer ||
      proxyHttpServerDraft.trim() !== proxyHttpServer ||
      proxyHttpsServerDraft.trim() !== proxyHttpsServer ||
      proxyAllServerDraft.trim() !== proxyAllServer ||
      proxyBypassRulesDraft.trim() !== proxyBypassRules
    );
  }, [
    proxyAllServer,
    proxyAllServerDraft,
    proxyBypassRules,
    proxyBypassRulesDraft,
    proxyEnabled,
    proxyEnabledDraft,
    proxyHttpServer,
    proxyHttpServerDraft,
    proxyHttpsServer,
    proxyHttpsServerDraft,
    proxyServer,
    proxyServerDraft,
  ]);

  const handleSaveProxySettings = async () => {
    setSavingProxy(true);
    try {
      const normalizedProxyServer = proxyServerDraft.trim();
      const normalizedHttpServer = proxyHttpServerDraft.trim();
      const normalizedHttpsServer = proxyHttpsServerDraft.trim();
      const normalizedAllServer = proxyAllServerDraft.trim();
      const normalizedBypassRules = proxyBypassRulesDraft.trim();
      await invokeIpc('settings:setMany', {
        proxyEnabled: proxyEnabledDraft,
        proxyServer: normalizedProxyServer,
        proxyHttpServer: normalizedHttpServer,
        proxyHttpsServer: normalizedHttpsServer,
        proxyAllServer: normalizedAllServer,
        proxyBypassRules: normalizedBypassRules,
      });
      setProxyEnabled(proxyEnabledDraft);
      setProxyServer(normalizedProxyServer);
      setProxyHttpServer(normalizedHttpServer);
      setProxyHttpsServer(normalizedHttpsServer);
      setProxyAllServer(normalizedAllServer);
      setProxyBypassRules(normalizedBypassRules);
      toast.success('Proxy settings saved');
    } catch (error) {
      toast.error(`Failed to save proxy settings: ${toUserMessage(error)}`);
    } finally {
      setSavingProxy(false);
    }
  };

  const handleRefreshOpencodeSettings = () => {
    void Promise.allSettled([
      refreshOpencodeStatus(),
      loadOpencodeRuntimeConfigSummary(),
      loadOpencodeProjects(),
    ]);
  };

  const handleRevealAdditionalSettings = () => {
    if (showAdditionalSettings) {
      setShowAdditionalSettings(false);
      return;
    }
    if (devModeUnlocked) {
      setShowAdditionalSettings(true);
      return;
    }
    setAdminPassword('');
    setAdminPasswordError(null);
    setAdminDialogOpen(true);
  };

  const handleUnlockDevMode = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setAdminUnlocking(true);
    setAdminPasswordError(null);
    try {
      const unlocked = await unlockDevMode(adminPassword);
      if (!unlocked) {
        setAdminPasswordError(t('admin.invalidPassword', 'The administrator password is incorrect.'));
        return;
      }
      setAdminDialogOpen(false);
      setAdminPassword('');
      setShowAdditionalSettings(true);
    } finally {
      setAdminUnlocking(false);
    }
  };

  const handleLockDevMode = async () => {
    await lockDevMode();
    setShowAdditionalSettings(false);
  };

  const handleAddOpencodeProject = async () => {
    const project = await pickAndOpenOpencodeProject();
    if (!project) return;
    await activateVerifiedProject(project.id);
  };

  const activateVerifiedProject = async (projectId: string) => {
    try {
      setWorkspaceProjectError(null);
      const result = await loadProjectConfig(projectId);
      if (result.status === 'valid') {
        await setActiveOpencodeProject(projectId);
        return;
      }
      if (result.status === 'missing') {
        setWorkspaceProjectError('Project configuration is missing. Create the project from the sidebar first.');
        return;
      }
      setWorkspaceProjectError(result.error ?? 'Project configuration is invalid.');
    } catch (error) {
      setWorkspaceProjectError(error instanceof Error ? error.message : String(error));
    }
  };

  const handleShowLogs = async () => {
    try {
      const logs = await hostApiFetch<{ content: string }>('/api/logs?tailLines=100');
      setLogContent(logs.content);
      setShowLogs(true);
    } catch {
      setLogContent('(Failed to load logs)');
      setShowLogs(true);
    }
  };

  const handleOpenLogDir = async () => {
    try {
      const { dir: logDir } = await hostApiFetch<{ dir: string | null }>('/api/logs/dir');
      if (logDir) {
        await invokeIpc('shell:showItemInFolder', logDir);
      }
    } catch {
      // ignore
    }
  };

  return (
    <main data-testid="settings-page" className="min-h-full bg-background">
      <div className="mx-auto flex max-w-4xl flex-col gap-8 px-8 py-8">
        <div>
          <h1 className="text-2xl font-semibold tracking-normal">{t('title')}</h1>
        </div>

        <section className="space-y-5" data-testid="settings-general-section">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-lg font-medium">{t('appearance.title')}</h2>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="h-8 w-8 bg-transparent text-muted-foreground/70 hover:bg-accent/60 hover:text-foreground"
                aria-label={t('appearance.showMoreSettings')}
                aria-expanded={showAdditionalSettings}
                data-testid="settings-reveal-additional"
                onClick={handleRevealAdditionalSettings}
              >
                <ChevronDown
                  className={cn(
                    'h-4 w-4 transition-transform duration-200 ease-out',
                    showAdditionalSettings && 'rotate-180'
                  )}
                />
              </Button>
            </div>
          </div>

          <div className="grid gap-3 rounded-lg border bg-card p-4">
            <Label htmlFor="language">{t('appearance.language')}</Label>
            <select
              id="language"
              value="zh"
              onChange={(event) => setLanguage(event.target.value)}
              className="h-10 rounded-md border bg-background px-3 text-sm"
            >
              {SUPPORTED_LANGUAGES.map((item) => (
                <option key={item.code} value={item.code}>
                  {item.label}
                </option>
              ))}
            </select>
          </div>

          <div className="flex items-center justify-between rounded-lg border bg-card p-4">
            <div>
              <Label className="text-sm font-medium">{t('appearance.launchAtStartup')}</Label>
              <p className="text-sm text-muted-foreground">{t('appearance.launchAtStartupDesc')}</p>
            </div>
            <Switch checked={launchAtStartup} onCheckedChange={setLaunchAtStartup} />
          </div>
        </section>

        <section className="space-y-5" data-testid="settings-runtime-summary">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h2 className="text-lg font-medium">Runtime</h2>
            </div>
            <Badge variant={opencodeStatus.state === 'running' ? 'default' : 'secondary'}>
              {opencodeStatus.state}
            </Badge>
          </div>

          <div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-card p-4">
            <div className="flex min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-sm">
              <div>
                <div className="text-xs text-muted-foreground">Status</div>
                <div className="font-medium">{opencodeStatus.state}</div>
              </div>
              <div>
                <div className="text-xs text-muted-foreground">Port</div>
                <div className="font-medium">{opencodeStatus.port}</div>
              </div>
            </div>
            <Button
              variant="outline"
              onClick={() => void restartOpencodeRuntime()}
              disabled={opencodeLoading}
              aria-label="Restart runtime"
              data-testid="settings-runtime-restart"
            >
              <RotateCw className={cn('mr-2 h-4 w-4', opencodeLoading && 'animate-spin')} />
              Restart runtime
            </Button>
          </div>

          {(opencodeStatus.error || opencodeError) && (
            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
              {opencodeStatus.error ?? opencodeError}
            </div>
          )}
        </section>

        <Separator />

        <section className="space-y-5" data-testid="settings-updates">
          <div>
            <h2 className="text-lg font-medium">{t('updates.title')}</h2>
          </div>
          <div className="rounded-lg border bg-card p-4">
            <UpdateSettings />
          </div>
        </section>

        <Dialog
          open={adminDialogOpen}
          onOpenChange={(open) => {
            setAdminDialogOpen(open);
            if (!open) {
              setAdminPassword('');
              setAdminPasswordError(null);
            }
          }}
        >
          <DialogContent data-testid="settings-admin-password-dialog" className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <KeyRound className="h-5 w-5 text-brand" />
                {t('admin.title', '管理员验证')}
              </DialogTitle>
              <DialogDescription>
                {t('admin.description', '请输入管理员密码以管理开发者设置。')}
              </DialogDescription>
            </DialogHeader>
            <form className="space-y-4" onSubmit={handleUnlockDevMode}>
              <div className="space-y-2">
                <Label htmlFor="settings-admin-password">{t('admin.password', '管理员密码')}</Label>
                <Input
                  id="settings-admin-password"
                  type="password"
                  value={adminPassword}
                  onChange={(event) => setAdminPassword(event.target.value)}
                  autoFocus
                  autoComplete="current-password"
                  data-testid="settings-admin-password-input"
                  aria-invalid={Boolean(adminPasswordError)}
                />
                {adminPasswordError && (
                  <p className="text-sm text-destructive" role="alert">
                    {adminPasswordError}
                  </p>
                )}
              </div>
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setAdminDialogOpen(false)}>
                  {t('admin.cancel', '取消')}
                </Button>
                <Button
                  type="submit"
                  disabled={!adminPassword.trim() || adminUnlocking}
                  data-testid="settings-admin-unlock-button"
                >
                  {adminUnlocking && <RefreshCw className="mr-2 h-4 w-4 animate-spin" />}
                  {t('admin.unlock', '解锁管理设置')}
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>

        {showAdditionalSettings && devModeUnlocked && (
          <DisclosureContent open innerClassName="space-y-8">
            <Separator />

            <section className="space-y-5" data-testid="settings-opencode-workspace">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h2 className="text-lg font-medium">Workspace</h2>
                  <p className="text-sm text-muted-foreground">
                    Configure the local runtime and project workspace.
                  </p>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleRefreshOpencodeSettings}
                  disabled={opencodeLoading}
                  aria-label="Refresh runtime settings"
                >
                  <RefreshCw className={cn('mr-2 h-4 w-4', opencodeLoading && 'animate-spin')} />
                  Refresh
                </Button>
              </div>

              <div
                className="space-y-4 rounded-lg border bg-card p-4"
                data-testid="settings-opencode-models"
              >
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <Label className="text-sm font-medium">Models</Label>
                    <p className="text-sm text-muted-foreground">
                      Resolved from the runtime configuration.
                    </p>
                  </div>
                  <Button variant="outline" size="sm" onClick={() => navigate('/models')}>
                    Configure models
                  </Button>
                </div>
                <div className="space-y-3 text-sm">
                  <div>
                    <div className="text-xs text-muted-foreground">Default model</div>
                    <div className="break-all font-medium">
                      {opencodeRuntimeConfigSummary?.model ?? 'No configured model'}
                    </div>
                  </div>
                  <div>
                    <div className="text-xs text-muted-foreground">Small model</div>
                    <div className="break-all font-medium">
                      {opencodeRuntimeConfigSummary?.smallModel ?? 'No configured small model'}
                    </div>
                  </div>
                  <div className="flex items-center justify-between gap-3">
                    <span className="text-muted-foreground">Providers</span>
                    <span className="font-medium">
                      {`${opencodeRuntimeConfigSummary?.providerCount ?? 0} providers`}
                    </span>
                  </div>
                </div>
              </div>

              <div className="space-y-4 rounded-lg border bg-card p-4">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <Label className="text-sm font-medium">Projects</Label>
                    <p className="text-sm text-muted-foreground">
                      Folders opened as project workspaces.
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => void handleAddOpencodeProject()}
                    disabled={opencodeLoading}
                    aria-label="Add project"
                  >
                    <FolderPlus className="mr-2 h-4 w-4" />
                    Add project
                  </Button>
                </div>

                <div className="rounded-md border bg-background/60 p-3">
                  <div className="text-xs text-muted-foreground">Active project</div>
                  <div className="mt-1 truncate text-sm font-medium">
                    {activeOpencodeProject?.name ?? 'No project selected'}
                  </div>
                  <div className="mt-1 truncate text-xs text-muted-foreground">
                    {activeOpencodeProject?.path ?? 'Add a project folder to start a session.'}
                  </div>
                </div>

                {workspaceProjectError && (
                  <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                    {workspaceProjectError}
                  </div>
                )}

                {opencodeProjects.length > 0 && (
                  <div className="max-h-56 space-y-2 overflow-auto pr-1">
                    {opencodeProjects.map((project) => {
                      const active = activeOpencodeProject?.id === project.id;
                      return (
                        <div
                          key={project.id}
                          className="flex items-center justify-between gap-3 rounded-md border bg-background/50 px-3 py-2"
                        >
                          <div className="min-w-0">
                            <div className="truncate text-sm font-medium">{project.name}</div>
                            <div className="truncate text-xs text-muted-foreground">
                              {project.path}
                            </div>
                          </div>
                          <Button
                            variant={active ? 'secondary' : 'outline'}
                            size="sm"
                            disabled={active || opencodeLoading}
                            onClick={() => void activateVerifiedProject(project.id)}
                            aria-label={
                              active
                                ? `Active project ${project.name}`
                                : `Use project ${project.name}`
                            }
                          >
                            {active ? 'Active' : 'Use'}
                          </Button>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            </section>

            <Separator />

            <section className="space-y-5" data-testid="settings-proxy-section">
              <div>
                <h2 className="text-lg font-medium">Network</h2>
                <p className="text-sm text-muted-foreground">
                  Configure proxy settings used by Makelore runtime.
                </p>
              </div>

              <div className="space-y-4 rounded-lg border bg-card p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Proxy</Label>
                    <p className="text-sm text-muted-foreground">
                      Route local runtime traffic through a proxy.
                    </p>
                  </div>
                  <Switch
                    data-testid="settings-proxy-toggle"
                    checked={proxyEnabledDraft}
                    onCheckedChange={setProxyEnabledDraft}
                  />
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="proxy-server">Proxy Server</Label>
                    <Input
                      id="proxy-server"
                      value={proxyServerDraft}
                      onChange={(event) => setProxyServerDraft(event.target.value)}
                      placeholder="http://127.0.0.1:7890"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="proxy-http-server">HTTP Proxy</Label>
                    <Input
                      id="proxy-http-server"
                      value={proxyHttpServerDraft}
                      onChange={(event) => setProxyHttpServerDraft(event.target.value)}
                      placeholder="http://127.0.0.1:7890"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="proxy-https-server">HTTPS Proxy</Label>
                    <Input
                      id="proxy-https-server"
                      value={proxyHttpsServerDraft}
                      onChange={(event) => setProxyHttpsServerDraft(event.target.value)}
                      placeholder="http://127.0.0.1:7890"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="proxy-all-server">ALL_PROXY / SOCKS</Label>
                    <Input
                      id="proxy-all-server"
                      value={proxyAllServerDraft}
                      onChange={(event) => setProxyAllServerDraft(event.target.value)}
                      placeholder="socks5://127.0.0.1:7890"
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="proxy-bypass">Bypass Rules</Label>
                  <Input
                    id="proxy-bypass"
                    value={proxyBypassRulesDraft}
                    onChange={(event) => setProxyBypassRulesDraft(event.target.value)}
                    placeholder="localhost,127.0.0.1"
                  />
                </div>

                <div className="flex justify-end">
                  <Button
                    data-testid="settings-proxy-save-button"
                    onClick={handleSaveProxySettings}
                    disabled={!proxySettingsDirty || savingProxy}
                  >
                    {savingProxy ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : null}
                    Save Proxy
                  </Button>
                </div>
              </div>
            </section>

            <Separator />

            <section className="space-y-5" data-testid="settings-advanced-section">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h2 className="text-lg font-medium">{t('advanced.title')}</h2>
                  <p className="text-sm text-muted-foreground">{t('advanced.description')}</p>
                </div>
                <Button variant="ghost" size="sm" onClick={() => void handleLockDevMode()}>
                  {t('admin.lock', '锁定')}
                </Button>
              </div>

              <div className="flex items-center justify-between rounded-lg border bg-card p-4">
                <div>
                  <Label className="text-sm font-medium">{t('advanced.devMode')}</Label>
                  <p className="text-sm text-muted-foreground">
                    {t('advanced.sessionUnlocked', '管理员权限已在本次应用运行期间解锁。')}
                  </p>
                </div>
                <Badge variant="secondary">{t('admin.unlocked', '已解锁')}</Badge>
              </div>

              <div className="flex items-center justify-between rounded-lg border bg-card p-4">
                <div>
                  <Label className="text-sm font-medium">{t('advanced.telemetry')}</Label>
                  <p className="text-sm text-muted-foreground">{t('advanced.telemetryDesc')}</p>
                </div>
                <Switch checked={telemetryEnabled} onCheckedChange={setTelemetryEnabled} />
              </div>

              <div className="rounded-lg border bg-card p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Application Logs</Label>
                    <p className="text-sm text-muted-foreground">
                      Inspect recent local application logs.
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={handleShowLogs}>
                      <FileText className="mr-2 h-4 w-4" />
                      View Logs
                    </Button>
                    <Button variant="outline" size="sm" onClick={handleOpenLogDir}>
                      <ExternalLink className="mr-2 h-4 w-4" />
                      Open Folder
                    </Button>
                  </div>
                </div>
                <DisclosureContent open={showLogs} className="mt-4" innerClassName="max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-xs">
                  {logContent || '(No logs available yet)'}
                </DisclosureContent>
              </div>

              <div className="rounded-lg border bg-card p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Telemetry Viewer</Label>
                    <p className="text-sm text-muted-foreground">
                      Local-only UI and performance events.
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setShowTelemetryViewer((value) => !value)}
                    >
                      {showTelemetryViewer ? 'Hide' : 'Show'}
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        clearUiTelemetry();
                        setTelemetryEntries([]);
                      }}
                    >
                      Clear
                    </Button>
                  </div>
                </div>
                <DisclosureContent open={showTelemetryViewer} className="mt-4" innerClassName="max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-xs">
                  {telemetryEntries.length > 0
                    ? JSON.stringify(telemetryEntries, null, 2)
                    : '(No telemetry entries)'}
                </DisclosureContent>
              </div>
            </section>
          </DisclosureContent>
        )}
      </div>
    </main>
  );
}

export default Settings;