import { useState } from "react";
import { del, post, put } from "../../api";
import { useFetch } from "../../hooks";
import { useT } from "../../i18n";
import type { User } from "../../types";
import { confirmDialog, promptDialog, toast } from "../../dialogs";

interface Folder {
  id: string;
  path: string;
  users: string[];
}

/** Admin: folders inside the workspace shared with selected users. */
export function Folders() {
  const t = useT();
  const { data, reload } = useFetch<{ workspace: string; folders: Folder[] }>("/folders");
  const users = (useFetch<User[]>("/users").data ?? []).filter((u) => u.role !== "admin");
  const [path, setPath] = useState("");
  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();

  const run = async (fn: () => Promise<unknown>) => {
    try {
      await fn();
      setNotice({ ok: true, text: t("settings.saved") });
      reload();
    } catch (e: any) {
      setNotice({ ok: false, text: e.message });
    }
  };

  const toggle = (f: Folder, userId: string) => {
    const next = f.users.includes(userId) ? f.users.filter((u) => u !== userId) : [...f.users, userId];
    void run(() => put(`/folders/${f.id}/access`, { users: next }));
  };

  const ws = data?.workspace ?? "";
  return (
    <>
      <div className="notice">{t("folders.intro")}</div>
      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>}
      {data?.folders.length === 0 && <div className="empty">{t("folders.none")}</div>}
      {data?.folders.map((f) => (
        <div className="panel" key={f.id}>
          <h3>
            📁 <code>{f.path.slice(ws.length) || "/"}</code>
            <span className="spacer" />
            <button className="small danger" onClick={() => void confirmDialog({ message: t("folders.removeConfirm"), danger: true, confirmLabel: t("folders.remove") }).then((ok): unknown => ok && run(() => del(`/folders/${f.id}`)))}>
              {t("folders.remove")}
            </button>
          </h3>
          <div className="check-list">
            {users.length === 0 && <div style={{ color: "var(--muted)" }}>{t("folders.noUsers")}</div>}
            {users.map((u) => (
              <label key={u.id}>
                <input type="checkbox" checked={f.users.includes(u.id)} onChange={() => toggle(f, u.id)} />
                {u.display_name || u.username} <span style={{ color: "var(--muted)" }}>@{u.username}</span>
              </label>
            ))}
          </div>
        </div>
      ))}
      <div className="panel">
        <h3>{t("folders.add")}</h3>
        <div className="row">
          <code>{ws}/</code>
          <input value={path} onChange={(e) => setPath(e.target.value)} placeholder="team/project" style={{ flex: 1, minWidth: 160 }} />
          <button className="primary" disabled={!path.trim()} onClick={() => run(async () => (await post("/folders", { path }), setPath("")))}>
            + {t("common.add")}
          </button>
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6 }}>{t("folders.addHint")}</div>
      </div>
    </>
  );
}