// Control inputs: embryo count, doubling-rate slider, start value + day,
// test day, and actual measurement rows.

function EmbryoSelector({ value, onChange }) {
  return (
    <div>
      <Label zh="植入胚胎數" en="Embryos transferred" />
      <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
        {[1, 2, 3].map(n => (
          <button
            key={n}
            className="btn-reset"
            onClick={() => onChange(n)}
            style={{
              flex: 1,
              padding: '14px 0',
              borderRadius: 10,
              border: `1.5px solid ${value === n ? 'var(--accent)' : 'var(--line)'}`,
              background: value === n ? 'var(--accent-soft)' : 'var(--card)',
              color: value === n ? 'var(--accent-ink)' : 'var(--ink-soft)',
              transition: 'all 0.15s',
              fontWeight: value === n ? 600 : 400,
              fontSize: 14,
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 4 }}>
              {Array.from({ length: n }).map((_, i) => (
                <div key={i} style={{
                  width: 10, height: 10, borderRadius: '50%',
                  background: value === n ? 'var(--accent)' : 'var(--ink-faint)',
                  opacity: value === n ? 1 : 0.4,
                }} />
              ))}
            </div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>
              {n} {n === 1 ? '顆' : '顆'}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function DoublingSlider({ value, onChange }) {
  const presets = [48, 72];
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Label zh="翻倍時間" en="Doubling time" />
        <span className="mono" style={{ fontSize: 13, color: 'var(--accent-ink)', fontWeight: 500 }}>
          {value}<span style={{ color: 'var(--ink-faint)', marginLeft: 2 }}> hrs</span>
        </span>
      </div>
      <input
        type="range"
        min="36"
        max="96"
        step="1"
        value={value}
        onChange={(e) => onChange(+e.target.value)}
        style={{ marginTop: 14, accentColor: 'var(--accent)' }}
      />
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-faint)' }}>36h</span>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-faint)' }}>96h</span>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
        {presets.map(p => (
          <button
            key={p}
            className="btn-reset mono"
            onClick={() => onChange(p)}
            style={{
              padding: '5px 10px',
              fontSize: 11,
              borderRadius: 99,
              border: `1px solid ${value === p ? 'var(--accent)' : 'var(--line)'}`,
              background: value === p ? 'var(--accent-soft)' : 'transparent',
              color: value === p ? 'var(--accent-ink)' : 'var(--ink-soft)',
              letterSpacing: '0.04em',
            }}
          >
            {p}h
          </button>
        ))}
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 10.5, color: 'var(--ink-faint)', alignSelf: 'center' }}>
          典型 48–72h · typical
        </span>
      </div>
    </div>
  );
}

function StartInputs({ startValue, startDay, onValue, onDay }) {
  return (
    <div>
      <Label zh="起始點" en="Starting point" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 8, marginTop: 8 }}>
        <div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-faint)', marginBottom: 4, letterSpacing: '0.04em' }}>
            每胚胎 HCG
          </div>
          <div style={{ position: 'relative' }}>
            <input
              type="number"
              min="1"
              step="1"
              value={startValue}
              onChange={(e) => onValue(+e.target.value || 1)}
              style={{ paddingRight: 44 }}
            />
            <span className="mono" style={{
              position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
              fontSize: 10.5, color: 'var(--ink-faint)'
            }}>mIU</span>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-faint)', marginBottom: 4, letterSpacing: '0.04em' }}>
            起始天數 (Day)
          </div>
          <div style={{ position: 'relative' }}>
            <input
              type="number"
              min="0"
              max="28"
              step="1"
              value={startDay}
              onChange={(e) => onDay(+e.target.value || 0)}
              style={{ paddingRight: 44 }}
            />
            <span className="mono" style={{
              position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
              fontSize: 10.5, color: 'var(--ink-faint)'
            }}>post-ET</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function TestDayPicker({ value, onChange }) {
  const presets = [10, 12, 14];
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Label zh="驗孕日" en="Beta test day" />
        <span className="mono" style={{ fontSize: 13, color: 'var(--rose)', fontWeight: 500 }}>
          Day {value}
        </span>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
        {presets.map(p => (
          <button
            key={p}
            className="btn-reset mono"
            onClick={() => onChange(p)}
            style={{
              flex: 1,
              padding: '7px 0',
              fontSize: 12,
              borderRadius: 8,
              border: `1px solid ${value === p ? 'var(--rose)' : 'var(--line)'}`,
              background: value === p ? 'color-mix(in oklab, var(--rose) 15%, transparent)' : 'transparent',
              color: value === p ? 'var(--rose)' : 'var(--ink-soft)',
            }}
          >
            Day {p}
          </button>
        ))}
      </div>
    </div>
  );
}

