Homelab-manager/web/src/pages/settings/BadgeSettings.tsx

import { useEffect, useState } from "react";
import { api } from "../../api/client";

const PROVIDER_NAMES: Record<string, string> = {
  cloudflare: "Cloudflare",
  loopia: "Loopia",
  pihole: "Pi-hole",
  azure: "Azure DNS",
  cpanel: "cPanel",
  technitium: "Technitium",
};

const INTEGRATION_NAMES: Record<string, string> = {
  tailscale: "Tailscale",
  proxmox: "Proxmox",
  synology: "Synology",
  semaphore: "Semaphore",
  gitea: "Gitea",
  dockhand: "Dockhand",
  uptimekuma: "Uptime Kuma",
  phpipam: "phpIPAM",
};

function ColorList({
  names,
  colors,
  onChange,
}: {
  names: Record<string, string>;
  colors: Record<string, string>;
  onChange: (id: string, color: string) => void;
}) {
  return (
    <div className="d-flex flex-column gap-2">
      {Object.entries(names).map(([id, name]) => {
        const color = colors[id] ?? "#6366f1";
        return (
          <div key={id} className="d-flex align-items-center gap-2">
            <span className="badge" style={{ backgroundColor: `${color}22`, color, border: `1px solid ${color}55`, minWidth: 110 }}>
              {name}
            </span>
            <input
              type="color"
              value={color}
              className="form-control form-control-color"
              onChange={(e) => onChange(id, e.target.value)}
            />
            <span className="text-secondary small">{color}</span>
          </div>
        );
      })}
    </div>
  );
}

export default function BadgeSettings() {
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [providerColors, setProviderColors] = useState<Record<string, string>>({});
  const [integrationColors, setIntegrationColors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);

  useEffect(() => {
    Promise.all([api.settings.providerColors(), api.settings.integrationColors()])
      .then(([providerRes, integrationRes]) => {
        setProviderColors(providerRes.providerColors);
        setIntegrationColors(integrationRes.integrationColors);
      })
      .catch((err) => setLoadError(err instanceof Error ? err.message : String(err)))
      .finally(() => setLoading(false));
  }, []);

  async function handleSave() {
    setSaving(true);
    setSaveError(null);
    setSaved(false);
    try {
      const res = await api.settings.update({ providerColors, integrationColors });
      setProviderColors(res.settings.providerColors);
      setIntegrationColors(res.settings.integrationColors);
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (err) {
      setSaveError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <div className="text-secondary">Loading…</div>;

  return (
    <>
      <div className="d-flex align-items-center justify-content-between mb-3">
        <h3 className="mb-0">Badges</h3>
        <div className="d-flex align-items-center gap-2">
          {saveError && <span className="text-danger small">{saveError}</span>}
          {saved && <span className="text-success small">✓ Colors saved</span>}
          <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
            {saving ? "Saving…" : "Save Colors"}
          </button>
        </div>
      </div>

      {loadError && <div className="alert alert-danger">{loadError}</div>}

      <div className="row row-cards">
        <div className="col-md-6">
          <div className="card">
            <div className="card-header">
              <h3 className="card-title">DNS provider badge colors</h3>
            </div>
            <div className="card-body">
              <p className="text-secondary">Customize the color of each DNS provider's badge throughout the app.</p>
              <ColorList
                names={PROVIDER_NAMES}
                colors={providerColors}
                onChange={(id, color) => setProviderColors((c) => ({ ...c, [id]: color }))}
              />
            </div>
          </div>
        </div>

        <div className="col-md-6">
          <div className="card">
            <div className="card-header">
              <h3 className="card-title">Integration badge colors</h3>
            </div>
            <div className="card-body">
              <p className="text-secondary">Customize the color of each integration type's badge throughout the app.</p>
              <ColorList
                names={INTEGRATION_NAMES}
                colors={integrationColors}
                onChange={(id, color) => setIntegrationColors((c) => ({ ...c, [id]: color }))}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}