// V1 — Editorial baseline (Option E aesthetic applied to CPT Lookup).
// State shown: user has typed "992" — results are populated.
// Hero search input, locality chip below, scannable result rows.

function CPTV1Header() {
  return (
    <div style={{ padding: '14px 20px 4px', background: RVU.bg }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: 999, background: RVU.tealDeep, boxShadow: `0 0 0 4px ${RVU.teal}22` }}/>
          <span style={{ fontSize: 11, fontWeight: 600, color: RVU.textSec, letterSpacing: 0.4 }}>
            CPT lookup is always free
          </span>
        </div>
        <div style={{ fontSize: 11, color: RVU.textMuted, fontFamily: RVU.fontMono }}>
          {MOCK.profile.feeYear} fee schedule
        </div>
      </div>
      <div style={{ marginTop: 8, fontSize: 30, fontWeight: 700, color: RVU.navyDark, letterSpacing: -0.8, lineHeight: 1.05 }}>
        CPT Lookup
      </div>
    </div>
  );
}

function CPTSearchBar({ value = '', focused = true, placeholder = 'Code or description…' }) {
  return (
    <div style={{ padding: '14px 16px 8px' }}>
      <div style={{
        display: 'flex', alignItems: 'center',
        background: RVU.surface, border: `1px solid ${focused ? RVU.navy : RVU.border}`,
        borderRadius: 14, padding: '0 12px',
        boxShadow: focused ? `0 0 0 3px ${RVU.navy}1a, 0 1px 2px rgba(15,43,91,0.04)` : '0 1px 2px rgba(15,43,91,0.03)',
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <circle cx="11" cy="11" r="7" stroke={RVU.textMuted} strokeWidth={1.8}/>
          <path d="M17 17l4 4" stroke={RVU.textMuted} strokeWidth={1.8} strokeLinecap="round"/>
        </svg>
        <div style={{
          flex: 1, padding: '14px 10px',
          fontSize: 16, color: value ? RVU.text : RVU.textMuted,
          fontFamily: value && /^[0-9G]/.test(value) ? RVU.fontMono : RVU.fontUI,
          fontWeight: value ? 600 : 400,
          letterSpacing: value && /^[0-9G]/.test(value) ? 0.5 : 0,
        }}>
          {value || placeholder}
          {focused && (
            <span style={{
              display: 'inline-block', width: 2, height: 18,
              background: RVU.navy, marginLeft: 2,
              verticalAlign: -4, animation: 'blink 1s step-end infinite',
            }}/>
          )}
        </div>
        {value && (
          <div style={{
            width: 22, height: 22, borderRadius: 999,
            background: RVU.surfaceAlt, display: 'flex',
            alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
              <path d="M6 6l12 12M18 6L6 18" stroke={RVU.textSec} strokeWidth={2.2} strokeLinecap="round"/>
            </svg>
          </div>
        )}
      </div>
    </div>
  );
}

function CPTLocalityChip() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 16px 12px' }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
        <path d="M12 2C8 2 5 5 5 9c0 5.5 7 13 7 13s7-7.5 7-13c0-4-3-7-7-7z" stroke={RVU.textMuted} strokeWidth={1.6}/>
        <circle cx="12" cy="9" r="2.4" stroke={RVU.textMuted} strokeWidth={1.6}/>
      </svg>
      <span style={{ fontSize: 11.5, color: RVU.textMuted }}>
        {MOCK.profile.localityName} ·
        <span style={{ fontFamily: RVU.fontMono, color: RVU.textSec, marginLeft: 4 }}>
          Work GPCI 1.097
        </span>
      </span>
    </div>
  );
}

function CPTResultRow({ cpt, logged = false, primary = false, starred = false }) {
  const adj = (cpt.rvu * 1.097).toFixed(2);
  return (
    <div style={{
      background: RVU.surface, borderRadius: 16,
      border: `1px solid ${primary ? RVU.navy + '40' : RVU.border}`,
      padding: '14px 16px', marginBottom: 8,
      boxShadow: primary ? `0 0 0 3px ${RVU.navy}10` : 'none',
    }}>
      {/* Top row: code chip + category, star on far right */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{
          background: RVU.navyDark, color: '#fff',
          fontSize: 12.5, fontWeight: 700, fontFamily: RVU.fontMono,
          padding: '4px 9px', borderRadius: 5, letterSpacing: 0.4,
        }}>{cpt.code}</span>
        <span style={{
          fontSize: 10.5, color: RVU.textSec, fontWeight: 500,
          padding: '3px 8px', borderRadius: 4, background: RVU.surfaceAlt,
          border: `1px solid ${RVU.borderLt}`, letterSpacing: 0.2,
        }}>{cpt.cat}</span>
        <div style={{ flex: 1 }}/>
        <CPTStar starred={starred}/>
      </div>

      {/* Description */}
      <div style={{ fontSize: 13.5, color: RVU.text, lineHeight: 1.4, marginBottom: 12 }}>
        {cpt.desc}
      </div>

      {/* RVU + actions */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <div style={{
            fontFamily: RVU.fontNum, fontSize: 22, fontWeight: 700,
            color: RVU.navy, lineHeight: 1, letterSpacing: -0.5,
            fontVariantNumeric: 'tabular-nums',
          }}>
            {adj} <span style={{ fontSize: 11, fontWeight: 500, color: RVU.textMuted, letterSpacing: 0 }}>wRVU</span>
          </div>
          <div style={{ fontSize: 10.5, color: RVU.textMuted, marginTop: 4, fontFamily: RVU.fontMono }}>
            base {cpt.rvu.toFixed(2)} × GPCI 1.097
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            width: 38, height: 38, borderRadius: 10,
            background: RVU.surface, border: `1px solid ${RVU.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', padding: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <rect x="3.5" y="5" width="17" height="16" rx="2" stroke={RVU.navy} strokeWidth={1.7}/>
              <path d="M3.5 9.5h17M8 3v4M16 3v4" stroke={RVU.navy} strokeWidth={1.7} strokeLinecap="round"/>
            </svg>
          </button>
          {logged ? (
            <div style={{
              padding: '0 14px', height: 38, borderRadius: 10,
              background: RVU.surface, border: `1.5px solid ${RVU.success}`,
              display: 'flex', alignItems: 'center', gap: 5,
              color: RVU.success, fontSize: 12.5, fontWeight: 700,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M5 12l5 5L20 7" stroke={RVU.success} strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              Logged
            </div>
          ) : (
            <div style={{
              padding: '0 14px', height: 38, borderRadius: 10,
              background: RVU.navy, display: 'flex',
              alignItems: 'center', gap: 5, color: '#fff',
              fontSize: 12.5, fontWeight: 700,
            }}>
              <Icon.plus s={14}/>
              Log today
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function CPTStar({ starred }) {
  return (
    <div style={{
      width: 32, height: 32, borderRadius: 8,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
      background: starred ? RVU.navy + '0f' : 'transparent',
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill={starred ? RVU.navy : 'none'}>
        <path
          d="M12 2.5l2.85 6.18 6.65.6-5.05 4.42 1.55 6.5L12 16.9l-6 3.3 1.55-6.5L2.5 9.28l6.65-.6L12 2.5z"
          stroke={starred ? RVU.navy : RVU.textMuted}
          strokeWidth={1.7}
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );
}

function CPTResultsCount({ n, query }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '4px 4px 10px' }}>
      <span style={{ fontSize: 13, color: RVU.textSec }}>
        <span style={{ fontWeight: 700, color: RVU.navyDark, fontVariantNumeric: 'tabular-nums' }}>{n}</span> matches for <span style={{ fontFamily: RVU.fontMono, color: RVU.navyDark }}>"{query}"</span>
      </span>
      <span style={{ fontSize: 11, color: RVU.navy, fontWeight: 600 }}>Sort ↓</span>
    </div>
  );
}

function CPTV1() {
  const codes = CPT.sampleResults.map(c => CPT.byCode(c)).filter(Boolean);
  return (
    <PhoneShell>
      <CPTV1Header/>
      <CPTSearchBar value="992" focused/>
      <CPTLocalityChip/>
      <div style={{ padding: '0 16px 16px' }}>
        <CPTResultsCount n={codes.length} query="992"/>
        {codes.map((c, i) => (
          <CPTResultRow
            key={c.code}
            cpt={c}
            primary={i === 0}
            logged={c.code === '99213'}
            starred={CPT.favorites.includes(c.code)}
          />
        ))}
      </div>
      <TabBar active="CPTLookup"/>
      {/* keyframes for cursor blink */}
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
    </PhoneShell>
  );
}

window.CPTV1 = CPTV1;
window.CPTSearchBar = CPTSearchBar;
window.CPTLocalityChip = CPTLocalityChip;
window.CPTResultRow = CPTResultRow;
window.CPTV1Header = CPTV1Header;