"use client";

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

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

  const prompt = t("prompt");

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

  return (
    <article
      className="glow-card rounded-xl px-5 py-4"
      data-skill="openclaw-reporter"
      data-install-method="clawhub"
      aria-label={tGuide("ariaLabel")}
    >
      <div className="flex flex-col gap-3">
        {/* Header */}
        <div className="flex items-center justify-between">
          <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)]">
                {t("subtitle")}
              </p>
            </div>
          </div>
          <button
            onClick={handleCopy}
            className="group flex items-center gap-1.5 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-3 py-2 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")}
          >
            {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)]" />
            )}
            <span className="text-xs text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]">
              {copied ? t("copied") : t("copyButton")}
            </span>
          </button>
        </div>

        {/* Human prompt card */}
        <button
          onClick={handleCopy}
          className="group relative w-full cursor-pointer rounded-lg border border-white/10 bg-[var(--bg-primary)] p-3 text-left transition-all hover:border-[var(--accent-cyan)]/30"
        >
          <div className="flex gap-2">
            <MessageSquare className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--accent-cyan)]/60" />
            <p className="text-xs leading-relaxed text-[var(--text-secondary)] select-all">
              {prompt}
            </p>
          </div>
        </button>

        {/* AI-crawlable installation guide (collapsed for humans, fully in DOM for crawlers) */}
        <details className="group/details">
          <summary className="flex cursor-pointer items-center gap-1.5 text-[10px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]">
            <Bot className="h-3 w-3" />
            <span>{tGuide("summaryLabel")}</span>
          </summary>

          <div className="mt-3 space-y-3 rounded-lg border border-white/5 bg-[var(--bg-primary)] p-4 text-xs leading-relaxed text-[var(--text-muted)]">
            <section>
              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("whatTitle")}</h3>
              <p>{tGuide("whatDescription")}</p>
            </section>

            <section>
              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("installTitle")}</h3>
              <ol className="list-inside list-decimal space-y-1 pl-1">
                <li>{tGuide("step1")}</li>
                <li>{tGuide("step2")}</li>
                <li>{tGuide("step3")}</li>
                <li>{tGuide("step4")}</li>
              </ol>
            </section>

            <section>
              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("commandTitle")}</h3>
              <code className="block rounded bg-[var(--bg-secondary)] px-3 py-2 font-mono text-[var(--accent-cyan)]">
                clawhub install openclaw-reporter
              </code>
            </section>

            <section>
              <h3 className="mb-1 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-1 italic">{tGuide("dataNever")}</p>
            </section>

            <section>
              <h3 className="mb-1 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>
  );
}