"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { SECRET_GROUPS, type SecretField, type SecretStatus } from "@/lib/secret-fields";

const SOURCE_LABEL: Record<SecretStatus["source"], string> = {
  database: "Saved (encrypted)",
  environment: "From environment",
  unset: "Not set",
};

const SOURCE_STYLE: Record<SecretStatus["source"], string> = {
  database: "pill pill-ok",
  environment: "pill pill-info",
  unset: "pill pill-muted",
};

export default function SecretsForm({
  status,
  encryptionReady,
}: {
  status: SecretStatus[];
  encryptionReady: boolean;
}) {
  const router = useRouter();
  const statusByKey = new Map(status.map((s) => [s.key, s]));

  // Initial form values: secret fields are blank (write-only); non-secret config
  // fields are prefilled with their current value so they can be edited in place.
  const initial: Record<string, string> = {};
  for (const group of SECRET_GROUPS) {
    for (const f of group.fields) {
      initial[f.key] = f.secret ? "" : statusByKey.get(f.key)?.value ?? "";
    }
  }

  const [values, setValues] = useState<Record<string, string>>(initial);
  const [clears, setClears] = useState<Record<string, boolean>>({});
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  function setValue(key: string, v: string) {
    setValues((prev) => ({ ...prev, [key]: v }));
  }

  async function save() {
    setSaving(true);
    setMsg(null);
    setError(null);

    const updates: Record<string, string> = {};
    for (const [key, v] of Object.entries(values)) {
      if (v.trim() !== "" && v !== (initial[key] ?? "") && !clears[key]) updates[key] = v;
    }
    const clearKeys = Object.keys(clears).filter((k) => clears[k]);

    if (Object.keys(updates).length === 0 && clearKeys.length === 0) {
      setSaving(false);
      setError("Nothing changed.");
      return;
    }

    const res = await fetch("/api/admin/secrets", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ updates, clears: clearKeys }),
    });
    const data = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) {
      setError(data.error || "Could not save");
      return;
    }
    setMsg(`Saved. ${data.changed} updated, ${data.cleared} cleared.`);
    setValues(initial);
    setClears({});
    router.refresh();
  }

  return (
    <div className="space-y-6">
      {SECRET_GROUPS.map((group) => (
        <section key={group.id} className="rounded-lg border border-be-border bg-be-surface p-4">
          <h2 className="text-sm font-semibold">{group.label}</h2>
          {group.description && (
            <p className="mt-0.5 text-xs text-be-muted">{group.description}</p>
          )}
          <div className="mt-4 space-y-4">
            {group.fields.map((field) => (
              <SecretFieldRow
                key={field.key}
                field={field}
                status={statusByKey.get(field.key)}
                value={values[field.key] ?? ""}
                cleared={!!clears[field.key]}
                onValue={(v) => setValue(field.key, v)}
                onClear={(c) => setClears((prev) => ({ ...prev, [field.key]: c }))}
              />
            ))}
          </div>
        </section>
      ))}

      <div className="flex items-center gap-3">
        <button
          onClick={save}
          disabled={saving || !encryptionReady}
          className="rounded-md bg-brand-green px-5 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
        >
          {saving ? "Saving…" : "Save secrets"}
        </button>
        {msg && <p className="text-sm text-green-600">{msg}</p>}
        {error && <p className="text-sm text-red-600">{error}</p>}
      </div>
    </div>
  );
}

function SecretFieldRow({
  field,
  status,
  value,
  cleared,
  onValue,
  onClear,
}: {
  field: SecretField;
  status?: SecretStatus;
  value: string;
  cleared: boolean;
  onValue: (v: string) => void;
  onClear: (c: boolean) => void;
}) {
  const source = status?.source ?? "unset";
  return (
    <div>
      <div className="mb-1 flex items-center justify-between gap-2">
        <label className="text-sm font-medium">{field.label}</label>
        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${SOURCE_STYLE[source]}`}>
          {SOURCE_LABEL[source]}
        </span>
      </div>

      {field.kind === "select" ? (
        <select
          value={value}
          onChange={(e) => onValue(e.target.value)}
          className="input"
        >
          {(field.options ?? []).map((opt) => (
            <option key={opt} value={opt}>
              {opt}
            </option>
          ))}
        </select>
      ) : (
        <input
          type={field.secret ? "password" : field.kind === "number" ? "number" : "text"}
          value={value}
          onChange={(e) => onValue(e.target.value)}
          disabled={cleared}
          autoComplete="off"
          placeholder={
            field.secret
              ? source === "unset"
                ? field.placeholder ?? "Not set"
                : "Leave blank to keep current value"
              : field.placeholder
          }
          className="input disabled:opacity-50"
        />
      )}

      {/* Only secret values saved in the DB can be cleared back to the env var. */}
      {field.secret && source === "database" && (
        <label className="mt-1 flex items-center gap-1.5 text-xs text-be-muted">
          <input
            type="checkbox"
            checked={cleared}
            onChange={(e) => onClear(e.target.checked)}
          />
          Clear saved value (revert to environment variable)
        </label>
      )}
    </div>
  );
}