"use client";

import { useState } from "react";
import { Spinner } from "@/components/common/Spinner";

export function RequestReviewsForm() {
  const [emails, setEmails] = useState("");
  const [busy, setBusy] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const count = emails
    .split(/[\s,;]+/)
    .map((e) => e.trim())
    .filter((e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)).length;

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setResult(null);
    if (count === 0) {
      setError("Unesite bar jednu ispravnu email adresu.");
      return;
    }
    setBusy(true);
    try {
      const res = await fetch("/api/portal/request-reviews", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ emails }),
      });
      const data = (await res.json().catch(() => ({}))) as {
        ok?: boolean;
        message?: string;
        error?: string;
      };
      if (!res.ok || !data.ok) {
        setError(data.error || "Slanje nije uspelo. Pokušajte ponovo.");
        setBusy(false);
        return;
      }
      setResult(data.message || "Zahtevi su poslati.");
      setEmails("");
      setBusy(false);
    } catch {
      setError("Mrežna greška. Pokušajte ponovo.");
      setBusy(false);
    }
  }

  return (
    <div className="rounded-2xl border border-[#ece7e1] bg-white p-5 shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)] sm:p-6">
      <h2 className="text-base font-semibold text-[#0c1828]">Zatraži recenzije od klijenata</h2>
      <p className="mt-1 text-sm leading-relaxed text-zinc-500">
        Unesite email adrese zadovoljnih klijenata (odvojene zarezom ili u novom redu).
        Poslaćemo im ljubazan poziv sa linkom za recenziju — jedan klik, bez registracije.
        Više recenzija = bolja pozicija na Google-u i više poverenja.
      </p>

      <form onSubmit={onSubmit} className="mt-4 space-y-3">
        <textarea
          value={emails}
          onChange={(e) => setEmails(e.target.value)}
          rows={5}
          placeholder={"klijent1@email.com\nklijent2@email.com, klijent3@email.com"}
          className="w-full rounded-xl border border-[#ece7e1] bg-[#faf8f6] px-4 py-3 text-sm text-[#0c1828] placeholder:text-zinc-400 outline-none transition focus:border-[#ffc9ad] focus:bg-white"
        />

        <div className="flex items-center justify-between gap-3">
          <span className="text-xs text-zinc-500">
            {count > 0 ? `${count} ${count === 1 ? "validna adresa" : "validnih adresa"} (max 25 po slanju)` : "Max 25 adresa po slanju"}
          </span>
          <button
            type="submit"
            disabled={busy || count === 0}
            className="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-[#c2410c] px-5 text-sm font-bold text-white transition hover:bg-[#a8380a] active:scale-[0.99] disabled:opacity-60"
          >
            {busy ? <Spinner className="h-4 w-4" /> : null}
            {busy ? "Šaljem..." : "Pošalji zahteve"}
          </button>
        </div>

        {error ? (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-600">
            {error}
          </p>
        ) : null}
        {result ? (
          <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
            {result}
          </p>
        ) : null}
      </form>

      <p className="mt-3 text-xs leading-5 text-zinc-400">
        Savet: tražite recenziju samo od stvarnih klijenata. Lažne recenzije Google kažnjava.
      </p>
    </div>
  );
}