import { useEffect, useState } from "react";
import { get, put } from "../api";
import { useT } from "../i18n";
import { useStore } from "../store";

interface DirUser {
  id: string;
  username: string;
  display_name: string;
}

/** Choose users a session is shared with (read-only for them). */
export function ShareDialog({ sessionId, onClose }: { sessionId: string; onClose: () => void }) {
  const t = useT();
  const me = useStore((s) => s.me);
  const owner = useStore((s) => s.sessionById[sessionId]?.owner_id);
  const [users, setUsers] = useState<DirUser[]>([]);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [error, setError] = useState<string>();

  useEffect(() => {
    Promise.all([get<DirUser[]>("/users/directory"), get<string[]>(`/sessions/${sessionId}/shares`)])
      .then(([u, s]) => {
        setUsers(u.filter((x) => x.id !== owner && x.id !== me?.id));
        setSelected(new Set(s));
      })
      .catch((e) => setError(e.message));
  }, [sessionId, owner, me?.id]);

  const save = async () => {
    try {
      await put(`/sessions/${sessionId}/shares`, { users: [...selected] });
      onClose();
    } catch (e: any) {
      setError(e.message);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" role="dialog" aria-label={t("share.title")} onClick={(e) => e.stopPropagation()}>
        <h3>{t("share.title")}</h3>
        <div style={{ fontSize: 13, color: "var(--muted)", marginBottom: 8 }}>{t("share.hint")}</div>
        <div className="check-list">
          {users.length === 0 && <div className="empty">{t("share.noUsers")}</div>}
          {users.map((u) => (
            <label key={u.id}>
              <input
                type="checkbox"
                checked={selected.has(u.id)}
                onChange={(e) => {
                  const next = new Set(selected);
                  if (e.target.checked) next.add(u.id);
                  else next.delete(u.id);
                  setSelected(next);
                }}
              />
              {u.display_name || u.username} <span style={{ color: "var(--muted)" }}>@{u.username}</span>
            </label>
          ))}
        </div>
        {error && <div className="notice err">{error}</div>}
        <div className="row" style={{ marginTop: 12, justifyContent: "flex-end" }}>
          <button onClick={onClose}>{t("common.cancel")}</button>
          <button className="primary" onClick={save}>
            {t("common.save")}
          </button>
        </div>
      </div>
    </div>
  );
}