/* global React */
// Compact Junbi app screens for use inside the landing page iPhone mockups.
// Self-contained — no dependency on the UI kit's components.jsx.

const J_RED = '#991600';
const J_PAPER = '#F7F6F2';
const J_CARD = '#FFFFFF';
const J_BORDER = '#EDE8E1';
const J_TAN = '#EAD4BC';
const J_BROWN = '#A38B71';
const J_INK = '#000000';
const J_HIGHLIGHT = '#E6D8D6';
const J_SAGE = '#586852';
const J_SAGE_PALE = '#DDE3DA';
const J_STAMP_GREY = '#9C9890';

const fSys = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif';
const fJp = '"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", -apple-system, sans-serif';

// ---------- shared chrome ----------
function JTopBar({ title = '', right, onBack, leading }) {
  return (
    <div style={{
      height: 48, padding: '0 16px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexShrink: 0,
    }}>
      <div style={{ width: 60, display: 'flex', alignItems: 'center' }}>
        {onBack ? (
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, font: `400 16px ${fSys}` }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
            Back
          </span>
        ) : leading || null}
      </div>
      <div style={{ font: `700 16px ${fSys}` }}>{title}</div>
      <div style={{ width: 60, display: 'flex', justifyContent: 'flex-end' }}>{right}</div>
    </div>
  );
}

function JAvatar() {
  return (
    <div style={{
      width: 40, height: 40, borderRadius: 9999,
      background: J_SAGE, color: '#fff',
      border: '1px solid #000',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      font: `700 16px ${fSys}`,
    }}>I</div>
  );
}

function JTabBar({ active = 'dashboard' }) {
  const tabs = [
    { id: 'dashboard', label: 'Dashboard', icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/><path d="M10 20v-5h4v5"/>
      </svg>
    )},
    { id: 'history', label: 'History', icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 12 a9 9 0 1 0 3-6.7"/><path d="M3 4 v4 h4"/><path d="M12 8 v4 l3 2"/>
      </svg>
    )},
    { id: 'progress', label: 'Progress', icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 16l3-4 3 2 4-6"/>
      </svg>
    )},
  ];
  return (
    <div style={{
      height: 89, paddingTop: 10, paddingBottom: 34,
      borderTop: `1px solid ${J_BORDER}`, background: J_CARD,
      display: 'flex', justifyContent: 'space-around', alignItems: 'flex-start',
      flexShrink: 0,
    }}>
      {tabs.map(t => {
        const on = t.id === active;
        return (
          <div key={t.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: on ? J_RED : J_BROWN,
            font: `700 11px ${fSys}`,
          }}>
            {t.icon}{t.label}
          </div>
        );
      })}
    </div>
  );
}

function JCard({ children, accent, style }) {
  return (
    <div style={{
      background: J_CARD,
      border: `1px solid ${accent ? J_TAN : J_BORDER}`,
      borderRadius: 12, padding: 16,
      display: 'flex', flexDirection: 'column', gap: 10,
      ...style,
    }}>{children}</div>
  );
}

function JPrimary({ children, style }) {
  return (
    <div style={{
      height: 48, borderRadius: 9999, background: J_RED, color: J_PAPER,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      font: `700 14px ${fSys}`, ...style,
    }}>{children}</div>
  );
}
function JCompact({ children, style }) {
  return (
    <div style={{
      height: 36, padding: '0 18px', borderRadius: 9999, background: J_RED, color: J_PAPER,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      font: `700 12px ${fSys}`, ...style,
    }}>{children}</div>
  );
}

function JTrend({ trend = 'improving' }) {
  const m = {
    improving: { bg: J_SAGE_PALE, bd: J_SAGE, fg: J_SAGE, t: '↑ Improving' },
    declining: { bg: J_HIGHLIGHT, bd: J_RED, fg: J_RED, t: '↓ Declining' },
  }[trend];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '5px 10px', borderRadius: 9999,
      font: `700 11px ${fSys}`, lineHeight: 1,
      background: m.bg, border: `1px solid ${m.bd}`, color: m.fg,
    }}>{m.t}</span>
  );
}

function JResultChip({ pass }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '5px 12px', borderRadius: 9999,
      font: `700 11px ${fSys}`, fontFamily: fJp, lineHeight: 1,
      background: pass ? J_SAGE_PALE : J_HIGHLIGHT,
      border: `1px solid ${pass ? J_SAGE : J_RED}`,
      color: pass ? J_SAGE : J_RED,
    }}>{pass ? '合格 / Passed' : '不合格 / Failed'}</span>
  );
}

function JSectionLabel({ children }) {
  return (
    <div style={{
      font: `700 13px ${fSys}`, color: J_BROWN, lineHeight: 1,
    }}>{children}</div>
  );
}

