"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Card } from "@/components/ui/card";
import type { OpenClawDefaults } from "@/lib/k8s";

interface TenantRow {
  name: string;
  displayName: string;
  phase: string;
  override: { tag: string } | null;
}

interface Props {
  initialDefaults: OpenClawDefaults;
  tenants: TenantRow[];
}

/**
 * Two-section admin UI:
 *   - Default editor card at the top — single input for the tag.
 *   - Tenant table below — each row has an inline edit/clear control.
 *
 * No optimistic updates: every save round-trips to the API and we
 * router.refresh() to re-render the server-side state. Keeps the UI
 * honest about what's actually applied (controller-runtime watch
 * latency can be a couple of seconds).
 *
 * Tag-only by design — see operator notes for rationale.
 */
export function OpenClawAdminPanel({ initialDefaults, tenants }: Props) {
  const t = useTranslations("openclawAdmin");
  const tCommon = useTranslations("common");
  const router = useRouter();

  const [defaults, setDefaults] = useState(initialDefaults);
  const [defaultTag, setDefaultTag] = useState(initialDefaults.defaultTag);
  const [savingDefault, setSavingDefault] = useState(false);
  const [defaultError, setDefaultError] = useState("");
  const [defaultSaved, setDefaultSaved] = useState(false);

  const onSaveDefault = async (e: React.FormEvent) => {
    e.preventDefault();
    setSavingDefault(true);
    setDefaultError("");
    setDefaultSaved(false);
    try {
      const res = await fetch("/api/admin/openclaw", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ defaultTag: defaultTag.trim() }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || t("saveFailed"));
      }
      const next = await res.json();
      setDefaults(next);
      setDefaultSaved(true);
    } catch (e: any) {
      setDefaultError(e.message);
    } finally {
      setSavingDefault(false);
    }
  };

  return (
    <div className="space-y-8">
      {/* Default editor */}
      <section className="animate-in animate-in-delay-1">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("defaultSection")}
        </h2>
        <Card>
          <p className="text-sm text-text-secondary mb-4">
            {t("defaultDescription")}
          </p>
          <form onSubmit={onSaveDefault} className="space-y-4">
            <div>
              <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
                {t("fieldTag")}
              </label>
              <input
                type="text"
                value={defaultTag}
                onChange={(e) => setDefaultTag(e.target.value)}
                placeholder="2026.4.22"
                className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm font-mono focus:outline-none focus:border-text-secondary"
              />
              <p className="text-xs text-text-muted mt-1">{t("emptyHint")}</p>
            </div>

            {defaultError && (
              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
                {defaultError}
              </div>
            )}
            {defaultSaved && !defaultError && (
              <div className="text-xs text-success bg-success/10 border border-success/20 rounded-lg px-3 py-2">
                {t("defaultSaved")}
              </div>
            )}

            <div className="flex justify-end">
              <button
                type="submit"
                disabled={savingDefault}
                className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
              >
                {savingDefault ? tCommon("loading") : t("saveDefault")}
              </button>
            </div>
          </form>
        </Card>
      </section>

      {/* Tenant overrides */}
      <section className="animate-in animate-in-delay-2">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("overridesSection")}
        </h2>
        <Card>
          {tenants.length === 0 ? (
            <p className="text-sm text-text-secondary text-center py-6">
              {t("noTenants")}
            </p>
          ) : (
            <div className="space-y-2">
              {tenants.map((tn) => (
                <TenantOverrideRow
                  key={tn.name}
                  tenant={tn}
                  platformDefault={defaults}
                  onChanged={() => router.refresh()}
                />
              ))}
            </div>
          )}
        </Card>
      </section>
    </div>
  );
}

/**
 * Single row in the tenants table. Collapsed by default; click to
 * expand the inline editor.
 */
function TenantOverrideRow({
  tenant,
  platformDefault,
  onChanged,
}: {
  tenant: TenantRow;
  platformDefault: OpenClawDefaults;
  onChanged: () => void;
}) {
  const t = useTranslations("openclawAdmin");
  const tCommon = useTranslations("common");

  const [expanded, setExpanded] = useState(false);
  const [tag, setTag] = useState(tenant.override?.tag ?? "");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const submit = async (clear = false) => {
    setSaving(true);
    setError("");
    try {
      const res = await fetch(
        `/api/admin/tenants/${encodeURIComponent(tenant.name)}/openclaw-image`,
        {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(clear ? {} : { tag: tag.trim() }),
        }
      );
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || t("saveFailed"));
      }
      setExpanded(false);
      onChanged();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  };

  const effective = tenant.override?.tag
    ? tenant.override.tag
    : platformDefault.defaultTag || t("builtinFallback");

  return (
    <div className="rounded-lg border border-border bg-surface-2 overflow-hidden">
      <button
        type="button"
        onClick={() => setExpanded((v) => !v)}
        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-surface-1 transition-colors"
      >
        <div className="min-w-0 flex-1">
          <div className="font-medium text-text-primary truncate">
            {tenant.displayName}
          </div>
          <div className="text-xs text-text-muted font-mono truncate mt-0.5">
            {tenant.name}
          </div>
        </div>
        <div className="text-right ml-4 min-w-0">
          {tenant.override ? (
            <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-amber-400/15 text-amber-400 border border-amber-400/20">
              {t("statusOverridden")}
            </span>
          ) : (
            <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-blue-400/15 text-blue-400 border border-blue-400/20">
              {t("statusFollowsDefault")}
            </span>
          )}
          <div className="text-xs text-text-muted font-mono truncate max-w-[260px] mt-1">
            {effective}
          </div>
        </div>
      </button>

      {expanded && (
        <div className="px-4 pb-4 pt-1 border-t border-border bg-surface-1">
          <div className="mb-3">
            <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
              {t("fieldTag")}
            </label>
            <input
              type="text"
              value={tag}
              onChange={(e) => setTag(e.target.value)}
              placeholder={
                platformDefault.defaultTag
                  ? `${t("defaultPrefix")} ${platformDefault.defaultTag}`
                  : ""
              }
              className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm font-mono focus:outline-none focus:border-text-secondary"
            />
          </div>

          {error && (
            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
              {error}
            </div>
          )}

          <div className="flex flex-wrap gap-2 justify-end">
            {tenant.override && (
              <button
                type="button"
                onClick={() => submit(true)}
                disabled={saving}
                className="text-xs px-3 py-1.5 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
              >
                {saving ? tCommon("loading") : t("clearOverride")}
              </button>
            )}
            <button
              type="button"
              onClick={() => submit(false)}
              disabled={saving || !tag.trim()}
              className="text-xs px-3 py-1.5 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
            >
              {saving ? tCommon("loading") : t("saveOverride")}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}