/* global React, ReactDOM */
// Variation A — "Mission Control"
// Hero cards for Off Today / Leading Daily / Weekend, then full roster grid.

const { useState, useMemo, useEffect } = React;

function MissionControl({ liveOff, liveMode = false, people: peopleProp, leadHistory: leadHistoryProp }) {
  const { weekend, meta } = window.CS_DATA;
  const basePeople = peopleProp || window.CS_DATA.people;
  const [teamFilter, setTeamFilter] = useState("All");
  const [regionFilter, setRegionFilter] = useState("All");
  const [statusFilter, setStatusFilter] = useState("All");
  const [localHistory, setLocalHistory] = useState(() => window.CSLeadHistory.load());
  const leadHistory = leadHistoryProp !== undefined ? leadHistoryProp : localHistory;

  // Re-load history when localStorage changes (so Admin re-picks reflect here without refresh)
  useEffect(() => {
    if (leadHistoryProp !== undefined) return; // parent-driven, no polling needed
    const onStorage = () => setLocalHistory(window.CSLeadHistory.load());
    window.addEventListener("storage", onStorage);
    const id = setInterval(onStorage, 2000);
    return () => { window.removeEventListener("storage", onStorage); clearInterval(id); };
  }, [leadHistoryProp]);

  // When live data is present, treat it as authoritative for who's off today.
  const people = useMemo(() => {
    if (!liveMode || !liveOff) return basePeople;
    // Index live entries by Workable ID (primary) and by name (fallback).
    const offById = new Map();
    const offByName = new Map();
    liveOff.forEach(o => {
      if (o.workableId) offById.set(String(o.workableId), o);
      if (o.name) offByName.set(o.name.toLowerCase(), o);
    });
    return basePeople.map(p => {
      const hit =
        (p.workableId && offById.get(String(p.workableId))) ||
        offByName.get(p.name.toLowerCase());
      if (hit) return { ...p, status: "off", reason: hit.reason || "Time Off" };
      if (p.status === "off") return { ...p, status: "working", reason: undefined };
      return p;
    });
  }, [liveOff, liveMode, basePeople]);

  const offToday = people.filter(p => p.status === "off");

  // Leads driven by history (seeded from CS_DATA.leadsHistory inside the store)
  const todayLeads = useMemo(() => window.CSLeadGen.SCOPES.map(scope => ({
    scope,
    name: leadHistory[`${meta.today.iso}__${scope}`] || null,
  })), [leadHistory, meta.today.iso]);
  const tomorrowLeads = useMemo(() => window.CSLeadGen.SCOPES.map(scope => ({
    scope,
    name: leadHistory[`${meta.tomorrow.iso}__${scope}`] || null,
  })), [leadHistory, meta.tomorrow.iso]);

  const leadNames = new Set(
    [...todayLeads, ...tomorrowLeads].filter(l => l.name).map(l => l.name)
  );

  const onWeekendNames = new Set(weekend.flatMap(w => [w.sat, w.sun]));

  const filtered = useMemo(() => people.filter(p => {
    if (teamFilter !== "All" && p.team !== teamFilter) return false;
    if (regionFilter !== "All" && p.region !== regionFilter) return false;
    if (statusFilter === "Working" && p.status !== "working") return false;
    if (statusFilter === "Off" && p.status !== "off") return false;
    return true;
  }), [teamFilter, regionFilter, statusFilter]);

  const groups = useMemo(() => {
    const buckets = {
      "L1 · EMEA":  filtered.filter(p => p.team === "L1" && p.region === "EMEA"),
      "L1 · APAC":  filtered.filter(p => p.team === "L1" && p.region === "APAC"),
      "L1 · LATAM": filtered.filter(p => p.team === "L1" && p.region === "LATAM"),
      "L2":         filtered.filter(p => p.team === "L2"),
      "Invoicing":  filtered.filter(p => p.team === "Invoicing"),
    };
    return Object.entries(buckets).filter(([, list]) => list.length > 0);
  }, [filtered]);

  return (
    <div className="mc-root">
      {/* ── Header ─────────────────────────────────── */}
      <header className="mc-header">
        <div className="mc-header-left">
          <div className="mc-eyebrow">
            <span className="mc-live-dot" /> LIVE · {meta.today.date}, 2026
          </div>
          <h1 className="mc-title">{meta.title}</h1>
        </div>
        <div className="mc-header-right">
          <div className="mc-stat">
            <div className="mc-stat-num">{people.filter(p => p.status === "working").length}</div>
            <div className="mc-stat-label">Available</div>
          </div>
          <div className="mc-stat mc-stat-off">
            <div className="mc-stat-num">{offToday.length}</div>
            <div className="mc-stat-label">Away</div>
          </div>
          <div className="mc-stat mc-stat-total">
            <div className="mc-stat-num">{people.length}</div>
            <div className="mc-stat-label">Team total</div>
          </div>
          <div className="mc-slack">
            {meta.slack.map(s => <span key={s} className="mc-slack-chip">{s}</span>)}
          </div>
        </div>
      </header>

      {/* ── Hero row: 3 cards ─────────────────────── */}
      <div className="mc-hero-row">
        {/* Away today */}
        <section className="mc-card mc-card-off">
          <div className="mc-card-head">
            <h2>Away today</h2>
            <span className="mc-card-count">{offToday.length}</span>
          </div>
          <ul className={`mc-away-list ${offToday.length > 5 ? "is-two-col" : ""}`}>
            {offToday.map(p => (
              <li key={p.name}>
                <span className="mc-avatar mc-avatar-off">{p.name[0]}</span>
                <div className="mc-away-info">
                  <div className="mc-away-name">{p.name}</div>
                  <div className="mc-away-meta">
                    {p.team}{p.region ? ` · ${p.region}` : ""} · {p.tz}
                  </div>
                </div>
                <span className="mc-pill mc-pill-off">{p.reason || "Off"}</span>
              </li>
            ))}
          </ul>
        </section>

        {/* Leading daily */}
        <section className="mc-card mc-card-lead">
          <div className="mc-card-head">
            <h2>Leading daily standup</h2>
          </div>
          <div className="mc-lead-grid">
            <div className="mc-lead-col">
              <div className="mc-lead-day mc-lead-day-today">
                <span className="mc-lead-pip" />Today · {meta.today.date}
              </div>
              {todayLeads.map(l => (
                <LeadRow key={l.scope} l={l} muted={false} />
              ))}
            </div>
            <div className="mc-lead-divider" />
            <div className="mc-lead-col">
              <div className="mc-lead-day">Tomorrow · {meta.tomorrow.date}</div>
              {tomorrowLeads.map(l => (
                <LeadRow key={l.scope} l={l} muted={true} />
              ))}
            </div>
          </div>
        </section>

        {/* Weekend */}
        <section className="mc-card mc-card-weekend">
          <div className="mc-card-head">
            <h2>Weekend coverage</h2>
            <span className="mc-card-sub">May 30 – 31</span>
          </div>
          <table className="mc-weekend-table">
            <thead>
              <tr>
                <th></th>
                <th>{meta.sat.date.replace("Sat, ", "Sat · ")}</th>
                <th>{meta.sun.date.replace("Sun, ", "Sun · ")}</th>
              </tr>
            </thead>
            <tbody>
              {weekend.map(w => (
                <tr key={w.region}>
                  <td className="mc-weekend-region">{w.region}</td>
                  <td>
                    <span className="mc-avatar mc-avatar-weekend">{w.sat[0]}</span>
                    {w.sat}
                  </td>
                  <td>
                    <span className="mc-avatar mc-avatar-weekend">{w.sun[0]}</span>
                    {w.sun}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      {/* ── Filters ──────────────────────────────── */}
      <div className="mc-filters">
        <div className="mc-filters-label">Roster</div>
        <FilterGroup label="Team" options={["All", "L1", "L2", "Invoicing"]} value={teamFilter} onChange={setTeamFilter} />
        <FilterGroup label="Region" options={["All", "EMEA", "APAC", "LATAM"]} value={regionFilter} onChange={setRegionFilter} />
        <FilterGroup label="Status" options={["All", "Working", "Off"]} value={statusFilter} onChange={setStatusFilter} />
        <div className="mc-filters-count">
          Showing <strong>{filtered.length}</strong> of {people.length}
        </div>
      </div>

      {/* ── Roster ───────────────────────────────── */}
      <div className="mc-roster">
        {groups.map(([groupName, list]) => (
          <section key={groupName} className="mc-roster-group">
            <header className="mc-roster-head">
              <h3>{groupName}</h3>
              <span className="mc-roster-count">{list.length}</span>
            </header>
            <div className="mc-roster-grid">
              {list.map(p => {
                const isLead = leadNames.has(p.name);
                const onWk = onWeekendNames.has(p.name);
                const onShift = p.status === "working" && p.shift === "on";
                const stateClass = p.status === "off" ? "mc-person-off"
                                : onShift ? "mc-person-on-shift"
                                : "mc-person-off-shift";
                return (
                  <div key={p.name} className={`mc-person ${stateClass}`}>
                    <span className="mc-status-bar" />
                    <span className={`mc-avatar mc-avatar-${p.status}`}>{p.name[0]}</span>
                    <div className="mc-person-body">
                      <div className="mc-person-name">{p.name}</div>
                      <div className="mc-person-meta">{p.tz}</div>
                    </div>
                    <div className="mc-person-tags">
                      {p.status === "off"
                        ? <span className="mc-tag mc-tag-off">{p.reason || "Off"}</span>
                        : onShift
                          ? <span className="mc-tag mc-tag-on">On shift</span>
                          : <span className="mc-tag mc-tag-shift-off">Off shift</span>}
                      {isLead && <span className="mc-tag mc-tag-lead">Lead</span>}
                      {onWk && <span className="mc-tag mc-tag-weekend">Wknd</span>}
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}

function FilterGroup({ label, options, value, onChange }) {
  return (
    <div className="mc-filter">
      <span className="mc-filter-label">{label}</span>
      <div className="mc-filter-pills">
        {options.map(opt => (
          <button
            key={opt}
            className={`mc-filter-pill ${value === opt ? "is-active" : ""}`}
            onClick={() => onChange(opt)}>
            {opt}
          </button>
        ))}
      </div>
    </div>
  );
}

function LeadRow({ l, muted }) {
  return (
    <div className="mc-lead-row">
      <div className="mc-lead-scope">{l.scope}</div>
      {l.name ? (
        <div className={`mc-lead-name ${muted ? "mc-lead-name-muted" : ""}`}>
          <span className={`mc-avatar ${muted ? "mc-avatar-lead-muted" : "mc-avatar-lead"}`}>
            {l.name[0]}
          </span>
          {l.name}
        </div>
      ) : (
        <div className="mc-lead-name mc-lead-unassigned">Not assigned</div>
      )}
    </div>
  );
}

window.MissionControl = MissionControl;