// ---------- Screen 1: Dashboard ----------
function ScreenDashboard() {
  return (
    <div style={{
      width: '100%', height: '100%', background: J_PAPER,
      display: 'flex', flexDirection: 'column', fontFamily: fSys,
    }}>
      <JTopBar right={<JAvatar />} />
      <div style={{ flex: 1, padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 20, overflow: 'hidden' }}>
        <div>
          <div style={{ font: `700 26px ${fSys}`, fontFamily: fJp, lineHeight: 1.1 }}>こんにちは, Maya!</div>
          <div style={{ font: `400 14px ${fSys}`, color: J_BROWN, marginTop: 6 }}>
            {daysUntilJLPT()} days until JLPT exam
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <JSectionLabel>Pick up where you left off</JSectionLabel>
          <JCard accent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: '14px 14px 14px 16px' }}>
            <div>
              <div style={{ font: `700 16px ${fSys}` }}>Full exam</div>
              <div style={{ font: `400 13px ${fSys}`, color: J_BROWN, marginTop: 4 }}>In progress · 12 of 20</div>
            </div>
            <JCompact>Resume</JCompact>
          </JCard>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <JSectionLabel>Insight</JSectionLabel>
          <JCard>
            <div style={{ font: `700 16px ${fSys}` }}>Listening needs work</div>
            <div style={{ font: `400 13px ${fSys}`, color: J_BROWN, lineHeight: 1.45 }}>
              42% accuracy across your last 3 sessions
            </div>
            <div style={{ font: `700 13px ${fSys}`, color: J_RED, marginTop: 2 }}>Practice listening →</div>
          </JCard>
        </div>

        <div style={{ marginTop: 'auto' }}>
          <JPrimary>Start practice</JPrimary>
        </div>
      </div>
      <JTabBar active="dashboard" />
    </div>
  );
}

