// evaluations.jsx
// Vintage Music Group A&R evaluation system:
// • EvaluationsBlock — Profile section listing past evals
// • EvaluationDetail — full rubric breakdown for one evaluation
// • RubricScreen     — public rubric reference + A&R input mode
// • CreditsCard      — Home/Profile widget showing XP → A&R credits

const { useState: useStateE, useEffect: useEffectE } = React;
const { Card, Chip, TopBar, DisplayHeading } = window.LAUNCH_SCREENS_1;

// ────────────────────────────────────────────────────────
// Quick Score Rubric — Vintage Music Group v1.0
// 5 categories × 10 pts = 50 total · 40+ unlocks rewards
// ────────────────────────────────────────────────────────
const RUBRIC = [
  { id: 'structure', label: 'SONG STRUCTURE', desc: 'Form, flow, arrangement — does the song carry the listener?' },
  { id: 'hook',      label: 'TITLE / HOOK',   desc: 'The line you remember after one listen. Sticky, earned, owned.' },
  { id: 'idea',      label: 'IDEA',           desc: 'The concept underneath the song. Specific point of view.' },
  { id: 'lyrics',    label: 'LYRICS',         desc: 'Word choice, imagery, payoff, rhyme craft.' },
  { id: 'melody',    label: 'MELODY',         desc: 'Top-line shape, intervals, singability, contour.' },
];
const REWARD_THRESHOLD = 40;

// What each score level signals — 40+ is the reward-unlock line
const SCORE_BANDS = [
  { min: 0,  max: 19, label: 'FOUNDATION',     sub: 'Core craft needs work',          tone: '#7a7a7a' },
  { min: 20, max: 29, label: 'BUILDING',       sub: 'Real ideas, rough execution',    tone: '#8A6A3B' },
  { min: 30, max: 39, label: 'ALMOST THERE',   sub: 'One revision from unlocking',    tone: '#E8A736' },
  { min: 40, max: 44, label: 'REWARDS UNLOCKED', sub: 'Bonus XP, mentor tag, ★ badge', tone: '#4A7FD8' },
  { min: 45, max: 50, label: 'TOP CUT',         sub: 'Front-of-line A&R + features',   tone: '#C72820' },
];
function bandFor(total) { return SCORE_BANDS.find(b => total >= b.min && total <= b.max) || SCORE_BANDS[0]; }

