import { useCallback, useEffect, useRef, useState } from "react";
import { api, type Folder } from "./api";

/**
 * Dropdown checklist of the project's folders. Ticking folders restricts the videos
 * shown/counted to those folders (admins verify only some folders; the rest are
 * backup/misc). None ticked = consider all folders. Admin only.
 */
export function FoldersPicker({ projectId, onChange }: { projectId: number; onChange: () => void }) {
  const [open, setOpen] = useState(false);
  const [folders, setFolders] = useState<Folder[]>([]);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const ref = useRef<HTMLDivElement>(null);

  const load = useCallback(async () => {
    try { setFolders(await api.folders(projectId)); } catch (e) { setErr(String(e)); }
  }, [projectId]);

  useEffect(() => { if (open) void load(); }, [open, load]);
  useEffect(() => {
    if (!open) return;
    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [open]);

  const includedCount = folders.filter((f) => f.included).length;

  const commit = async (next: Folder[]) => {
    setFolders(next);
    setBusy(true);
    setErr(null);
    try {
      await api.setFolders(projectId, next.filter((f) => f.included).map((f) => f.folder));
      onChange();
    } catch (e) {
      setErr(String(e));
      await load();
    } finally {
      setBusy(false);
    }
  };

  const toggle = (folder: string) =>
    commit(folders.map((f) => (f.folder === folder ? { ...f, included: !f.included } : f)));
  const considerAll = () => commit(folders.map((f) => ({ ...f, included: false })));

  const label = includedCount === 0 ? "Folders: all ▾" : `Folders: ${includedCount}/${folders.length} ▾`;

  return (
    <div className="members-picker" ref={ref}>
      <button className="btn" onClick={() => setOpen((v) => !v)} title="Pick which folders to verify">{label}</button>
      {open && (
        <div className="members-dropdown">
          <div className="folders-hint dim">Tick folders to verify. None ticked = all folders shown.</div>
          <div className="members-list">
            {folders.map((f) => (
              <label key={f.folder} className={`members-item${f.included ? " on" : ""}`}>
                <input type="checkbox" checked={f.included} disabled={busy} onChange={() => toggle(f.folder)} />
                <span className="mi-name">{f.folder || "(root)"}</span>
                <span className="dim mi-disp">{f.video_count}</span>
              </label>
            ))}
            {folders.length === 0 && <div className="dim mi-empty">no folders — sync the project first</div>}
          </div>
          {err && <div className="mi-err">⚠ {err}</div>}
          <div className="members-foot">
            <button className="btn" disabled={busy || includedCount === 0} onClick={considerAll}>Consider all</button>
            <span className="dim" style={{ marginLeft: 8 }}>
              {includedCount === 0 ? "all folders shown" : `${includedCount} selected`}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}