// While² — Solid / minimal screens
// Splash と同じ世界観で、罫線・pill・checkbox全廃。
// テキストだけで構成、`/\` `_` 系の小さなASCIIヘッダー、key=value、行のみ。

const _INK = '#e8e6df';

// Tiny ASCII headers, in the same /\__ family as the splash logo.
// Built by hand from a 3-line, lighter-weight version of the figlet.
const HEADERS = {
  today: [
    ' _____   _   _   _    __ ',
    '/__   \\ /  \\ | \\ /_\\ |  |',
    '  | | / /\\ \\| | // \\\\ \\/ ',
    '  |_| \\/  \\/|_/_/   \\/__|',
  ],
  // simpler "single line" wordmark for compactness
  // we'll keep most headers as `> while² <screen>` prompt instead.
};

// Common shell — top prompt as the page header,
// content centered horizontally, generous black space.
function SolidShell({ prompt, children, footer }) {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: '#000', color: _INK, fontFamily: W2.mono,
      display: 'flex', flexDirection: 'column',
    }}>
      <div className="w2-scan" />
      {/* Prompt header — fixed top, splash-aligned padding */}
      <div style={{
        padding: '60px 20px 0', fontSize: 11, lineHeight: 1.6,
        letterSpacing: '0.04em',
      }}>
        <span style={{ color: W2.cyan }}>&gt;</span>{' '}
        <span>{prompt}</span>
        <span className="w2-blink" style={{ marginLeft: 2 }}>_</span>
      </div>
      {/* Content */}
      <div style={{ flex: 1, padding: '36px 20px 20px', overflow: 'hidden' }}>
        {children}
      </div>
      {/* Footer prompt nav */}
      {footer && (
        <div style={{
          padding: '12px 20px 26px', borderTop: '1px solid rgba(232,230,223,0.08)',
          fontSize: 10, color: 'rgba(232,230,223,0.55)', letterSpacing: '0.04em',
          display: 'flex', gap: 16, justifyContent: 'space-between',
        }}>
          {footer}
        </div>
      )}
    </div>
  );
}

const PromptLink = ({ active, children }) => (
  <span style={{
    color: active ? W2.cyan : 'rgba(232,230,223,0.55)',
    fontFamily: W2.mono, fontSize: 10, letterSpacing: '0.04em',
  }}>
    {active ? <span style={{ color: W2.cyan }}>&gt; </span> : '  '}
    {children}
  </span>
);

const NavFooter = ({ current }) => (
  <>
    <PromptLink active={current === 'today'}>today</PromptLink>
    <PromptLink active={current === 'new'}>new_</PromptLink>
    <PromptLink active={current === 'config'}>config</PromptLink>
  </>
);