// Sample stored evaluations — these would normally come from an API
const SAMPLE_EVALS = [
  {
    id: 'eval-001',
    track: 'WINTER LIGHT',
    coverPal: ['#C72820', '#7A5AE0'],
    coverLbl: 'WL',
    submitted: 'APR 18, 2026',
    reviewer: { lbl: 'JB', name: 'Jay Brunswick', role: 'PROD · A&R VINTAGE MUSIC GROUP', color: '#C72820' },
    tier: 'IN-DEPTH · $40',
    scores: { structure: 9, hook: 9, idea: 8, lyrics: 8, melody: 9 },
    notes: {
      structure: 'Form holds across the runtime. Pre-chorus does its job — tension lands. Consider trimming the intro from 4 bars to 2 so the first hook arrives sooner.',
      hook:      '"Winter light bends low" is the line. Title earns its keep — make it the streaming card and the first lyric. Owns its space.',
      idea:      'Clear point of view: missing a person through a season. Specific enough to feel personal, universal enough to land. Don\'t over-explain it.',
      lyrics:    'Verse 2 is the strongest writing. Pre-chorus rhyme scheme feels predictable on second listen — try ending one line short. Imagery in bridge is excellent.',
      melody:    'Chorus contour climbs naturally. Pre-chorus melody is the weak link — sits in one octave too long. Push one phrase up a fourth.',
    },
    verdict: '"Real promise. This is the closest you\'ve gotten to your sound. Cut the intro, sharpen the pre-chorus melody, and resubmit — we\'ll talk."',
  },
  {
    id: 'eval-002',
    track: 'BLUE DOORS',
    coverPal: ['#4A7FD8', '#FBBF24'],
    coverLbl: 'BD',
    submitted: 'MAR 02, 2026',
    reviewer: { lbl: 'PG', name: 'PG Banker', role: 'SONGWRITER · NASHVILLE', color: '#7A5AE0' },
    tier: 'QUICK SCORE · $11',
    scores: { structure: 8, hook: 9, idea: 7, lyrics: 7, melody: 8 },
    notes: {
      structure: 'Form is balanced. Bridge restates the chorus — bridges should reframe, not repeat. Try a left-field melodic move there.',
      hook:      'Title carries the song. "Blue doors" is concrete, visual, repeatable. Don\'t bury it under the vocal layer.',
      idea:      'Decent concept but the listener has to do too much work to find it. Spell the through-line one notch clearer.',
      lyrics:    'Voice is the strongest asset here. Lead with it. Verse 1 line 3 is the only weak rhyme — easy fix.',
      melody:    'Chorus is the sticky part. Verse melody is forgettable — too step-wise. Add one jump.',
    },
    verdict: '"Solid demo. You\'re writing better than you\'re producing. Lift the verse melody and the whole thing climbs."',
  },
  {
    id: 'eval-003',
    track: 'HALF SLEEP',
    coverPal: ['#FBBF24', '#0A0A0A'],
    coverLbl: 'HS',
    submitted: 'JAN 22, 2026',
    reviewer: { lbl: 'PG', name: 'PG Banker', role: 'SONGWRITER · NASHVILLE', color: '#7A5AE0' },
    tier: 'QUICK SCORE · $11',
    scores: { structure: 7, hook: 6, idea: 8, lyrics: 7, melody: 6 },
    notes: {
      structure: 'Hook arrives too late — bring it to 0:35 instead of 1:05. Listener won\'t wait.',
      hook:      'Title is OK but you can do better. "Half sleep" is a phrase, not yet a hook. Find the image inside it.',
      idea:      'Concept is strong. The in-between state of half-sleep is fertile ground — lean into the dream logic.',
      lyrics:    'Honest writing. Verse 2 line 2 is the keeper line — build the song around it next time.',
      melody:    'Familiar territory. What\'s the melodic move nobody else would make? Try the one that scares you.',
    },
    verdict: '"Get the hook in faster. Trust the listener less. There\'s a song here — find it in the first 30 seconds."',
  },
];

// XP → credits accounting (every 100 XP = 1 evaluation credit)
const XP_TOTAL = 8372;         // lifetime
const XP_PER_CREDIT = 100;
const CREDITS_USED = 80;       // mock — increments per evaluation submitted
function creditsState() {
  const earned = Math.floor(XP_TOTAL / XP_PER_CREDIT);
  const available = earned - CREDITS_USED;
  const xpToNext = XP_PER_CREDIT - (XP_TOTAL % XP_PER_CREDIT);
  const pct = ((XP_TOTAL % XP_PER_CREDIT) / XP_PER_CREDIT) * 100;
  return { earned, available, xpToNext, pct };
}

// ────────────────────────────────────────────────────────
// CreditsCard — XP progress to next A&R credit
// ────────────────────────────────────────────────────────
function CreditsCard({ theme, onUse, compact = false }) {
  const c = creditsState();
  return (
    <Card theme={theme} style={{ padding: 0, overflow: 'hidden', position: 'relative' }}>
      {/* deep-field backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/deep-field.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.25,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(160deg, ${theme.accent}40 0%, transparent 60%, ${theme.bg} 100%)`,
      }} />

      <div style={{ position: 'relative', padding: 16 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 12,
        }}>
          <div>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
              letterSpacing: 1, fontWeight: 700,
            }}>★ A&R EVALUATION CREDITS</div>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
              letterSpacing: 0.5, fontWeight: 600, marginTop: 4,
            }}>VINTAGE MUSIC GROUP · 100 XP = 1 CREDIT</div>
          </div>
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
          }}>
            <span style={{
              fontFamily: theme.fontDisplay, fontSize: 36, color: theme.accent,
              lineHeight: 1, letterSpacing: -0.8,
            }}>{c.available}</span>
            <span style={{
              fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
              letterSpacing: 1, fontWeight: 700, marginTop: 2,
            }}>UNLOCKED</span>
          </div>
        </div>

        {/* Progress bar */}
        <div style={{ marginTop: 6, marginBottom: 6 }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
            letterSpacing: 0.5, fontWeight: 700, marginBottom: 5,
          }}>
            <span>XP TO NEXT CREDIT</span>
            <span style={{ color: theme.text }}>{c.xpToNext} XP</span>
          </div>
          <div style={{
            height: 6, borderRadius: 99, background: theme.surface2, overflow: 'hidden',
          }}>
            <div style={{
              width: `${c.pct}%`, height: '100%', background: theme.accent,
              borderRadius: 99,
            }} />
          </div>
        </div>

        {!compact && (
          <button onClick={onUse} style={{
            width: '100%', marginTop: 12,
            background: c.available > 0 ? theme.accent : theme.surface2,
            color: c.available > 0 ? theme.onAccent : theme.faint,
            border: 'none', borderRadius: 12,
            padding: '13px', cursor: c.available > 0 ? 'pointer' : 'not-allowed',
            fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
            textTransform: 'uppercase',
          }}>
            {c.available > 0 ? `USE 1 CREDIT · SUBMIT FOR A&R →` : 'EARN MORE XP TO UNLOCK'}
          </button>
        )}
      </div>
    </Card>
  );
}

