// OrgLens — Org Portfolio (multi-org for a single company / agency)

function OrgPortfolio({ orgs, activeOrgId, onSwitchOrg }) {
  const orgPortStyles = {
    page: { flex: 1, overflow: 'auto', background: '#f3f2f2', padding: 16 },
    header: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 16, gap: 16 },
    eyebrow: { fontSize: 11, fontWeight: 700, color: '#706e6b', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 },
    title: { fontSize: 22, fontWeight: 700, color: '#080707', letterSpacing: '-0.01em' },
    sub: { fontSize: 13, color: '#3e3e3c', marginTop: 4 },
    summaryGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 },
    summaryCard: {
      background: '#fff', border: '1px solid #dddbda', borderRadius: 4,
      padding: 14, boxShadow: '0 2px 2px 0 rgba(0,0,0,0.05)',
    },
    sumLbl: { fontSize: 11, fontWeight: 700, color: '#706e6b', textTransform: 'uppercase', letterSpacing: '0.06em' },
    sumVal: { fontSize: 28, fontWeight: 700, color: '#080707', marginTop: 4, letterSpacing: '-0.02em' },
    sumSub: { fontSize: 11, color: '#706e6b', marginTop: 4 },
  };

  // Aggregate
  const portfolioAvg = Math.round(orgs.reduce((s, o) => s + o.score, 0) / orgs.length);
  const totalFindings = orgs.reduce((s, o) => s + o.findings, 0);
  const totalP1 = orgs.reduce((s, o) => s + o.highRisks, 0);
  const totalUsers = orgs.reduce((s, o) => s + o.users, 0);

  return (
    <div style={orgPortStyles.page}>
      <div style={orgPortStyles.header}>
        <div>
          <div style={orgPortStyles.eyebrow}>Org Portfolio · Northwind Energy Holdings</div>
          <div style={orgPortStyles.title}>5 Salesforce orgs across 5 business units</div>
          <div style={orgPortStyles.sub}>
            Roll up org health across the company. Spot the weakest org. Track remediation trends per BU.
          </div>
        </div>
        <div style={{display: 'flex', gap: 8}}>
          <Btn variant="neutral" icon={ICONS.download}>Export portfolio PDF</Btn>
          <Btn variant="brand" icon={ICONS.refresh}>Rescan all orgs</Btn>
        </div>
      </div>

      <div style={orgPortStyles.summaryGrid}>
        <div style={orgPortStyles.summaryCard}>
          <div style={orgPortStyles.sumLbl}>Portfolio OrgScore</div>
          <div style={{display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4}}>
            <span style={{...orgPortStyles.sumVal, marginTop: 0, color: scoreColor(portfolioAvg)}}>{portfolioAvg}</span>
            <TrendChip trend="down" delta={-3}/>
          </div>
          <div style={orgPortStyles.sumSub}>Weighted average across {orgs.length} orgs</div>
        </div>
        <div style={orgPortStyles.summaryCard}>
          <div style={orgPortStyles.sumLbl}>Total open findings</div>
          <div style={orgPortStyles.sumVal}>{totalFindings.toLocaleString()}</div>
          <div style={orgPortStyles.sumSub}>{totalP1} high-risk · across all orgs</div>
        </div>
        <div style={orgPortStyles.summaryCard}>
          <div style={orgPortStyles.sumLbl}>Highest-risk org</div>
          <div style={{...orgPortStyles.sumVal, fontSize: 18, marginTop: 8}}>Northwind Legacy NA</div>
          <div style={orgPortStyles.sumSub}>Score 38 · 47 P1 findings</div>
        </div>
        <div style={orgPortStyles.summaryCard}>
          <div style={orgPortStyles.sumLbl}>Total licensed users</div>
          <div style={orgPortStyles.sumVal}>{totalUsers.toLocaleString()}</div>
          <div style={orgPortStyles.sumSub}>across production + sandboxes</div>
        </div>
      </div>

      <Card style={{padding: 0}}>
        <CardHeader
          eyebrow="Per-org health"
          title="Where your governance team should focus this quarter"
          icon={ICONS.building}
          action={
            <div style={{display:'flex', gap: 8}}>
              <Btn variant="neutral" size="sm" icon={ICONS.refresh}>Sort by trend</Btn>
              <Btn variant="neutral" size="sm" icon={ICONS.filter}>Filter</Btn>
            </div>
          }
        />
        <div style={{padding: 16, display: 'flex', flexDirection: 'column', gap: 10}}>
          {orgs.map(o => (
            <OrgPortfolioRow
              key={o.id}
              org={o}
              isActive={o.id === activeOrgId}
              onClick={() => onSwitchOrg(o.id)}
            />
          ))}
        </div>
      </Card>

      <PortfolioComparisonChart orgs={orgs}/>
    </div>
  );
}