// ── HOME ─────────────────────────────────────────────────────
// Rows only. Time | name | rule. Overdue rows in cyan.
function HomeSolid() {
  const today = [
    { name: 'burnable trash',  rule: 'weekly · tue', swipe: 'right' },
    { name: 'stretch',         rule: 'daily' },
    { name: 'haircut',         rule: 'every 4w · overdue', warn: true, swipe: 'left' },
  ];
  const upcoming = [
    { t: '04/30', name: 'non-burnable trash', rule: 'biweekly' },
    { t: '05/03', name: 'pay rent',           rule: 'monthly · 3' },
    { t: '05/05', name: 'restock shampoo',    rule: 'every 6w' },
    { t: '05/06', name: 'book checkup',       rule: 'every 12m' },
  ];
  const TodayRow = ({ name, rule, warn, swipe }) => {
    // Slide the row content; reveal action label on the opposite side.
    const slide = swipe === 'right' ? 64 : swipe === 'left' ? -64 : 0;
    const baseColor = warn ? W2.cyan : _INK;
    const ruleColor = warn ? W2.cyan : 'rgba(232,230,223,0.45)';
    return (
      <div style={{ position: 'relative', height: 44, marginBottom: 2, overflow: 'hidden' }}>
        {/* action label, behind */}
        {swipe === 'right' && (
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            display: 'flex', alignItems: 'center',
            color: W2.cyan, fontSize: 11,
          }}>
            <span style={{ marginRight: 8 }}>✓</span>done_
          </div>
        )}
        {swipe === 'left' && (
          <div style={{
            position: 'absolute', right: 0, top: 0, bottom: 0,
            display: 'flex', alignItems: 'center',
            color: W2.cyan, fontSize: 11,
          }}>
            edit_
          </div>
        )}
        {/* foreground row, translated */}
        <div style={{
          position: 'absolute', inset: 0,
          transform: `translateX(${slide}px)`,
          background: '#000',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 12,
          alignItems: 'center', padding: '0',
          fontSize: 11, lineHeight: 1.4, color: baseColor,
        }}>
          <span>{name}</span>
          <span style={{ color: ruleColor, fontSize: 10 }}>{rule}</span>
        </div>
      </div>
    );
  };
  const UpcomingRow = ({ t, name, rule }) => (
    <div style={{
      display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 12,
      alignItems: 'center', height: 40,
      fontSize: 11, lineHeight: 1.4, color: _INK,
    }}>
      <span style={{ color: 'rgba(232,230,223,0.55)' }}>{t}</span>
      <span>{name}</span>
      <span style={{ color: 'rgba(232,230,223,0.45)', fontSize: 10 }}>{rule}</span>
    </div>
  );
  return (
    <SolidShell
      prompt={<>while² <span style={{ color: _INK }}>today</span></>}
      footer={<NavFooter current="today" />}
    >
      <div style={{ fontSize: 10, color: 'rgba(232,230,223,0.45)', marginBottom: 6, letterSpacing: '0.16em' }}>// today</div>
      {today.map((t, i) => <TodayRow key={i} {...t} />)}

      <div style={{ fontSize: 10, color: 'rgba(232,230,223,0.45)', margin: '22px 0 6px', letterSpacing: '0.16em' }}>// upcoming</div>
      {upcoming.map((t, i) => <UpcomingRow key={i} {...t} />)}

      {/* swipe legend */}
      <div style={{
        marginTop: 28, fontSize: 9, color: 'rgba(232,230,223,0.4)',
        letterSpacing: '0.04em', lineHeight: 1.7,
      }}>
        <div>→ swipe :: ✓ done_</div>
        <div>← swipe :: edit_</div>
      </div>
    </SolidShell>
  );
}

// ── NEW TASK ─────────────────────────────────────────────────
// 3 variants showing how the form reshapes per `起点` mode.
function _NewTaskField({ k, v, hint }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span style={{ width: 70, fontSize: 11, color: 'rgba(232,230,223,0.55)' }}>{k}</span>
        <span style={{ flex: 1, fontSize: 12, color: _INK,
          borderBottom: `1px dotted rgba(232,230,223,0.25)`, paddingBottom: 4 }}>
          {v}
        </span>
      </div>
      {hint && (
        <div style={{ marginTop: 4, marginLeft: 84, fontSize: 9, color: 'rgba(232,230,223,0.4)' }}>
          {hint}
        </div>
      )}
    </div>
  );
}

function _NewTaskShell({ children, preview }) {
  return (
    <SolidShell
      prompt={<>while² <span style={{ color: _INK }}>new_</span></>}
      footer={<>
        <span style={{ color: 'rgba(232,230,223,0.55)' }}>esc · cancel</span>
        <span style={{ color: W2.cyan }}>↵ save</span>
      </>}
    >
      <div style={{ paddingTop: 30 }}>
        {children}
      </div>
      <div style={{
        marginTop: 36, fontSize: 10, color: 'rgba(232,230,223,0.5)',
        lineHeight: 1.7,
      }}>
        <span style={{ color: W2.cyan }}>?</span> {preview}
      </div>
    </SolidShell>
  );
}

