// DashboardMock — product screenshot mock for Eddy.
// Props: variant ('cream' | 'navy') changes palette to match the enclosing page.

function DashboardMock({ variant = 'cream', compact = false }) {
  const dark = variant === 'navy';
  const palette = dark ? {
    bg: '#0E2340',
    panel: '#15304F',
    panelAlt: '#1B3B60',
    border: 'rgba(255,255,255,0.08)',
    borderStrong: 'rgba(255,255,255,0.16)',
    ink: '#F5F2EC',
    mute: 'rgba(245,242,236,0.58)',
    accent: '#E8C06A',
    green: '#6EBE8F',
    red: '#D78A7A',
    rowHover: 'rgba(255,255,255,0.03)',
  } : {
    bg: '#FFFFFF',
    panel: '#FBF8F2',
    panelAlt: '#F5F2EC',
    border: 'rgba(11,31,58,0.10)',
    borderStrong: 'rgba(11,31,58,0.18)',
    ink: '#0B1F3A',
    mute: 'rgba(11,31,58,0.55)',
    accent: '#B8894A',
    green: '#2E7D55',
    red: '#B44A3A',
    rowHover: 'rgba(11,31,58,0.02)',
  };

  const S = {
    root: {
      width: '100%',
      background: palette.bg,
      borderRadius: 10,
      border: `1px solid ${palette.border}`,
      overflow: 'hidden',
      fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
      color: palette.ink,
      boxShadow: dark
        ? '0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,0.04)'
        : '0 30px 80px -20px rgba(11,31,58,.18), 0 8px 20px -10px rgba(11,31,58,.12)',
    },
    topbar: {
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '12px 16px',
      borderBottom: `1px solid ${palette.border}`,
      background: palette.panel,
    },
    dot: (c) => ({ width: 10, height: 10, borderRadius: 99, background: c }),
    tabRow: {
      display: 'flex', gap: 2, padding: '0 16px',
      borderBottom: `1px solid ${palette.border}`,
      background: palette.panel,
    },
    tab: (active) => ({
      padding: '10px 14px',
      fontSize: 11.5,
      letterSpacing: '0.02em',
      color: active ? palette.ink : palette.mute,
      borderBottom: active ? `1.5px solid ${palette.ink}` : '1.5px solid transparent',
      marginBottom: -1,
      fontWeight: active ? 600 : 500,
    }),
    body: { display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: compact ? 360 : 460 },
    sidebar: {
      borderRight: `1px solid ${palette.border}`,
      background: palette.panel,
      padding: '14px 10px',
      fontSize: 11.5,
    },
    navSection: { color: palette.mute, fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', margin: '14px 8px 6px' },
    navItem: (active) => ({
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '6px 8px', borderRadius: 5,
      background: active ? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(11,31,58,0.05)') : 'transparent',
      color: active ? palette.ink : palette.mute,
      fontWeight: active ? 550 : 450,
    }),
    main: { padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 16, minWidth: 0 },
    header: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 },
    h1: { fontSize: 18, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' },
    crumbs: { fontSize: 10.5, color: palette.mute, letterSpacing: '0.02em', marginBottom: 4 },
    pill: (tone='neutral') => {
      const bg = tone==='ok' ? (dark?'rgba(110,190,143,.15)':'rgba(46,125,85,.12)')
               : tone==='warn' ? (dark?'rgba(232,192,106,.16)':'rgba(184,137,74,.14)')
               : (dark?'rgba(255,255,255,.06)':'rgba(11,31,58,.06)');
      const fg = tone==='ok' ? palette.green : tone==='warn' ? palette.accent : palette.mute;
      return { display:'inline-flex', alignItems:'center', gap:6, padding:'3px 8px', borderRadius:99, fontSize:10.5, background:bg, color:fg, fontWeight:550, letterSpacing:'0.01em' };
    },
    statsRow: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: palette.border, border: `1px solid ${palette.border}`, borderRadius: 8, overflow: 'hidden' },
    stat: { background: palette.bg, padding: '12px 14px' },
    statLabel: { fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: palette.mute, marginBottom: 6 },
    statVal: { fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', fontFamily: '"Source Serif Pro", Georgia, serif' },
    statDelta: (up=true) => ({ fontSize: 10.5, color: up?palette.green:palette.red, marginTop: 4, fontWeight: 550 }),
    card: { border: `1px solid ${palette.border}`, borderRadius: 8, overflow: 'hidden', background: palette.bg },
    cardHead: { padding: '10px 14px', borderBottom: `1px solid ${palette.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11.5, fontWeight: 600 },
    row: { display: 'grid', gridTemplateColumns: '1fr 70px 70px 80px 70px', padding: '10px 14px', fontSize: 11, alignItems: 'center', borderBottom: `1px solid ${palette.border}` },
    rowHead: { color: palette.mute, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 },
    avatar: (seed) => ({
      width: 24, height: 24, borderRadius: 99,
      background: dark ? `linear-gradient(135deg, hsl(${seed*47%360} 28% 42%), hsl(${(seed*47+60)%360} 28% 28%))`
                        : `linear-gradient(135deg, hsl(${seed*47%360} 40% 72%), hsl(${(seed*47+60)%360} 38% 58%))`,
      flex: '0 0 auto',
    }),
    creatorCell: { display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 },
    creatorName: { fontWeight: 550, fontSize: 11.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
    creatorHandle: { fontSize: 10, color: palette.mute },
    spark: { display: 'flex', alignItems: 'flex-end', gap: 2, height: 18 },
  };

  const creators = [
    { id:1, name:'Dr. Lena Okafor', handle:'@lena.md · HCP', reach:'1.24M', eng:'7.8%', mlr:'Approved', tone:'ok', spark:[3,4,2,5,6,5,7,8] },
    { id:2, name:'Maya Chen',        handle:'@mayalivesdiabetic', reach:'842K', eng:'9.1%', mlr:'Approved', tone:'ok', spark:[2,3,3,4,5,6,5,7] },
    { id:3, name:'Dr. Ravi Shah',    handle:'@ravi.onco', reach:'611K', eng:'5.4%', mlr:'In review', tone:'warn', spark:[4,3,5,4,4,5,6,6] },
    { id:4, name:'Priya Banerjee',   handle:'@priya.crohns', reach:'489K', eng:'6.2%', mlr:'Approved', tone:'ok', spark:[2,2,3,3,4,3,5,4] },
    { id:5, name:'Dr. Amy Whitlock', handle:'@amywhitlock.rn', reach:'352K', eng:'4.9%', mlr:'Drafting', tone:'neutral', spark:[1,2,2,3,2,3,3,4] },
  ];

  return (
    <div style={S.root}>
      {/* top bar */}
      <div style={S.topbar}>
        <div style={{display:'flex', gap:6}}>
          <span style={S.dot(dark?'#D78A7A':'#E56E5A')}></span>
          <span style={S.dot(dark?'#E8C06A':'#E6B53A')}></span>
          <span style={S.dot(dark?'#6EBE8F':'#58AF7A')}></span>
        </div>
        <div style={{fontSize: 11, color: palette.mute, letterSpacing:'0.02em'}}>witheddy.ai / workspace / <span style={{color:palette.ink}}>Varelos · Q2 Awareness</span></div>
        <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:10}}>
          <span style={S.pill('ok')}>● Live</span>
          <div style={{display:'flex', gap:-6}}>
            {[1,2,3].map(i=>(
              <div key={i} style={{...S.avatar(i+9), width:22, height:22, marginLeft:i===1?0:-6, border:`1.5px solid ${palette.panel}`}}/>
            ))}
          </div>
        </div>
      </div>

      {/* tabs */}
      <div style={S.tabRow}>
        <div style={S.tab(false)}>Brief</div>
        <div style={S.tab(false)}>Creators</div>
        <div style={S.tab(true)}>Dashboard</div>
        <div style={S.tab(false)}>MLR Review</div>
        <div style={S.tab(false)}>Analytics</div>
        <div style={S.tab(false)}>Audit Log</div>
      </div>

      <div style={S.body}>
        {/* sidebar */}
        <div style={S.sidebar}>
          <div style={S.navSection}>Campaigns</div>
          <div style={S.navItem(true)}>
            <span style={{width:6, height:6, borderRadius:99, background:palette.green}}/>
            Varelos · Awareness
          </div>
          <div style={S.navItem(false)}>
            <span style={{width:6, height:6, borderRadius:99, background:palette.accent}}/>
            Keltrix · HCP Education
          </div>
          <div style={S.navItem(false)}>
            <span style={{width:6, height:6, borderRadius:99, background:palette.mute}}/>
            Omnera · Patient Stories
          </div>
          <div style={S.navSection}>Creators</div>
          <div style={S.navItem(false)}>All creators <span style={{marginLeft:'auto', color:palette.mute}}>142</span></div>
          <div style={S.navItem(false)}>HCPs <span style={{marginLeft:'auto', color:palette.mute}}>38</span></div>
          <div style={S.navItem(false)}>Patients <span style={{marginLeft:'auto', color:palette.mute}}>104</span></div>
          <div style={S.navSection}>Compliance</div>
          <div style={S.navItem(false)}>MLR queue <span style={{marginLeft:'auto', background:dark?'rgba(232,192,106,.18)':'rgba(184,137,74,.15)', color:palette.accent, padding:'1px 6px', borderRadius:99, fontSize:9.5, fontWeight:600}}>4</span></div>
          <div style={S.navItem(false)}>Adverse events</div>
          <div style={S.navItem(false)}>Audit trail</div>
        </div>

        {/* main */}
        <div style={S.main}>
          <div style={S.header}>
            <div>
              <div style={S.crumbs}>Varelos · Chronic migraine · Q2 2026</div>
              <h1 style={S.h1}>Campaign performance</h1>
            </div>
            <div style={{display:'flex', gap:8}}>
              <span style={S.pill('neutral')}>Last 30 days ▾</span>
              <span style={S.pill('warn')}>4 awaiting MLR</span>
            </div>
          </div>

          {/* stats */}
          <div style={S.statsRow}>
            <div style={S.stat}>
              <div style={S.statLabel}>Total reach</div>
              <div style={S.statVal}>4.82M</div>
              <div style={S.statDelta(true)}>↑ 18.2% vs prev. 30d</div>
            </div>
            <div style={S.stat}>
              <div style={S.statLabel}>Engagement rate</div>
              <div style={S.statVal}>6.0%</div>
              <div style={S.statDelta(true)}>vs. 3.4% category avg</div>
            </div>
            <div style={S.stat}>
              <div style={S.statLabel}>Active creators</div>
              <div style={S.statVal}>17</div>
              <div style={{...S.statDelta(true), color: palette.mute}}>5 HCPs · 12 patients</div>
            </div>
            <div style={S.stat}>
              <div style={S.statLabel}>Avg. MLR turnaround</div>
              <div style={S.statVal}>2.1d</div>
              <div style={S.statDelta(true)}>↓ from 11d industry avg</div>
            </div>
          </div>

          {/* creator table */}
          <div style={S.card}>
            <div style={S.cardHead}>
              <span>Top creators — live</span>
              <span style={{fontSize:10.5, color:palette.mute, fontWeight:500}}>Refreshed 4 min ago</span>
            </div>
            <div style={{...S.row, ...S.rowHead}}>
              <span>Creator</span>
              <span>Reach</span>
              <span>Eng.</span>
              <span>MLR</span>
              <span style={{textAlign:'right'}}>Trend</span>
            </div>
            {creators.map((c,i)=>(
              <div key={c.id} style={{...S.row, borderBottom: i===creators.length-1 ? 'none' : S.row.borderBottom}}>
                <div style={S.creatorCell}>
                  <div style={S.avatar(c.id)}/>
                  <div style={{minWidth:0}}>
                    <div style={S.creatorName}>{c.name}</div>
                    <div style={S.creatorHandle}>{c.handle}</div>
                  </div>
                </div>
                <span style={{fontVariantNumeric:'tabular-nums'}}>{c.reach}</span>
                <span style={{fontVariantNumeric:'tabular-nums', color: palette.green, fontWeight:550}}>{c.eng}</span>
                <span style={S.pill(c.tone)}>{c.mlr}</span>
                <div style={{...S.spark, justifyContent:'flex-end'}}>
                  {c.spark.map((v,j)=>(
                    <span key={j} style={{
                      width: 3, height: v*2+2, background: palette.ink, opacity: 0.3 + j*0.08, borderRadius: 1,
                    }}/>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.DashboardMock = DashboardMock;