function OrgPortfolioRow({ org, isActive, onClick }) {
  const band = scoreBand(org.score);
  // Sample category breakdown per org (illustrative)
  const cats = [
    { lbl: 'Data',     score: Math.max(30, org.score - 5) },
    { lbl: 'Auto',     score: Math.max(28, org.score - 12) },
    { lbl: 'Security', score: Math.min(95, org.score + 12) },
    { lbl: 'Apex',     score: Math.min(90, org.score + 6) },
    { lbl: 'Release',  score: Math.max(35, org.score - 2) },
    { lbl: 'AI',       score: Math.max(28, org.score - 14) },
  ];

  return (
    <div onClick={onClick} style={{
      display: 'grid',
      gridTemplateColumns: '70px 1fr 340px 90px 90px 32px',
      alignItems: 'center', gap: 16,
      padding: '14px 14px',
      background: isActive ? '#eaf4ff' : '#fff',
      border: isActive ? '1px solid #0070d2' : '1px solid #ecebea',
      borderRadius: 4, cursor: 'pointer',
      transition: 'all 150ms',
    }} onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = '#fafaf9'; }}
       onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = '#fff'; }}>
      <ScoreRing score={org.score} size={56} stroke={6}/>
      <div style={{minWidth: 0}}>
        <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2}}>
          <span style={{fontSize: 15, fontWeight: 700, color: '#080707'}}>{org.name}</span>
          {org.primary && (
            <Badge variant="info">ACTIVE</Badge>
          )}
        </div>
        <div style={{fontSize: 12, color: '#706e6b'}}>
          {org.unit} · {org.edition} · {org.users.toLocaleString()} users
        </div>
        <div style={{display: 'flex', alignItems: 'center', gap: 10, marginTop: 6}}>
          <span style={{
            fontSize: 11, fontWeight: 700, color: band.color,
          }}>{band.label}</span>
          <span style={{fontSize: 11, color: '#706e6b'}}>· Last scan {org.lastScan}</span>
          <TrendChip trend={org.trend} delta={org.delta}/>
        </div>
      </div>
      {/* Mini per-category bars */}
      <div style={{display: 'flex', gap: 8}}>
        {cats.map(c => (
          <div key={c.lbl} style={{flex: 1, minWidth: 0}}>
            <div style={{
              fontSize: 9, color: '#706e6b', fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.03em',
              marginBottom: 3, textAlign: 'center',
            }}>{c.lbl}</div>
            <div style={{
              height: 22, background: '#ecebea', borderRadius: 2, overflow: 'hidden',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                height: `${c.score}%`, background: scoreColor(c.score),
                transition: 'height 400ms',
              }}/>
            </div>
            <div style={{
              fontSize: 10, fontWeight: 700, color: '#3e3e3c',
              marginTop: 3, textAlign: 'center',
            }}>{c.score}</div>
          </div>
        ))}
      </div>
      <div style={{textAlign: 'center'}}>
        <div style={{fontSize: 10, color: '#706e6b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em'}}>Findings</div>
        <div style={{fontSize: 18, fontWeight: 700, color: '#080707', letterSpacing: '-0.01em'}}>{org.findings}</div>
      </div>
      <div style={{textAlign: 'center'}}>
        <div style={{fontSize: 10, color: '#706e6b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em'}}>P1</div>
        <div style={{fontSize: 18, fontWeight: 700, color: '#ba0517', letterSpacing: '-0.01em'}}>{org.highRisks}</div>
      </div>
      <Icon d={ICONS.chevR} size={14} color="#706e6b"/>
    </div>
  );
}

