"use client";

import { useState, useEffect } from "react";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { trpc } from "~/lib/trpc/client.js";

const INPUT_CLASS = "app-input";
const LABEL_CLASS = "app-label";
const PANEL_CLASS = "app-surface p-6 space-y-5";
const PANEL_STRONG_CLASS = "app-surface-strong p-6 space-y-6";
const PRIMARY_BUTTON_CLASS =
  "rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50";
const SECONDARY_BUTTON_CLASS =
  "rounded-xl border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
const CHECKBOX_ROW_CLASS =
  "flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300";

type Provider = "openai" | "azure";

const ALL_ROLES = ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] as const;
type SystemRole = (typeof ALL_ROLES)[number];

interface ScoreWeights {
  skillDepth: number;
  skillBreadth: number;
  costEfficiency: number;
  chargeability: number;
  experience: number;
}

type ParsedAzureUrl = {
  endpoint: string;
  apiVersion: string;
  deployment: string | null; // null for Responses API URLs (deployment not in path)
  urlType: "completions" | "responses";
};

/** Parse endpoint, deployment, and api-version out of an Azure URL.
 *  Supports both Chat Completions and Responses API formats. */
function parseAzureUrl(raw: string): ParsedAzureUrl | null {
  try {
    const url = new URL(raw);
    const endpoint = `${url.protocol}//${url.host}`;
    const apiVersion = url.searchParams.get("api-version") ?? "2025-01-01-preview";

    // Chat Completions: /openai/deployments/{name}/chat/completions
    const completionsMatch = url.pathname.match(/\/openai\/deployments\/([^/]+)\//);
    if (completionsMatch) {
      return { endpoint, apiVersion, deployment: completionsMatch[1]!, urlType: "completions" };
    }

    // Responses API: /openai/responses
    if (url.pathname.includes("/openai/responses")) {
      return { endpoint, apiVersion, deployment: null, urlType: "responses" };
    }

    return null;
  } catch {
    return null;
  }
}

export function SystemSettingsClient() {
  const [provider, setProvider] = useState<Provider>("openai");
  const [endpoint, setEndpoint] = useState("");
  const [model, setModel] = useState("");
  const [apiVersion, setApiVersion] = useState("2025-01-01-preview");
  const [apiKey, setApiKey] = useState("");
  const [maxTokens, setMaxTokens] = useState(2000);
  const [temperature, setTemperature] = useState(1);
  const [summaryPrompt, setSummaryPrompt] = useState("");
  const [saved, setSaved] = useState(false);
  const [testResult, setTestResult] = useState<{
    ok: boolean;
    error?: string;
    raw?: string | null;
  } | null>(null);
  const [urlPasteValue, setUrlPasteValue] = useState("");
  const [urlParseError, setUrlParseError] = useState(false);
  const [urlParsedType, setUrlParsedType] = useState<"completions" | "responses" | null>(null);

  // Value Score settings
  const [scoreWeights, setScoreWeights] = useState<ScoreWeights>({
    skillDepth: 0.3,
    skillBreadth: 0.15,
    costEfficiency: 0.25,
    chargeability: 0.15,
    experience: 0.15,
  });
  const [scoreVisibleRoles, setScoreVisibleRoles] = useState<SystemRole[]>(["ADMIN", "MANAGER"]);
  const [scoreSaved, setScoreSaved] = useState(false);
  const [recomputeResult, setRecomputeResult] = useState<{ updated: number } | null>(null);

  // DALL-E settings
  const [dalleDeployment, setDalleDeployment] = useState("");
  const [dalleEndpoint, setDalleEndpoint] = useState("");
  const [dalleApiKey, setDalleApiKey] = useState("");

  // Gemini / Image generation settings
  type ImageProvider = "dalle" | "gemini";
  const [imageProvider, setImageProvider] = useState<ImageProvider>("dalle");
  const [geminiApiKey, setGeminiApiKey] = useState("");
  const [geminiModel, setGeminiModel] = useState("");
  const [imageSaved, setImageSaved] = useState(false);

  // SMTP settings
  const [smtpHost, setSmtpHost] = useState("");
  const [smtpPort, setSmtpPort] = useState(587);
  const [smtpUser, setSmtpUser] = useState("");
  const [smtpPassword, setSmtpPassword] = useState("");
  const [smtpFrom, setSmtpFrom] = useState("");
  const [smtpTls, setSmtpTls] = useState(true);
  const [smtpSaved, setSmtpSaved] = useState(false);
  const [smtpTestResult, setSmtpTestResult] = useState<{ ok: boolean; error?: string } | null>(
    null,
  );

  // Global anonymization
  const [anonymizationEnabled, setAnonymizationEnabled] = useState(false);
  const [anonymizationDomain, setAnonymizationDomain] = useState("superhartmut.de");
  const [anonymizationSeed, setAnonymizationSeed] = useState("");
  const [anonymizationSaved, setAnonymizationSaved] = useState(false);

  // Vacation defaults
  const [vacationDefaultDays, setVacationDefaultDays] = useState(28);
  const [vacationSaved, setVacationSaved] = useState(false);

  // Timeline
  const [undoMaxSteps, setUndoMaxSteps] = useState(50);
  const [timelineSaved, setTimelineSaved] = useState(false);

  const { data: settings, isLoading } = trpc.settings.getSystemSettings.useQuery(undefined, {
    staleTime: 0,
  });

  useEffect(() => {
    if (settings) {
      setProvider((settings.aiProvider ?? "openai") as Provider);
      setEndpoint(settings.azureOpenAiEndpoint ?? "");
      setModel(settings.azureOpenAiDeployment ?? "");
      setApiVersion(settings.azureApiVersion ?? "2025-01-01-preview");
      setMaxTokens(settings.aiMaxCompletionTokens ?? 2000);
      setTemperature(settings.aiTemperature ?? 1);
      setSummaryPrompt(settings.aiSummaryPrompt ?? "");
      if (settings.scoreWeights) {
        setScoreWeights(settings.scoreWeights as ScoreWeights);
      }
      if (settings.scoreVisibleRoles) {
        setScoreVisibleRoles(settings.scoreVisibleRoles as SystemRole[]);
      }
      // DALL-E
      setDalleDeployment(settings.azureDalleDeployment ?? "");
      setDalleEndpoint(settings.azureDalleEndpoint ?? "");
      // Image provider / Gemini
      setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
      setGeminiModel(settings.geminiModel ?? "");
      // SMTP
      setSmtpHost(settings.smtpHost ?? "");
      setSmtpPort(settings.smtpPort ?? 587);
      setSmtpUser(settings.smtpUser ?? "");
      setSmtpFrom(settings.smtpFrom ?? "");
      setSmtpTls(settings.smtpTls ?? true);
      // Global anonymization
      setAnonymizationEnabled(settings.anonymizationEnabled ?? false);
      setAnonymizationDomain(settings.anonymizationDomain ?? "superhartmut.de");
      setAnonymizationSeed("");
      // Vacation
      setVacationDefaultDays(settings.vacationDefaultDays ?? 28);
      // Timeline
      setUndoMaxSteps(settings.timelineUndoMaxSteps ?? 50);
    }
  }, [settings]);

  function handleUrlPaste(raw: string) {
    setUrlPasteValue(raw);
    if (!raw) {
      setUrlParseError(false);
      setUrlParsedType(null);
      return;
    }
    const parsed = parseAzureUrl(raw);
    if (parsed) {
      setEndpoint(parsed.endpoint);
      setApiVersion(parsed.apiVersion);
      if (parsed.deployment) setModel(parsed.deployment);
      setUrlParseError(false);
      setUrlParsedType(parsed.urlType);
      setUrlPasteValue("");
    } else {
      setUrlParseError(true);
      setUrlParsedType(null);
    }
  }

  const updateMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setSaved(true);
      setTestResult(null);
      setTimeout(() => setSaved(false), 3000);
    },
  });

  const testMutation = trpc.settings.testAiConnection.useMutation({
    onSuccess: (data) => setTestResult(data),
    onError: (err) => setTestResult({ ok: false, error: err.message }),
  });

  const saveScoreMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setScoreSaved(true);
      setTimeout(() => setScoreSaved(false), 3000);
    },
  });

  const recomputeMutation = trpc.resource.recomputeValueScores.useMutation({
    onSuccess: (data) => setRecomputeResult(data),
  });

  const saveSmtpMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setSmtpSaved(true);
      setSmtpTestResult(null);
      setTimeout(() => setSmtpSaved(false), 3000);
    },
  });

  const testSmtpMutation = trpc.settings.testSmtpConnection.useMutation({
    onSuccess: (data) => setSmtpTestResult(data),
    onError: (err) => setSmtpTestResult({ ok: false, error: err.message }),
  });

  const saveAnonymizationMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setAnonymizationSaved(true);
      setTimeout(() => setAnonymizationSaved(false), 3000);
    },
  });

  const saveVacationMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setVacationSaved(true);
      setTimeout(() => setVacationSaved(false), 3000);
    },
  });

  const saveTimelineMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setTimelineSaved(true);
      setTimeout(() => setTimelineSaved(false), 3000);
    },
  });

  const saveImageMutation = trpc.settings.updateSystemSettings.useMutation({
    onSuccess: () => {
      setImageSaved(true);
      setTimeout(() => setImageSaved(false), 3000);
    },
  });

  const [geminiTestResult, setGeminiTestResult] = useState<{ ok: boolean; model?: string; error?: string } | null>(null);
  const testGeminiMut = trpc.settings.testGeminiConnection.useMutation({
    onSuccess: (data) => setGeminiTestResult(data as any),
    onError: (err) => setGeminiTestResult({ ok: false, error: err.message }),
  });

  function handleSaveSmtp() {
    saveSmtpMutation.mutate({
      smtpHost: smtpHost || undefined,
      smtpPort,
      smtpUser: smtpUser || undefined,
      ...(smtpPassword ? { smtpPassword } : {}),
      smtpFrom: smtpFrom || undefined,
      smtpTls,
    });
  }

  function handleSaveVacation() {
    saveVacationMutation.mutate({ vacationDefaultDays });
  }

  function handleSaveTimeline() {
    saveTimelineMutation.mutate({ timelineUndoMaxSteps: undoMaxSteps });
  }

  function handleSaveImage() {
    saveImageMutation.mutate({
      imageProvider,
      // DALL-E fields
      azureDalleDeployment: dalleDeployment || undefined,
      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
      // Gemini fields
      ...(geminiApiKey ? { geminiApiKey } : {}),
      geminiModel: geminiModel || undefined,
    });
  }

  function handleSaveAnonymization() {
    saveAnonymizationMutation.mutate({
      anonymizationEnabled,
      anonymizationDomain: anonymizationDomain.trim() || "superhartmut.de",
      ...(anonymizationSeed.trim() ? { anonymizationSeed: anonymizationSeed.trim() } : {}),
      anonymizationMode: "global",
    });
  }

  function handleSaveScoreSettings() {
    saveScoreMutation.mutate({ scoreWeights, scoreVisibleRoles });
  }

  function updateWeight(key: keyof ScoreWeights, value: number) {
    setScoreWeights((prev) => ({ ...prev, [key]: value }));
  }

  function toggleRole(role: SystemRole) {
    setScoreVisibleRoles((prev) =>
      prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role],
    );
  }

  const weightSum = Object.values(scoreWeights).reduce((s, v) => s + v, 0);
  const weightSumOk = Math.abs(weightSum - 1.0) < 0.01;

  function handleSave() {
    updateMutation.mutate({
      aiProvider: provider,
      azureOpenAiEndpoint: provider === "azure" ? endpoint : "",
      azureOpenAiDeployment: model,
      azureApiVersion: provider === "azure" ? apiVersion : undefined,
      aiMaxCompletionTokens: maxTokens,
      aiTemperature: temperature,
      aiSummaryPrompt: summaryPrompt || undefined,
      ...(apiKey ? { azureOpenAiApiKey: apiKey } : {}),
    });
  }

  if (isLoading) {
    return (
      <div className="app-page">
        <div className="h-8 w-48 shimmer-skeleton rounded" />
      </div>
    );
  }

  return (
    <div className="app-page space-y-6">
      <div className="app-page-header gap-4">
        <div>
          <h1 className="app-page-title">System Settings</h1>
          <p className="app-page-subtitle mt-1">
            Configure AI integration for skill profile generation.
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
        <div className={PANEL_CLASS}>
          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
            AI Provider <InfoTooltip content="Configure the AI service used for generating resource skill profile summaries. Either OpenAI directly or Azure OpenAI Service." />
          </h2>

          {/* Provider toggle */}
          <div>
            <label className={LABEL_CLASS}>Provider</label>
            <div className="flex w-fit overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
              <button
                type="button"
                onClick={() => {
                  setProvider("openai");
                  setTestResult(null);
                }}
                className={`px-4 py-2 text-sm font-semibold transition-colors ${
                  provider === "openai"
                    ? "bg-brand-600 text-white"
                    : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                }`}
              >
                OpenAI
              </button>
              <button
                type="button"
                onClick={() => {
                  setProvider("azure");
                  setTestResult(null);
                }}
                className={`border-l border-gray-200 px-4 py-2 text-sm font-semibold transition-colors dark:border-gray-600 ${
                  provider === "azure"
                    ? "bg-brand-600 text-white"
                    : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                }`}
              >
                Azure OpenAI
              </button>
            </div>
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1.5">
              {provider === "openai"
                ? "Use a standard OpenAI API key from platform.openai.com."
                : "Use a deployment on your own Azure OpenAI resource."}
            </p>
          </div>

          {/* Azure-only fields */}
          {provider === "azure" && (
            <>
              {/* Paste full URL shortcut */}
              <div className="rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 space-y-2 dark:border-blue-700 dark:bg-blue-900/20">
                <p className="text-xs font-medium text-blue-800 dark:text-blue-300">
                  Paste a full completion URL to auto-fill all fields below:
                </p>
                <input
                  type="url"
                  className={`${INPUT_CLASS} border-blue-300 dark:border-blue-600`}
                  placeholder="https://…cognitiveservices.azure.com/openai/deployments/gpt-5/chat/completions?api-version=2025-01-01-preview"
                  value={urlPasteValue}
                  onChange={(e) => handleUrlPaste(e.target.value)}
                />
                {urlParseError && (
                  <p className="text-xs text-red-600 dark:text-red-400">
                    Could not parse URL — expected either a Chat Completions URL (
                    <code className="font-mono">/openai/deployments/…/chat/completions</code>) or a
                    Responses API URL (<code className="font-mono">/openai/responses</code>).
                  </p>
                )}
                {urlParsedType === "responses" && (
                  <p className="text-xs text-amber-700 dark:text-amber-400">
                    Responses API URL detected — endpoint and api-version filled in. Enter the{" "}
                    <strong>deployment/model name</strong> manually below (it is not part of this
                    URL).
                  </p>
                )}
                {urlParsedType === "completions" && (
                  <p className="text-xs text-green-700 dark:text-green-400">
                    All fields filled from URL.
                  </p>
                )}
              </div>

              <div>
                <label className={LABEL_CLASS} htmlFor="ai-endpoint">
                  Endpoint (base URL)
                </label>
                <input
                  id="ai-endpoint"
                  type="url"
                  className={INPUT_CLASS}
                  placeholder="https://myinstance.cognitiveservices.azure.com"
                  value={endpoint}
                  onChange={(e) => setEndpoint(e.target.value)}
                />
                <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
                  Everything up to (not including) <code className="font-mono">/openai/…</code>
                </p>
              </div>
            </>
          )}

          {/* Model / deployment name */}
          <div>
            <label className={LABEL_CLASS} htmlFor="ai-model">
              {provider === "azure" ? "Deployment Name" : "Model Name"}
            </label>
            <input
              id="ai-model"
              type="text"
              className={INPUT_CLASS}
              placeholder={provider === "azure" ? "my-gpt4o-deployment" : "gpt-4o-mini"}
              value={model}
              onChange={(e) => setModel(e.target.value)}
            />
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              {provider === "azure"
                ? "The deployment name you chose when deploying the model in Azure."
                : "The model identifier, e.g. gpt-4o-mini, gpt-4o, gpt-3.5-turbo."}
            </p>
          </div>

          {/* Azure-only: api version */}
          {provider === "azure" && (
            <div>
              <label className={LABEL_CLASS} htmlFor="ai-api-version">
                API Version
              </label>
              <input
                id="ai-api-version"
                type="text"
                className={INPUT_CLASS}
                placeholder="2025-01-01-preview"
                value={apiVersion}
                onChange={(e) => setApiVersion(e.target.value)}
              />
              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
                The <code className="font-mono">api-version</code> query parameter from your
                endpoint URL. Default: <code className="font-mono">2025-01-01-preview</code>
              </p>
            </div>
          )}

          {/* API key */}
          <div>
            <label className={LABEL_CLASS} htmlFor="ai-key">
              API Key
            </label>
            <input
              id="ai-key"
              type="password"
              className={INPUT_CLASS}
              placeholder={
                settings?.hasApiKey
                  ? "●●●●●●●●●●●● (already set — enter new value to replace)"
                  : provider === "openai"
                    ? "sk-..."
                    : "Enter Azure API key"
              }
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              autoComplete="new-password"
            />
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              {provider === "openai"
                ? "Your secret key from platform.openai.com → API keys. Starts with sk-."
                : "One of the two keys from Azure Portal → your resource → Keys and Endpoint."}
              {settings?.hasApiKey && " Leave blank to keep the existing key."}
            </p>
          </div>

          {/* Test result */}
          {testResult && (
            <div
              className={`rounded-2xl px-4 py-3 text-sm ${
                testResult.ok
                  ? "bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 text-green-700 dark:text-green-300"
                  : "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-300"
              }`}
            >
              {testResult.ok ? (
                <span className="font-medium">
                  Connection successful — AI summaries are ready to use.
                </span>
              ) : (
                <div className="space-y-2">
                  <p>
                    <span className="font-medium">Connection failed:</span> {testResult.error}
                  </p>
                  {testResult.raw && (
                    <details className="text-xs">
                      <summary className="cursor-pointer opacity-70 hover:opacity-100">
                        Show raw error
                      </summary>
                      <pre className="mt-1 p-2 bg-red-100 dark:bg-red-950 rounded text-red-800 dark:text-red-200 whitespace-pre-wrap break-all font-mono">
                        {testResult.raw}
                      </pre>
                    </details>
                  )}
                </div>
              )}
            </div>
          )}

          <div className="flex items-center gap-3 pt-2">
            <button
              type="button"
              onClick={handleSave}
              disabled={updateMutation.isPending}
              className={PRIMARY_BUTTON_CLASS}
            >
              {updateMutation.isPending ? "Saving…" : "Save Settings"}
            </button>
            <button
              type="button"
              onClick={() => {
                setTestResult(null);
                testMutation.mutate();
              }}
              disabled={testMutation.isPending}
              className={SECONDARY_BUTTON_CLASS}
            >
              {testMutation.isPending ? "Testing…" : "Test Connection"}
            </button>
            {saved && (
              <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
            )}
          </div>
        </div>

        {/* Generation settings */}
        <div className={PANEL_CLASS}>
          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
            Generation Settings <InfoTooltip content="Fine-tune how the AI generates skill profile summaries. These settings affect output length, creativity, and the prompt template." />
          </h2>

          {/* Max completion tokens */}
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className={LABEL_CLASS} htmlFor="ai-max-tokens">
                Max Completion Tokens
              </label>
              <span className="text-sm font-mono text-brand-600 dark:text-brand-400">
                {maxTokens}
              </span>
            </div>
            <input
              id="ai-max-tokens"
              type="range"
              min={50}
              max={2000}
              step={50}
              value={maxTokens}
              onChange={(e) => setMaxTokens(Number(e.target.value))}
              className="w-full accent-brand-600"
            />
            <div className="flex justify-between text-xs text-gray-400 mt-1">
              <span>500</span>
              <span className="text-gray-500 dark:text-gray-400">
                {maxTokens < 1000
                  ? "⚠ May be empty for reasoning models (GPT-5, o1, o3)"
                  : maxTokens <= 2000
                    ? "Recommended for reasoning models ✓"
                    : maxTokens <= 4000
                      ? "High — allows longer bios"
                      : "Very high"}
              </span>
              <span>16000</span>
            </div>
            <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
              Reasoning models (GPT-5, o1, o3) consume tokens internally before writing output. Set
              to at least 2000 to avoid empty responses.
            </p>
          </div>

          {/* Temperature */}
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className={LABEL_CLASS} htmlFor="ai-temperature">
                Temperature
              </label>
              <span className="text-sm font-mono text-brand-600 dark:text-brand-400">
                {temperature.toFixed(1)}
              </span>
            </div>
            <input
              id="ai-temperature"
              type="range"
              min={0}
              max={2}
              step={0.1}
              value={temperature}
              onChange={(e) => setTemperature(Number(e.target.value))}
              className="w-full accent-brand-600"
            />
            <div className="flex justify-between text-xs text-gray-400 mt-1">
              <span>0 — deterministic</span>
              <span className="text-gray-500 dark:text-gray-400">
                {temperature <= 0.3
                  ? "Factual & consistent"
                  : temperature <= 0.9
                    ? "Balanced"
                    : temperature <= 1.0
                      ? "Default (1) — recommended ✓"
                      : temperature <= 1.2
                        ? "Creative"
                        : "Very creative / unpredictable"}
              </span>
              <span>2 — creative</span>
            </div>
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              Some models (e.g. GPT-5) only accept the default value of 1. If generation fails with
              a temperature error, the system retries automatically without it.
            </p>
          </div>

          {/* Summary prompt */}
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className={LABEL_CLASS} htmlFor="ai-prompt">
                Profile Summary Prompt
              </label>
              {summaryPrompt && (
                <button
                  type="button"
                  onClick={() => setSummaryPrompt("")}
                  className="text-xs text-brand-600 hover:underline"
                >
                  Reset to default
                </button>
              )}
            </div>
            <textarea
              id="ai-prompt"
              rows={10}
              value={summaryPrompt || (settings?.defaultSummaryPrompt ?? "")}
              onChange={(e) => setSummaryPrompt(e.target.value)}
              className={`${INPUT_CLASS} font-mono text-xs leading-relaxed resize-y`}
              spellCheck={false}
            />
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              Available placeholders: <code className="font-mono">{"{role}"}</code>{" "}
              <code className="font-mono">{"{chapter}"}</code>{" "}
              <code className="font-mono">{"{mainSkills}"}</code>{" "}
              <code className="font-mono">{"{topSkills}"}</code>
            </p>
          </div>

          <div className="flex items-center gap-3 pt-1">
            <button
              type="button"
              onClick={handleSave}
              disabled={updateMutation.isPending}
              className={PRIMARY_BUTTON_CLASS}
            >
              {updateMutation.isPending ? "Saving…" : "Save Settings"}
            </button>
            {saved && (
              <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
            )}
          </div>
        </div>
      </div>
      {/* end 2-col grid */}

      {/* Value Score Settings */}
      <div className={PANEL_STRONG_CLASS}>
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">
              Value Score
            </h2>
            <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
              A persistent 0–100 <em>price/quality</em> metric per resource — five weighted
              dimensions combined. Recompute on demand after changing weights or importing new skill
              matrices.
            </p>
          </div>
          <div className="flex-shrink-0 whitespace-nowrap rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 font-mono text-[11px] text-gray-700 dark:border-gray-600 dark:bg-gray-700/50 dark:text-gray-300">
            round(<span className="text-brand-600 dark:text-brand-400">D</span>·w₁ +{" "}
            <span className="text-brand-600 dark:text-brand-400">B</span>·w₂ +{" "}
            <span className="text-brand-600 dark:text-brand-400">C</span>·w₃ +{" "}
            <span className="text-brand-600 dark:text-brand-400">A</span>·w₄ +{" "}
            <span className="text-brand-600 dark:text-brand-400">E</span>·w₅)
          </div>
        </div>

        {/* Weight sliders — compact grid */}
        <div>
          <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
            Dimension Weights — must sum to 100%
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-3">
            {/* Skill Depth */}
            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
              <div className="flex items-center gap-2 mb-2">
                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
                  D
                </span>
                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
                  Skill Depth
                </span>
                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
                  {Math.round(scoreWeights.skillDepth * 100)}%
                </span>
              </div>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={Math.round(scoreWeights.skillDepth * 100)}
                onChange={(e) => updateWeight("skillDepth", Number(e.target.value) / 100)}
                className="w-full accent-brand-600"
              />
              <details className="mt-1.5">
                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
                  Show details
                </summary>
                <div className="mt-2 space-y-1.5">
                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    Average proficiency (1–5) across all skills, scaled to 0–100. Expert-heavy
                    profiles score near 100.
                  </p>
                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
                    D = round((avg_proficiency / 5) × 100)
                    <span className="ml-2 text-gray-400">avg 4.0/5 → 80</span>
                  </div>
                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
                    0 = all Beginner · 100 = all Expert
                  </div>
                </div>
              </details>
            </div>

            {/* Skill Breadth */}
            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
              <div className="flex items-center gap-2 mb-2">
                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
                  B
                </span>
                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
                  Skill Breadth
                </span>
                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
                  {Math.round(scoreWeights.skillBreadth * 100)}%
                </span>
              </div>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={Math.round(scoreWeights.skillBreadth * 100)}
                onChange={(e) => updateWeight("skillBreadth", Number(e.target.value) / 100)}
                className="w-full accent-brand-600"
              />
              <details className="mt-1.5">
                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
                  Show details
                </summary>
                <div className="mt-2 space-y-1.5">
                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    Number of distinct skills listed. 10 pts per skill, caps at 100 (10+ skills).
                    Rewards versatile generalists.
                  </p>
                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
                    B = min(100, skill_count × 10)
                    <span className="ml-2 text-gray-400">7 skills → 70</span>
                  </div>
                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
                    0 = no skills · 100 = 10+ skills
                  </div>
                </div>
              </details>
            </div>

            {/* Cost Efficiency */}
            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
              <div className="flex items-center gap-2 mb-2">
                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
                  C
                </span>
                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
                  Cost Efficiency
                </span>
                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
                  {Math.round(scoreWeights.costEfficiency * 100)}%
                </span>
              </div>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={Math.round(scoreWeights.costEfficiency * 100)}
                onChange={(e) => updateWeight("costEfficiency", Number(e.target.value) / 100)}
                className="w-full accent-brand-600"
              />
              <details className="mt-1.5">
                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
                  Show details
                </summary>
                <div className="mt-2 space-y-1.5">
                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    Inverse LCR vs org-wide max. Cheapest resource = 100, most expensive = 0. Core
                    "price" component.
                  </p>
                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
                    C = round((1 − LCR / max_LCR) × 100)
                    <span className="ml-2 text-gray-400">60€ vs 120€ → 50</span>
                  </div>
                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
                    0 = highest LCR · 100 = lowest LCR
                  </div>
                  <p className="text-[11px] text-amber-600 dark:text-amber-500">
                    If all resources share the same LCR, everyone scores 0 on this dimension.
                  </p>
                </div>
              </details>
            </div>

            {/* Chargeability */}
            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
              <div className="flex items-center gap-2 mb-2">
                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
                  A
                </span>
                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
                  Chargeability
                </span>
                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
                  {Math.round(scoreWeights.chargeability * 100)}%
                </span>
              </div>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={Math.round(scoreWeights.chargeability * 100)}
                onChange={(e) => updateWeight("chargeability", Number(e.target.value) / 100)}
                className="w-full accent-brand-600"
              />
              <details className="mt-1.5">
                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
                  Show details
                </summary>
                <div className="mt-2 space-y-1.5">
                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    Distance from personal chargeability target (90-day window). On target = 100; −2
                    pts per pp off.
                  </p>
                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
                    A = max(0, 100 − |target% − actual%| × 2)
                    <span className="ml-2 text-gray-400">10 pp off → 80</span>
                  </div>
                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
                    0 = 50+ pp off target · 100 = exactly on target
                  </div>
                  <p className="text-[11px] text-gray-400 dark:text-gray-500">
                    New resources with no allocations: actual = 0%, score reflects gap from target.
                  </p>
                </div>
              </details>
            </div>

            {/* Experience */}
            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
              <div className="flex items-center gap-2 mb-2">
                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
                  E
                </span>
                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
                  Experience
                </span>
                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
                  {Math.round(scoreWeights.experience * 100)}%
                </span>
              </div>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={Math.round(scoreWeights.experience * 100)}
                onChange={(e) => updateWeight("experience", Number(e.target.value) / 100)}
                className="w-full accent-brand-600"
              />
              <details className="mt-1.5">
                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
                  Show details
                </summary>
                <div className="mt-2 space-y-1.5">
                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    Average years of experience across skills with explicit years data from
                    skill-matrix imports. Capped at 10 years.
                  </p>
                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
                    E = min(100, avg_years × 10)
                    <span className="ml-2 text-gray-400">6.5 yrs → 65 · 10+ yrs → 100</span>
                  </div>
                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
                    0 = no years data · 100 = 10+ years average
                  </div>
                </div>
              </details>
            </div>
          </div>
        </div>

        {/* Weight sum indicator */}
        <div
          className={`flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-medium ${
            weightSumOk
              ? "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700 text-green-700 dark:text-green-300"
              : "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-700 dark:text-red-300"
          }`}
        >
          <span>{weightSumOk ? "✓" : "✗"}</span>
          <span>
            Total weight: <span className="font-mono">{Math.round(weightSum * 100)}%</span>
            {weightSumOk ? " — valid" : " — must be exactly 100% to save"}
          </span>
        </div>

        {/* Visibility roles */}
        <div className="space-y-2">
          <label className={LABEL_CLASS}>
            Score visibility — which roles can see the Value Score
          </label>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            Controls who sees the Score column on the Resources list, the breakdown on the Resource
            Detail page, and the Top Value Resources dashboard widget.
          </p>
          <div className="flex flex-wrap gap-3 mt-2">
            {ALL_ROLES.map((role) => (
              <label key={role} className={`${CHECKBOX_ROW_CLASS} cursor-pointer select-none`}>
                <input
                  type="checkbox"
                  checked={scoreVisibleRoles.includes(role)}
                  onChange={() => toggleRole(role)}
                  className="rounded border-gray-300"
                />
                {role}
              </label>
            ))}
          </div>
        </div>

        {/* Recompute */}
        <div className="border-t border-gray-100 dark:border-gray-700 pt-5 space-y-3">
          <div>
            <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">
              Recompute Scores
            </p>
            <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
              Scores are <strong>not updated automatically</strong> — run this after changing
              weights or after importing new skill matrices. The computation fetches all active
              resources and their last 90 days of allocations, then writes the result back to each
              resource record.
            </p>
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => {
                  setRecomputeResult(null);
                  recomputeMutation.mutate();
                }}
                disabled={recomputeMutation.isPending}
                className={SECONDARY_BUTTON_CLASS}
              >
                {recomputeMutation.isPending ? "Recomputing…" : "Recompute All Scores"}
              </button>
              {recomputeResult && (
                <span className="text-sm text-green-600 dark:text-green-400 font-medium">
                  Updated {recomputeResult.updated} resource
                  {recomputeResult.updated !== 1 ? "s" : ""}
                </span>
              )}
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3 pt-1">
          <button
            type="button"
            onClick={handleSaveScoreSettings}
            disabled={saveScoreMutation.isPending || !weightSumOk}
            className={PRIMARY_BUTTON_CLASS}
          >
            {saveScoreMutation.isPending ? "Saving…" : "Save Score Settings"}
          </button>
          {scoreSaved && (
            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
          )}
        </div>
      </div>

      {/* ── Image Generation ────────────────────────────────── */}
      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            Image Generation <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Used to generate AI cover art for projects. Configure at least one provider below.
          </p>
        </div>

        {/* Provider selector */}
        <div>
          <label className={LABEL_CLASS}>Provider</label>
          <div className="flex gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="imageProvider"
                value="dalle"
                checked={imageProvider === "dalle"}
                onChange={() => setImageProvider("dalle")}
                className="accent-brand-600"
              />
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">DALL-E (Azure OpenAI / OpenAI)</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="imageProvider"
                value="gemini"
                checked={imageProvider === "gemini"}
                onChange={() => setImageProvider("gemini")}
                className="accent-brand-600"
              />
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google Gemini</span>
            </label>
          </div>
        </div>

        {/* DALL-E settings (shown when DALL-E selected) */}
        {imageProvider === "dalle" && (
          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">DALL-E Configuration</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
                    Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
                  </span>
                </label>
                <input
                  type="text"
                  className={INPUT_CLASS}
                  value={dalleDeployment}
                  onChange={(e) => setDalleDeployment(e.target.value)}
                  placeholder="dall-e-3"
                />
              </div>

              {provider === "azure" && (
                <>
                  <div>
                    <label className={LABEL_CLASS}>
                      <span className="flex items-center">
                        Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
                      </span>
                    </label>
                    <input
                      type="text"
                      className={INPUT_CLASS}
                      value={dalleEndpoint}
                      onChange={(e) => setDalleEndpoint(e.target.value)}
                      placeholder="Leave empty to use same endpoint as chat"
                    />
                  </div>

                  <div>
                    <label className={LABEL_CLASS}>
                      <span className="flex items-center">
                        API Key{" "}
                        <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
                        <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
                      </span>
                    </label>
                    <input
                      type="password"
                      className={INPUT_CLASS}
                      value={dalleApiKey}
                      onChange={(e) => setDalleApiKey(e.target.value)}
                      placeholder="Leave empty to use same API key as chat"
                      autoComplete="new-password"
                    />
                  </div>
                </>
              )}
            </div>
            {settings?.hasDalleApiKey && (
              <p className="text-xs text-green-600 dark:text-green-400">A separate DALL-E API key is stored.</p>
            )}
          </div>
        )}

        {/* Gemini settings (shown when Gemini selected) */}
        {imageProvider === "gemini" && (
          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Google Gemini Configuration</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
                    API Key <InfoTooltip content="Google Gemini API key from Google AI Studio (aistudio.google.com)." />
                  </span>
                </label>
                <input
                  type="password"
                  className={INPUT_CLASS}
                  value={geminiApiKey}
                  onChange={(e) => setGeminiApiKey(e.target.value)}
                  placeholder={settings?.hasGeminiApiKey ? "••••••••  (key is stored)" : "Enter Gemini API key"}
                  autoComplete="new-password"
                />
                {settings?.hasGeminiApiKey && !geminiApiKey && (
                  <p className="text-xs text-green-600 dark:text-green-400 mt-1">API key is stored.</p>
                )}
              </div>
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
                    Model <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
                  </span>
                </label>
                <select
                  className={INPUT_CLASS}
                  value={geminiModel || "gemini-2.5-flash-image"}
                  onChange={(e) => setGeminiModel(e.target.value)}
                >
                  <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image — fast, high-volume</option>
                  <option value="gemini-3-pro-image-preview">Gemini 3 Pro Image Preview — high-fidelity</option>
                  <option value="gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview — latest</option>
                </select>
              </div>
            </div>
          </div>
        )}

        <div className="flex flex-wrap items-center gap-3 pt-1">
          <button
            type="button"
            className={PRIMARY_BUTTON_CLASS}
            disabled={saveImageMutation.isPending}
            onClick={handleSaveImage}
          >
            {saveImageMutation.isPending ? "Saving..." : "Save Image Settings"}
          </button>
          {imageProvider === "gemini" && (
            <button
              type="button"
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium disabled:opacity-50"
              disabled={testGeminiMut.isPending}
              onClick={() => testGeminiMut.mutate()}
            >
              {testGeminiMut.isPending ? "Testing..." : "Test Gemini"}
            </button>
          )}
          {imageSaved && (
            <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
          )}
        </div>
        {geminiTestResult && (
          <div className={`mt-3 rounded-lg px-3 py-2 text-sm ${
            geminiTestResult.ok
              ? "bg-green-50 text-green-700 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800"
              : "bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
          }`}>
            {geminiTestResult.ok
              ? `Gemini image generation works! Model: ${(geminiTestResult as any).model}`
              : `Test failed: ${(geminiTestResult as any).error}`}
          </div>
        )}
      </div>

      {/* ── SMTP / Email ──────────────────────────────────────────── */}
      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            Email Notifications (SMTP) <InfoTooltip content="Configure SMTP to send email notifications for vacation approvals/rejections. Without SMTP, only in-app notifications are sent." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Used to send email notifications when vacation requests are approved or rejected.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Host <InfoTooltip content="The SMTP server hostname (e.g. smtp.gmail.com, smtp.office365.com)." /></span></label>
            <input
              type="text"
              className={INPUT_CLASS}
              value={smtpHost}
              onChange={(e) => setSmtpHost(e.target.value)}
              placeholder="smtp.example.com"
            />
          </div>
          <div>
            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Port <InfoTooltip content="Common ports: 587 (STARTTLS), 465 (SSL/TLS), 25 (unencrypted). Use 587 for most providers." /></span></label>
            <input
              type="number"
              className={INPUT_CLASS}
              value={smtpPort}
              onChange={(e) => setSmtpPort(parseInt(e.target.value, 10))}
              min={1}
              max={65535}
            />
          </div>
          <div>
            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Username <InfoTooltip content="Authentication username for the SMTP server. Often the same as the email address." /></span></label>
            <input
              type="text"
              className={INPUT_CLASS}
              value={smtpUser}
              onChange={(e) => setSmtpUser(e.target.value)}
              placeholder="user@example.com"
              autoComplete="off"
            />
          </div>
          <div>
            <label className={LABEL_CLASS}><span className="flex items-center">
              SMTP Password <InfoTooltip content="The SMTP authentication password. Stored encrypted. Leave blank to keep the existing password." />{" "}</span>
              {settings?.hasSmtpPassword && (
                <span className="text-gray-400 font-normal text-xs">
                  (set — leave blank to keep)
                </span>
              )}
            </label>
            <input
              type="password"
              className={INPUT_CLASS}
              value={smtpPassword}
              onChange={(e) => setSmtpPassword(e.target.value)}
              placeholder="••••••••"
              autoComplete="new-password"
            />
          </div>
          <div>
            <label className={LABEL_CLASS}><span className="flex items-center">From Address <InfoTooltip content="The sender email address shown in notification emails (e.g. noreply@capakraken.app)." /></span></label>
            <input
              type="email"
              className={INPUT_CLASS}
              value={smtpFrom}
              onChange={(e) => setSmtpFrom(e.target.value)}
              placeholder="noreply@capakraken.app"
            />
          </div>
          <div className={`${CHECKBOX_ROW_CLASS} pt-0 md:mt-[1.65rem]`}>
            <input
              type="checkbox"
              id="smtpTls"
              checked={smtpTls}
              onChange={(e) => setSmtpTls(e.target.checked)}
              className="rounded border-gray-300 text-brand-600"
            />
            <label
              htmlFor="smtpTls"
              className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
            >
              Use TLS
            </label>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={handleSaveSmtp}
            disabled={saveSmtpMutation.isPending}
            className={PRIMARY_BUTTON_CLASS}
          >
            {saveSmtpMutation.isPending ? "Saving…" : "Save SMTP Settings"}
          </button>
          <button
            type="button"
            onClick={() => testSmtpMutation.mutate()}
            disabled={testSmtpMutation.isPending}
            className={SECONDARY_BUTTON_CLASS}
          >
            {testSmtpMutation.isPending ? "Testing…" : "Test Connection"}
          </button>
          {smtpSaved && (
            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
          )}
          {smtpTestResult && (
            <span
              className={`text-sm font-medium ${smtpTestResult.ok ? "text-green-600 dark:text-green-400" : "text-red-500 dark:text-red-400"}`}
            >
              {smtpTestResult.ok ? "✓ Connection successful" : `✗ ${smtpTestResult.error}`}
            </span>
          )}
        </div>
      </div>

      {/* ── Vacation Defaults ─────────────────────────────────────── */}
      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            Vacation Defaults <InfoTooltip content="Sets the default vacation entitlement applied when creating new resources or using the bulk-set tool in Vacation Management." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Default annual leave entitlement for new resources and the entitlement bulk-set tool.
          </p>
        </div>

        <div className="max-w-xs">
          <label className={LABEL_CLASS}><span className="flex items-center">Default Annual Leave Days <InfoTooltip content="The number of vacation days granted per year. In Germany, the legal minimum is 20 days; 28-30 is common. This value is used when creating new entitlement records." /></span></label>
          <input
            type="number"
            className={INPUT_CLASS}
            value={vacationDefaultDays}
            onChange={(e) => setVacationDefaultDays(parseInt(e.target.value, 10))}
            min={0}
            max={365}
          />
          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
            Applied when creating new entitlement records for resources.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={handleSaveVacation}
            disabled={saveVacationMutation.isPending}
            className={PRIMARY_BUTTON_CLASS}
          >
            {saveVacationMutation.isPending ? "Saving…" : "Save Vacation Settings"}
          </button>
          {vacationSaved && (
            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
          )}
        </div>
      </div>

      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            Timeline <InfoTooltip content="Settings for the timeline view, including undo history depth." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Configure timeline behavior and undo/redo history.
          </p>
        </div>

        <div className="max-w-xs">
          <label className={LABEL_CLASS}>Undo History Depth</label>
          <input
            type="number"
            className={INPUT_CLASS}
            value={undoMaxSteps}
            onChange={(e) => setUndoMaxSteps(parseInt(e.target.value, 10) || 50)}
            min={1}
            max={200}
          />
          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
            Maximum number of undo steps for timeline operations (single moves and batch shifts). Default: 50.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={handleSaveTimeline}
            disabled={saveTimelineMutation.isPending}
            className={PRIMARY_BUTTON_CLASS}
          >
            {saveTimelineMutation.isPending ? "Saving…" : "Save Timeline Settings"}
          </button>
          {timelineSaved && (
            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
          )}
        </div>
      </div>

      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            Viewer Anonymization <InfoTooltip content="When enabled, all resource names, EIDs, and emails are replaced with stable fictional aliases (e.g. superhero names) in the UI. Real data stays in the database. Useful for demos and screenshots." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Global debug mode that keeps real identities in the database but replaces displayed
            resource names, EIDs, and emails with stable character aliases across sessions.
          </p>
        </div>

        <label className="flex items-start gap-3 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
          <input
            type="checkbox"
            checked={anonymizationEnabled}
            onChange={(e) => setAnonymizationEnabled(e.target.checked)}
            className="mt-0.5 rounded border-gray-300 text-brand-600"
          />
          <span>
            Enable global stable anonymization
            <span className="block text-xs text-gray-500 dark:text-gray-400 mt-1">
              API responses switch to deterministic aliases like <code>Iron Man</code>,{" "}
              <code>iron.man</code>, and <code>iron.man@superhartmut.de</code>.
            </span>
          </span>
        </label>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className={LABEL_CLASS}>Alias Email Domain</label>
            <input
              type="text"
              className={INPUT_CLASS}
              value={anonymizationDomain}
              onChange={(e) => setAnonymizationDomain(e.target.value)}
              placeholder="superhartmut.de"
            />
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              Used for generated alias emails only. Stored resource emails stay unchanged.
            </p>
          </div>
          <div>
            <label className={LABEL_CLASS}>Optional Seed Override</label>
            <input
              type="text"
              className={INPUT_CLASS}
              value={anonymizationSeed}
              onChange={(e) => setAnonymizationSeed(e.target.value)}
              placeholder="Leave blank to keep the current stable mapping"
            />
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              Changing the seed intentionally reshuffles aliases. Leave blank to preserve the
              existing mapping.
            </p>
          </div>
        </div>

        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
          High-LCR resources receive more iconic characters first. Real EIDs and emails are never
          rewritten in Prisma.
        </div>

        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={handleSaveAnonymization}
            disabled={saveAnonymizationMutation.isPending}
            className={PRIMARY_BUTTON_CLASS}
          >
            {saveAnonymizationMutation.isPending ? "Saving…" : "Save Anonymization Settings"}
          </button>
          {anonymizationSaved && (
            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
          )}
        </div>
      </div>
    </div>
  );
}
