"use client";

/**
 * Trust badge snippet — vlasnik firme uzima svoj premium "Verifikovano na
 * BiznisPortalu" badge i lepi ga na sopstveni sajt. Slug se automatski
 * popunjava. Dve varijante (full / compact) sa live preview-om i copy dugmetom.
 */

import { useMemo, useState } from "react";

const SITE = "https://www.biznisportal.rs";
const EMBED_PREVIEW_VERSION = "2";

type Variant = "full" | "compact";

const VARIANT_META: Record<
  Variant,
  { label: string; width: number; height: number }
> = {
  full: { label: "Puna kartica", width: 360, height: 360 },
  compact: { label: "Kompaktna pilula", width: 320, height: 100 },
};

export function TrustBadgeSnippet({
  slug,
  name,
}: {
  slug: string;
  name: string;
}) {
  const [variant, setVariant] = useState<Variant>("full");
  const [copied, setCopied] = useState(false);
  const meta = VARIANT_META[variant];
  const previewUrl =
    `/embed/trust-badge?slug=${encodeURIComponent(slug)}&variant=${variant}` +
    `&_v=${EMBED_PREVIEW_VERSION}`;
  const snippet = useMemo(
    () =>
      `<div data-biznisportal-widget="trust-badge" data-slug="${slug}" data-variant="${variant}"></div>\n<script src="${SITE}/embed.js" async></script>`,
    [slug, variant],
  );

  async function copy() {
    try {
      await navigator.clipboard.writeText(snippet);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      /* clipboard blocked */
    }
  }

  return (
    <section id="trust-badge" className="partner-app-panel">
      <p className="eyebrow">Trust badge</p>
      <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
        Premium badge poverenja za vaš sajt
      </h2>
      <p className="mt-2 max-w-2xl text-sm leading-7 text-muted-foreground">
        Postavite zvanični „Verifikovano na BiznisPortalu“ badge na sajt firme{" "}
        <strong>{name}</strong>. Prikazuje skor poverenja, ocenu i recenzije, a
        svaki klik vraća posetioce na vaš profil (uz UTM praćenje i bolji SEO).
      </p>

      <div className="mt-5 flex flex-wrap gap-2">
        {(Object.keys(VARIANT_META) as Variant[]).map((key) => (
          <button
            key={key}
            type="button"
            onClick={() => setVariant(key)}
            className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
              variant === key
                ? "border-primary bg-primary text-primary-foreground"
                : "border-border bg-white text-foreground hover:border-primary/40"
            }`}
          >
            {VARIANT_META[key].label}
          </button>
        ))}
      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_1fr]">
        {/* Plain bela kartica — bez `.surface` koji ima radial orange tint
            u uglu i daje "narandžasto-siva pozadina iza belog boksa" feel. */}
        <div className="rounded-2xl border border-[#ede8e3] bg-white p-5">
          <p className="eyebrow">Live preview</p>
          <div className="mt-4 flex items-center justify-center rounded-xl bg-white p-4">
            <iframe
              key={`${variant}-${slug}-${EMBED_PREVIEW_VERSION}`}
              src={previewUrl}
              width={meta.width}
              height={meta.height}
              style={{ border: 0, maxWidth: "100%" }}
              loading="lazy"
              title={`Trust badge ${variant}`}
            />
          </div>
        </div>

        <div className="rounded-2xl border border-[#ede8e3] bg-white p-5">
          <p className="eyebrow">HTML snippet</p>
          <p className="mt-1 text-xs text-muted-foreground">
            Kopiraj i nalepi u HTML svog sajta — radi na WordPress, Shopify, Wix
            ili custom sajtu.
          </p>
          <pre className="mt-4 max-h-72 overflow-auto rounded-xl bg-zinc-900 p-4 text-xs leading-5 text-zinc-100">
            <code>{snippet}</code>
          </pre>
          <button
            type="button"
            onClick={copy}
            className="mt-4 inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2 text-sm font-bold text-primary-foreground transition hover:bg-primary/90"
          >
            {copied ? "✓ Kopirano!" : "Kopiraj snippet"}
          </button>
        </div>
      </div>
    </section>
  );
}