// Comparison line chart (illustrative trend lines for each org over 12 weeks)
function PortfolioComparisonChart({ orgs }) {
  const weeks = 12;
  const W = 760, H = 220, PADL = 36, PADR = 16, PADT = 16, PADB = 28;
  const xScale = (i) => PADL + (i / (weeks - 1)) * (W - PADL - PADR);
  const yScale = (v) => PADT + (1 - v/100) * (H - PADT - PADB);

  // Generate slightly noisy trends for each org converging toward current score
  const series = orgs.map(o => {
    const pts = [];
    const start = o.score - o.delta * 3 + (Math.random() - 0.5) * 4;
    for (let i = 0; i < weeks; i++) {
      const t = i / (weeks - 1);
      const val = start + (o.score - start) * t + Math.sin(i * 1.3 + o.score) * 2;
      pts.push(Math.max(20, Math.min(95, val)));
    }
    return { name: o.name, color: orgColor(o.id), pts, score: o.score };
  });

  return (
    <Card style={{padding: 0, marginTop: 16}}>
      <CardHeader eyebrow="12-week portfolio trend" title="Where each org is heading" icon={ICONS.report}/>
      <div style={{padding: 16, display: 'flex', gap: 16}}>
        <svg viewBox={`0 0 ${W} ${H}`} style={{width: '100%', maxWidth: W, height: 'auto'}}>
          {/* Grid lines */}
          {[0, 25, 50, 75, 100].map(g => (
            <g key={g}>
              <line x1={PADL} y1={yScale(g)} x2={W - PADR} y2={yScale(g)} stroke="#ecebea" strokeWidth="1"/>
              <text x={PADL - 6} y={yScale(g) + 3} textAnchor="end" style={{fontSize: 10, fill: '#706e6b'}}>{g}</text>
            </g>
          ))}
          {/* Threshold bands */}
          <rect x={PADL} y={yScale(40)} width={W - PADL - PADR} height={yScale(0) - yScale(40)} fill="#c23934" opacity="0.04"/>
          <rect x={PADL} y={yScale(75)} width={W - PADL - PADR} height={yScale(40) - yScale(75)} fill="#dd7a01" opacity="0.04"/>
          {/* Series */}
          {series.map(s => (
            <g key={s.name}>
              <path d={s.pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xScale(i)} ${yScale(v)}`).join(' ')}
                stroke={s.color} strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              <circle cx={xScale(weeks - 1)} cy={yScale(s.pts[weeks-1])} r="3.5" fill={s.color}/>
              <text x={xScale(weeks - 1) + 8} y={yScale(s.pts[weeks-1]) + 3}
                style={{fontSize: 10, fill: s.color, fontWeight: 700}}>{s.score}</text>
            </g>
          ))}
          {/* X labels */}
          {[0, 3, 6, 9, 11].map(i => (
            <text key={i} x={xScale(i)} y={H - 8} textAnchor="middle" style={{fontSize: 10, fill: '#706e6b'}}>
              {i === weeks - 1 ? 'Today' : `W-${weeks - 1 - i}`}
            </text>
          ))}
        </svg>
        <div style={{width: 200, display: 'flex', flexDirection: 'column', gap: 8}}>
          <div style={{fontSize: 11, fontWeight: 700, color: '#706e6b', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4}}>Legend</div>
          {orgs.map(o => (
            <div key={o.id} style={{display: 'flex', alignItems: 'center', gap: 8, fontSize: 12}}>
              <span style={{width: 12, height: 3, background: orgColor(o.id), borderRadius: 2}}/>
              <span style={{flex: 1, color: '#3e3e3c'}}>{o.name.replace('Northwind ', '')}</span>
              <span style={{fontWeight: 700, color: scoreColor(o.score)}}>{o.score}</span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

function orgColor(id) {
  const map = {
    'nw-prod':       '#0070d2',
    'nw-service':    '#3ba755',
    'nw-commercial': '#a094ed',
    'nw-legacy':     '#c23934',
    'nw-field':      '#dd7a01',
  };
  return map[id] || '#706e6b';
}

Object.assign(window, { OrgPortfolio });