"use client";

import { useMemo, useState } from "react";
import { Button } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { Modal } from "@/components/features/library/modal";
import { StatusLine, useRun } from "@/components/features/accounts/use-run";
import { createMenusAction } from "@/lib/actions/navigation";

export interface SiteChoice { siteId: string; siteName: string; organizationId: string; organizationName: string }

/** Super admin: create one menu and add it to any organisations / websites in one go. */
export function AddMenuDialog({ sites, presetSiteId }: { sites: SiteChoice[]; presetSiteId?: string }) {
  const { pending, msg, errors, run } = useRun();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [picked, setPicked] = useState<string[]>(presetSiteId ? [presetSiteId] : []);
  const orgs = useMemo(() => {
    const m = new Map<string, { id: string; name: string; sites: SiteChoice[] }>();
    for (const s of sites) { const o = m.get(s.organizationId) ?? { id: s.organizationId, name: s.organizationName, sites: [] }; o.sites.push(s); m.set(s.organizationId, o); }
    return [...m.values()];
  }, [sites]);
  const toggle = (ids: string[], on: boolean) => setPicked((p) => on ? [...new Set([...p, ...ids])] : p.filter((x) => !ids.includes(x)));
  const allIds = sites.map((s) => s.siteId);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Add Menu</Button>
      <Modal open={open} onClose={() => setOpen(false)} title="Add Menu">
        <form onSubmit={(e) => { e.preventDefault(); run(() => createMenusAction({ name, siteIds: picked }), () => { setOpen(false); setName(""); }); }} className="space-y-4">
          <Field id="menu-name" label="Menu name" error={errors.name}><input id="menu-name" value={name} maxLength={80} onChange={(e) => setName(e.target.value)} className={inputClass} placeholder="e.g. Sponsors menu" /></Field>
          <fieldset className="space-y-2">
            <legend className="text-xs font-medium">Add it to these websites</legend>
            <label className="flex items-center gap-2 text-sm font-medium"><input type="checkbox" checked={picked.length === allIds.length && allIds.length > 0} onChange={(e) => toggle(allIds, e.target.checked)} />All organisations and websites</label>
            <div className="max-h-64 space-y-3 overflow-auto rounded-md border border-border p-3">
              {orgs.map((o) => {
                const ids = o.sites.map((s) => s.siteId);
                return (
                  <div key={o.id}>
                    <label className="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" checked={ids.every((i) => picked.includes(i))} onChange={(e) => toggle(ids, e.target.checked)} />{o.name}</label>
                    <ul className="mt-1 space-y-1 pl-6">
                      {o.sites.map((s) => <li key={s.siteId}><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={picked.includes(s.siteId)} onChange={(e) => toggle([s.siteId], e.target.checked)} />{s.siteName}</label></li>)}
                    </ul>
                  </div>
                );
              })}
            </div>
            {errors.siteIds ? <p role="alert" className="text-xs text-danger">{errors.siteIds}</p> : null}
          </fieldset>
          <div className="flex items-center justify-end gap-3"><StatusLine msg={msg} /><Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button><Button type="submit" disabled={pending}>{pending ? "Adding…" : `Add to ${picked.length} website${picked.length === 1 ? "" : "s"}`}</Button></div>
        </form>
      </Modal>
    </>
  );
}