// Meetings page (0.17.0) — served by templates/meetings.html.
//
// Lists the recordings dropped into the meetings folder (GET /meetings/list),
// takes the meeting-notes options, and POSTs to /transcribe with either
// meeting_file=<basename> or a local upload, plus meeting_outputs,
// meeting_brain and interpret_video. On 200 it hands off to "/" where the
// home page's running view picks the job up from /status. 400/409 detail is
// shown inline. Uses the shared icon set `I` from reader-views.jsx, which
// meetings.html loads first.

const { useState, useEffect, useRef } = React;

// Same accept list as the home page's upload buttons.
const MEETING_ACCEPT = "video/*,audio/*,.mkv,.webm,.m4a,.wav,.mp3,.mp4,.mov";

function fmtSizeMb(bytes) {
  return `${((bytes || 0) / 1048576).toFixed(1)} MB`;
}

function fmtModified(iso) {
  if (!iso) return "";
  try {
    return new Date(iso).toLocaleString("en-US", {
      month: "numeric", day: "numeric", year: "numeric",
      hour: "numeric", minute: "2-digit", hour12: true,
    });
  } catch (err) { return ""; }
}

function MeetingsApp() {
  const [dir, setDir] = useState("");
  const [files, setFiles] = useState([]);
  const [listError, setListError] = useState(null);
  const [loading, setLoading] = useState(true);
  // { kind: "meeting", name } for a folder recording, { kind: "file", file }
  // for an upload. Picking one clears the other.
  const [selected, setSelected] = useState(null);
  const [wantSummary, setWantSummary] = useState(true);
  const [wantActions, setWantActions] = useState(false);
  const [wantFollowups, setWantFollowups] = useState(false);
  const [brain, setBrain] = useState("local"); // local | claude
  const [interpret, setInterpret] = useState(false);
  const [busy, setBusy] = useState(false);
  const [runError, setRunError] = useState(null);
  const fileRef = useRef(null);

  const fetchList = async () => {
    setLoading(true);
    setListError(null);
    try {
      const resp = await fetch("/meetings/list");
      if (!resp.ok) {
        setListError(`HTTP ${resp.status}`);
        return;
      }
      const body = await resp.json();
      setDir(body.dir || "");
      setFiles(body.files || []);
    } catch (err) {
      setListError(`Network error: ${err}`);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchList(); }, []);

  const outputs = [
    wantSummary && "summary",
    wantActions && "actions",
    wantFollowups && "followups",
  ].filter(Boolean);
  const canRun = !!selected && outputs.length > 0 && !busy;

  const run = async () => {
    if (!canRun) return;
    setBusy(true);
    setRunError(null);
    const fd = new FormData();
    if (selected.kind === "file") fd.append("file", selected.file, selected.file.name);
    else fd.append("meeting_file", selected.name);
    fd.append("meeting_outputs", outputs.join(","));
    fd.append("meeting_brain", brain);
    if (interpret) fd.append("interpret_video", "on");
    let resp;
    try {
      resp = await fetch("/transcribe", { method: "POST", body: fd });
    } catch (err) {
      setRunError(`Network error: ${err}`);
      setBusy(false);
      return;
    }
    if (!resp.ok) {
      const body = await resp.json().catch(() => ({}));
      setRunError(body.detail || (resp.status === 409 ? "A job is already running." : `HTTP ${resp.status}`));
      setBusy(false);
      return;
    }
    // The home page's mount effect sees state "running" on /status and
    // restores the running card, phase strip and clock.
    window.location.assign("/");
  };

  const targetLabel = !selected
    ? "Pick a recording or upload a file"
    : selected.kind === "file"
    ? `upload · ${selected.file.name}`
    : selected.name;

  return (
    <div className="app">
      <header className="topbar">
        <a className="brand" href="/" title="Back to the transcriptor">
          <div className="brand-logo"><I.logo /></div>
          <div className="brand-text">
            <div className="brand-name">Transcriptor</div>
            <div className="brand-sub">Recordings → summary, actions, follow-ups</div>
          </div>
        </a>
        <div className="topbar-status">
          <div className="status-chip status-chip--idle">
            <span className="status-dot" />
            meetings
          </div>
        </div>
        <nav className="nav">
          <a className="nav-link" href="/">
            <I.arrowBack size={13}/>
            Transcriptor
          </a>
        </nav>
      </header>

      <div className="page">
        <section className="hero-idle mt-hero">
          <div className="hero-glow"/>
          <div className="hero-eyebrow"><I.notes size={12}/> v{window.APP_VERSION} · meeting notes</div>
          <h1 className="hero-title">
            Meeting notes from a <span className="hero-yt">recording</span>.
          </h1>
          <p className="hero-lede">
            Pick a recording from the meetings folder or upload one. You get the
            speaker-labeled transcript plus a summary, action items and follow-ups,
            written by the local model or by Claude.
          </p>
        </section>

        {runError && (
          <div className="error-banner" style={{ marginBottom: 0 }}>
            <div className="error-icon"><I.alert size={16}/></div>
            <div className="error-body">
              <div className="error-title">Couldn't start the job</div>
              <div className="error-message">{runError}</div>
            </div>
            <button className="error-dismiss" onClick={() => setRunError(null)}><I.x/></button>
          </div>
        )}

        <div className="mt-grid">
          {/* Recordings + upload */}
          <section className="mt-card">
            <div className="mt-card-head">
              <span className="mas-label">RECORDINGS</span>
              <span className="mt-dir" title={dir}>{dir}</span>
              <button className="mt-refresh" onClick={fetchList} title="Refresh the list" disabled={loading}>
                <I.refresh size={12}/>
              </button>
            </div>

            {listError ? (
              <div className="mt-empty">
                <I.alert size={22}/>
                <p>Couldn't list recordings.</p>
                <p className="mt-empty-sub">{listError}</p>
              </div>
            ) : loading && files.length === 0 ? (
              <div className="mt-empty">
                <p className="mt-empty-sub">Loading…</p>
              </div>
            ) : files.length === 0 ? (
              <div className="mt-empty">
                <I.film size={22}/>
                <p>No recordings yet.</p>
                <p className="mt-empty-sub">
                  Drop meeting recordings into <code>{dir || "the meetings folder"}</code> and
                  refresh, or upload one below.
                </p>
              </div>
            ) : (
              <ul className="mt-list">
                {files.map((f) => {
                  const isSel = selected && selected.kind === "meeting" && selected.name === f.name;
                  return (
                    <li key={f.name}>
                      <button
                        type="button"
                        className={`mt-row ${isSel ? "is-selected" : ""}`}
                        onClick={() => setSelected({ kind: "meeting", name: f.name })}
                        title={f.name}
                      >
                        <span className="mt-row-icon"><I.film size={13}/></span>
                        <span className="mt-row-name">{f.name}</span>
                        <span className="mt-row-meta">{fmtSizeMb(f.size_bytes)} · {fmtModified(f.modified)}</span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            )}

            <div className="mt-upload-row">
              <input
                ref={fileRef}
                type="file"
                accept={MEETING_ACCEPT}
                hidden
                onChange={(e) => {
                  const f = e.target.files[0];
                  e.target.value = "";
                  if (f) setSelected({ kind: "file", file: f });
                }}
              />
              <button type="button" className="hero-upload" onClick={() => fileRef.current.click()}>
                <I.upload/> Upload a file
              </button>
              {selected && selected.kind === "file" && (
                <span className="mt-upload-name" title={selected.file.name}>
                  {selected.file.name} · {fmtSizeMb(selected.file.size)}
                </span>
              )}
            </div>
          </section>

          {/* Options + run */}
          <section className="mt-card">
            <span className="mas-label">OUTPUTS</span>
            <div className="mt-opts">
              <label className="opt">
                <input type="checkbox" checked={wantSummary} onChange={(e) => setWantSummary(e.target.checked)}/>
                <span>Summary</span>
              </label>
              <label className="opt">
                <input type="checkbox" checked={wantActions} onChange={(e) => setWantActions(e.target.checked)}/>
                <span>Action items</span>
                <span className="opt-sub">owner · due · quote</span>
              </label>
              <label className="opt">
                <input type="checkbox" checked={wantFollowups} onChange={(e) => setWantFollowups(e.target.checked)}/>
                <span>Follow-ups</span>
                <span className="opt-sub">open questions · next steps</span>
              </label>
            </div>

            <span className="mas-label">BRAIN</span>
            <div className="mt-seg" role="radiogroup" aria-label="Brain">
              <button
                type="button"
                className={`mt-seg-btn ${brain === "local" ? "is-active" : ""}`}
                onClick={() => setBrain("local")}
                aria-pressed={brain === "local"}
              >
                local
              </button>
              <button
                type="button"
                className={`mt-seg-btn ${brain === "claude" ? "is-active" : ""}`}
                onClick={() => setBrain("claude")}
                aria-pressed={brain === "claude"}
              >
                Claude
              </button>
            </div>
            {brain === "claude" && (
              <div className="mt-note">Claude sends the transcript text to Anthropic's API</div>
            )}

            <span className="mas-label">VIDEO</span>
            <div className="mt-opts">
              <label className="opt">
                <input type="checkbox" checked={interpret} onChange={(e) => setInterpret(e.target.checked)}/>
                <span>Interpret video content</span>
                <span className="opt-sub">Qwen-VL · ~2–3× slower</span>
              </label>
            </div>

            <button
              type="button"
              className="hero-submit mt-run"
              onClick={run}
              disabled={!canRun}
              title={outputs.length === 0 ? "Pick at least one output" : !selected ? "Pick a recording or upload a file" : "Start"}
            >
              <I.play/> {busy ? "Starting…" : "Run"}
            </button>
            <div className="mt-run-target" title={targetLabel}>{targetLabel}</div>
          </section>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<MeetingsApp/>);