// ────────────────────────────────────────────────────────
// EvaluationsBlock — Profile section list view
// ────────────────────────────────────────────────────────
function EvaluationsBlock({ theme, onOpenEval, onOpenRubric, onUseCredit, evals = SAMPLE_EVALS }) {
  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 10,
      }}>
        <span style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600,
        }}>EVALUATIONS · {evals.length}</span>
        <button onClick={onOpenRubric} style={{
          background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
          fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
          letterSpacing: 0.8, fontWeight: 700, textTransform: 'uppercase',
        }}>RUBRIC v1.0 →</button>
      </div>

      <CreditsCard theme={theme} onUse={onUseCredit} />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
        {evals.length === 0 && (
          <Card theme={theme} style={{ padding: 18, textAlign: 'center' }}>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 16, color: theme.text }}>NO REVIEWS YET</div>
            <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.muted, marginTop: 6 }}>
              Submit a track for Pro Review — your coach's score lands here.
            </div>
          </Card>
        )}
        {evals.map(e => {
          const total = Object.values(e.scores).reduce((a, b) => a + b, 0);
          const band = bandFor(total);
          return (
            <button key={e.id} onClick={() => onOpenEval(e.id)} style={{
              padding: 0, border: 'none', background: 'transparent', cursor: 'pointer',
              textAlign: 'left', width: '100%',
            }}>
              <Card theme={theme} style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 10, overflow: 'hidden',
                  position: 'relative', background: '#0A0A0A', flexShrink: 0,
                }}>
                  <div style={{
                    position: 'absolute', inset: 0,
                    backgroundImage: 'url(assets/deep-field.png)',
                    backgroundSize: 'cover', backgroundPosition: 'center',
                    opacity: 0.55,
                  }} />
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: `linear-gradient(135deg, ${e.coverPal[0]}aa 0%, transparent 60%, #000a 100%)`,
                  }} />
                  <div style={{
                    position: 'absolute', bottom: 4, left: 6,
                    fontFamily: theme.fontDisplay, color: '#fff', fontSize: 14,
                    letterSpacing: 0.5,
                  }}>{e.coverLbl}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: theme.fontMono, fontSize: 9, color: theme.accent,
                    letterSpacing: 1, fontWeight: 700,
                  }}>{e.tier} · {e.submitted}</div>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 18, color: theme.text,
                    letterSpacing: 0.2, lineHeight: 1, textTransform: 'uppercase',
                    marginTop: 4,
                  }}>{e.track}</div>
                  <div style={{
                    fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
                    letterSpacing: 0.5, marginTop: 4, fontWeight: 600,
                  }}>REVIEWED BY {e.reviewer.name.toUpperCase()}</div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 22, color: band.tone,
                    lineHeight: 1, letterSpacing: -0.3,
                  }}>{total}<span style={{ fontSize: 11, color: theme.muted }}>/50</span></div>
                  <div style={{
                    fontFamily: theme.fontMono, fontSize: 9, fontWeight: 700,
                    color: band.tone, letterSpacing: 0.6, marginTop: 3,
                  }}>{band.label}</div>
                </div>
              </Card>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// EvaluationDetail — full rubric breakdown
