/* Server-backed Team Board and My Assignments screens. */
(function () {
  "use strict";

  function rows(payload) { return Array.isArray(payload) ? payload : ((payload && payload.results) || []); }
  function asError(error, fallback) { return (error && error.message) || fallback; }
  function dateLabel(value) {
    if (!value) return "No due date";
    const date = new Date(value + "T12:00:00");
    return Number.isNaN(date.valueOf()) ? value : date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
  }
  function stageFor(item) { return ((item.board_summary && item.board_summary.stages) || []).find((stage) => stage.id === item.stage) || { id: item.stage, title: item.stage || "Unassigned", color: "#667085", done: !!item.is_completed }; }
  function canManage() {
    const user = window.__nutridmsAuthenticatedUser || (window.parent && window.parent.__nutridmsAuthenticatedUser) || {};
    return Array.isArray(user.effectivePermissions) && user.effectivePermissions.includes("team_board:admin");
  }
  function assigneeLabel(item) { return item.assignee_name || item.assignee_email || "Unassigned"; }
  async function downloadAttachment(assignmentId, attachment) {
    const file = await window.NutriTeamAssignments.download(assignmentId, attachment.id);
    const url = window.URL.createObjectURL(file.blob);
    const link = document.createElement("a");
    link.href = url; link.download = file.filename || attachment.original_name; document.body.appendChild(link); link.click(); link.remove();
    window.setTimeout(() => window.URL.revokeObjectURL(url), 0);
  }

  function AssignmentCard({ item, onOpen, onMove, boardMode }) {
    const stage = stageFor(item);
    const actions = item.actions || {};
    const stages = (item.board_summary && item.board_summary.stages) || [];
    return <article className={`lta-card ${item.is_completed ? "done" : ""} ${item.due_state === "overdue" ? "overdue" : ""}`}>
      <div className="lta-card-kind">{item.subject_type} · {item.board_summary && item.board_summary.name}</div>
      <button className="lta-card-title" onClick={() => onOpen(item)}>{item.title}</button>
      <p>{item.task || item.note || "No task instructions added."}</p>
      <div className="lta-card-meta"><span className={`pill ${item.is_completed ? "success" : item.due_state === "overdue" ? "error" : "info"}`}>{stage.title}</span><span className="pill neutral">{item.priority}</span></div>
      <div className="lta-card-foot"><span title={assigneeLabel(item)}>{assigneeLabel(item)}</span><span>{dateLabel(item.due_date)}</span></div>
      {boardMode && <select aria-label={`Move ${item.title}`} disabled={!actions.can_update} value={item.stage} onChange={(event) => onMove(item, event.target.value)}>
        {stages.map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
      </select>}
    </article>;
  }

  function AssignmentDetail({ detail, members, onClose, onRefresh, onMove, onOpenSubject, toast }) {
    const [comment, setComment] = React.useState("");
    const [replyTo, setReplyTo] = React.useState(null);
    const [busy, setBusy] = React.useState("");
    if (!detail) return null;
    const item = detail.item;
    const actions = item.actions || {};
    const stages = (item.board_summary && item.board_summary.stages) || [];
    const checklist = detail.checklist || [];
    const comments = detail.comments || [];
    const attachments = detail.attachments || [];
    const activity = detail.activity || [];
    const run = async (key, operation) => {
      setBusy(key);
      try { await operation(); await onRefresh(item.id); }
      catch (error) { toast(asError(error, "Assignment update failed.")); }
      finally { setBusy(""); }
    };
    const completeCount = checklist.filter((row) => row.is_completed).length;
    return <div className="lta-modal-bg" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}>
      <section className="lta-modal" role="dialog" aria-modal="true" aria-label="Assignment detail">
        <header><div><span className="lta-card-kind">{item.subject_type} · {item.board_summary && item.board_summary.name}</span><h2>{item.title}</h2><p>{item.task || item.note || "No task instructions added."}</p></div><button className="btn secondary sm" onClick={onClose}>Close</button></header>
        <div className="lta-detail-meta"><span>Assigned to <strong>{assigneeLabel(item)}</strong></span><span>Due {dateLabel(item.due_date)}</span><span>{item.priority} priority</span></div>
        <div className="lta-detail-actions">
          <button className="btn secondary sm" onClick={() => onOpenSubject(item)}><Icon name={item.subject_type === "recipe" ? "utensils-crossed" : "leaf"} size={14} /> Open {item.subject_type}</button>
          <select disabled={!actions.can_update || !!busy} value={item.stage} onChange={(event) => onMove(item, event.target.value, () => onRefresh(item.id))}>{stages.map((stage) => <option key={stage.id} value={stage.id}>{stage.title}</option>)}</select>
          {actions.can_manage && <select aria-label="Reassign work" disabled={!!busy} value={item.assignee || ""} onChange={(event) => run("assignee", () => window.NutriTeamAssignments.update(item.id, { assignee: event.target.value || null }))}><option value="">Unassigned</option>{members.map((member) => <option key={member.id} value={member.id}>{member.name || member.email}</option>)}</select>}
        </div>
        <div className="lta-detail-grid">
          <section className="card pad"><div className="lta-section-head"><h3>Checklist</h3><span>{completeCount}/{checklist.length}</span></div>
            {checklist.length === 0 ? <p className="muted">No checklist items were added.</p> : checklist.map((row) => <div className="lta-check" key={row.id}>
              <label><input type="checkbox" disabled={!actions.can_update || !!busy} checked={row.is_completed} onChange={(event) => run(`check-${row.id}`, () => window.NutriTeamAssignments.updateChecklist(item.id, row.id, { is_completed: event.target.checked, resolved_value: row.resolved_value || row.proposed_value || null }))} /> <strong>{row.title}</strong></label>
              {row.field_reference && row.field_reference.field && <small>{row.field_reference.section ? row.field_reference.section + " › " : ""}{row.field_reference.field}</small>}
              {row.proposed_value !== null && row.proposed_value !== undefined && <small>Proposed: {typeof row.proposed_value === "string" ? row.proposed_value : JSON.stringify(row.proposed_value)}</small>}
            </div>)}
          </section>
          <section className="card pad"><div className="lta-section-head"><h3>Discussion</h3><span>{comments.length}</span></div>
            <div className="lta-comments">{comments.length === 0 && <p className="muted">No comments yet.</p>}{comments.map((row) => <div className="lta-comment" key={row.id}><strong>{row.author_name || "Team member"}</strong><p>{row.body}</p><div><button className="btn ghost sm" onClick={() => setReplyTo(row)}>Reply</button><button className="btn ghost sm" onClick={() => run(`react-${row.id}`, () => window.NutriTeamAssignments.react(item.id, row.id, "✅"))}>✅ {(row.reactions || []).length || ""}</button></div></div>)}</div>
            {actions.can_comment && <form onSubmit={(event) => { event.preventDefault(); if (!comment.trim()) return; run("comment", async () => { await window.NutriTeamAssignments.addComment(item.id, { body: comment.trim(), parent: replyTo && replyTo.id }); setComment(""); setReplyTo(null); }); }}><textarea className="textarea" rows="2" value={comment} onChange={(event) => setComment(event.target.value)} placeholder={replyTo ? `Reply to ${replyTo.author_name || "comment"}` : "Write a comment…"} />{replyTo && <button type="button" className="btn ghost sm" onClick={() => setReplyTo(null)}>Cancel reply</button>}<button className="btn primary sm" disabled={busy === "comment"}>Post comment</button></form>}
          </section>
          <section className="card pad"><div className="lta-section-head"><h3>Attachments</h3><span>{attachments.length}</span></div>
            {attachments.map((row) => <div className="lta-file" key={row.id}><button className="btn ghost sm" onClick={() => run(`download-file-${row.id}`, () => downloadAttachment(item.id, row))}>{row.original_name}</button><small>{Math.ceil((row.size_bytes || 0) / 1024)} KB</small>{actions.can_attach && <button className="btn ghost sm" onClick={() => run(`remove-file-${row.id}`, () => window.NutriTeamAssignments.removeAttachment(item.id, row.id))}>Remove</button>}</div>)}
            {actions.can_attach && <label className="lta-upload"><input type="file" accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.csv,.tsv,.xls,.xlsx,.doc,.docx,.txt" onChange={(event) => { const file = event.target.files && event.target.files[0]; if (file) run("upload", () => window.NutriTeamAssignments.upload(item.id, file)); event.target.value = ""; }} />Attach file (10 MB max)</label>}
          </section>
          <section className="card pad"><div className="lta-section-head"><h3>Activity</h3><span>{activity.length}</span></div><div className="lta-activity">{activity.map((row) => <div key={row.id}><strong>{row.actor_name || "System"}</strong> {row.summary}<small>{new Date(row.created_at).toLocaleString()}</small></div>)}</div></section>
        </div>
      </section>
    </div>;
  }

  function BoardSettings({ board, onClose, onSaved, toast }) {
    const [name, setName] = React.useState(board.name);
    const [color, setColor] = React.useState(board.color || "#3b7c0f");
    const [stages, setStages] = React.useState((board.stages || []).map((row) => ({ ...row })));
    const [saving, setSaving] = React.useState(false);
    const updateStage = (index, patch) => setStages((current) => current.map((stage, row) => row === index ? { ...stage, ...patch } : stage));
    const moveStage = (index, offset) => setStages((current) => {
      const target = index + offset;
      if (target < 0 || target >= current.length) return current;
      const next = current.slice(); const value = next.splice(index, 1)[0]; next.splice(target, 0, value); return next;
    });
    const save = async (event) => {
      event.preventDefault();
      const cleaned = stages.map((stage, index) => ({ ...stage, id: String(stage.id || `stage-${index + 1}`).trim().toLowerCase().replace(/[^a-z0-9-]/g, "-") || `stage-${index + 1}`, title: String(stage.title || "").trim() }));
      if (!name.trim() || !cleaned.length || cleaned.some((stage) => !stage.title)) { toast("Give the board and every stage a name."); return; }
      setSaving(true);
      try { await window.NutriTeamAssignments.updateBoard(board.id, { name: name.trim(), color, stages: cleaned }); toast("Board settings saved"); onSaved(); onClose(); }
      catch (error) { toast(asError(error, "Board settings could not be saved.")); }
      finally { setSaving(false); }
    };
    return <div className="lta-modal-bg" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><form className="lta-modal lta-composer" onSubmit={save}><header><div><h2>Manage board</h2><p>Stages control operational task progress only. They never route recipe or ingredient publishing approvals.</p></div><button type="button" className="btn secondary sm" onClick={onClose}>Close</button></header><div className="lta-form-grid"><label>Name<input value={name} onChange={(event) => setName(event.target.value)} maxLength="120" /></label><label>Accent color<input value={color} onChange={(event) => setColor(event.target.value)} pattern="#[0-9A-Fa-f]{6}" /></label></div><div className="lta-stage-editor"><div className="lta-section-head"><h3>Stages</h3><button type="button" className="btn secondary sm" onClick={() => setStages((current) => [...current, { id: `stage-${Date.now()}`, title: "New stage", color: "#667085", done: false }])}>Add stage</button></div>{stages.map((stage, index) => <div className="lta-stage-row" key={`${stage.id}-${index}`}><input value={stage.title} aria-label={`Stage ${index + 1} name`} onChange={(event) => updateStage(index, { title: event.target.value })} /><input value={stage.color || "#667085"} aria-label={`Stage ${stage.title} color`} onChange={(event) => updateStage(index, { color: event.target.value })} /><label><input type="checkbox" checked={!!stage.done} onChange={(event) => updateStage(index, { done: event.target.checked })} /> Completed</label><button type="button" className="btn ghost sm" onClick={() => moveStage(index, -1)} disabled={index === 0}>↑</button><button type="button" className="btn ghost sm" onClick={() => moveStage(index, 1)} disabled={index === stages.length - 1}>↓</button><button type="button" className="btn ghost sm" onClick={() => setStages((current) => current.length > 1 ? current.filter((_, row) => row !== index) : current)} disabled={stages.length === 1}>Remove</button></div>)}</div><div className="lta-modal-footer"><button type="button" className="btn secondary" onClick={onClose}>Cancel</button><button className="btn primary" disabled={saving}>{saving ? "Saving…" : "Save board"}</button></div></form></div>;
  }

  function AssignmentTable({ items, onOpen }) {
    return <div className="lta-table-wrap"><table className="table"><thead><tr><th>Item</th><th>Board</th><th>Stage</th><th>Assignee</th><th>Due</th><th>Checklist</th></tr></thead><tbody>{items.map((item) => { const stage = stageFor(item); const checks = item.checklist_summary || {}; return <tr key={item.id} onClick={() => onOpen(item)} style={{ cursor: "pointer" }}><td><strong>{item.title}</strong><small>{item.subject_type}</small></td><td>{item.board_summary && item.board_summary.name}</td><td><span className="pill info">{stage.title}</span></td><td>{assigneeLabel(item)}</td><td>{dateLabel(item.due_date)}</td><td>{checks.completed || 0}/{checks.total || 0}</td></tr>; })}</tbody></table></div>;
  }

  function AssignmentCalendar({ items, onOpen }) {
    const buckets = items.reduce((groups, item) => { const key = item.due_date || "No due date"; (groups[key] = groups[key] || []).push(item); return groups; }, {});
    return <div className="lta-calendar">{Object.keys(buckets).sort().map((date) => <section key={date}><h3>{date === "No due date" ? date : dateLabel(date)}</h3>{buckets[date].map((item) => <button key={item.id} className="lta-calendar-item" onClick={() => onOpen(item)}><strong>{item.title}</strong><span>{stageFor(item).title} · {assigneeLabel(item)}</span></button>)}</section>)}</div>;
  }

  function AssignmentQueue({ items, onOpen }) {
    const buckets = items.reduce((groups, item) => { const key = `${item.board_summary && item.board_summary.name || "Board"} · ${stageFor(item).title}`; (groups[key] = groups[key] || []).push(item); return groups; }, {});
    return <div className="lta-queue">{Object.entries(buckets).map(([label, rows]) => <section key={label}><h3>{label}<small>{rows.length}</small></h3>{rows.map((item) => <button key={item.id} onClick={() => onOpen(item)}><span><strong>{item.title}</strong><small>{item.task || "No task instructions"}</small></span><span>{dateLabel(item.due_date)}</span></button>)}</section>)}</div>;
  }

  function AssignmentComposer({ board, onClose, onSaved, toast }) {
    const [options, setOptions] = React.useState({ subjects: [], people: [] });
    const [loading, setLoading] = React.useState(true);
    const [saving, setSaving] = React.useState(false);
    const [checklist, setChecklist] = React.useState("");
    React.useEffect(() => {
      let cancelled = false;
      Promise.allSettled([
        window.NutriAPI.get("/recipes/?page_size=200"),
        window.NutriAPI.get("/ingredients/?page_size=200"),
        window.NutriTeamAssignments.members(),
      ]).then((responses) => {
        if (cancelled) return;
        const recipes = responses[0].status === "fulfilled" ? rows(responses[0].value) : [];
        const ingredients = responses[1].status === "fulfilled" ? rows(responses[1].value) : [];
        const members = responses[2].status === "fulfilled" ? rows(responses[2].value) : [];
        setOptions({
          subjects: recipes.map((row) => ({ id: row.id, type: "recipe", name: row.name })).concat(ingredients.map((row) => ({ id: row.id, type: "ingredient", name: row.name }))),
          people: members,
        });
      }).catch((error) => toast(asError(error, "Assignment options could not be loaded."))).finally(() => { if (!cancelled) setLoading(false); });
      return () => { cancelled = true; };
    }, []);
    const submit = async (event) => {
      event.preventDefault();
      const form = new FormData(event.currentTarget);
      const subject = String(form.get("subject") || "").split(":");
      if (subject.length !== 2) return;
      setSaving(true);
      try {
        await window.NutriTeamAssignments.create({
          board: board.id, subject_type: subject[0], subject_id: subject[1], stage: form.get("stage"), assignee: form.get("assignee") || null,
          task: String(form.get("task") || ""), note: String(form.get("note") || ""), priority: form.get("priority"), due_date: form.get("due_date") || null,
          checklist: checklist.split("\n").map((value) => value.trim()).filter(Boolean).map((title) => ({ title: title })),
        });
        toast("Assignment created"); onSaved(); onClose();
      } catch (error) { toast(asError(error, "Assignment could not be created.")); }
      finally { setSaving(false); }
    };
    return <div className="lta-modal-bg" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><form className="lta-modal lta-composer" onSubmit={submit}><header><div><h2>Assign work</h2><p>Creates an operational task only; publishing-workflow reviewer routing is unchanged.</p></div><button type="button" className="btn secondary sm" onClick={onClose}>Close</button></header>{loading ? <p className="muted">Loading available content and members…</p> : <>{!options.subjects.length ? <p className="muted">Create a recipe or ingredient before assigning work.</p> : <><label>Recipe or ingredient<select name="subject" required>{options.subjects.map((row) => <option key={`${row.type}:${row.id}`} value={`${row.type}:${row.id}`}>{row.name} · {row.type}</option>)}</select></label><div className="lta-form-grid"><label>Assignee<select name="assignee" required>{options.people.map((row) => <option key={row.id} value={row.id}>{row.name || row.email}</option>)}</select></label><label>Stage<select name="stage" defaultValue={board.stages && board.stages[0] && board.stages[0].id}>{(board.stages || []).map((row) => <option key={row.id} value={row.id}>{row.title}</option>)}</select></label></div><div className="lta-form-grid"><label>Priority<select name="priority" defaultValue="medium"><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option></select></label><label>Due date<input type="date" name="due_date" /></label></div><label>Task<input name="task" maxLength="240" placeholder="What needs to be completed?" /></label><label>Notes<textarea name="note" rows="3" placeholder="Context and acceptance criteria" /></label><label>Checklist (one item per line)<textarea rows="3" value={checklist} onChange={(event) => setChecklist(event.target.value)} placeholder="Verify nutrient evidence\nConfirm supplier source" /></label><div className="lta-modal-footer"><button type="button" className="btn secondary" onClick={onClose}>Cancel</button><button className="btn primary" disabled={saving}>{saving ? "Assigning…" : "Create assignment"}</button></div></>}</>}</form></div>;
  }

  function LiveTeamAssignments({ mode }) {
    const { toast, setPage, openRecipe, openIngredient } = useApp();
    const manager = canManage();
    const [boards, setBoards] = React.useState([]);
    const [activeBoardId, setActiveBoardId] = React.useState("");
    const [items, setItems] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState("");
    const [filters, setFilters] = React.useState({ search: "", status: "", due: "", page: 1 });
    const [view, setView] = React.useState(mode === "mine" ? "cards" : "board");
    const [total, setTotal] = React.useState(0);
    const [detail, setDetail] = React.useState(null);
    const [composer, setComposer] = React.useState(false);
    const [boardSettings, setBoardSettings] = React.useState(false);
    const [members, setMembers] = React.useState([]);
    const autoOpened = React.useRef(false);
    const activeBoard = boards.find((row) => String(row.id) === String(activeBoardId)) || boards[0] || null;
    const loadBoards = React.useCallback(async () => {
      const payload = await window.NutriTeamAssignments.boards();
      const next = rows(payload);
      setBoards(next);
      setActiveBoardId((current) => current && next.some((row) => String(row.id) === String(current)) ? current : String((next[0] && next[0].id) || ""));
      return next;
    }, []);
    const loadItems = React.useCallback(async (quiet) => {
      if (mode !== "mine" && !activeBoardId) return;
      if (!quiet) setLoading(true);
      try {
        setError("");
        const params = { ...filters };
        if (mode !== "mine") params.board = activeBoardId;
        const payload = mode === "mine" ? await window.NutriTeamAssignments.mine(params) : await window.NutriTeamAssignments.list(params);
        setItems(rows(payload)); setTotal(Number(payload && payload.count) || rows(payload).length);
      } catch (requestError) { setError(asError(requestError, "Assignments could not be loaded.")); }
      finally { if (!quiet) setLoading(false); }
    }, [mode, activeBoardId, filters]);
    const refresh = React.useCallback(async (quiet) => { await loadBoards(); await loadItems(quiet); }, [loadBoards, loadItems]);
    React.useEffect(() => { loadBoards().catch((requestError) => setError(asError(requestError, "Team Board could not be loaded."))); }, []);
    React.useEffect(() => {
      if (!manager) { setMembers([]); return; }
      window.NutriTeamAssignments.members().then((payload) => setMembers(rows(payload))).catch((requestError) => setError(asError(requestError, "Assignment members could not be loaded.")));
    }, [manager]);
    React.useEffect(() => { loadItems(false); }, [loadItems]);
    React.useEffect(() => { if (mode === "create" && activeBoard && !autoOpened.current) { autoOpened.current = true; setComposer(true); } }, [mode, activeBoard]);
    const setFilter = (key, value) => setFilters((current) => ({ ...current, [key]: value, page: key === "page" ? value : 1 }));
    const move = async (item, stage, after) => { try { await window.NutriTeamAssignments.update(item.id, { stage: stage }); toast("Assignment stage updated"); await loadItems(true); if (after) after(); } catch (requestError) { toast(asError(requestError, "The assignment could not be moved.")); } };
    const openDetail = async (item) => { setDetail({ item: item, loading: true }); try { const results = await Promise.all([window.NutriTeamAssignments.get(item.id), window.NutriTeamAssignments.checklist(item.id), window.NutriTeamAssignments.comments(item.id), window.NutriTeamAssignments.attachments(item.id), window.NutriTeamAssignments.activity(item.id)]); setDetail({ item: results[0], checklist: rows(results[1]), comments: rows(results[2]), attachments: rows(results[3]), activity: rows(results[4]) }); } catch (requestError) { toast(asError(requestError, "Assignment detail could not be loaded.")); setDetail(null); } };
    const refreshDetail = async (id) => { const results = await Promise.all([window.NutriTeamAssignments.get(id), window.NutriTeamAssignments.checklist(id), window.NutriTeamAssignments.comments(id), window.NutriTeamAssignments.attachments(id), window.NutriTeamAssignments.activity(id)]); setDetail({ item: results[0], checklist: rows(results[1]), comments: rows(results[2]), attachments: rows(results[3]), activity: rows(results[4]) }); await loadItems(true); };
    const openSubject = async (item) => { try { const source = await window.NutriAPI.get(`/${item.subject_type === "recipe" ? "recipes" : "ingredients"}/${item.subject_id}/`); if (item.subject_type === "recipe" && openRecipe) openRecipe(source); else if (item.subject_type === "ingredient" && openIngredient) openIngredient(source); else setPage(item.subject_type === "recipe" ? "recipes" : "ingredients"); } catch (requestError) { toast(asError(requestError, "Linked content could not be opened.")); } };
    const createBoard = async () => { const name = window.prompt("Board name"); if (!name || !name.trim()) return; try { const board = await window.NutriTeamAssignments.createBoard({ name: name.trim(), color: "#3b7c0f", stages: (activeBoard && activeBoard.stages) || [] }); await loadBoards(); setActiveBoardId(String(board.id)); toast("Team board created"); } catch (requestError) { toast(asError(requestError, "Board could not be created.")); } };
    const cardList = <div className="lta-list">{items.map((item) => <AssignmentCard key={item.id} item={item} onOpen={openDetail} onMove={move} boardMode={mode !== "mine"} />)}{!items.length && !loading && <div className="empty"><div className="icon"><Icon name="check-check" size={24} /></div><h3>{mode === "mine" ? "Nothing assigned to you" : "No assignments yet"}</h3><p>{mode === "mine" ? "Work assigned to your membership will appear here across every board." : "Create the first assignment for this board."}</p></div>}</div>;
    const compactList = <div className="lta-compact-list">{items.map((item) => <button key={item.id} onClick={() => openDetail(item)}><span className="lta-card-kind">{item.subject_type}</span><strong>{item.title}</strong><span>{stageFor(item).title}</span><span>{dateLabel(item.due_date)}</span></button>)}</div>;
    const boardColumns = activeBoard && <div className="lta-columns" style={{ "--lta-columns": Math.max((activeBoard.stages || []).length, 1) }}>{(activeBoard.stages || []).map((stage) => <section className="lta-column" key={stage.id}><header><span style={{ background: stage.color }} /><strong>{stage.title}</strong><small>{items.filter((item) => item.stage === stage.id).length}</small></header>{items.filter((item) => item.stage === stage.id).map((item) => <AssignmentCard key={item.id} item={item} onOpen={openDetail} onMove={move} boardMode />)}</section>)}</div>;
    const visibleContent = view === "board" && mode !== "mine" ? boardColumns : view === "table" ? <AssignmentTable items={items} onOpen={openDetail} /> : view === "calendar" ? <AssignmentCalendar items={items} onOpen={openDetail} /> : view === "queue" ? <AssignmentQueue items={items} onOpen={openDetail} /> : view === "compact" ? compactList : cardList;
    return <div className="lta-page"><style>{`.lta-page{max-width:1480px;margin:0 auto}.lta-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:14px 0 20px}.lta-head h1{margin:0;font-family:var(--serif);font-size:40px}.lta-head p{margin:6px 0 0;color:var(--gray-600)}.lta-actions,.lta-filters,.lta-detail-actions,.lta-card-meta,.lta-card-foot,.lta-modal-footer,.lta-stage-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lta-shell{display:grid;grid-template-columns:240px minmax(0,1fr);border:1px solid var(--gray-200);border-radius:18px;overflow:hidden;background:#fff;min-height:560px}.lta-sidebar{padding:15px;background:#fafcf9;border-right:1px solid var(--gray-200)}.lta-sidebar button{width:100%;display:flex;gap:8px;align-items:center;padding:10px;text-align:left;border-radius:10px}.lta-sidebar button.on{background:#edf8e8;color:var(--green-800)}.lta-sidebar small{margin-left:auto}.lta-main{padding:18px;min-width:0}.lta-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.lta-view-switch{display:flex;gap:4px}.lta-view-switch button{padding:6px 8px;border:1px solid var(--gray-200);border-radius:7px;background:#fff;text-transform:capitalize}.lta-view-switch button.on{background:#edf8e8;color:var(--green-800);border-color:#b7ddb0}.lta-compact-list,.lta-calendar,.lta-queue{display:grid;gap:9px}.lta-compact-list>button,.lta-calendar-item,.lta-queue>section>button{display:flex;gap:12px;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:10px;border:1px solid var(--gray-200);border-radius:9px;background:#fff}.lta-compact-list>button .lta-card-kind{margin-right:auto}.lta-table-wrap{overflow:auto}.lta-calendar>section,.lta-queue>section{display:grid;gap:6px}.lta-calendar h3,.lta-queue h3{margin:0;font-size:14px}.lta-queue h3 small{margin-left:8px;color:var(--gray-500)}.lta-calendar-item span,.lta-queue small{color:var(--gray-600);font-size:12px}.lta-filter-bar input,.lta-filter-bar select,.lta-detail-actions select,.lta-composer input,.lta-composer select,.lta-composer textarea{border:1px solid var(--gray-300);border-radius:8px;padding:8px;background:#fff}.lta-filter-bar input{min-width:220px;flex:1}.lta-list{display:grid;gap:10px}.lta-card{background:#fff;border:1px solid var(--gray-200);border-radius:13px;padding:13px;box-shadow:0 3px 10px rgba(16,24,40,.035)}.lta-card.overdue{border-color:#f4b4b4}.lta-card.done{opacity:.72}.lta-card-kind{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--green-700)}.lta-card-title{font-size:15px;font-weight:750;text-align:left;padding:0;margin:6px 0;border:0;background:transparent}.lta-card p{font-size:12px;line-height:1.45;color:var(--gray-600);margin:0 0 10px}.lta-card-foot{justify-content:space-between;color:var(--gray-500);font-size:11px;margin-top:10px}.lta-card select{width:100%;margin-top:11px;padding:6px;border:1px solid var(--gray-200);border-radius:7px}.lta-columns{display:grid;grid-template-columns:repeat(var(--lta-columns),minmax(230px,1fr));gap:12px;overflow-x:auto}.lta-column{min-height:430px;border:1px solid var(--gray-200);background:#f8faf8;border-radius:14px;padding:10px}.lta-column>header{display:flex;gap:8px;align-items:center;padding:4px 3px 11px}.lta-column>header span{width:9px;height:9px;border-radius:50%}.lta-column>header small{margin-left:auto}.lta-column .lta-card{margin-bottom:9px}.lta-modal-bg{position:fixed;inset:0;z-index:300;background:rgba(16,24,40,.55);display:grid;place-items:center;padding:20px}.lta-modal{width:min(1050px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.25)}.lta-modal header{display:flex;justify-content:space-between;gap:15px}.lta-modal h2{font-family:var(--serif);margin:0;font-size:29px}.lta-modal header p{color:var(--gray-600);margin:5px 0 0}.lta-detail-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--gray-600);font-size:12px;padding:13px 0}.lta-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.lta-section-head{display:flex;justify-content:space-between;align-items:center}.lta-section-head h3{font-size:15px;margin:0}.lta-check,.lta-comment,.lta-file,.lta-activity>div{border-top:1px solid var(--gray-100);padding:9px 0;font-size:13px}.lta-check small,.lta-activity small,.lta-file small{display:block;color:var(--gray-500);margin:3px 0}.lta-comment p{margin:5px 0}.lta-comments{max-height:210px;overflow:auto}.lta-file{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lta-upload{display:inline-block;margin-top:9px;border:1px dashed var(--gray-300);border-radius:8px;padding:9px;cursor:pointer}.lta-upload input{display:none}.lta-composer{width:min(680px,100%)}.lta-composer label{display:grid;gap:5px;margin-top:11px;font-size:13px;font-weight:700}.lta-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lta-stage-editor{display:grid;gap:8px;margin-top:18px}.lta-stage-row{padding:8px;border:1px solid var(--gray-200);border-radius:9px}.lta-stage-row input[type="text"],.lta-stage-row input:not([type]){flex:1}.lta-modal-footer{justify-content:flex-end;margin-top:16px}.lta-pagination{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px;color:var(--gray-600);font-size:13px}@media(max-width:850px){.lta-shell{grid-template-columns:1fr}.lta-sidebar{border-right:0;border-bottom:1px solid var(--gray-200);display:flex;gap:6px;overflow:auto}.lta-sidebar button{min-width:170px}.lta-detail-grid{grid-template-columns:1fr}.lta-columns{grid-template-columns:repeat(var(--lta-columns),260px)}}@media(max-width:600px){.lta-head h1{font-size:31px}.lta-form-grid{grid-template-columns:1fr}}`}</style><Crumbs path={[{ label: mode === "mine" ? "My Assignments" : "Team Board" }]} /><div className="lta-head"><div><h1>{mode === "mine" ? "My Assignments" : "Team Board"}</h1><p>{mode === "mine" ? "Live work assigned to your active membership across every board." : "Live operational work. Publishing workflow routing remains separate."}</p></div><div className="lta-actions">{mode === "mine" && <button className="btn secondary" onClick={() => setPage("assignments")}>Open Team Board</button>}{manager && mode !== "mine" && activeBoard && <button className="btn secondary" onClick={() => setBoardSettings(true)}>Manage board</button>}{manager && mode !== "mine" && <button className="btn secondary" onClick={createBoard}>New board</button>}{manager && activeBoard && <button className="btn primary" onClick={() => setComposer(true)}><Icon name="user-plus" size={15} /> Assign work</button>}</div></div>{error && <div className="alert error">{error} <button className="btn ghost sm" onClick={() => refresh(false)}>Retry</button></div>}<div className={mode === "mine" ? "lta-main card" : "lta-shell"}>{mode !== "mine" && <aside className="lta-sidebar">{boards.map((board) => <button className={String(board.id) === String(activeBoardId) ? "on" : ""} key={board.id} onClick={() => { setActiveBoardId(String(board.id)); setFilter("page", 1); }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: board.color }} />{board.name}<small>{board.assignment_count || 0}</small></button>)}</aside>}<main className="lta-main"><div className="lta-filter-bar"><input type="search" value={filters.search} onChange={(event) => setFilter("search", event.target.value)} placeholder="Search assignments…" /><select value={filters.status} onChange={(event) => setFilter("status", event.target.value)}><option value="">All status</option><option value="active">Active</option><option value="completed">Completed</option></select><select value={filters.due} onChange={(event) => setFilter("due", event.target.value)}><option value="">Any due date</option><option value="today">Due today</option><option value="overdue">Overdue</option><option value="upcoming">Upcoming</option></select><div className="lta-view-switch">{(mode === "mine" ? ["cards", "compact", "table", "calendar", "queue"] : ["board", "cards", "compact", "table", "calendar", "queue"]).map((option) => <button type="button" key={option} className={view === option ? "on" : ""} onClick={() => setView(option)}>{option}</button>)}</div></div>{loading ? <div className="empty"><div className="icon"><Icon name="loader-circle" size={24} /></div><h3>Loading assignments…</h3></div> : visibleContent}<div className="lta-pagination"><span>{total} assignment{total === 1 ? "" : "s"}</span><span><button className="btn secondary sm" disabled={filters.page <= 1} onClick={() => setFilter("page", Math.max(1, filters.page - 1))}>Previous</button> <button className="btn secondary sm" disabled={items.length < 25} onClick={() => setFilter("page", filters.page + 1)}>Next</button></span></div></main></div>{composer && activeBoard && <AssignmentComposer board={activeBoard} toast={toast} onClose={() => setComposer(false)} onSaved={() => refresh(true)} />}{boardSettings && activeBoard && <BoardSettings board={activeBoard} toast={toast} onClose={() => setBoardSettings(false)} onSaved={() => refresh(true)} />}{detail && <AssignmentDetail detail={detail} members={members} toast={toast} onClose={() => setDetail(null)} onRefresh={refreshDetail} onMove={move} onOpenSubject={openSubject} />}</div>;
  }

  function LiveAssignmentsScreen() { return <LiveTeamAssignments mode="board" />; }
  function LiveMyAssignments() { return <LiveTeamAssignments mode="mine" />; }
  function LiveCreateAssignmentPage() { return <LiveTeamAssignments mode="create" />; }

  window.AssignmentsScreen = LiveAssignmentsScreen;
  window.MyAssignments = LiveMyAssignments;
  window.CreateAssignmentPage = LiveCreateAssignmentPage;
})();