// Home / Command Center v2 — Core 2.0 material

// ---------- Focus Now ----------
// Phase 24 · Polish · Focus card simplified. Was 9 visual elements
// stacked (2 badges + title + context + progress ring + sub-task line +
// contributors label + 4-avatar stack + "N people" + 3 buttons).
// Now 5 elements: 1 status pill · title · context · meta line · 2 actions.
function FocusNow({ hero, list }) {
  return (
    <div className="focus-wrap">
      {/* Hero card */}
      <div className="hero">
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 22, position: 'relative', flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 340px', minWidth: 0 }}>
            {/* Single unified status pill (was "NEEDS DECISION" + "FEATURE") */}
            <span className="hero-tag hero-tag-attention">
              <Icon name="circleAlert" size={12} />
              Decision required
            </span>
            <div className="hero-title">{hero.title}</div>
            <p className="hero-context">{hero.context}</p>

            {/* Consolidated meta line — owner · due · progress · dep */}
            <div className="hero-meta">
              <div className="m">
                <Avatar name={hero.owner} size="xs" />
                <span><b>{hero.owner}</b></span>
              </div>
              <span className="dot-sep">·</span>
              <div className="m">
                <span>Due <b>{hero.due}</b></span>
              </div>
              <span className="dot-sep">·</span>
              <div className="m">
                <span><b>{hero.progress}%</b> · {hero.stage}</span>
              </div>
              <span className="dot-sep">·</span>
              <div className="m">
                <span>{hero.dep}</span>
              </div>
            </div>

            {/* 2 actions only — primary + secondary. Watch removed. */}
            <div className="hero-actions">
              <button className="btn btn-primary">
                <span>Open feature</span>
                <Icon name="arrowRight" size={16} />
              </button>
              <button className="btn btn-white">
                <Icon name="message" size={16} />
                <span>Message owner</span>
              </button>
            </div>
          </div>

          {/* Right side — restrained. Only avatar stack (no label, no count). */}
          {hero.contributors && hero.contributors.length >= 3 && (
            <div className="hero-side hero-side-compact">
              <AvatarStack names={hero.contributors} max={4} size="sm" />
            </div>
          )}
        </div>
      </div>

      {/* Mini list */}
      <div className="focus-list">
        <div className="focus-list-head">
          <span className="lbl">Also on your desk</span>
          <a className="link" style={{ fontSize: 13, fontWeight: 600, color: 'var(--t-secondary)', padding: '6px 10px', borderRadius: 10, cursor: 'pointer' }}>See all 12 →</a>
        </div>
        <div>
          {list.map((it, i) => (
            <div className="focus-item" key={i}>
              <div className={`focus-pri p${it.p}`}>{it.p}</div>
              <div style={{ minWidth: 0 }}>
                <div className="t1 truncate">{it.title}</div>
                <div className="t2">{it.ctx}</div>
              </div>
              <span className="kind-tag">{['Decision','Project','Document','Milestone'][it.p-1]}</span>
              <Icon name="chevronRight" size={14} style={{ color: 'var(--t-tertiary)' }} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Needs Review ----------
function NeedsReview({ items }) {
  const kindMap = {
    feature:  { tone: 'kind-lav',   icon: 'features' },
    decision: { tone: 'kind-peach', icon: 'decisions' },
    research: { tone: 'kind-mint',  icon: 'book' },
    approval: { tone: 'kind-cream', icon: 'check' },
  };
  return (
    <Card>
      <CardHead
        title="Needs Review"
        icon={<Icon name="inbox" size={18} style={{ color: 'var(--t-primary)' }} />}
        right={<a className="link">Open inbox</a>}
      />
      <div className="review-hero">
        <span className="n tabular">{items.length}</span>
        <span className="lbl">items waiting on you</span>
      </div>
      <div>
        {items.map((it, i) => {
          const km = kindMap[it.kind] || kindMap.feature;
          return (
            <div className="review-item" key={i}>
              <div className={`kind-square ${km.tone}`}>
                <Icon name={km.icon} size={16} />
              </div>
              <div className="review-middle">
                <div className="t1 truncate">{it.title}</div>
                <div className="t2 truncate">{it.meta}</div>
              </div>
              <div className="review-right">
                <button className="review-btn">Review</button>
                <span className="rt">{it.time} ago</span>
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

// ---------- Active Work ----------
function ActiveWork({ items }) {
  const kindMap = {
    feature: { tone: 'kind-lav',   icon: 'features' },
    project: { tone: 'kind-sky',   icon: 'projects' },
  };
  const toneMap = {
    'At risk':   { label: 'red',    prog: 'red' },
    'In review': { label: 'blue',   prog: 'blue' },
    'Building':  { label: 'yellow', prog: 'warn' },
    'Blocked':   { label: 'red',    prog: 'red' },
    'Design':    { label: 'purple', prog: 'purple' },
    'On track':  { label: 'green',  prog: 'green' },
  };
  return (
    <Card>
      <CardHead
        title="Active Work"
        count={items.length}
        right={
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <button className="btn btn-white btn-sm">
              <Icon name="filter" size={14} />
              <span>Filter</span>
            </button>
            <a className="link">View all</a>
          </div>
        }
      />
      <div style={{ padding: 4 }}>
        {items.map((it, i) => {
          const km = kindMap[it.kind];
          const tm = toneMap[it.status];
          return (
            <div className="work-row" key={i}>
              <div className="lead">
                <div className={`kind-square ${km.tone}`}>
                  <Icon name={km.icon} size={16} />
                </div>
                <div className="name">
                  <div className="n1 truncate">{it.name}</div>
                  <div className="n2 truncate">{it.sub}</div>
                </div>
              </div>
              <div className="col-avatars">
                <AvatarStack names={it.owners} max={3} size="sm" />
              </div>
              <div className="col-status">
                <Label tone={tm.label} dot size="sm">{it.status}</Label>
              </div>
              <div className="col-progress progress-wrap">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="p-num">{it.progress}%</span>
                  <span className={`due${it.dueLate ? ' late' : ''}`}>{it.due}</span>
                </div>
                <ProgressBar value={it.progress} tone={tm.prog} />
              </div>
              <Icon name="chevronRight" size={14} className="col-chev" />
            </div>
          );
        })}
      </div>
    </Card>
  );
}

// ---------- Recent Decisions ----------
// Phase 25 · #4 + #9 — column rebalanced: cap 4 rows (was unbounded, ~1000px
// vs ~350px left column), flat rows, state pill → 6px dot, context paragraph
// (detail-page content) dropped.
function RecentDecisions({ items }) {
  const toneColor = { green: 'var(--success-solid)', yellow: 'var(--warning-solid)', red: 'var(--danger-solid)' };
  const shown = items.slice(0, 4);
  const remaining = items.length - shown.length;
  return (
    <Card>
      <CardHead title="Recent Decisions" right={<a className="link" href="#/decisions">All decisions</a>} />
      <div style={{ padding: '2px 4px' }}>
        {shown.map((it, i) => (
          <a className="rd-row" href="#/decisions" key={i}>
            <span className="state-dot" style={{ background: toneColor[it.tone] || '#767676' }} />
            <div className="rd-title truncate">{it.title}</div>
            <Avatar name={it.owner} size="xs" />
            <time className="rd-when">{it.when}</time>
          </a>
        ))}
        {remaining > 0 && (
          <a className="link rd-more" href="#/decisions">+{remaining} more decisions</a>
        )}
      </div>
    </Card>
  );
}

// ---------- Product Journey ----------
function ProductJourney({ journey }) {
  const { phases, ticks, youAt, quarter } = journey;
  return (
    <Card>
      <div className="journey">
        <div className="journey-header">
          <div className="title">
            <Icon name="target" size={20} style={{ color: 'var(--primary-01)' }} />
            <span>Product Journey</span>
            <span className="qtr">{quarter}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button className="btn btn-white btn-sm">This quarter</button>
            <a className="link">Open roadmap →</a>
          </div>
        </div>

        <div className="journey-track">
          <div className="journey-line" />
          <div className="journey-line-fill" style={{ width: `${youAt * 100}%` }} />

          {ticks.map((t, i) => (
            <div
              key={i}
              className={`jp-tick${t.state === 'done' ? ' done' : ''}`}
              style={{ left: `calc(${(t.at * 100).toFixed(2)}% - 4px)` }}
              title={t.label}
            />
          ))}

          <div className="journey-phases">
            {phases.map((p) => (
              <div className="journey-phase" key={p.key}>
                <span className={`jp-label ${p.state}`}>{p.label}</span>
                <div className={`jp-node ${p.state}`}>
                  {p.state === 'done' && <Icon name="check" size={16} strokeWidth={2.5} />}
                  {p.state === 'now' && (
                    <span style={{
                      width: 8, height: 8, background: 'white', borderRadius: '50%',
                      boxShadow: '0 0 0 3px rgba(255,255,255,0.35)'
                    }} />
                  )}
                </div>
                <div className="jp-title">{p.title}</div>
                <div className="jp-date">{p.date}</div>
              </div>
            ))}
          </div>

          <div className="you-here" style={{ left: `calc(${youAt * 100}% - 46px)` }}>
            <span className="pulse" />
            You are here
          </div>
        </div>

        <div className="journey-footer">
          <span className="lg"><i className="legend-dot" style={{ background: 'linear-gradient(180deg,#10B372,#00A656)' }} /> Completed</span>
          <span className="lg"><i className="legend-dot" style={{ background: 'linear-gradient(180deg,#5AA0FF,#2A85FF)' }} /> In progress</span>
          <span className="lg"><i className="legend-dot" style={{ background: 'var(--shade-08)' }} /> Upcoming</span>
          <span className="note">
            Attention shifting to <b>Launch — GA to Team & Enterprise</b> in ~3 weeks
          </span>
        </div>
      </div>
    </Card>
  );
}

// ---------- Recent Changes ----------
function RecentChanges({ groups }) {
  const toneMap = { brand: 'lav', blue: 'lav', green: 'mint', red: 'peach', orange: 'cream', purple: 'lav' };
  return (
    <Card>
      <CardHead title="Recent Changes" right={<a className="link">Activity log</a>} />
      <div style={{ padding: '0 4px 8px' }}>
        {groups.map((g, i) => (
          <div key={i}>
            <div className="act-day-label">{g.day}</div>
            {g.items.map((it, j) => (
              <div className="act-item" key={j}>
                <div className={`act-ico ${toneMap[it.tone] || 'peach'}`}>
                  <Icon name={it.ico} size={16} />
                </div>
                <div className="act-text">
                  <b>{it.a}</b> <span className="a-ctx">{it.v}</span>{' '}
                  <b>{it.what}</b><span className="a-ctx">{it.extra}</span>
                </div>
                <div className="act-time">{it.time}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </Card>
  );
}


// Phase 25 · #15 — wireframe cover-art grid replaced with a compact list.
// The generated covers were pure decoration (clicking led nowhere); kind is
// now a small mono badge, one row per file.
function RecentFiles({ files }) {
  return (
    <Card>
      <CardHead title="Recent Research & Files" right={<a className="link">All files</a>} />
      <div className="files-list">
        {files.map((f, i) => (
          <div className="file-row" key={i}>
            <span className="file-kind-badge mono">{f.kind}</span>
            <span className="file-title truncate">{f.title}</span>
            <span className="file-meta truncate">{f.meta}</span>
          </div>
        ))}
      </div>
    </Card>
  );
}

// ---------- Home Hero (Phase 25) ----------
// Phase 25 · #6 — editorial, image-free hero: the greeting is the focal
// point (Fraunces serif), the eyebrow is today's date, and the stat tiles
// collapse into a quiet inline strip. Waveform split-column image removed.
// Phase 25 · #8 — zero-value tiles dim (opacity .45) instead of competing
// with non-zero tiles for attention.
function HomeHero({ data }) {
  const user = (window.MYGENI_PEOPLE && window.MYGENI_PEOPLE.currentUser()) || {};
  const firstName = (user.displayName || data.user.name || 'there').split(' ')[0];
  const hour = new Date().getHours();
  const timeOfDay = hour < 5 ? 'evening' : hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
  const today = (window.MYGENI_UTILS && window.MYGENI_UTILS.formatToday) ? window.MYGENI_UTILS.formatToday() : '';
  const inboxNeeds = (data.inboxItems || []).filter(i => i.state === 'needs-action').length;
  const overdueWork = (data.workItems || []).filter(w => w.dueBucket === 'overdue' && w.status !== 'done').length;
  const inFlight = (data.workItems || []).filter(w => w.status === 'in-progress').length;
  const openDecisions = (data.decisions || []).filter(d => d.status === 'open').length;

  const tiles = [
    { value: inboxNeeds, label: 'In your inbox', href: '#/inbox' },
    { value: overdueWork, label: 'Overdue', href: '#/my-work' },
    { value: inFlight, label: 'In flight', href: '#/my-work/work' },
    { value: openDecisions, label: 'Open decisions', href: '#/decisions' },
  ];

  return (
    <div className="mg-home-hero mg-home-hero-editorial" data-screen-label="Home Hero">
      <div className="mg-home-hero-body">
        <div className="mg-home-hero-eyebrow mg-hero-date">{today}</div>
        <h1 className="mg-home-hero-greet">
          Good {timeOfDay}, {firstName}.
        </h1>
        <p className="mg-home-hero-sub">
          {inboxNeeds + overdueWork > 0
            ? <>Today: <b>{inboxNeeds + overdueWork}</b> {inboxNeeds + overdueWork === 1 ? 'item needs' : 'items need'} your attention, and <b>{inFlight}</b> {inFlight === 1 ? 'thread is' : 'threads are'} in flight across the product.</>
            : <>Nothing needs your attention right now. <b>{inFlight}</b> {inFlight === 1 ? 'thread is' : 'threads are'} moving forward across the product.</>
          }
        </p>
        <div className="mg-home-hero-stats">
          {tiles.map((t) => (
            <a key={t.label} href={t.href} className={`mg-hh-stat${t.value === 0 ? ' stat-empty' : ''}`}>
              <div className="v">{t.value}</div>
              <div className="k">{t.label}</div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Home page ----------
function Home({ data }) {
  const user = (window.MYGENI_PEOPLE && window.MYGENI_PEOPLE.currentUser()) || {};
  const firstName = (user.displayName || data.user.name || 'there').split(' ')[0];
  return (
    <main className="main" data-screen-label="01 Home">
      <HomeHero data={data} />
      <div className="page-header-row">
        <div>
          <h1 className="greeting">Focus, {firstName}.</h1>
          <div className="date-line">
            {data.today} · <b>4 things need your attention today</b>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-white btn-sm">
            <Icon name="presentation" size={15} />
            <span>Weekly review</span>
          </button>
          <button className="btn btn-white btn-sm">
            <Icon name="zap" size={15} />
            <span>Ask Geni</span>
          </button>
        </div>
      </div>

      <div className="grid g-cols-3-1">
        <FocusNow hero={data.focusHero} list={data.focusList} />
        <NeedsReview items={data.needsReview} />
      </div>

      <div className="grid g-cols-3-1" style={{ marginTop: 12 }}>
        <ActiveWork items={data.activeWork} />
        <RecentDecisions items={data.decisions} />
      </div>

      <div style={{ marginTop: 12 }}>
        <ProjectMomentum pdata={window.MYGENI_PROJECT_DATA['p-mh-portal']} />
      </div>

      <div className="grid g-cols-1-1" style={{ marginTop: 12 }}>
        <RecentChanges groups={data.changes} />
        <RecentFiles files={data.files} />
      </div>
    </main>
  );
}

// ---------- Project Momentum (Phase 8) ----------
// Replaces the smaller ProductJourney tile. Combines the horizontal
// stage journey with two Core 2.0-style charts: planned vs actual
// progress + workstream readiness. Used on Home and re-used on the
// project Overview as the "momentum band".
function ProjectMomentum({ pdata }) {
  // Defensive: this panel is used on Home + Overview and receives whatever
  // project data is available. Any missing piece should degrade gracefully.
  if (!pdata) return null;
  const stages = (pdata.stages || []).map(s => ({
    n: s.n,
    name: s.name,
    status: s.status,
  }));
  const momentum = pdata.momentum || { weekly: [], workstreams: [], state: 'on-track', stateNote: '' };
  const currentStage = (pdata.stages || []).find(s => s.status === 'now');

  return (
    <div className="momentum" data-screen-label="ProjectMomentum">
      <div className="momentum-head">
        <h3>
          <Icon name="stages" size={15} style={{ color: 'var(--primary-01)' }} />
          Project Momentum
          <span className="m-sub" style={{ marginLeft: 8 }}>· {pdata.name}</span>
        </h3>
        <span className={`momentum-state ${momentum.state}`}>
          <span className="dot" />
          <span>
            {momentum.state === 'on-track' && 'On track'}
            {momentum.state === 'slipping' && 'Slipping'}
            {momentum.state === 'ahead' && 'Ahead of schedule'}
          </span>
        </span>
      </div>

      <div className="momentum-journey">
        <HorizontalStages stages={stages} dense={true} active={currentStage?.n} />
      </div>

      <div className="momentum-body">
        <div className="momentum-block">
          <h4>
            <span>Momentum</span>
            <span className="h4-meta">Week {pdata.execution?.elapsedWeeks || 3} of {pdata.execution?.totalWeeksHi || 12}</span>
          </h4>
          <BarPair data={momentum.weekly.map(w => ({ label: w.label, planned: w.planned, actual: w.actual ?? 0 }))} />
          <div className="chart-legend" style={{ marginTop: 8 }}>
            <span className="k"><span className="sw" style={{ background: 'var(--chart-min)' }}/> Planned</span>
            <span className="k"><span className="sw" style={{ background: 'var(--chart-blue)' }}/> Actual</span>
            <span style={{ marginLeft: 'auto', color: 'var(--text-secondary)', fontWeight: 500 }}>{momentum.stateNote}</span>
          </div>
        </div>

        {/* Phase 25 · #3 — 7 readiness bars collapsed to the 3 weakest + a
            one-line summary for the rest. Only cobalt/amber/red bar tones. */}
        <div className="momentum-block">
          <h4>
            <span>Needs attention</span>
            <a href={`#/projects/${pdata.id}/plan`} className="link h4-meta" style={{ color: 'var(--text-secondary)' }}>Open plan →</a>
          </h4>
          <WorkstreamWeakest rows={momentum.workstreams} />
        </div>
      </div>
    </div>
  );
}

// Phase 25 · #3 — weakest workstreams + rest-average summary.
function WorkstreamWeakest({ rows }) {
  const safe = Array.isArray(rows) ? rows : [];
  if (!safe.length) return null;
  const sorted = [...safe].sort((a, b) => a.percent - b.percent);
  const weakest = sorted.slice(0, 3);
  const rest = sorted.slice(3);
  const restAvg = rest.length ? Math.round(rest.reduce((s, w) => s + w.percent, 0) / rest.length) : null;
  const barTone = (p) => p < 20 ? 'var(--danger-solid)' : p < 40 ? 'var(--warning-solid)' : 'var(--primary-01)';
  const barTrack = (p) => p < 20 ? 'rgba(255,56,28,0.12)' : p < 40 ? 'rgba(239,157,14,0.14)' : 'rgba(42,133,255,0.14)';
  return (
    <div className="pm-weakest">
      {weakest.map((ws, i) => (
        <div className="pm-row" key={ws.key || i}>
          <div className="pm-label">
            {ws.icon && <Icon name={ws.icon} size={12} style={{ color: barTone(ws.percent) }} />}
            <span>{ws.label}</span>
          </div>
          <div className="pm-track" style={{ background: barTrack(ws.percent) }}>
            <div className="pm-fill" style={{ width: `${ws.percent}%`, background: barTone(ws.percent) }} />
          </div>
          <div className="pm-value mono">{ws.percent}%</div>
        </div>
      ))}
      {rest.length > 0 && (
        <div className="pm-rest">
          <span className="pm-rest-eyebrow">On track</span>
          <span className="pm-rest-names">{rest.map(w => w.label).join(' · ')} · avg {restAvg}%</span>
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  FocusNow, NeedsReview, ActiveWork, RecentDecisions, ProductJourney, ProjectMomentum, RecentChanges, RecentFiles, Home
});