function ActualMeasurements({ actuals, onChange, startDay }) {
  const add = () => onChange([...actuals, { day: startDay + 2, value: '' }]);
  const update = (i, k, v) => {
    const next = actuals.slice();
    next[i] = { ...next[i], [k]: v === '' ? '' : +v };
    onChange(next);
  };
  const remove = (i) => onChange(actuals.filter((_, j) => j !== i));

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Label zh="實際抽血數值" en="Actual beta readings" />
        <button className="btn-reset" onClick={add} style={{
          fontSize: 11, color: 'var(--accent-ink)', letterSpacing: '0.04em',
          padding: '4px 10px', borderRadius: 99, border: '1px solid var(--accent)',
          background: 'var(--accent-soft)',
        }}>
          + 新增 · add
        </button>
      </div>
      <div style={{ marginTop: 10 }}>
        {actuals.length === 0 && (
          <div style={{
            padding: '14px 12px',
            border: '1px dashed var(--line)',
            borderRadius: 10,
            fontSize: 12,
            color: 'var(--ink-faint)',
            textAlign: 'center',
            fontStyle: 'italic',
          }}>
            尚未輸入抽血數值 · no readings yet
          </div>
        )}
        {actuals.map((a, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr 28px', gap: 6,
            marginBottom: 6, alignItems: 'center',
          }}>
            <input
              type="number" min="0" max="28" value={a.day}
              onChange={(e) => update(i, 'day', e.target.value)}
              style={{ fontSize: 12, padding: '7px 8px', textAlign: 'center' }}
              title="Day"
            />
            <div style={{ position: 'relative' }}>
              <input
                type="number" min="0" step="1" value={a.value}
                onChange={(e) => update(i, 'value', e.target.value)}
                placeholder="mIU/mL"
                style={{ fontSize: 12, padding: '7px 8px', paddingRight: 40 }}
              />
              <span className="mono" style={{
                position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
                fontSize: 10, color: 'var(--ink-faint)',
              }}>mIU</span>
            </div>
            <button className="btn-reset" onClick={() => remove(i)} style={{
              fontSize: 16, color: 'var(--ink-faint)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              height: '100%',
            }}>×</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function TwinToggle({ value, onChange }) {
  return (
    <div>
      <Label zh="參考區間類型" en="Reference band" />
      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
        {[
          { v: false, zh: '單胞胎', en: 'Singleton' },
          { v: true,  zh: '雙胞胎', en: 'Twin' },
        ].map(opt => (
          <button
            key={String(opt.v)}
            className="btn-reset"
            onClick={() => onChange(opt.v)}
            style={{
              flex: 1,
              padding: '9px 0',
              borderRadius: 8,
              border: `1px solid ${value === opt.v ? 'var(--sage)' : 'var(--line)'}`,
              background: value === opt.v ? 'var(--sage-soft)' : 'var(--card)',
              color: value === opt.v ? '#556a52' : 'var(--ink-soft)',
              fontSize: 12,
              fontWeight: value === opt.v ? 600 : 400,
            }}
          >
            <div>{opt.zh}</div>
            <div style={{ fontSize: 9.5, opacity: 0.65, letterSpacing: '0.05em' }}>{opt.en}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

function Label({ zh, en }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
      <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{zh}</span>
      <span className="en" style={{ fontSize: 10.5, letterSpacing: '0.06em' }}>{en}</span>
    </div>
  );
}

Object.assign(window, {
  EmbryoSelector, DoublingSlider, StartInputs, TestDayPicker,
  ActualMeasurements, TwinToggle, Label,
});