"use client";

import Link from "next/link";
import { useState, useTransition } from "react";

interface ContactOption {
  id: string;
  contactName: string;
  outletName: string;
  outletType: string;
  email: string;
  focusAreas: string[];
  lastContactedAt: string | null;
}

interface Props {
  contacts: ContactOption[];
  awardId: string;
  campaignName: string;
  subject: string;
  bodyHtml: string;
  bodyText: string;
}

export function PressContactsBulkSend({
  contacts,
  awardId,
  campaignName,
  subject,
  bodyHtml,
  bodyText,
}: Props) {
  const [isPending, startTransition] = useTransition();
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [result, setResult] = useState<string | null>(null);

  function toggle(id: string) {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function selectAll() {
    setSelectedIds(new Set(contacts.map((c) => c.id)));
  }
  function selectNone() {
    setSelectedIds(new Set());
  }

  function send() {
    if (selectedIds.size === 0) return;
    setResult(null);
    startTransition(async () => {
      try {
        const res = await fetch("/api/admin/press-distribution/send", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            contactIds: [...selectedIds],
            awardId,
            campaignName,
            subject,
            bodyHtml,
            bodyText,
          }),
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || "Greška");
        setResult(`✓ Poslato ${data.sent} / ${data.sent + data.failed + data.skipped}`);
        setSelectedIds(new Set());
      } catch (err) {
        setResult(err instanceof Error ? err.message : "Greška");
      }
    });
  }

  if (contacts.length === 0) {
    return (
      <div className="rounded-2xl border border-amber-300 bg-amber-50 p-4">
        <p className="text-sm text-amber-900">
          ⚠️ Nema dostupnih press kontakata.{" "}
          <Link
            href="/admin/press-contacts"
            className="text-amber-900 underline hover:text-amber-700"
          >
            Dodaj prvi kontakt →
          </Link>
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <p className="text-xs text-muted-foreground">
          Izabrano: <strong>{selectedIds.size}</strong> od {contacts.length} kontakata
        </p>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={selectAll}
            className="text-[10px] font-semibold text-[#c2410c] hover:underline"
          >
            Izaberi sve
          </button>
          <button
            type="button"
            onClick={selectNone}
            className="text-[10px] font-semibold text-muted-foreground hover:underline"
          >
            Poništi
          </button>
        </div>
      </div>

      <ul className="max-h-[300px] space-y-1.5 overflow-y-auto rounded-lg border border-border bg-white p-3">
        {contacts.map((c) => {
          const checked = selectedIds.has(c.id);
          return (
            <li key={c.id}>
              <label className="flex cursor-pointer items-center gap-3 rounded-lg p-2 hover:bg-[#faf9f7]">
                <input
                  type="checkbox"
                  checked={checked}
                  onChange={() => toggle(c.id)}
                  className="h-4 w-4 accent-[#c2410c]"
                />
                <div className="flex-1">
                  <div className="text-sm font-bold text-foreground">{c.outletName}</div>
                  <div className="text-xs text-muted-foreground">
                    {c.contactName} · {c.email}
                    {c.focusAreas.length > 0 ? ` · ${c.focusAreas.join(", ")}` : ""}
                  </div>
                </div>
                <span className="rounded-full bg-[#faf9f7] px-2 py-0.5 text-[10px] font-bold text-muted-foreground">
                  {c.outletType}
                </span>
              </label>
            </li>
          );
        })}
      </ul>

      <div className="flex items-center justify-between gap-3">
        {result ? (
          <p className={`text-sm ${result.startsWith("✓") ? "text-emerald-700" : "text-rose-700"}`}>
            {result}
          </p>
        ) : (
          <p className="text-[0.7rem] text-muted-foreground">
            Svaki kontakt će primiti email sa istim subject + body.
          </p>
        )}
        <button
          type="button"
          onClick={send}
          disabled={isPending || selectedIds.size === 0}
          className="rounded-lg bg-[#c2410c] px-5 py-2 text-sm font-bold text-white hover:bg-[#c8421f] disabled:opacity-50"
        >
          {isPending ? "Šaljem…" : `Pošalji izabranim (${selectedIds.size})`}
        </button>
      </div>
    </div>
  );
}