// ────────────────────────────────────────────────────────
function EvaluationDetail({ theme, evalId, onBack, onOpenRubric, evals = SAMPLE_EVALS }) {
  const e = evals.find(x => x.id === evalId) || evals[0];
  const total = Object.values(e.scores).reduce((a, b) => a + b, 0);
  const band = bandFor(total);

  // Coach voice note — demo carries an inline data URL; live mints a signed URL
  // (the member is the only non-coach who can, per RLS).
  const [voiceUrl, setVoiceUrl] = useStateE(e.voiceUrl || null);
  useEffectE(() => {
    let alive = true;
    setVoiceUrl(e.voiceUrl || null);
    if (!e.voiceUrl && e.voicePath && window.LAUNCH_USER && window.LAUNCH_USER.evalVoiceUrl) {
      window.LAUNCH_USER.evalVoiceUrl(e.voicePath).then(u => { if (alive) setVoiceUrl(u); });
    }
    return () => { alive = false; };
  }, [e.id, e.voicePath, e.voiceUrl]);

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* hero with deep field + cover */}
      <div style={{ height: 240, position: 'relative', overflow: 'hidden', background: '#0A0A0A' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(assets/deep-field.png)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: 0.55,
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(160deg, ${e.coverPal[0]}88 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.95) 100%)`,
        }} />

        {/* top bar */}
        <div style={{
          position: 'relative', zIndex: 2,
          paddingTop: 58, paddingLeft: theme.pad, paddingRight: theme.pad,
          display: 'flex', justifyContent: 'space-between',
        }}>
          <button onClick={onBack} style={{
            width: 38, height: 38, borderRadius: 12,
            background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(20px)',
            border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M9 2L4 7l5 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div style={{
            padding: '8px 12px', borderRadius: 99,
            background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(20px)',
            fontFamily: theme.fontMono, fontSize: 10, color: '#fff',
            letterSpacing: 1, fontWeight: 700,
          }}>{e.tier}</div>
        </div>

        {/* title block bottom-left */}
        <div style={{
          position: 'absolute', bottom: 16, left: theme.pad, right: theme.pad,
          zIndex: 2,
        }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 9, color: 'rgba(255,255,255,0.7)',
            letterSpacing: 1, fontWeight: 700,
          }}>★ EVALUATED {e.submitted}</div>
          <div style={{
            fontFamily: theme.fontDisplay, fontSize: 38, color: '#fff',
            lineHeight: 0.92, letterSpacing: 0.3, marginTop: 6,
            textTransform: 'uppercase',
          }}>{e.track}</div>
        </div>
      </div>

      {/* Score gauge */}
      <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
        <Card theme={theme} style={{ padding: 18, textAlign: 'center', borderColor: band.tone }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
            letterSpacing: 1, fontWeight: 700,
          }}>VINTAGE A&R · OVERALL SCORE</div>
          <div style={{
            fontFamily: theme.fontDisplay, fontSize: 72, color: band.tone,
            lineHeight: 1, letterSpacing: -1.5, marginTop: 8,
          }}>
            {total}<span style={{ fontSize: 28, color: theme.muted, letterSpacing: 0 }}>/50</span>
          </div>
          <div style={{
            display: 'inline-block', marginTop: 10,
            padding: '6px 14px', borderRadius: 99,
            background: band.tone, color: '#fff',
            fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 1,
          }}>★ {band.label}</div>
          <div style={{
            fontFamily: theme.fontBody, fontSize: 12, color: theme.muted,
            marginTop: 8, fontStyle: 'italic',
          }}>{band.sub}</div>

          {/* 40+ reward unlock indicator */}
          <div style={{
            display: 'flex', alignItems: 'stretch', gap: 0,
            marginTop: 14, borderRadius: 10, overflow: 'hidden',
            border: `1px solid ${total >= REWARD_THRESHOLD ? band.tone : theme.border}`,
          }}>
            <div style={{
              flex: 1, padding: '10px 12px',
              background: total >= REWARD_THRESHOLD ? `${band.tone}22` : theme.surface2,
              textAlign: 'left',
            }}>
              <div style={{
                fontFamily: theme.fontMono, fontSize: 9, fontWeight: 700,
                letterSpacing: 1, color: theme.muted,
              }}>REWARD THRESHOLD · 40 / 50</div>
              <div style={{
                fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 0.3,
                color: total >= REWARD_THRESHOLD ? band.tone : theme.text,
                marginTop: 3, textTransform: 'uppercase',
              }}>
                {total >= REWARD_THRESHOLD
                  ? `★ UNLOCKED · +${total - REWARD_THRESHOLD + 5} OVER`
                  : `${REWARD_THRESHOLD - total} POINTS TO UNLOCK`}
              </div>
            </div>
            <div style={{
              width: 70, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              background: total >= REWARD_THRESHOLD ? band.tone : theme.surface,
              color: total >= REWARD_THRESHOLD ? '#fff' : theme.faint,
            }}>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 20, lineHeight: 1 }}>
                {total >= REWARD_THRESHOLD ? '★' : '·'}
              </div>
              <div style={{
                fontFamily: theme.fontMono, fontSize: 8, fontWeight: 700,
                letterSpacing: 0.8, marginTop: 4,
              }}>{total >= REWARD_THRESHOLD ? 'CLAIM' : 'LOCKED'}</div>
            </div>
          </div>
        </Card>
      </div>

      {/* Rubric breakdown */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 10,
        }}>
          <span style={{
            fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
            letterSpacing: 1, fontWeight: 600,
          }}>SCORE BY CATEGORY</span>
          <button onClick={onOpenRubric} style={{
            background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
            fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
            letterSpacing: 0.8, fontWeight: 700,
          }}>EXPLAIN RUBRIC →</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {RUBRIC.map(r => {
            const score = e.scores[r.id];
            const pct = (score / 10) * 100;
            return (
              <Card key={r.id} theme={theme} style={{ padding: 14 }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  marginBottom: 8,
                }}>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 14, color: theme.text,
                    letterSpacing: 0.4, textTransform: 'uppercase',
                  }}>{r.label}</div>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 20, color: theme.accent,
                    letterSpacing: -0.3, lineHeight: 1,
                  }}>{score}<span style={{ fontSize: 11, color: theme.muted }}>/10</span></div>
                </div>
                <div style={{
                  height: 4, borderRadius: 99, background: theme.surface2,
                  overflow: 'hidden', marginBottom: 10,
                }}>
                  <div style={{
                    width: `${pct}%`, height: '100%', background: theme.accent,
                    borderRadius: 99,
                  }} />
                </div>
                <div style={{
                  fontFamily: theme.fontBody, fontSize: 13, color: theme.muted,
                  lineHeight: 1.45,
                }}>{e.notes[r.id]}</div>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Coach voice note — private to this member */}
      {(voiceUrl || e.voicePath) && (
        <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
            letterSpacing: 1, fontWeight: 600, marginBottom: 10,
          }}>🎙 COACH VOICE NOTE · PRIVATE TO YOU</div>
          <Card theme={theme} style={{ padding: 16, borderColor: theme.accent }}>
            {voiceUrl ? (
              <audio controls src={voiceUrl} style={{ width: '100%' }} />
            ) : (
              <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 0.5 }}>
                Loading voice note…
              </div>
            )}
            <div style={{
              fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
              letterSpacing: 0.5, marginTop: 12,
            }}>Recorded by {e.reviewer.name} · only you can hear this</div>
          </Card>
        </div>
      )}

      {/* Final verdict */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10,
        }}>A&R VERDICT</div>
        <Card theme={theme} style={{ padding: 16, borderColor: theme.accent }}>
          <div style={{
            fontFamily: theme.fontBody, fontStyle: 'italic',
            fontSize: 15, color: theme.text, lineHeight: 1.55,
            paddingLeft: 14, borderLeft: `3px solid ${theme.accent}`,
          }}>{e.verdict}</div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginTop: 14,
            paddingTop: 12, borderTop: `1px solid ${theme.border}`,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 99, background: e.reviewer.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: theme.fontDisplay, color: '#0A0A0A', fontSize: 13,
            }}>{e.reviewer.lbl}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.text, fontWeight: 600 }}>
                {e.reviewer.name}
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5 }}>
                {e.reviewer.role} · VINTAGE A&R
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// RubricScreen — read mode + A&R input mode
// ────────────────────────────────────────────────────────
function RubricScreen({ theme, onBack }) {
  const [mode, setMode] = useStateE('reference'); // 'reference' | 'input'
  const [scores, setScores] = useStateE(
    RUBRIC.reduce((acc, r) => ({ ...acc, [r.id]: 7 }), {})
  );
  const [notes, setNotes] = useStateE(
    RUBRIC.reduce((acc, r) => ({ ...acc, [r.id]: '' }), {})
  );
  const [verdict, setVerdict] = useStateE('');

  const total = Object.values(scores).reduce((a, b) => a + b, 0);
  const band = bandFor(total);

  return (
    <div style={{ paddingBottom: 120 }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
          letterSpacing: 1, fontWeight: 700,
        }}>VINTAGE MUSIC GROUP</div>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
          letterSpacing: 1, fontWeight: 700,
        }}>★ HOW WE SCORE</div>
        <DisplayHeading theme={theme} size={32}>
          THE RUBRIC<br/>v1.0
        </DisplayHeading>
        <div style={{
          fontFamily: theme.fontBody, fontSize: 14, color: theme.muted,
          marginTop: 10, lineHeight: 1.5,
        }}>
          Every track gets scored across 5 categories, 1–10 each. Total out of 50. Hit 40+ to unlock rewards — bonus XP, a ★ badge on your profile, and your next submission moves to the front of the A&R queue.
        </div>
      </div>

      {/* Mode toggle */}
      <div style={{
        display: 'flex', gap: 6, padding: `${theme.gap}px ${theme.pad}px 0`,
      }}>
        {[
          { id: 'reference', l: 'REFERENCE' },
          { id: 'input',     l: 'INPUT MODE · A&R' },
        ].map(m => (
          <button key={m.id} onClick={() => setMode(m.id)} style={{
            flex: 1, padding: '10px 14px', borderRadius: 12, cursor: 'pointer',
            border: 'none',
            background: mode === m.id ? theme.text : 'transparent',
            color: mode === m.id ? theme.bg : theme.text,
            fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700,
            letterSpacing: 0.8, textTransform: 'uppercase',
            boxShadow: mode === m.id ? 'none' : `inset 0 0 0 1px ${theme.border}`,
          }}>{m.l}</button>
        ))}
      </div>

      {/* Score band guide */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10,
        }}>VERDICT BANDS</div>
        <Card theme={theme} style={{ padding: 4 }}>
          {SCORE_BANDS.map((b, i) => (
            <div key={i} style={{
              padding: 12, display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < SCORE_BANDS.length - 1 ? `1px solid ${theme.border}` : 'none',
            }}>
              <div style={{
                width: 56, padding: '4px 0', borderRadius: 7,
                background: b.tone, color: '#fff',
                fontFamily: theme.fontDisplay, fontSize: 12, letterSpacing: 0.3,
                textAlign: 'center',
              }}>{b.min}–{b.max}</div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontFamily: theme.fontDisplay, fontSize: 14, color: theme.text,
                  letterSpacing: 0.3, textTransform: 'uppercase',
                }}>{b.label}</div>
                <div style={{
                  fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
                  letterSpacing: 0.5, marginTop: 2, fontWeight: 600,
                }}>{b.sub.toUpperCase()}</div>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Categories — different content per mode */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10,
        }}>{mode === 'reference' ? 'CATEGORIES' : 'SCORE THIS TRACK'}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {RUBRIC.map(r => (
            <Card key={r.id} theme={theme} style={{ padding: 14 }}>
              <div style={{
                fontFamily: theme.fontDisplay, fontSize: 15, color: theme.text,
                letterSpacing: 0.4, textTransform: 'uppercase',
              }}>{r.label}</div>
              <div style={{
                fontFamily: theme.fontBody, fontSize: 13, color: theme.muted,
                marginTop: 4, lineHeight: 1.45,
              }}>{r.desc}</div>

              {mode === 'input' && (
                <>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 12, marginTop: 12,
                  }}>
                    <input
                      type="range" min={1} max={10} step={1}
                      value={scores[r.id]}
                      onChange={e => setScores({ ...scores, [r.id]: parseInt(e.target.value, 10) })}
                      style={{ flex: 1, accentColor: theme.accent }}
                    />
                    <div style={{
                      width: 56, padding: '6px 0', borderRadius: 8,
                      background: theme.accent, color: theme.onAccent,
                      fontFamily: theme.fontDisplay, fontSize: 14, textAlign: 'center',
                      letterSpacing: -0.2,
                    }}>{scores[r.id]}<span style={{ fontSize: 10, opacity: 0.6 }}>/10</span></div>
                  </div>
                  <textarea
                    value={notes[r.id]}
                    onChange={e => setNotes({ ...notes, [r.id]: e.target.value })}
                    placeholder={`Notes on ${r.label.toLowerCase()}…`}
                    rows={3}
                    style={{
                      width: '100%', marginTop: 10, padding: '10px 12px', borderRadius: 10,
                      background: theme.surface2, border: `1px solid ${theme.border}`,
                      color: theme.text, fontFamily: theme.fontBody, fontSize: 13,
                      outline: 'none', resize: 'none', lineHeight: 1.45,
                      boxSizing: 'border-box',
                    }}
                  />
                </>
              )}
            </Card>
          ))}
        </div>
      </div>

      {/* Input mode — verdict + submit bar */}
      {mode === 'input' && (
        <>
          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
              letterSpacing: 1, fontWeight: 600, marginBottom: 10,
            }}>FINAL VERDICT</div>
            <textarea
              value={verdict}
              onChange={e => setVerdict(e.target.value)}
              placeholder="One paragraph. Direct. Specific. What's the next thing this artist should do?"
              rows={4}
              style={{
                width: '100%', padding: '14px 16px', borderRadius: 12,
                background: theme.surface, border: `1px solid ${theme.border}`,
                color: theme.text, fontFamily: theme.fontBody, fontSize: 14,
                outline: 'none', resize: 'none', lineHeight: 1.5,
                boxSizing: 'border-box',
              }}
            />
          </div>

          {/* Sticky tally */}
          <div style={{
            position: 'sticky', bottom: 12, margin: `${theme.gap + 6}px ${theme.pad}px 0`,
            background: theme.surface, borderRadius: 16,
            border: `1px solid ${theme.border}`, padding: 12,
            display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
                letterSpacing: 1, fontWeight: 700,
              }}>RUNNING TOTAL</div>
              <div style={{
                fontFamily: theme.fontDisplay, fontSize: 24, color: band.tone,
                lineHeight: 1, letterSpacing: -0.3, marginTop: 4,
              }}>
                {total}<span style={{ fontSize: 12, color: theme.muted }}>/50</span>
                <span style={{ fontSize: 11, color: band.tone, marginLeft: 8 }}>· {band.label}</span>
              </div>
            </div>
            <button style={{
              background: theme.accent, color: theme.onAccent,
              border: 'none', borderRadius: 12, padding: '13px 16px', cursor: 'pointer',
              fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 1,
              textTransform: 'uppercase',
            }}>SUBMIT EVALUATION ↗</button>
          </div>
        </>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────
// MyEvaluationsScreen — member-facing: loads their REAL coach
// evaluations (live or demo) and renders the list → detail.
// ────────────────────────────────────────────────────────
function MyEvaluationsScreen({ theme, onBack }) {
  const [evals, setEvals] = useStateE(null);   // null = still loading
  const [openId, setOpenId] = useStateE(null);
  const [rubric, setRubric] = useStateE(false);

  useEffectE(() => {
    let alive = true;
    window.LAUNCH_USER.fetchMyEvaluations().then(list => {
      if (alive) setEvals(Array.isArray(list) ? list : []);
    });
    return () => { alive = false; };
  }, []);

  if (rubric) return <RubricScreen theme={theme} onBack={() => setRubric(false)} />;

  if (openId) {
    return (
      <EvaluationDetail theme={theme} evalId={openId} evals={evals || []}
        onBack={() => setOpenId(null)} onOpenRubric={() => setRubric(true)} />
    );
  }

  return (
    <div style={{ paddingBottom: 40 }}>
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 1, fontWeight: 700 }}>MY REVIEWS</div>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700, marginBottom: 6 }}>★ PRO REVIEW</div>
        <DisplayHeading theme={theme} size={34}>YOUR<br/>EVALUATIONS</DisplayHeading>
      </div>

      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        {evals === null ? (
          <div style={{ fontFamily: theme.fontMono, fontSize: 12, color: theme.muted }}>Loading…</div>
        ) : (
          <EvaluationsBlock theme={theme} evals={evals}
            onOpenEval={(id) => setOpenId(id)}
            onOpenRubric={() => setRubric(true)}
            onUseCredit={() => {}} />
        )}
      </div>
    </div>
  );
}

window.LAUNCH_SCREENS_10 = { EvaluationsBlock, EvaluationDetail, RubricScreen, CreditsCard, creditsState, MyEvaluationsScreen };
