import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import {
  INPUT_CLASS,
  LABEL_CLASS,
  PANEL_CLASS,
  PRIMARY_BUTTON_CLASS,
  RuntimeSecretCard,
  type RuntimeSecrets,
} from "./shared.js";

type AnonymizationSettingsPanelProps = {
  anonymizationEnabled: boolean;
  anonymizationDomain: string;
  anonymizationSaved: boolean;
  anonymizationSecret: RuntimeSecrets["anonymizationSeed"];
  isSaving: boolean;
  onAnonymizationEnabledChange: (value: boolean) => void;
  onAnonymizationDomainChange: (value: string) => void;
  onSave: () => void;
};

export function AnonymizationSettingsPanel({
  anonymizationEnabled,
  anonymizationDomain,
  anonymizationSaved,
  anonymizationSecret,
  isSaving,
  onAnonymizationEnabledChange,
  onAnonymizationDomainChange,
  onSave,
}: AnonymizationSettingsPanelProps) {
  return (
    <div className={PANEL_CLASS}>
      <div>
        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
          Viewer Anonymization{" "}
          <InfoTooltip content="Replace displayed identities with deterministic aliases for demos and screenshots." />
        </h2>
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Global debug mode that keeps real identities in the database but replaces displayed
          resource names, EIDs, and emails with stable 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={(event) => onAnonymizationEnabledChange(event.target.checked)}
          className="mt-0.5 rounded border-gray-300 text-brand-600"
        />
        <span>
          Enable global stable anonymization
          <span className="mt-1 block text-xs text-gray-500 dark:text-gray-400">
            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 gap-4 md:grid-cols-2">
        <div>
          <label className={LABEL_CLASS}>Alias Email Domain</label>
          <input
            type="text"
            className={INPUT_CLASS}
            value={anonymizationDomain}
            onChange={(event) => onAnonymizationDomainChange(event.target.value)}
            placeholder="superhartmut.de"
          />
          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
            Used for generated alias emails only. Stored resource emails stay unchanged.
          </p>
        </div>
        <div>
          <label className={LABEL_CLASS}>Optional Seed Override</label>
          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
            The optional seed is managed as a deployment secret instead of an in-app value.
          </p>
        </div>
      </div>

      <RuntimeSecretCard
        title="Anonymization Seed"
        description="The stable anonymization seed is resolved from runtime secret management."
        secret={anonymizationSecret}
        optionalNote="Provision ANONYMIZATION_SEED only when you need a non-default, deployment-specific alias mapping."
      />

      <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={onSave}
          disabled={isSaving}
          className={PRIMARY_BUTTON_CLASS}
        >
          {isSaving ? "Saving…" : "Save Anonymization Settings"}
        </button>
        {anonymizationSaved ? (
          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
        ) : null}
      </div>
    </div>
  );
}
