openclaw-market/components/layout/install-banner.tsx

"use client";

import { useState, useCallback } from "react";
import {
  Check,
  Copy,
  MessageSquare,
  Terminal,
  Pencil,
  Eye,
  EyeOff,
  Bot,
  Loader2,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useDeviceToken } from "@/hooks/use-device-token";
import { cn } from "@/lib/utils";

type Tab = "openclaw" | "terminal";

export function InstallBanner() {
  const t = useTranslations("installBanner");
  const tGuide = useTranslations("skillGuide");
  const { token, name, isLoading, error, updateName } = useDeviceToken();

  const [activeTab, setActiveTab] = useState<Tab>("terminal");
  const [copied, setCopied] = useState(false);
  const [isEditingName, setIsEditingName] = useState(false);
  const [editNameValue, setEditNameValue] = useState("");
  const [nameStatus, setNameStatus] = useState<
    "idle" | "saving" | "success" | "error"
  >("idle");
  const [showToken, setShowToken] = useState(false);

  const maskedToken = token ? `${token.slice(0, 6)}...` : "";

  const openclawPrompt = token ? t("openclawPrompt", { token }) : "";
  const terminalCommand = token ? t("terminalCommand", { token }) : "";

  const handleCopy = useCallback(async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // fallback
    }
  }, []);

  const handleEditName = useCallback(() => {
    setEditNameValue(name || "");
    setIsEditingName(true);
    setNameStatus("idle");
  }, [name]);

  const handleSaveName = useCallback(async () => {
    if (!editNameValue.trim()) return;
    setNameStatus("saving");
    const ok = await updateName(editNameValue.trim());
    if (ok) {
      setNameStatus("success");
      setIsEditingName(false);
      setTimeout(() => setNameStatus("idle"), 2000);
    } else {
      setNameStatus("error");
    }
  }, [editNameValue, updateName]);

  const handleCancelEdit = useCallback(() => {
    setIsEditingName(false);
    setNameStatus("idle");
  }, []);

  // Loading state
  if (isLoading) {
    return (
      <article className="glow-card rounded-xl px-4 py-3">
        <div className="flex items-center justify-center gap-2 py-3">
          <Loader2 className="h-4 w-4 animate-spin text-[var(--accent-cyan)]" />
          <span className="text-xs text-[var(--text-muted)]">
            {t("generatingToken")}
          </span>
        </div>
      </article>
    );
  }

  // Error state
  if (error || !token) {
    return (
      <article className="glow-card rounded-xl px-4 py-3">
        <div className="flex items-center justify-center py-3">
          <span className="text-xs text-red-400">{t("tokenError")}</span>
        </div>
      </article>
    );
  }

  return (
    <article
      className="glow-card rounded-xl px-4 py-3"
      aria-label={tGuide("ariaLabel")}
    >
      <div className="flex flex-col gap-2.5">
        {/* Compact header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 min-w-0">
            <span className="text-base">🦞</span>
            <span className="text-xs font-medium text-[var(--text-primary)] truncate">
              {t("title")}
            </span>
          </div>
        </div>

        {/* Claw name row */}
        <div className="flex items-center justify-between gap-2 text-[11px]">
          <div className="flex items-center gap-1 min-w-0">
            <span className="text-[var(--text-muted)] shrink-0">
              {t("yourClaw")}:
            </span>
            {isEditingName ? (
              <div className="flex items-center gap-1 min-w-0">
                <input
                  type="text"
                  value={editNameValue}
                  onChange={(e) => setEditNameValue(e.target.value)}
                  className="w-20 rounded border border-[var(--accent-cyan)]/30 bg-[var(--bg-primary)] px-1.5 py-0.5 text-[11px] text-[var(--text-primary)] outline-none focus:border-[var(--accent-cyan)]"
                  maxLength={30}
                  autoFocus
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleSaveName();
                    if (e.key === "Escape") handleCancelEdit();
                  }}
                />
                <button
                  onClick={handleSaveName}
                  disabled={nameStatus === "saving"}
                  className="text-[var(--accent-cyan)] hover:text-[var(--accent-cyan)]/80 cursor-pointer"
                >
                  {nameStatus === "saving" ? (
                    <Loader2 className="h-3 w-3 animate-spin" />
                  ) : (
                    <Check className="h-3 w-3" />
                  )}
                </button>
                <button
                  onClick={handleCancelEdit}
                  className="text-[var(--text-muted)] hover:text-[var(--text-secondary)] text-[10px] cursor-pointer"
                >
                  &times;
                </button>
              </div>
            ) : (
              <div className="flex items-center gap-1 min-w-0">
                <span className="font-mono text-[var(--accent-cyan)] truncate">
                  {name}
                </span>
                {nameStatus === "success" && (
                  <Check className="h-2.5 w-2.5 text-[var(--accent-green)]" />
                )}
                <button
                  onClick={handleEditName}
                  className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)] cursor-pointer shrink-0"
                >
                  <Pencil className="h-2.5 w-2.5" />
                </button>
              </div>
            )}
          </div>

          {/* Token mini display */}
          <button
            onClick={() => setShowToken(!showToken)}
            className="flex items-center gap-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] cursor-pointer shrink-0"
            title={showToken ? t("hideToken") : t("showToken")}
          >
            <code className="font-mono text-[10px]">
              {showToken ? token.slice(0, 12) + "..." : maskedToken}
            </code>
            {showToken ? (
              <EyeOff className="h-2.5 w-2.5" />
            ) : (
              <Eye className="h-2.5 w-2.5" />
            )}
          </button>
        </div>

        {/* Compact tabs */}
        <div className="flex rounded-md border border-white/10 bg-[var(--bg-primary)] p-0.5">
          <button
            onClick={() => setActiveTab("openclaw")}
            className={cn(
              "flex flex-1 items-center justify-center gap-1 rounded px-2 py-1 text-[10px] font-medium transition-all cursor-pointer",
              activeTab === "openclaw"
                ? "bg-[var(--accent-cyan)]/15 text-[var(--accent-cyan)]"
                : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
            )}
          >
            <MessageSquare className="h-3 w-3" />
            {t("tabOpenClaw")}
          </button>
          <button
            onClick={() => setActiveTab("terminal")}
            className={cn(
              "flex flex-1 items-center justify-center gap-1 rounded px-2 py-1 text-[10px] font-medium transition-all cursor-pointer",
              activeTab === "terminal"
                ? "bg-[var(--accent-cyan)]/15 text-[var(--accent-cyan)]"
                : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
            )}
          >
            <Terminal className="h-3 w-3" />
            {t("tabTerminal")}
          </button>
        </div>

        {/* Tab content */}
        {activeTab === "openclaw" && (
          <div className="flex flex-col gap-1.5">
            <button
              onClick={() => handleCopy(openclawPrompt)}
              className="group relative w-full cursor-pointer rounded-md border border-white/10 bg-[var(--bg-primary)] p-2.5 text-left transition-all hover:border-[var(--accent-cyan)]/30"
            >
              <p className="text-[11px] leading-relaxed text-[var(--text-secondary)] select-all break-all line-clamp-4">
                {openclawPrompt}
              </p>
              <div className="absolute right-1.5 top-1.5 opacity-0 transition-opacity group-hover:opacity-100">
                {copied ? (
                  <Check className="h-3 w-3 text-[var(--accent-green)]" />
                ) : (
                  <Copy className="h-3 w-3 text-[var(--text-muted)]" />
                )}
              </div>
            </button>
            <button
              onClick={() => handleCopy(openclawPrompt)}
              className="group flex w-full items-center justify-center gap-1 rounded-md border border-white/10 bg-[var(--bg-primary)] py-1.5 text-[10px] transition-all hover:border-[var(--accent-cyan)]/40 cursor-pointer"
            >
              {copied ? (
                <Check className="h-2.5 w-2.5 text-[var(--accent-green)]" />
              ) : (
                <Copy className="h-2.5 w-2.5 text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]" />
              )}
              <span className="text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]">
                {copied ? t("copied") : t("copyPrompt")}
              </span>
            </button>
          </div>
        )}

        {activeTab === "terminal" && (
          <div className="flex flex-col gap-1.5">
            <div className="rounded-md border border-white/10 bg-[var(--bg-primary)] p-2.5">
              <div className="flex items-start gap-1.5">
                <span className="font-mono text-[11px] text-[var(--accent-green)] select-none">
                  $
                </span>
                <code className="font-mono text-[11px] leading-relaxed text-[var(--accent-cyan)] select-all break-all">
                  {terminalCommand}
                </code>
              </div>
            </div>
            <button
              onClick={() => handleCopy(terminalCommand)}
              className="group flex w-full items-center justify-center gap-1 rounded-md border border-white/10 bg-[var(--bg-primary)] py-1.5 text-[10px] transition-all hover:border-[var(--accent-cyan)]/40 cursor-pointer"
            >
              {copied ? (
                <Check className="h-2.5 w-2.5 text-[var(--accent-green)]" />
              ) : (
                <Copy className="h-2.5 w-2.5 text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]" />
              )}
              <span className="text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]">
                {copied ? t("copied") : t("copyCommand")}
              </span>
            </button>
          </div>
        )}

        {/* AI-crawlable guide (collapsed) */}
        <details className="group/details">
          <summary className="flex cursor-pointer items-center gap-1 text-[10px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]">
            <Bot className="h-2.5 w-2.5" />
            <span>{tGuide("summaryLabel")}</span>
          </summary>
          <div className="mt-2 space-y-2 rounded-md border border-white/5 bg-[var(--bg-primary)] p-3 text-[10px] leading-relaxed text-[var(--text-muted)]">
            <section>
              <h3 className="mb-0.5 font-mono text-[var(--text-secondary)]">
                {tGuide("whatTitle")}
              </h3>
              <p>{tGuide("whatDescription")}</p>
            </section>
            <section>
              <h3 className="mb-0.5 font-mono text-[var(--text-secondary)]">
                {tGuide("installTitle")}
              </h3>
              <ol className="list-inside list-decimal space-y-0.5 pl-1">
                <li>{tGuide("step1")}</li>
                <li>{tGuide("step2")}</li>
                <li>{tGuide("step3")}</li>
                <li>{tGuide("step4")}</li>
              </ol>
            </section>
            <section>
              <h3 className="mb-0.5 font-mono text-[var(--text-secondary)]">
                {tGuide("commandTitle")}
              </h3>
              <code className="block rounded bg-[var(--bg-secondary)] px-2 py-1.5 font-mono text-[var(--accent-cyan)] break-all">
                bash &lt;(curl -fsSL https://kymr.top/install.sh) --token
                YOUR_TOKEN
              </code>
            </section>
            <section>
              <h3 className="mb-0.5 font-mono text-[var(--text-secondary)]">
                {tGuide("dataTitle")}
              </h3>
              <ul className="list-inside list-disc space-y-0.5 pl-1">
                <li>{tGuide("data1")}</li>
                <li>{tGuide("data2")}</li>
                <li>{tGuide("data3")}</li>
                <li>{tGuide("data4")}</li>
              </ul>
              <p className="mt-0.5 italic">{tGuide("dataNever")}</p>
            </section>
            <section>
              <h3 className="mb-0.5 font-mono text-[var(--text-secondary)]">
                {tGuide("permissionsTitle")}
              </h3>
              <ul className="list-inside list-disc space-y-0.5 pl-1">
                <li>{tGuide("perm1")}</li>
                <li>{tGuide("perm2")}</li>
                <li>{tGuide("perm3")}</li>
              </ul>
            </section>
          </div>
        </details>
      </div>
    </article>
  );
}