// Meeting detail (control center), Meeting create/edit, Paper detail, Paper create/edit, Resolution detail

// ===========================================================
// MEETING CREATE / EDIT (full page form)
// ===========================================================
const MeetingForm = ({ navigate, meetingId }) => {
  const existing = meetingId ? getMeeting(meetingId) : null;
  const [form, setForm] = React.useState(() => ({
    title: existing?.title || "",
    no: existing?.no || `${String(MEETINGS.length + 47).padStart(3, "0")}/2026`,
    type: existing?.type || "General",
    date: existing?.date?.slice(0, 16) || "2026-05-15T10:00",
    location: existing?.location || "Council Chamber, City Hall",
    notes: existing?.notes || "",
    participantIds: existing?.participantIds || [],
  }));
  const [showPicker, setShowPicker] = React.useState(false);
  const toast = useToast();

  const save = () => {
    toast(meetingId ? "Meeting updated" : "Meeting created", "success");
    navigate({ name: "meeting-detail", id: meetingId || "M-046" });
  };

  return (
    <div className="page page--narrow" data-screen-label={meetingId ? "Edit meeting" : "Create meeting"}>
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">{meetingId ? "Edit meeting" : "Create new meeting"}</h1>
          <p className="page__subtitle">{meetingId ? "Update meeting information and participants." : "Schedule a new council meeting and invite participants."}</p>
        </div>
      </div>

      <div className="card">
        <div className="card__header"><h3 className="card__title">Meeting details</h3></div>
        <div className="card__body" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="field">
            <label className="field__label">Meeting title<span style={{ color: "var(--danger)" }}> *</span></label>
            <input className="input" placeholder="e.g. General Council Meeting — May 2026" value={form.title} onChange={e => setForm({ ...form, title: e.target.value })}/>
          </div>
          <div className="field__row">
            <div className="field">
              <label className="field__label">Meeting number</label>
              <input className="input mono" value={form.no} onChange={e => setForm({ ...form, no: e.target.value })}/>
              <span className="field__hint">Auto-suggested. Format: NNN/YYYY</span>
            </div>
            <div className="field">
              <label className="field__label">Meeting type</label>
              <div style={{ display: "flex", gap: 8 }}>
                {["General", "Emergency"].map(t => (
                  <label key={t} className={`btn ${form.type === t ? "btn--primary" : ""}`} style={{ flex: 1, cursor: "pointer" }}>
                    <input type="radio" style={{ display: "none" }} checked={form.type === t} onChange={() => setForm({ ...form, type: t })}/>
                    {t === "Emergency" && <Icon name="alert" size={13}/>}
                    {t}
                  </label>
                ))}
              </div>
            </div>
          </div>
          <div className="field__row">
            <div className="field">
              <label className="field__label">Date & time<span style={{ color: "var(--danger)" }}> *</span></label>
              <input type="datetime-local" className="input" value={form.date} onChange={e => setForm({ ...form, date: e.target.value })}/>
            </div>
            <div className="field">
              <label className="field__label">Location</label>
              <input className="input" value={form.location} onChange={e => setForm({ ...form, location: e.target.value })}/>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card__header">
          <h3 className="card__title">Participants</h3>
          <span className="card__sub">{form.participantIds.length} selected</span>
          <div className="card__actions">
            <button className="btn btn--sm" onClick={() => setShowPicker(true)}><Icon name="plus" size={12}/> Add participants</button>
          </div>
        </div>
        <div className="card__body">
          {form.participantIds.length === 0 ? (
            <Empty icon="users" title="No participants yet" text="Add councillors and secretariat staff who will attend."
                   action={<button className="btn btn--primary btn--sm" onClick={() => setShowPicker(true)}><Icon name="plus" size={12}/> Add participants</button>}/>
          ) : (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {form.participantIds.map(id => {
                const p = getParticipant(id);
                return (
                  <span className="chip" key={id}>
                    <span className="chip__avatar">{p.initials}</span>
                    <span>{p.name}</span>
                    <span className="muted" style={{ fontSize: 11 }}>· {p.section}</span>
                    <span className="chip__remove" onClick={() => setForm({ ...form, participantIds: form.participantIds.filter(x => x !== id) })}>
                      <Icon name="x" size={12}/>
                    </span>
                  </span>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card__header"><h3 className="card__title">Internal notes</h3><span className="card__sub">Visible to staff only</span></div>
        <div className="card__body">
          <textarea className="textarea" placeholder="Optional remarks or context for this meeting" value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}/>
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
        <button className="btn" onClick={() => navigate({ name: "meetings" })}>Cancel</button>
        <button className="btn">Save as draft</button>
        <button className="btn btn--primary" onClick={save}><Icon name="check" size={14}/> {meetingId ? "Save changes" : "Create meeting"}</button>
      </div>

      {showPicker && (
        <ParticipantPicker
          selected={form.participantIds}
          onClose={() => setShowPicker(false)}
          onConfirm={(ids) => { setForm({ ...form, participantIds: ids }); setShowPicker(false); }}
        />
      )}
    </div>
  );
};

const ParticipantPicker = ({ selected, onClose, onConfirm }) => {
  const [chosen, setChosen] = React.useState(new Set(selected));
  const [q, setQ] = React.useState("");
  const filtered = PARTICIPANTS.filter(p => !q || (p.name + p.section).toLowerCase().includes(q.toLowerCase()));
  const toggle = (id) => {
    const next = new Set(chosen);
    next.has(id) ? next.delete(id) : next.add(id);
    setChosen(next);
  };
  return (
    <Modal title="Add participants" size="lg" onClose={onClose}
      footer={<>
        <span className="muted" style={{ marginRight: "auto", fontSize: 12.5 }}>{chosen.size} selected</span>
        <button className="btn" onClick={onClose}>Cancel</button>
        <button className="btn btn--primary" onClick={() => onConfirm([...chosen])}>Add {chosen.size} participants</button>
      </>}
    >
      <div className="filterbar__search" style={{ marginBottom: 12 }}>
        <Icon name="search" size={14}/>
        <input placeholder="Search participants" value={q} onChange={e => setQ(e.target.value)}/>
      </div>
      <div style={{ maxHeight: 360, overflow: "auto", border: "1px solid var(--border)", borderRadius: 6 }}>
        <table className="tbl">
          <tbody>
            {filtered.map(p => (
              <tr key={p.id} onClick={() => toggle(p.id)} style={{ cursor: "pointer" }}>
                <td style={{ width: 32 }}><input type="checkbox" checked={chosen.has(p.id)} onChange={() => toggle(p.id)}/></td>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <Avatar p={p}/>
                    <div>
                      <div className="tbl__primary">{p.name}</div>
                      <div className="tbl__sub">{p.section} · {p.role}</div>
                    </div>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Modal>
  );
};

// ===========================================================
// COUNCIL PAPER FORM
// ===========================================================
const PaperForm = ({ navigate, paperId }) => {
  const existing = paperId ? getPaper(paperId) : null;
  const toast = useToast();
  const [form, setForm] = React.useState(() => ({
    title: existing?.title || "",
    description: existing?.description || "",
    section: existing?.section || SECTIONS[0],
    submittedBy: existing?.submittedBy || "p3",
    notes: existing?.notes || "",
    attachments: existing?.attachments || [],
  }));

  return (
    <div className="page page--narrow" data-screen-label={paperId ? "Edit paper" : "New paper"}>
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">{paperId ? "Edit council paper" : "New council paper"}</h1>
          <p className="page__subtitle">{paperId ? "Update paper details before submission." : "Submitted papers can be added to a meeting agenda by staff."}</p>
        </div>
      </div>

      <div className="card">
        <div className="card__header"><h3 className="card__title">Paper details</h3></div>
        <div className="card__body" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="field">
            <label className="field__label">Paper title<span style={{ color: "var(--danger)" }}> *</span></label>
            <input className="input" placeholder="A short, decisive title" value={form.title} onChange={e => setForm({ ...form, title: e.target.value })}/>
          </div>
          <div className="field">
            <label className="field__label">Description<span style={{ color: "var(--danger)" }}> *</span></label>
            <textarea className="textarea" rows={5} placeholder="Briefly explain the matter, the proposal, and any background councillors should know before voting." value={form.description} onChange={e => setForm({ ...form, description: e.target.value })}/>
            <span className="field__hint">Markdown supported · {form.description.length} characters</span>
          </div>
          <div className="field__row">
            <div className="field">
              <label className="field__label">Section</label>
              <select className="select" value={form.section} onChange={e => setForm({ ...form, section: e.target.value })}>
                {SECTIONS.map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field__label">Submitted by</label>
              <select className="select" value={form.submittedBy} onChange={e => setForm({ ...form, submittedBy: e.target.value })}>
                {PARTICIPANTS.map(p => <option key={p.id} value={p.id}>{p.name} — {p.section}</option>)}
              </select>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card__header">
          <h3 className="card__title">Attachments</h3>
          <span className="card__sub">PDF, Word, Excel, images — multiple files</span>
        </div>
        <div className="card__body">
          <div style={{
            border: "1.5px dashed var(--border-strong)",
            borderRadius: 8,
            padding: 22,
            textAlign: "center",
            background: "var(--bg-sunken)",
            color: "var(--muted)",
          }}>
            <div style={{ marginBottom: 6, color: "var(--ink-soft)", fontWeight: 500 }}>
              <Icon name="upload" size={16}/> Drag files here or <span style={{ color: "var(--brand)", textDecoration: "underline", cursor: "pointer" }}>browse</span>
            </div>
            <div style={{ fontSize: 12 }}>Up to 25 MB per file · PDF, DOCX, XLSX, PNG, JPG</div>
          </div>
          {form.attachments.length > 0 && (
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }}>
              {form.attachments.map((a, i) => <Attachment key={i} a={a}/>)}
            </div>
          )}
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card__header"><h3 className="card__title">Internal notes</h3><span className="card__sub">Optional · staff-only</span></div>
        <div className="card__body">
          <textarea className="textarea" placeholder="Notes for the secretariat" value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}/>
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
        <button className="btn" onClick={() => navigate({ name: "papers" })}>Cancel</button>
        <button className="btn">Save as draft</button>
        <button className="btn btn--primary" onClick={() => { toast("Paper submitted for inclusion", "success"); navigate({ name: "papers" }); }}>
          <Icon name="send" size={14}/> Submit paper
        </button>
      </div>
    </div>
  );
};

// ===========================================================
// PAPER DETAIL
// ===========================================================
const PaperDetail = ({ navigate, paperId }) => {
  const p = getPaper(paperId);
  if (!p) return <div className="page">Paper not found.</div>;
  const sub = getParticipant(p.submittedBy);
  const meeting = p.relatedMeetingId ? getMeeting(p.relatedMeetingId) : null;
  const agendaItem = meeting?.agenda.find(a => a.paperId === p.id);
  const resolution = agendaItem?.resolutionId ? getResolution(agendaItem.resolutionId) : null;

  return (
    <div className="page" data-screen-label={`Paper ${p.id}`}>
      <div className="page__header">
        <div className="page__title-block">
          <div className="row" style={{ gap: 8, marginBottom: 4 }}>
            <span className="badge badge--outline mono">{p.id}</span>
            <StatusPill status={p.status}/>
            <span className="muted" style={{ fontSize: 12.5 }}>Submitted {fmtDate(p.submittedAt)}</span>
          </div>
          <h1 className="page__title">{p.title}</h1>
        </div>
        <div className="page__actions">
          <button className="btn"><Icon name="archive" size={14}/> Archive</button>
          <button className="btn" onClick={() => navigate({ name: "paper-edit", id: p.id })}><Icon name="edit" size={14}/> Edit</button>
          {p.status === "Submitted" && (
            <button className="btn btn--primary"><Icon name="plus" size={14}/> Add to agenda</button>
          )}
        </div>
      </div>

      <div className="detail-grid">
        <div className="detail-grid__main">
          <div className="card">
            <div className="card__header"><h3 className="card__title">Description</h3></div>
            <div className="card__body" style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-soft)" }}>
              {p.description}
            </div>
          </div>

          <div className="card" style={{ marginTop: 16 }}>
            <div className="card__header">
              <h3 className="card__title">Attachments</h3>
              <span className="card__sub">{p.attachments.length} file{p.attachments.length === 1 ? "" : "s"}</span>
            </div>
            <div className="card__body">
              {p.attachments.length === 0 ? (
                <Empty icon="paperclip" title="No attachments" text="Files added to this paper will appear here."/>
              ) : (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                  {p.attachments.map((a, i) => <Attachment key={i} a={a}/>)}
                </div>
              )}
            </div>
          </div>

          {resolution && (
            <div className="card" style={{ marginTop: 16, borderColor: "#aedcc1", boxShadow: "0 0 0 3px rgba(21,128,61,0.05)" }}>
              <div className="card__header" style={{ background: "var(--success-bg)" }}>
                <Icon name="gavel" size={14} style={{ color: "var(--success)" }}/>
                <h3 className="card__title">Resolution passed</h3>
                <span className="badge badge--outline mono" style={{ marginLeft: "auto" }}>{resolution.id}</span>
              </div>
              <div className="card__body">
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6 }}>{resolution.text}</p>
                <div className="row" style={{ marginTop: 12, gap: 8 }}>
                  <span className="badge badge--brand"><Icon name="tag" size={10}/> {resolution.enforcingParty}</span>
                  <VoteResultPill vote={resolution.vote}/>
                  <span className="muted" style={{ fontSize: 12 }}>· Passed {fmtDate(resolution.passedDate)}</span>
                </div>
              </div>
            </div>
          )}

          <div className="card" style={{ marginTop: 16 }}>
            <div className="card__header"><h3 className="card__title">Timeline</h3></div>
            <div className="card__body">
              <Timeline items={[
                { date: p.submittedAt, label: `Paper drafted by ${sub?.name}`, icon: "edit" },
                p.status !== "Draft" && { date: p.submittedAt, label: "Submitted for inclusion", icon: "send" },
                meeting && { date: meeting.date, label: `Added to ${meeting.no} agenda`, icon: "list" },
                agendaItem?.vote && { date: meeting?.date, label: `Voted — ${agendaItem.vote.for}–${agendaItem.vote.against}–${agendaItem.vote.abstain}`, icon: "vote" },
                resolution && { date: resolution.passedDate, label: `Resolution ${resolution.id} passed`, icon: "gavel" },
              ].filter(Boolean)}/>
            </div>
          </div>
        </div>

        <div className="detail-grid__side">
          <div className="card">
            <div className="card__header"><h3 className="card__title">Details</h3></div>
            <div className="card__body" style={{ display: "flex", flexDirection: "column", gap: 12, fontSize: 13 }}>
              <DetailRow label="Submitted by" value={
                <div className="row" style={{ gap: 8 }}>
                  <Avatar p={sub} size="sm"/>
                  <div>
                    <div>{sub?.name}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{sub?.role}</div>
                  </div>
                </div>
              }/>
              <DetailRow label="Section" value={p.section}/>
              <DetailRow label="Submitted" value={fmtDate(p.submittedAt)}/>
              <DetailRow label="Status" value={<StatusPill status={p.status}/>}/>
              {meeting && <DetailRow label="Related meeting" value={
                <a className="row" style={{ gap: 6, color: "var(--brand)", cursor: "pointer" }} onClick={() => navigate({ name: "meeting-detail", id: meeting.id })}>
                  <span className="mono">{meeting.no}</span>
                  <Icon name="external" size={11}/>
                </a>
              }/>}
            </div>
          </div>
          {p.notes && (
            <div className="card">
              <div className="card__header"><h3 className="card__title">Internal notes</h3></div>
              <div className="card__body" style={{ fontSize: 13, color: "var(--ink-soft)" }}>{p.notes}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const DetailRow = ({ label, value }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
    <span style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>{label}</span>
    <div>{value}</div>
  </div>
);

const Timeline = ({ items }) => (
  <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
    {items.map((it, i) => (
      <li key={i} style={{ display: "flex", gap: 12, position: "relative" }}>
        <div style={{ position: "relative", flexShrink: 0 }}>
          <div style={{
            width: 26, height: 26, borderRadius: "50%", background: "var(--brand-50)",
            color: "var(--brand)", display: "grid", placeItems: "center"
          }}>
            <Icon name={it.icon} size={12}/>
          </div>
          {i < items.length - 1 && (
            <div style={{ position: "absolute", left: 13, top: 28, bottom: -16, width: 1.5, background: "var(--border)" }}/>
          )}
        </div>
        <div style={{ paddingTop: 4, paddingBottom: 6 }}>
          <div style={{ fontSize: 13 }}>{it.label}</div>
          <div className="muted" style={{ fontSize: 11.5 }}>{fmtDate(it.date)}</div>
        </div>
      </li>
    ))}
  </ol>
);

// ===========================================================
// RESOLUTION DETAIL
// ===========================================================
const ResolutionDetail = ({ navigate, resolutionId }) => {
  const r = getResolution(resolutionId);
  if (!r) return <div className="page">Resolution not found.</div>;
  const m = getMeeting(r.meetingId);
  const p = r.paperId ? getPaper(r.paperId) : null;

  return (
    <div className="page" data-screen-label={`Resolution ${r.id}`}>
      <div className="page__header">
        <div className="page__title-block">
          <div className="row" style={{ gap: 8, marginBottom: 4 }}>
            <span className="badge badge--outline mono">{r.id}</span>
            <span className="badge badge--success badge--dot">Archived · Final</span>
            <span className="muted" style={{ fontSize: 12.5 }}>Passed {fmtDate(r.passedDate)}</span>
          </div>
          <h1 className="page__title">{r.summary}</h1>
        </div>
        <div className="page__actions">
          <button className="btn"><Icon name="download" size={14}/> Download</button>
          <button className="btn"><Icon name="external" size={14}/> Print</button>
        </div>
      </div>

      <div className="detail-grid">
        <div className="detail-grid__main">
          <div className="card">
            <div className="card__header"><h3 className="card__title">Resolution text</h3></div>
            <div className="card__body" style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink)", fontFamily: "var(--font-serif)" }}>
              {r.text}
            </div>
            <div className="card__footer">
              <Icon name="info" size={12}/>
              Once passed, the wording of a council resolution is immutable.
            </div>
          </div>

          <div className="card" style={{ marginTop: 16 }}>
            <div className="card__header"><h3 className="card__title">Vote breakdown</h3></div>
            <div className="card__body">
              <VoteBar vote={r.vote}/>
              <div style={{ marginTop: 12, fontSize: 12.5, color: "var(--muted)" }}>
                Quorum confirmed · {r.vote.for + r.vote.against + r.vote.abstain} votes recorded
              </div>
            </div>
          </div>
        </div>

        <div className="detail-grid__side">
          <div className="card">
            <div className="card__header"><h3 className="card__title">Sources</h3></div>
            <div className="card__body" style={{ display: "flex", flexDirection: "column", gap: 12, fontSize: 13 }}>
              <DetailRow label="Enforcing party" value={<span className="badge badge--brand"><Icon name="tag" size={10}/> {r.enforcingParty}</span>}/>
              <DetailRow label="Source meeting" value={
                <a className="row" style={{ gap: 6, color: "var(--brand)", cursor: "pointer" }} onClick={() => navigate({ name: "meeting-detail", id: r.meetingId })}>
                  <span className="mono">{m?.no}</span>
                  <Icon name="external" size={11}/>
                </a>
              }/>
              {p && <DetailRow label="Source paper" value={
                <a className="row" style={{ gap: 6, color: "var(--brand)", cursor: "pointer" }} onClick={() => navigate({ name: "paper-detail", id: p.id })}>
                  <span className="mono">{p.id}</span>
                  <Icon name="external" size={11}/>
                </a>
              }/>}
              <DetailRow label="Date passed" value={fmtDate(r.passedDate)}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {
  MeetingForm, PaperForm, PaperDetail, ResolutionDetail, ParticipantPicker, DetailRow, Timeline,
});