"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button, Card } from "@/components/ui";
import { setModuleSitesAction } from "@/lib/actions/modules";

/** Super admin: pick every website (project) this module should appear on. */
export function ModuleSites({ moduleKey, sites }: { moduleKey: string; sites: { id: string; name: string; organization: string; licensed: boolean }[] }) {
  const router = useRouter();
  const [sel, setSel] = useState<string[]>(sites.filter((s) => s.licensed).map((s) => s.id));
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  const toggle = (id: string) => setSel((x) => (x.includes(id) ? x.filter((i) => i !== id) : [...x, id]));
  const save = () => start(async () => { const r = await setModuleSitesAction(moduleKey, sel); setMsg({ ok: r.ok, text: r.ok ? (r.message ?? "Saved") : r.error }); if (r.ok) router.refresh(); });
  return (
    <Card className="space-y-3 p-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-sm font-semibold">Show on websites</h2>
        <div className="flex gap-2">
          <Button variant="ghost" disabled={pending} onClick={() => setSel(sites.map((s) => s.id))}>Select all</Button>
          <Button variant="ghost" disabled={pending} onClick={() => setSel([])}>Clear</Button>
        </div>
      </div>
      <p className="text-xs text-muted-foreground">The module appears in the Modules page and menu of the ticked websites only. Unticking hides it there; existing entries are kept.</p>
      {sites.length === 0 ? <p className="text-sm text-muted-foreground">No websites yet.</p> : (
        <ul className="grid gap-2 sm:grid-cols-2">
          {sites.map((s) => (
            <li key={s.id}><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={sel.includes(s.id)} onChange={() => toggle(s.id)} />{s.name} <span className="text-xs text-muted-foreground">({s.organization})</span></label></li>
          ))}
        </ul>
      )}
      <div className="flex items-center gap-3">
        <Button disabled={pending} onClick={save}>{pending ? "Saving…" : "Save websites"}</Button>
        <p role="status" aria-live="polite" className={msg ? (msg.ok ? "text-sm text-success" : "text-sm text-danger") : "sr-only"}>{msg?.text}</p>
      </div>
    </Card>
  );
}