codecraft/web/src/components/ShareDialog.tsx

import { useEffect, useState } from "react";
import { del, get, post, put } from "../api";
import { useT } from "../i18n";
import { useStore } from "../store";
import { toast } from "../dialogs";
import { fmtDate } from "../i18n";

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

interface Link {
  token: string;
  url: string;
  expires_at: number;
}

/** Read-only links for people without an account. */
function Links({ sessionId }: { sessionId: string }) {
  const t = useT();
  const [links, setLinks] = useState<Link[]>([]);
  const [days, setDays] = useState(7);
  const load = () => get<Link[]>(`/sessions/${sessionId}/links`).then(setLinks).catch(() => undefined);
  useEffect(() => void load(), [sessionId]);
  const create = async () => {
    try {
      const l = await post<Link>(`/sessions/${sessionId}/links`, { days });
      await navigator.clipboard?.writeText(l.url).then(() => toast(t("link.copied"), "success"), () => undefined);
      void load();
    } catch (e: any) {
      toast(e.message);
    }
  };
  return (
    <div className="share-links">
      <h4>{t("link.title")}</h4>
      <div className="hint">{t("link.hint")}</div>
      {links.map((l) => (
        <div key={l.token} className="row share-link">
          <input readOnly value={l.url} onFocus={(e) => e.currentTarget.select()} aria-label={t("link.title")} />
          <span className="hint">{t("link.until", { date: fmtDate(l.expires_at, false) })}</span>
          <button onClick={() => navigator.clipboard?.writeText(l.url).then(() => toast(t("link.copied"), "success"))}>{t("link.copy")}</button>
          <button onClick={() => del(`/sessions/${sessionId}/links/${l.token}`).then(load).catch((e) => toast(e.message))}>{t("link.revoke")}</button>
        </div>
      ))}
      <div className="row" style={{ marginTop: 6 }}>
        <select value={days} onChange={(e) => setDays(Number(e.target.value))} aria-label={t("link.validity")}>
          {[1, 7, 30, 90].map((d) => (
            <option key={d} value={d}>
              {t("link.days", { n: d })}
            </option>
          ))}
        </select>
        <button onClick={create}>{t("link.create")}</button>
      </div>
    </div>
  );
}

/** 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>
        <Links sessionId={sessionId} />
        {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>
  );
}