// Phone screens aligned with evaluation/[templateId].tsx + result-preview.tsx (Free tier).

function ClinicalFlagPill({ flag, lang }) {
  const labels = {
    green:  { es: 'Normal', en: 'Normal' },
    yellow: { es: 'Precaución', en: 'Caution' },
    red:    { es: 'Riesgo Alto', en: 'High risk' },
  };
  const sem = {
    green:  { text: 'var(--semantic-green)', bg: 'var(--semantic-green-bg)' },
    yellow: { text: 'var(--semantic-yellow)', bg: 'var(--semantic-yellow-bg)' },
    red:    { text: 'var(--semantic-red)', bg: 'var(--semantic-red-bg)' },
  };
  const s = sem[flag];
  const label = labels[flag][lang];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: s.bg,
    }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: s.text }} />
      <span style={{ fontSize: 11, fontWeight: 600, color: s.text }}>{label}</span>
    </span>
  );
}

function LandingEvalScreen({ lang }) {
  const isEs = lang === 'es';
  const options = isEs ? [
    { l: 'Capaz, sin uso de manos y se estabiliza' },
    { l: 'Capaz, en forma independiente, usando las manos' },
    { l: 'Capaz, usando las manos tras varios intentos' },
    { l: 'Necesita ayuda mínima' },
    { l: 'Necesita asistencia moderada o máxima' },
  ] : [
    { l: 'Able, without using hands; stable' },
    { l: 'Able independently, using hands' },
    { l: 'Able, using hands after several tries' },
    { l: 'Needs minimal aid' },
    { l: 'Needs moderate or maximal assistance' },
  ];
  const selectedIdx = 1;
  const answered = 5;
  const total = 14;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      paddingTop: 56,
      display: 'flex', flexDirection: 'column',
      background: 'var(--gray-100)',
    }}>
      {/* Sticky score header */}
      <div style={{
        background: 'var(--paper)',
        borderBottom: '1px solid var(--gray-300)',
        padding: '10px 16px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <ClinicalFlagPill flag="yellow" lang={lang} />
          <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--ink)' }}>28 pts</span>
        </div>
        <span style={{ fontSize: 12, color: 'var(--gray-500)' }}>
          {isEs ? `${answered}/${total} ítems` : `${answered}/${total} items`}
        </span>
      </div>
      <div style={{ height: 3, background: 'var(--gray-300)' }}>
        <div style={{
          width: `${(answered / total) * 100}%`, height: '100%',
          background: 'var(--primary)',
        }} />
      </div>

      <div style={{ padding: '16px 16px 0', flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--ink)', marginBottom: 12, lineHeight: 1.3 }}>
          {isEs ? 'Sentado a de pie' : 'Sitting to standing'}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
          {options.map((opt, i) => {
            const active = i === selectedIdx;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 10,
                padding: 12,
                borderRadius: 6,
                border: `1.5px solid ${active ? 'var(--primary)' : 'var(--gray-300)'}`,
                background: active ? 'var(--primary-100)' : 'var(--paper)',
              }}>
                <div style={{
                  width: 20, height: 20, borderRadius: 999, flexShrink: 0, marginTop: 1,
                  border: `2px solid ${active ? 'var(--primary)' : 'var(--gray-300)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {active && <div style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--primary)' }} />}
                </div>
                <span style={{
                  fontSize: 15, lineHeight: 1.35,
                  color: active ? 'var(--ink)' : 'var(--gray-700)',
                  fontWeight: active ? 600 : 400,
                }}>
                  {opt.l}
                </span>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '12px 16px 22px', background: 'var(--paper)', borderTop: '1px solid var(--gray-300)' }}>
        <div style={{
          background: 'var(--primary)', color: '#fff',
          padding: '14px 16px', borderRadius: 10,
          textAlign: 'center', fontWeight: 600, fontSize: 17,
        }}>
          {isEs ? 'Completar evaluación' : 'Complete assessment'}
        </div>
      </div>
    </div>
  );
}

function LandingResultScreen({ lang }) {
  const isEs = lang === 'es';
  return (
    <div style={{
      position: 'absolute', inset: 0,
      paddingTop: 56,
      display: 'flex', flexDirection: 'column',
      background: 'var(--gray-100)',
      overflow: 'auto',
    }}>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
        {/* Card — result-preview.tsx */}
        <div style={{
          background: 'var(--paper)',
          borderRadius: 10,
          border: '1px solid var(--gray-300)',
          padding: 16,
          boxShadow: 'var(--shadow-card)',
        }}>
          <div style={{
            fontSize: 9.5, fontWeight: 600, letterSpacing: '1.4px',
            color: 'var(--gray-500)', textTransform: 'uppercase', marginBottom: 12,
          }}>
            {isEs ? 'RESULTADO' : 'RESULT'}
          </div>

          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            background: 'var(--gray-100)',
            border: '1px solid var(--gray-300)',
            borderRadius: 10,
            padding: 12,
          }}>
            <div>
              <div style={{
                fontSize: 9.5, fontWeight: 600, letterSpacing: 1,
                color: 'var(--gray-500)', textTransform: 'uppercase', marginBottom: 4,
              }}>
                {isEs ? 'PUNTAJE' : 'SCORE'}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 30, fontWeight: 800, letterSpacing: -1, color: 'var(--ink)' }}>34</span>
                <span style={{ fontSize: 13, color: 'var(--gray-500)', fontWeight: 500 }}>pts</span>
              </div>
            </div>
            <ClinicalFlagPill flag="yellow" lang={lang} />
          </div>

          <div style={{
            marginTop: 12,
            borderLeft: '3px solid var(--semantic-yellow)',
            background: 'color-mix(in oklab, var(--semantic-yellow) 12%, transparent)',
            borderRadius: 4,
            padding: 10,
            fontSize: 12.5,
            lineHeight: 1.45,
            color: 'var(--ink)',
          }}>
            {isEs
              ? 'Riesgo moderado de caídas. Considerar andador y ejercicios de equilibrio.'
              : 'Moderate fall risk. Consider walker and balance exercises.'}
          </div>
        </div>

        {/* Pro banner */}
        <div style={{
          background: 'var(--paper)',
          borderRadius: 10,
          border: '1px solid color-mix(in oklab, var(--primary) 28%, transparent)',
          padding: 16,
        }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)', marginBottom: 6 }}>
            {isEs ? 'Guarda este resultado' : 'Save this result'}
          </div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: 'var(--gray-700)' }}>
            {isEs
              ? 'Con KineSuite Pro puedes guardar resultados, crear expedientes y exportar informes PDF.'
              : 'With KineSuite Pro you can save results, create records, and export PDF reports.'}
          </p>
          <div style={{
            marginTop: 12,
            alignSelf: 'flex-start',
            padding: '10px 14px',
            borderRadius: 10,
            background: 'var(--primary-100)',
            color: 'var(--primary)',
            fontSize: 14, fontWeight: 600,
          }}>
            {isEs ? 'Conocer Pro' : 'Learn about Pro'}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 'auto', paddingBottom: 8 }}>
          <div style={{
            background: 'var(--ink)', color: '#fff',
            padding: '14px 16px', borderRadius: 10,
            textAlign: 'center', fontWeight: 600, fontSize: 17,
          }}>
            {isEs ? 'Nueva evaluación' : 'New assessment'}
          </div>
          <div style={{
            padding: '12px 16px', borderRadius: 10,
            border: '1px solid var(--gray-300)',
            background: 'var(--paper)',
            textAlign: 'center', fontSize: 15, fontWeight: 500, color: 'var(--gray-700)',
          }}>
            {isEs ? 'Volver al catálogo' : 'Back to library'}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  LandingEvalScreen, LandingResultScreen,
});