// from completion
function NewTaskSolid() {
  const F = _NewTaskField;
  return (
    <_NewTaskShell preview="done 04/28 → next 05/26 → 06/23 …">
      <F k="name"   v="haircut" />
      <F k="every"  v="4 weeks" hint="days · weeks · months" />
      <F k="from"   v="completion" hint="completion · fixed date" />
    </_NewTaskShell>
  );
}

// fixed date · weekly
function NewTaskWeekly() {
  const F = _NewTaskField;
  // weekday picker: highlight the chosen day(s)
  const days = ['mon','tue','wed','thu','fri','sat','sun'];
  const picked = new Set(['tue']);
  return (
    <_NewTaskShell preview="next 04/29 (tue) → 05/06 (tue) → 05/13 (tue) …">
      <F k="name"   v="burnable trash" />
      <F k="every"  v="week" hint="day · week · month" />
      <F k="from"   v="fixed date" hint="completion · fixed date" />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
        <span style={{ width: 70, fontSize: 11, color: 'rgba(232,230,223,0.55)' }}>day</span>
        <div style={{ flex: 1, display: 'flex', gap: 8,
          borderBottom: `1px dotted rgba(232,230,223,0.25)`, paddingBottom: 4 }}>
          {days.map(d => (
            <span key={d} style={{
              fontSize: 11, padding: '0 4px',
              color: picked.has(d) ? W2.cyan : 'rgba(232,230,223,0.35)',
            }}>{d}</span>
          ))}
        </div>
      </div>
    </_NewTaskShell>
  );
}

// fixed date · monthly
function NewTaskMonthly() {
  const F = _NewTaskField;
  return (
    <_NewTaskShell preview="next 05/03 → 06/03 → 07/03 …">
      <F k="name"   v="pay rent" />
      <F k="every"  v="month" hint="day · week · month" />
      <F k="from"   v="fixed date" hint="completion · fixed date" />
      <F k="day"    v="3" hint="day of the month" />
    </_NewTaskShell>
  );
}

// ── SETTINGS ─────────────────────────────────────────────────
// Pure key = value list. No groups, no toggles. config.txt vibe.
function SettingsSolid() {
  const rows = [
    ['operator',      'user.local'],
    ['timezone',      'asia/tokyo'],
    ['week_starts',   'mon'],
    [null,            null],
    ['notify_at',     '09:00'],
    ['recap_at',      '21:00'],
    ['overdue_ping',  'on'],
    ['sound',         'sonar.short'],
    [null,            null],
    ['theme',         'dark.cyan'],
    ['reduce_motion', 'off'],
    ['dolphin',       'boot_only'],
    [null,            null],
    ['icloud',        'on'],
    ['device',        'iPhone 15 · macbook · iPad'],
    ['last_synced',   '2 min ago'],
    [null,            null],
    ['rules',         '23'],
    ['export',        'while².json ↗'],
    ['wipe',          'reset all loops'],
  ];
  return (
    <SolidShell
      prompt={<>while² <span style={{ color: _INK }}>config</span></>}
      footer={<>
        <span style={{ color: 'rgba(232,230,223,0.55)' }}>v0.1.4 · build 0428</span>
        <span style={{ color: W2.cyan }}>↵ save</span>
      </>}
    >
      <div style={{ paddingTop: 12 }}>
        {rows.map(([k, v], i) => k === null ? (
          <div key={i} style={{ height: 14 }} />
        ) : (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '120px auto 1fr',
            fontSize: 11, lineHeight: 1.85,
          }}>
            <span style={{ color: 'rgba(232,230,223,0.55)' }}>{k}</span>
            <span style={{ color: 'rgba(232,230,223,0.3)', padding: '0 8px' }}>=</span>
            <span style={{ color: _INK }}>{v}</span>
          </div>
        ))}
      </div>
    </SolidShell>
  );
}

window.HomeSolid = HomeSolid;
window.NewTaskSolid = NewTaskSolid;
window.NewTaskWeekly = NewTaskWeekly;
window.NewTaskMonthly = NewTaskMonthly;
window.SettingsSolid = SettingsSolid;