// ---------- Screen 2: Exam in progress ----------
function ScreenExam() {
  return (
    <div style={{
      width: '100%', height: '100%', background: J_PAPER,
      display: 'flex', flexDirection: 'column', fontFamily: fSys,
    }}>
      <JTopBar
        leading={
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        }
        title={<span style={{ fontFamily: fJp, fontWeight: 400 }}>Vocabulary 2 / 20</span>}
        right={<span style={{ font: `700 14px ${fSys}` }}>03:59</span>}
      />
      <div style={{ flex: 1, padding: '20px 16px 16px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{ font: `400 22px ${fSys}`, fontFamily: fJp, lineHeight: 1.5 }}>
          私は<span style={{ color: J_RED }}>毎日</span>べんきょうします。
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { t: 'まいにち', selected: true },
            { t: 'まいげつ' },
            { t: 'まにち' },
            { t: 'まいつ' },
          ].map((a, i) => (
            <div key={i} style={{
              background: a.selected ? J_HIGHLIGHT : J_CARD,
              border: `1px solid ${a.selected ? J_RED : J_BORDER}`,
              borderRadius: 12, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 9999,
                border: `1px solid ${a.selected ? J_RED : J_BROWN}`,
                color: a.selected ? J_RED : J_BROWN,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                font: `700 11px ${fSys}`, flexShrink: 0,
              }}>{i + 1}</div>
              <span style={{ fontFamily: fJp, fontSize: 15 }}>{a.t}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: '12px 16px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 9999, background: J_CARD,
          border: `1px solid ${J_BORDER}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke={J_BROWN} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
        </div>
        <div style={{
          height: 44, padding: '0 28px', borderRadius: 12, background: J_RED, color: J_PAPER,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          font: `700 14px ${fSys}`,
        }}>Next</div>
      </div>
    </div>
  );
}

// ---------- Screen 3: Result (passed) ----------
function ScreenResult() {
  return (
    <div style={{
      width: '100%', height: '100%', background: J_PAPER,
      display: 'flex', flexDirection: 'column', fontFamily: fSys,
    }}>
      <JTopBar onBack title="Vocabulary" />
      <div style={{ flex: 1, padding: '4px 16px 16px', display: 'flex', flexDirection: 'column', gap: 16, overflow: 'hidden' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, paddingTop: 4 }}>
          <img src="assets/hanko-vocabulary.svg" alt="" style={{ width: 88, height: 88 }} />
          <div style={{ font: `700 22px ${fSys}`, fontFamily: fJp, color: J_RED, marginTop: 4 }}>合格しました</div>
          <div style={{ font: `400 13px ${fSys}`, color: J_BROWN }}>You've passed</div>
        </div>

        <JCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ font: `400 12px ${fSys}`, color: J_BROWN }}>Vocabulary 漢字・読み</div>
              <div style={{ font: `700 22px ${fSys}`, marginTop: 4 }}>15/20 · 75%</div>
            </div>
            <JResultChip pass />
          </div>
          <div style={{ borderTop: `1px solid ${J_BORDER}`, paddingTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: `400 13px ${fSys}` }}>
              <span style={{ color: J_BROWN }}>Passing 75%</span>
              <span>—</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: `400 13px ${fSys}` }}>
              <span style={{ color: J_BROWN }}>Time · 4min</span>
              <span>4min 32sec</span>
            </div>
          </div>
        </JCard>

        <JCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ font: `400 12px ${fSys}`, color: J_BROWN }}>Orthography accuracy</span>
            <JTrend trend="improving" />
          </div>
          <div style={{ font: `700 22px ${fSys}` }}>95%</div>
          <div style={{ font: `700 14px ${fSys}` }}>Orthography is locked in.</div>
        </JCard>
      </div>
    </div>
  );
}

// ---------- Screen 4: Progress / Trends ----------
function ScreenProgress() {
  return (
    <div style={{
      width: '100%', height: '100%', background: J_PAPER,
      display: 'flex', flexDirection: 'column', fontFamily: fSys,
    }}>
      <JTopBar right={<JAvatar />} />
      <div style={{ display: 'flex', padding: '0 0 0 0' }}>
        <div style={{ flex: 1, padding: '10px 8px', font: `700 13px ${fSys}`, color: J_RED, textAlign: 'center', borderBottom: `2px solid ${J_RED}` }}>Trends</div>
        <div style={{ flex: 1, padding: '10px 8px', font: `700 13px ${fSys}`, color: J_BROWN, textAlign: 'center', borderBottom: `1px solid ${J_TAN}` }}>Achievements</div>
      </div>

      <div style={{ flex: 1, padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        <JCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <span style={{ font: `400 13px ${fSys}`, color: J_BROWN }}>Overall accuracy</span>
              <div style={{ font: `700 22px ${fSys}`, marginTop: 4 }}>81%</div>
            </div>
            <JTrend trend="improving" />
          </div>
          <div style={{ borderTop: `1px solid ${J_BORDER}`, paddingTop: 10 }}>
            <div style={{ font: `700 15px ${fSys}` }}>You'd score 100/180</div>
            <div style={{ height: 8, background: J_BORDER, borderRadius: 9999, overflow: 'hidden', marginTop: 10 }}>
              <div style={{ width: '55%', height: '100%', background: J_RED }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 12px', marginTop: 12, font: `400 13px ${fSys}`, color: J_BROWN }}>
              <span>Vocabulary <b style={{ color: J_RED }}>54%</b></span>
              <span>Reading <b style={{ color: J_SAGE }}>75%</b></span>
              <span>Grammar <b style={{ color: J_SAGE }}>89%</b></span>
              <span>Listening <b style={{ color: J_SAGE }}>77%</b></span>
            </div>
          </div>
        </JCard>

        <JCard>
          <div style={{ font: `700 15px ${fSys}` }}>Listening needs work</div>
          <div style={{ font: `400 13px ${fSys}`, color: J_BROWN, lineHeight: 1.45 }}>
            42% accuracy across your last 3 sessions
          </div>
          <div style={{ font: `700 13px ${fSys}`, color: J_RED }}>Practice listening →</div>
        </JCard>
      </div>
    </div>
  );
}

// ---------- Screen 5: History ----------
function ScreenHistory() {
  const items = [
    { kind: 'Full exam', meta: 'In progress · 12 of 20', resume: true, accent: true },
    { kind: 'Vocabulary', meta: 'Today · 75% accuracy', stamp: 'vocabulary', pass: true },
    { kind: 'Listening', meta: 'Today · 38% accuracy', stamp: 'listening', pass: false },
    { kind: 'Grammar', meta: 'Yesterday · 89% accuracy', stamp: 'grammar', pass: true },
    { kind: 'Reading', meta: '14 Jan – 92% accuracy', stamp: 'reading', pass: true },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', background: J_PAPER,
      display: 'flex', flexDirection: 'column', fontFamily: fSys,
    }}>
      <JTopBar title="History" />
      <div style={{ display: 'flex' }}>
        {[{ id: 'all', label: 'All' }, { id: 'exams', label: 'Exams' }, { id: 'drills', label: 'Drills' }].map((o, i) => (
          <div key={o.id} style={{
            flex: 1, padding: '10px 8px', textAlign: 'center',
            font: `700 13px ${fSys}`,
            color: i === 0 ? J_RED : J_BROWN,
            borderBottom: i === 0 ? `2px solid ${J_RED}` : `1px solid ${J_TAN}`,
          }}>{o.label}</div>
        ))}
      </div>
      <div style={{ flex: 1, padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
        {items.map((it, i) => (
          <div key={i} style={{
            background: J_CARD,
            border: `1px solid ${it.accent ? J_TAN : J_BORDER}`,
            borderRadius: 12, padding: 12,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            {it.stamp ? (
              <img src={`assets/hanko-${it.stamp}.svg`} alt="" style={{ width: 38, height: 38, opacity: it.pass ? 1 : 0.55, filter: it.pass ? 'none' : 'grayscale(1)' }} />
            ) : (
              <div style={{ width: 38, height: 38 }} />
            )}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: `700 15px ${fSys}` }}>{it.kind}</div>
              <div style={{ font: `400 12px ${fSys}`, color: J_BROWN, marginTop: 2 }}>{it.meta}</div>
            </div>
            {it.resume ? (
              <JCompact>Resume</JCompact>
            ) : (
              <span style={{
                font: `700 12px ${fSys}`, fontFamily: fJp,
                color: it.pass ? J_SAGE : J_BROWN,
              }}>{it.pass ? '合格' : '不合格'}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenDashboard, ScreenExam, ScreenResult, ScreenProgress, ScreenHistory,
});