// Meetings & calendar module

function MeetingsPage({ persona }) {
  const [selected, setSelected] = React.useState(null);

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">Calendar</span>
          <h1 className="page-title">Meetings & 1:1s</h1>
          <p className="page-sub">Your first week of meetings, automatically scheduled by People Ops. Decline anything that doesn't work — we'll find another time.</p>
        </div>
        <div className="row">
          <button className="btn btn-ghost"><I.refresh size={14}/> Sync to Google</button>
          <button className="btn btn-primary"><I.plus size={14}/> Block focus time</button>
        </div>
      </div>

      <div className="cal-stats">
        <CalStat label="This week" value="11" sub="meetings scheduled"/>
        <CalStat label="Total time" value="9.5h" sub="incl. lunch breaks"/>
        <CalStat label="Pending RSVPs" value="3" sub="optional events" tone="warn"/>
        <CalStat label="Focus blocks" value="6h" sub="protected time" tone="accent"/>
      </div>

      <div className="cal-grid">
        <div className="cal-week">
          <div className="cw-head">
            <div>
              <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, letterSpacing: "-0.018em" }}>Week of May 11 – May 15</h3>
              <p className="muted" style={{ margin: "4px 0 0", fontSize: 13 }}>All times in Pacific Time (PT)</p>
            </div>
            <div className="row">
              <button className="icon-btn"><I.arrowL size={15}/></button>
              <button className="btn btn-soft btn-sm">This week</button>
              <button className="icon-btn"><I.arrow size={15}/></button>
            </div>
          </div>

          <div className="cw-grid">
            <div className="cw-time-col">
              {["8 AM","9","10","11","12 PM","1","2","3","4","5","6"].map((t, i) => (
                <div key={i} className="cw-time">{t}</div>
              ))}
            </div>
            {MEETINGS.map((d, di) => (
              <div key={di} className="cw-day">
                <div className="cw-day-head">
                  <div className="cw-day-name">{d.day}</div>
                  <div className={"cw-day-num" + (di === 0 ? " is-today" : "")}>{d.date.split(" ")[1]}</div>
                </div>
                <div className="cw-day-body">
                  {d.items.map((m, mi) => {
                    const top = parseHour(m.time) - 8;
                    const bot = parseHour(m.end + (m.end.includes("M") ? "" : (m.time.includes("PM") ? " PM" : " AM"))) - 8;
                    const dur = bot - top;
                    return (
                      <div
                        key={mi}
                        className={"cw-event " + m.status + (m.primary ? " is-primary" : "")}
                        style={{ top: top * 44 + "px", height: dur * 44 - 4 + "px" }}
                        onClick={() => setSelected({ ...m, dayLabel: d.day + " " + d.date })}
                      >
                        <div className="cw-ev-title">{m.title}</div>
                        <div className="cw-ev-time">{m.time}</div>
                      </div>
                    );
                  })}
                  {/* hour rules */}
                  {Array.from({ length: 11 }).map((_, i) => (
                    <div key={i} className="cw-hour-rule" style={{ top: i * 44 + "px" }}/>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="cal-side">
          {selected ? <MeetingDetails m={selected} onClose={() => setSelected(null)}/> :
            <UpcomingHighlight m={MEETINGS[0].items[1]} day="Today · Mon May 11"/>}
          <RsvpCard/>
        </div>
      </div>
    </div>
  );
}

function CalStat({ label, value, sub, tone }) {
  return (
    <div className="cs">
      <div className={"cs-value t-display " + (tone || "")}>{value}</div>
      <div className="cs-label">{label}</div>
      <div className="cs-sub muted">{sub}</div>
    </div>
  );
}

function parseHour(s) {
  // accepts e.g. "11:00 AM" "12:30 PM" "1:30" — defaults AM/PM by surroundings.
  const m = s.match(/(\d{1,2}):?(\d{2})?\s*(AM|PM)?/i);
  let h = parseInt(m[1], 10), min = parseInt(m[2] || "0", 10);
  const ap = (m[3] || "").toUpperCase();
  if (ap === "PM" && h !== 12) h += 12;
  if (ap === "AM" && h === 12) h = 0;
  if (!ap && h <= 7) h += 12; // if it's like "1:30" assume PM in our day
  return h + min / 60;
}

function MeetingDetails({ m, onClose }) {
  return (
    <div className="card md-card fade-up">
      <div className="md-head">
        <div className={"md-bar " + (m.primary ? "primary" : "")}/>
        <div style={{ flex: 1 }}>
          <div className="muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em" }}>{m.dayLabel} · {m.time} – {m.end}</div>
          <h3 style={{ margin: "4px 0 0", fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em" }}>{m.title}</h3>
        </div>
        <button className="icon-btn" onClick={onClose}><I.x size={15}/></button>
      </div>

      <div className="md-section">
        <div className="md-row">
          <I.user size={15} style={{ color: "var(--text-muted)" }}/>
          <div><span className="muted">With</span> <strong>{m.with}</strong></div>
        </div>
        <div className="md-row">
          {m.loc === "Zoom" ? <I.zoom size={15} style={{ color: "#2563eb" }}/> : <I.building size={15} style={{ color: "var(--text-muted)" }}/>}
          <div>{m.loc}</div>
        </div>
        <div className="md-row">
          <I.calendar size={15} style={{ color: "var(--text-muted)" }}/>
          <div>RSVP: <span className={"chip chip-" + (m.status === "accepted" ? "success" : "warn")}>
            {m.status === "accepted" ? "Accepted" : "Tentative"}
          </span></div>
        </div>
      </div>

      <div className="md-agenda">
        <div className="eyebrow">Agenda</div>
        <ol style={{ margin: "8px 0 0", paddingLeft: 18, fontSize: 13, color: "var(--text-muted)", lineHeight: 1.6 }}>
          <li>Welcome & introductions</li>
          <li>Team structure and current priorities</li>
          <li>Your goals for the first 30 days</li>
          <li>Communication norms & 1:1 cadence</li>
          <li>Q&A — anything on your mind</li>
        </ol>
      </div>

      <div className="md-actions">
        {m.loc === "Zoom" && <button className="btn btn-primary" style={{ flex: 1 }}><I.zoom size={14}/> Join meeting</button>}
        <button className="btn btn-ghost"><I.copy size={14}/></button>
        <button className="btn btn-ghost"><I.more size={14}/></button>
      </div>
    </div>
  );
}

function UpcomingHighlight({ m, day }) {
  return (
    <div className="card upcoming">
      <div className="up-tag">
        <span className="live-dot"/>
        <span>Coming up next</span>
      </div>
      <div className="up-time">{m.time} – {m.end}</div>
      <h3 className="up-title">{m.title}</h3>
      <div className="up-meta">
        <Avatar name={m.with} size="sm"/>
        <span>1:1 with <strong>{m.with}</strong></span>
      </div>
      <div className="up-loc">
        <I.zoom size={14}/> Zoom · meet.convoso.com/aarav
      </div>
      <button className="btn btn-primary up-join">
        <I.zoom size={14}/> Join in 47 minutes
      </button>
      <div className="up-hint subtle">We'll remind you 5 minutes before</div>
    </div>
  );
}

function RsvpCard() {
  const pending = [
    { title: "Team welcome lunch", day: "Mon · 12:30 PM", host: "Aarav Mehta" },
    { title: "Lunch & Learn · Convoso AI", day: "Wed · 12:30 PM", host: "Whole company" },
    { title: "Friday social", day: "Fri · 4:30 PM", host: "Whole company" },
  ];
  return (
    <div className="card card-pad">
      <div className="eyebrow" style={{ marginBottom: 10 }}>Pending RSVP</div>
      <div className="col" style={{ gap: 12 }}>
        {pending.map((p, i) => (
          <div key={i} className="rsvp-row">
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{p.title}</div>
              <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{p.day} · {p.host}</div>
            </div>
            <div className="row" style={{ gap: 4 }}>
              <button className="rsvp-btn yes">Yes</button>
              <button className="rsvp-btn no">No</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.MeetingsPage = MeetingsPage;