"use client";

import { useState } from "react";

import { ProfileQrCode } from "@/components/public/profile/ProfileQrCode";

/**
 * Trajni link i QR kod za prikupljanje recenzija.
 *
 * ZAŠTO POSTOJI: slanje poziva mejlom traži da firma ima spisak adresa svojih
 * kupaca i da ga prekuca. Većina malih firmi ga nema. Ovo je drugi put — link
 * koji se odštampa i zalepi kod kase, doda na račun ili pošalje kroz Viber.
 *
 * Link NE ističe (za razliku od tokena u mejlu, koji važi 60 dana), jer bi
 * odštampana nalepnica inače prestala da radi posle dva meseca.
 */
export function ReviewShareLink({
  slug,
  companyName,
  baseUrl,
}: {
  slug: string;
  companyName: string;
  baseUrl: string;
}) {
  const [kopirano, setKopirano] = useState(false);
  const url = `${baseUrl}/recenzija/${slug}`;

  async function kopiraj() {
    try {
      await navigator.clipboard.writeText(url);
      setKopirano(true);
      setTimeout(() => setKopirano(false), 2000);
    } catch {
      /* pregledač je odbio pristup ostavi — korisnik može ručno da označi */
    }
  }

  return (
    <section className="rounded-3xl border border-border bg-white p-6">
      <h2 className="font-display text-lg font-bold text-foreground">
        Trajni link i QR kod
      </h2>
      <p className="mt-1 text-sm leading-6 text-muted-foreground">
        Zalepite QR kod kod kase, dodajte link na račun ili ga pošaljite kupcu
        posle obavljenog posla. Link ne ističe — jednom odštampan, radi zauvek.
      </p>

      <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center">
        <code className="flex-1 overflow-x-auto rounded-xl border border-border bg-[#faf9f7] px-4 py-3 text-[0.8rem] text-foreground">
          {url}
        </code>
        <button
          type="button"
          onClick={kopiraj}
          className="shrink-0 rounded-full bg-[#c2410c] px-5 py-2.5 text-sm font-bold text-white transition hover:opacity-90"
        >
          {kopirano ? "Kopirano ✓" : "Kopiraj link"}
        </button>
      </div>

      <div className="mt-4 flex flex-wrap items-center gap-3 [&>button]:inline-flex [&>button]:items-center [&>button]:gap-2 [&>button]:rounded-full [&>button]:border [&>button]:border-border [&>button]:px-4 [&>button]:py-2.5 [&>button]:text-sm [&>button]:font-semibold [&>button]:text-foreground hover:[&>button]:border-[#c2410c] hover:[&>button]:text-[#c2410c]">
        <ProfileQrCode
          name={companyName}
          url={url}
          buttonLabel="QR kod za recenzije"
          caption="Skenirajte i ostavite recenziju"
          fileSuffix="qr-recenzije"
        />
        <a
          href={url}
          target="_blank"
          rel="noopener"
          className="text-sm font-semibold text-[#c2410c] hover:underline"
        >
          Otvori i proveri kako izgleda →
        </a>
      </div>
    </section>
  );
}