"use client";

import { useState } from "react";
import { Check, Copy, Terminal } from "lucide-react";
import { useTranslations } from "next-intl";

const INSTALL_COMMAND = "clawhub install openclaw-reporter";

export function InstallBanner() {
  const t = useTranslations("installBanner");
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(INSTALL_COMMAND);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // fallback: select the text
    }
  };

  return (
    <div className="glow-card rounded-xl px-5 py-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        {/* Left: description */}
        <div className="flex items-center gap-3 min-w-0">
          <div
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
            style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
          >
            <span className="text-lg">🦞</span>
          </div>
          <div className="min-w-0">
            <p className="text-sm font-medium text-[var(--text-primary)]">
              {t("title")}
            </p>
            <p className="text-xs text-[var(--text-muted)] truncate">
              {t("subtitle")}
            </p>
          </div>
        </div>

        {/* Right: copy command */}
        <button
          onClick={handleCopy}
          className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
          title={t("copyTooltip")}
        >
          <Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
          <code className="font-mono text-sm text-[var(--accent-cyan)] select-all">
            {INSTALL_COMMAND}
          </code>
          <div className="ml-1 flex h-5 w-5 items-center justify-center">
            {copied ? (
              <Check className="h-3.5 w-3.5 text-[var(--accent-green)]" />
            ) : (
              <Copy className="h-3.5 w-3.5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--accent-cyan)]" />
            )}
          </div>
        </button>
      </div>
    </div>
  );
}