// tab-delivery.jsx — per-team delivery target dashboard.
//
// Layout: company roll-up tiles + per-team rows on top, click a team
// to expand a drill-in panel with the day-by-day schedule (mirroring
// the legacy spreadsheet) and per-member contribution / share table.
//
// Per-member section is gated server-side: admins see it for any
// team; team leads see it only for their own team.

const { useState: tdUseState, useEffect: tdUseEffect } = React;

function TabDelivery({ viewer }) {
  const [rollup, setRollup] = tdUseState(null);
  const [rollupErr, setRollupErr] = tdUseState(null);
  const [selectedTeam, setSelectedTeam] = tdUseState(null);
  const [detail, setDetail] = tdUseState(null);
  const [detailLoading, setDetailLoading] = tdUseState(false);
  const [detailErr, setDetailErr] = tdUseState(null);

  tdUseEffect(() => {
    setRollupErr(null);
    window.YDApp.call('getAllTeamsDeliveryProgress', {})
      .then(setRollup)
      .catch((e) => setRollupErr(e.message || String(e)));
  }, []);

  tdUseEffect(() => {
    if (!selectedTeam) {
      setDetail(null);
      return;
    }
    setDetailLoading(true);
    setDetailErr(null);
    setDetail(null);
    window.YDApp.call('getTeamDeliveryProgress', { team: selectedTeam })
      .then((d) => { setDetail(d); setDetailLoading(false); })
      .catch((e) => { setDetailErr(e.message || String(e)); setDetailLoading(false); });
  }, [selectedTeam]);

  if (rollupErr) {
    return (
      <div className="page">
        <PageHeader title="Delivery target" subtitle="Failed to load"/>
        <div className="card"><div className="card-bd" style={{ color: '#b91c1c' }}>{rollupErr}</div></div>
      </div>
    );
  }
  if (!rollup) {
    return <div className="page"><PageHeader title="Delivery target" subtitle="Loading…"/></div>;
  }

  const company = rollup.company || {};
  const teams = rollup.teams || [];
  const noTargets = teams.length === 0;

  // Final-push deadline ribbon — only shows during the push window
  // (2026-05-11 → 2026-06-03) so it auto-disappears afterwards without
  // a code change. Mirrors PUSH_WINDOW in functions/src/lib/bench.ts.
  const PUSH_START = '2026-05-11';
  const PUSH_END = '2026-06-03';
  const todayIso = new Date().toISOString().slice(0, 10);
  const inPush = todayIso >= PUSH_START && todayIso <= PUSH_END;

  return (
    <div className="page">
      {inPush && (
        <div style={{
          background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
          color: '#f8fafc',
          borderRadius: 8,
          padding: '10px 14px',
          marginBottom: 14,
          fontSize: 13,
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          flexWrap: 'wrap',
        }}>
          <span style={{ fontWeight: 700 }}>Final push to 26M</span>
          <span style={{ opacity: 0.85 }}>·</span>
          <span>25M by <b>Sat May 30</b></span>
          <span style={{ opacity: 0.85 }}>·</span>
          <span>26M by <b>Wed Jun 3</b></span>
        </div>
      )}
      <PageHeader
        eyebrow="Delivery target"
        title="Team progress vs target"
        subtitle={
          noTargets
            ? 'No delivery targets configured yet — set one in Settings.'
            : `${teams.length} team${teams.length === 1 ? '' : 's'} · ${company.daysLeft} days left · ${fmtK(company.totalDelivered)} of ${fmtK(company.totalTarget)} delivered`
        }/>

      {!noTargets && (
        <>
          <div className="kpi-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)' }}>
            <div className="kpi-tile">
              <div className="lbl">Company target</div>
              <div className="val">{fmtK(company.totalTarget)}</div>
              <div className="sub">By {company.targetDate || '—'}</div>
            </div>
            <div className="kpi-tile">
              <div className="lbl">Delivered</div>
              <div className="val">{fmtK(company.totalDelivered)}</div>
              <div className="sub">{company.pctComplete}% of target</div>
            </div>
            <div className="kpi-tile">
              <div className="lbl">Remaining</div>
              <div className="val">{fmtK(company.totalRemaining)}</div>
              <div className="sub">to deliver</div>
            </div>
            <div className="kpi-tile">
              <div className="lbl">Days left</div>
              <div className="val">{company.daysLeft}</div>
              <div className="sub">until {company.targetDate || '—'}</div>
            </div>
            <div className="kpi-tile">
              <div className="lbl">Teams on pace</div>
              <div className="val" style={{ color: company.teamsBehind > 0 ? '#b45309' : '#15803d' }}>
                {company.teamsOnPace} of {company.teamCount}
              </div>
              <div className="sub">{company.teamsBehind || 0} behind</div>
            </div>
          </div>

          <div className="card">
            <div className="card-hd card-hd-bottomline">
              <h2>Teams</h2>
              <span className="meta">Click a row to see schedule + member breakdown</span>
            </div>
            <div className="card-bd" style={{ padding: 0, overflowX: 'auto' }}>
              <table className="pl-table" style={{ minWidth: 880 }}>
                <thead>
                  <tr>
                    <th>Team</th>
                    <th className="num">Target</th>
                    <th className="num">Delivered</th>
                    <th className="num">Remaining</th>
                    <th className="num">%</th>
                    <th className="num">Pace today</th>
                    <th className="num">Projected final</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {teams.map((t) => {
                    const isSelected = selectedTeam === t.team;
                    const paceColor = t.paceDelta >= 0 ? '#15803d' : t.status === 'at_risk' ? '#b91c1c' : '#b45309';
                    const projColor = t.projectedDelta >= 0 ? '#15803d' : '#b91c1c';
                    return (
                      <tr
                        key={t.team}
                        onClick={() => setSelectedTeam(isSelected ? null : t.team)}
                        style={{
                          cursor: 'pointer',
                          background: isSelected ? '#eff6ff' : undefined,
                          borderLeft: isSelected ? '3px solid #1d4ed8' : '3px solid transparent',
                        }}>
                        <td style={{ fontWeight: 700, color: '#111' }}>{t.team}</td>
                        <td className="num mono">{fmtK(t.targetResources)}</td>
                        <td className="num mono" style={{ fontWeight: 700 }}>{fmtK(t.delivered)}</td>
                        <td className="num mono">{fmtK(t.remaining)}</td>
                        <td className="num mono">{t.pctComplete}%</td>
                        <td className="num mono" style={{ color: paceColor, fontWeight: 700 }}>
                          {t.paceDelta >= 0 ? '+' : '−'}{fmtK(Math.abs(t.paceDelta))}
                        </td>
                        <td className="num mono" style={{ color: projColor }}>
                          {t.projectedDelta >= 0 ? '+' : '−'}{fmtK(Math.abs(t.projectedDelta))}
                        </td>
                        <td><StatusPill status={t.status}/></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}

      {selectedTeam && (
        <DeliveryDetail
          team={selectedTeam}
          loading={detailLoading}
          err={detailErr}
          data={detail}
          viewer={viewer}
          onClose={() => setSelectedTeam(null)}/>
      )}
    </div>
  );
}

function StatusPill({ status }) {
  const styles = {
    on_pace:    { bg: '#f0fdf4', color: '#15803d', border: '#bbf7d0', label: 'On pace' },
    catching_up:{ bg: '#fffbeb', color: '#b45309', border: '#fde68a', label: 'Catching up' },
    at_risk:    { bg: '#fef2f2', color: '#b91c1c', border: '#fecaca', label: 'At risk' },
  };
  const s = styles[status] || styles.catching_up;
  return (
    <span style={{
      display: 'inline-block',
      padding: '2px 8px',
      background: s.bg,
      color: s.color,
      border: `1px solid ${s.border}`,
      borderRadius: 999,
      fontSize: 11,
      fontWeight: 700,
    }}>{s.label}</span>
  );
}

function DeliveryDetail({ team, loading, err, data, viewer, onClose }) {
  if (loading) {
    return (
      <div className="card">
        <div className="card-hd card-hd-bottomline">
          <h2>{team}</h2>
          <button className="btn" onClick={onClose}>Close</button>
        </div>
        <div className="card-bd"><div className="meta">Loading schedule…</div></div>
      </div>
    );
  }
  if (err) {
    return (
      <div className="card">
        <div className="card-hd card-hd-bottomline">
          <h2>{team}</h2>
          <button className="btn" onClick={onClose}>Close</button>
        </div>
        <div className="card-bd" style={{ color: '#b91c1c' }}>{err}</div>
      </div>
    );
  }
  if (!data) return null;
  if (data.empty) {
    return (
      <div className="card">
        <div className="card-hd card-hd-bottomline">
          <h2>{team}</h2>
          <button className="btn" onClick={onClose}>Close</button>
        </div>
        <div className="card-bd"><div className="meta">No delivery target set for this team yet.</div></div>
      </div>
    );
  }

  const totals = data.totals || {};
  const schedule = data.schedule || [];
  const onPace = totals.paceDelta >= 0;

  return (
    <>
      <div className="card">
        <div className="card-hd card-hd-bottomline">
          <h2>{team} · {data.label || 'delivery target'}</h2>
          <div className="flex g8 ac">
            <span className="meta">
              {fmtK(totals.delivered)} of {fmtK(data.targetResources)} · {totals.pctComplete}% · {data.daysLeft} days left
            </span>
            <button className="btn" onClick={onClose}>Close</button>
          </div>
        </div>
        <div className="card-bd">
          <div className="meta" style={{ marginBottom: 10 }}>
            {onPace
              ? <>We're <b style={{ color: '#15803d' }}>{fmtK(totals.paceDelta)} ahead</b> of pace · keep it up.</>
              : <>We're <b style={{ color: '#b91c1c' }}>{fmtK(-totals.paceDelta)} behind</b> · need <b>{fmtK(totals.requiredDailyToHit)}/day</b> to recover (avg today is {fmtK(totals.avgDailyOutput)}).</>
            }
          </div>
          <ScheduleTable schedule={schedule} targetResources={data.targetResources}/>
        </div>
      </div>

      {Array.isArray(data.members) ? (
        <div className="card">
          <div className="card-hd card-hd-bottomline">
            <h2>Member breakdown</h2>
            <span className="meta">
              Sorted by who's behind their pace today. Expected by today = full-period share × (cumulative target through today / total target).
            </span>
          </div>
          <div className="card-bd" style={{ padding: 0 }}>
            <table className="pl-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th className="num">Committed hrs</th>
                  <th className="num">Expected by today</th>
                  <th className="num">Contribution</th>
                  <th className="num">Δ today</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {data.members.map((m) => {
                  const tone =
                    m.shareDelta >= 0 ? 'on_pace' :
                    m.pctOfExpected != null && m.pctOfExpected >= 80 ? 'catching_up' :
                    'at_risk';
                  const deltaColor = m.shareDelta >= 0 ? '#15803d' : '#b91c1c';
                  return (
                    <tr key={m.email}>
                      <td className="mono">{m.rank}</td>
                      <td style={{ fontWeight: 700, color: '#111' }}>
                        <div>{m.name}</div>
                        <div style={{ fontSize: 11, color: '#6b7280', fontWeight: 400 }}>{m.email}</div>
                      </td>
                      <td className="num mono">{m.committedHrs}h</td>
                      <td className="num mono"
                          title={`Full-period share: ${fmtK(m.share)}`}>
                        <div>{fmtK(m.expectedToDate)}</div>
                        <div style={{ fontSize: 10, color: '#6b7280', fontWeight: 400 }}>of {fmtK(m.share)} full</div>
                      </td>
                      <td className="num mono" style={{ fontWeight: 700 }}>{fmtK(m.contribution)}</td>
                      <td className="num mono" style={{ color: deltaColor, fontWeight: 700 }}>
                        {m.shareDelta >= 0 ? '+' : '−'}{fmtK(Math.abs(m.shareDelta))}
                      </td>
                      <td><StatusPill status={tone}/></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <div className="card">
          <div className="card-bd" style={{ color: '#6b7280', fontSize: 13 }}>
            Per-member breakdown is only visible to <b>{team}</b>'s lead and admins.
          </div>
        </div>
      )}
    </>
  );
}

function ScheduleTable({ schedule, targetResources }) {
  if (schedule.length === 0) {
    return <div className="meta">No schedule rows configured.</div>;
  }
  const totalDailyTarget = schedule.reduce((s, r) => s + (r.dailyTarget || 0), 0);
  const totalBonus = schedule.reduce((s, r) => s + (r.bonus || 0), 0);
  const totalActual = schedule.reduce((s, r) => s + (r.actual || 0), 0);
  return (
    <div style={{ overflowX: 'auto' }}>
      <table className="pl-table" style={{ minWidth: 760 }}>
        <thead>
          <tr>
            <th>Date</th>
            <th>Day</th>
            <th className="num">Daily target</th>
            <th className="num">Bonus</th>
            <th className="num">Cum. target</th>
            <th className="num">Remaining</th>
            <th className="num">%</th>
            <th className="num">Actual</th>
            <th className="num">Variance</th>
          </tr>
        </thead>
        <tbody>
          {schedule.map((r) => {
            const remaining = Math.max(0, targetResources - (r.cumulativeTarget || 0));
            const varianceColor = r.variance == null ? '#9ca3af'
              : r.variance >= 0 ? '#15803d'
              : r.variance > -0.1 * (r.dailyTarget || 1) ? '#b45309'
              : '#b91c1c';
            return (
              <tr
                key={r.date}
                style={{
                  background: r.isToday ? '#eff6ff' : r.isFuture ? '#fafafa' : undefined,
                  borderTop: r.isToday ? '2px solid #1d4ed8' : undefined,
                }}>
                <td className="mono">{r.date}{r.isToday ? ' · today' : ''}</td>
                <td>{r.day}</td>
                <td className="num mono">{fmtK(r.dailyTarget)}</td>
                <td className="num mono" style={{ color: '#3730a3' }}>{r.bonus ? fmtK(r.bonus) : '—'}</td>
                <td className="num mono">{fmtK(r.cumulativeTarget)}</td>
                <td className="num mono">{fmtK(remaining)}</td>
                <td className="num mono">{r.pct == null ? '—' : `${r.pct}%`}</td>
                <td className="num mono" style={{ fontWeight: r.isFuture ? 400 : 700, color: r.isFuture ? '#9ca3af' : undefined }}>
                  {r.actual == null ? '—' : fmtK(r.actual)}
                </td>
                <td className="num mono" style={{ color: varianceColor, fontWeight: 700 }}>
                  {r.variance == null ? '—' : (r.variance >= 0 ? '+' : '−') + fmtK(Math.abs(r.variance))}
                </td>
              </tr>
            );
          })}
          <tr style={{ background: '#fafafa', fontWeight: 700 }}>
            <td colSpan={2}>TOTAL</td>
            <td className="num mono">{fmtK(totalDailyTarget)}</td>
            <td className="num mono" style={{ color: '#3730a3' }}>{totalBonus ? fmtK(totalBonus) : '—'}</td>
            <td className="num mono">{fmtK(totalDailyTarget)}</td>
            <td className="num mono">—</td>
            <td className="num mono">—</td>
            <td className="num mono">{fmtK(totalActual)}</td>
            <td className="num mono">—</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { TabDelivery });