/* Flow screens — Library, Pack detail, Flow preview.
   Uses breath-tokens + flow-card components. */

// ───────────────────── 1. Flows Library ─────────────────────
function FlowsLibrary() {
  const [tab, setTab] = React.useState('all');
  const tabs = [
    { id: 'all',      label: 'All' },
    { id: 'pre',      label: 'Pre-market' },
    { id: 'mid',      label: 'Mid-session' },
    { id: 'post',     label: 'Post-market' },
    { id: 'weekly',   label: 'Weekly' },
  ];
  const suggested = FLOWS[0]; // Pre-Market Alignment

  return (
    <div style={{
      background: TH.bg, color: TH.ink, fontFamily: TF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      {/* Editorial title — not a page title label */}
      <div style={{ padding: '8px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: TH.ink3, fontWeight: 600,
        }}>
          For what you need
        </div>
        <div style={{
          fontFamily: TF.display, fontSize: 30, lineHeight: 1.1,
          letterSpacing: '-0.02em', marginTop: 6,
        }}>
          Your <span style={{ fontStyle: 'italic', color: TH.accent }}>flows</span>
        </div>
      </div>

      {/* Filters — underline pills, not filled cyan */}
      <div style={{ padding: '20px 28px 0' }}>
        <div style={{
          display: 'flex', gap: 18, overflowX: 'auto',
          scrollbarWidth: 'none', msOverflowStyle: 'none',
        }}>
          {tabs.map(t => (
            <div key={t.id}
              onClick={() => setTab(t.id)}
              style={{
                fontSize: 13, fontWeight: tab === t.id ? 600 : 500,
                color: tab === t.id ? TH.ink : TH.ink3,
                paddingBottom: 6,
                borderBottom: tab === t.id ? `2px solid ${TH.accent}` : '2px solid transparent',
                whiteSpace: 'nowrap', cursor: 'pointer',
              }}>
              {t.label}
            </div>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '22px 28px 20px' }}>
        {/* Featured — one. No duplicate in list below. */}
        <FlowCardFeatured flow={suggested} contextLabel="For right now · 8:41 AM" />

        {/* Pack */}
        <div style={{ marginTop: 26 }}>
          <FlowCardPack
            title="Core Pack"
            subtitle="Daily routines for stability and discipline."
            flowCount={5} completed={1}
            glyph="shield" tone="premarket"
          />
        </div>

        {/* All flows header */}
        <div style={{ marginTop: 30, marginBottom: 2 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: TH.ink3, fontWeight: 600,
          }}>
            The library
          </div>
        </div>

        {/* List — no duplicate of suggested. Suggested is flagged in-row for the others */}
        {FLOWS.filter(f => f.id !== suggested.id).map((f, i) => (
          <FlowCardStandard key={f.id} flow={f}
            lastDone={i === 0 ? '2D AGO' : i === 1 ? 'YESTERDAY' : null}
            streak={i === 2 ? 3 : null}
          />
        ))}

        {/* Locked preview */}
        <FlowCardLocked
          title="After-Loss Recovery"
          subtitle="Bigger losses need a longer pause."
          eta="MAY"
        />
      </div>

      <BreathTabBar active="flows" />
    </div>
  );
}

// ───────────────────── 2. Pack Detail ─────────────────────
function PackDetail() {
  return (
    <div style={{
      background: TH.bg, color: TH.ink, fontFamily: TF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      {/* Header */}
      <div style={{ padding: '10px 28px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 18, color: TH.ink2 }}>←</div>
        <div style={{
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: TH.ink3, fontWeight: 600,
        }}>Pack</div>
        <div style={{ fontSize: 18, color: TH.ink2 }}>···</div>
      </div>

      {/* Pack identity — airy, editorial */}
      <div style={{ padding: '28px 28px 0', textAlign: 'center' }}>
        <div style={{
          width: 68, height: 68, margin: '0 auto',
          borderRadius: 20, background: TH.accentSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <FlowGlyph name="shield" size={30} color={TH.accent} />
        </div>
        <div style={{
          fontFamily: TF.display, fontSize: 32, letterSpacing: '-0.02em',
          lineHeight: 1.1, marginTop: 18,
        }}>
          Core <span style={{ fontStyle: 'italic', color: TH.accent }}>Pack</span>
        </div>
        <div style={{
          fontSize: 13, color: TH.ink2, marginTop: 8, lineHeight: 1.5,
          maxWidth: 280, margin: '8px auto 0',
        }}>
          Five flows, spaced across the day. Enough structure to outlast a bad open.
        </div>
      </div>

      {/* Progress — one number, not three */}
      <div style={{ padding: '26px 28px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 0', borderTop: `1px solid ${TH.line}`, borderBottom: `1px solid ${TH.line}`,
        }}>
          <div>
            <div style={{
              fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: TH.ink3, fontWeight: 600,
            }}>Today's progress</div>
            <div style={{
              fontFamily: TF.display, fontSize: 22, marginTop: 4, letterSpacing: '-0.01em',
            }}>
              <span style={{ color: TH.accent }}>1</span>
              <span style={{ color: TH.ink3 }}> / 5 completed</span>
            </div>
          </div>
          {/* ring */}
          <svg width="56" height="56" viewBox="0 0 56 56">
            <circle cx="28" cy="28" r="24" fill="none" stroke={TH.line} strokeWidth="3"/>
            <circle cx="28" cy="28" r="24" fill="none" stroke={TH.accent} strokeWidth="3"
              strokeDasharray="150.8" strokeDashoffset={150.8 * 0.8} strokeLinecap="round"
              transform="rotate(-90 28 28)"/>
          </svg>
        </div>
      </div>

      {/* Flows in the pack */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 28px 20px' }}>
        <FlowCardCompleted flow={FLOWS[0]} doneAt="8:41 AM" />
        <FlowCardStandard flow={FLOWS[1]} suggested />
        <FlowCardStandard flow={FLOWS[2]} />
        <FlowCardStandard flow={FLOWS[3]} lastDone="LAST FRI" />
        <FlowCardStandard flow={FLOWS[4]} lastDone="LAST SUN" />
      </div>
    </div>
  );
}

// ───────────────────── 3. Flow Preview (Pre-Market) ─────────────────────
function FlowPreview() {
  const flow = FLOWS[0];
  const t = FLOW_TONES[flow.tone];
  const steps = [
    { name: 'Mood check-in',   body: 'Name your state before the market names it for you.', dur: '0:30' },
    { name: 'Intention',       body: 'Pick the one word you trade under today.',            dur: '0:30' },
    { name: 'Breathing reset', body: 'Box breath, three minutes.',                          dur: '3:00' },
    { name: 'Guided meditation', body: 'A two-minute grounding.',                           dur: '2:00' },
    { name: 'Commitment',      body: 'Lock your rules in your own voice.',                  dur: '1:00' },
  ];
  return (
    <div style={{
      background: TH.bg, color: TH.ink, fontFamily: TF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '10px 28px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 18, color: TH.ink2 }}>←</div>
        <div style={{
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: TH.ink3, fontWeight: 600,
        }}>Flow · Preview</div>
        <div style={{ fontSize: 18, color: TH.ink2 }}>♡</div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '22px 28px 0' }}>
        {/* Identity */}
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <div style={{
            width: 64, height: 64, borderRadius: 20,
            background: t.soft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <FlowGlyph name={flow.glyph} size={30} color={t.accent} />
          </div>
          <div>
            <div style={{
              fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: t.accent, fontWeight: 600,
            }}>{t.label}</div>
            <div style={{
              fontFamily: TF.display, fontSize: 24, letterSpacing: '-0.02em',
              lineHeight: 1.1, marginTop: 4,
            }}>{flow.title}</div>
          </div>
        </div>

        {/* Sub */}
        <div style={{
          fontSize: 14, color: TH.ink2, marginTop: 14, lineHeight: 1.5,
        }}>
          {flow.subtitle} Starting the day without alignment leads to reactive trading. This flow helps you enter with clarity, not chaos.
        </div>

        {/* Meta row */}
        <div style={{
          marginTop: 16, padding: '12px 0',
          borderTop: `1px solid ${TH.line}`, borderBottom: `1px solid ${TH.line}`,
          display: 'flex',
        }}>
          <MetaCell label="Duration" value={`${flow.duration}m`} />
          <MetaCell label="Steps"    value={flow.steps} />
          <MetaCell label="Streak"   value="14d" tone={TH.accent} />
          <MetaCell label="Best for" value="Open" last />
        </div>

        {/* What happens — keeps this, loses the numbered orange dots */}
        <div style={{ marginTop: 24 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: TH.ink3, fontWeight: 600,
          }}>
            What happens in this flow
          </div>
          <div style={{ marginTop: 12 }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'flex', gap: 14, padding: '12px 0',
                borderBottom: i < steps.length - 1 ? `1px solid ${TH.line}` : 'none',
                alignItems: 'flex-start',
              }}>
                <div style={{
                  fontFamily: TF.mono, fontSize: 11, color: TH.ink3, width: 24,
                  letterSpacing: '0.06em', paddingTop: 3,
                }}>0{i + 1}</div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: TF.display, fontSize: 16, letterSpacing: '-0.01em',
                    color: TH.ink, lineHeight: 1.2,
                  }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: TH.ink2, marginTop: 3, lineHeight: 1.4 }}>
                    {s.body}
                  </div>
                </div>
                <div style={{
                  fontFamily: TF.mono, fontSize: 11, color: TH.ink3,
                  letterSpacing: '0.06em', paddingTop: 3,
                }}>{s.dur}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Your history with this flow */}
        <div style={{ marginTop: 24 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: TH.ink3, fontWeight: 600,
          }}>
            Your history
          </div>
          <div style={{
            fontFamily: TF.display, fontSize: 18, lineHeight: 1.35,
            letterSpacing: '-0.01em', marginTop: 10,
          }}>
            On days you complete this, you trade{' '}
            <span style={{ color: TH.sage }}>+34% P&amp;L</span>{' '}
            and skip <span style={{ color: TH.accent, fontStyle: 'italic' }}>1.8 impulse entries.</span>
          </div>
        </div>

        {/* When to use */}
        <div style={{ marginTop: 22, marginBottom: 16 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: TH.ink3, fontWeight: 600,
          }}>Best used when</div>
          <div style={{ fontSize: 13, color: TH.ink2, marginTop: 8, lineHeight: 1.6 }}>
            {flow.when}
          </div>
        </div>
      </div>

      {/* CTA — dark pill, not pumpkin */}
      <div style={{ padding: '14px 28px 22px', borderTop: `1px solid ${TH.line}`, background: TH.bg }}>
        <button style={{
          width: '100%', padding: '16px',
          background: TH.ink, color: TH.bg, border: 'none', borderRadius: 999,
          fontSize: 14, fontWeight: 500, fontFamily: TF.body,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          Begin · {flow.duration} min <span style={{ opacity: 0.7 }}>→</span>
        </button>
      </div>
    </div>
  );
}

function MetaCell({ label, value, tone, last }) {
  return (
    <div style={{
      flex: 1, padding: '0 10px',
      borderRight: last ? 'none' : `1px solid ${TH.line}`,
      textAlign: 'center',
    }}>
      <div style={{ fontFamily: TF.display, fontSize: 18, color: tone || TH.ink,
        letterSpacing: '-0.01em' }}>{value}</div>
      <div style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: TH.ink3, fontWeight: 600, marginTop: 4 }}>{label}</div>
    </div>
  );
}

function BreathTabBar({ active }) {
  const items = ['Today', 'Flows', 'Journey', 'Insights'];
  return (
    <div style={{
      display: 'flex', padding: '12px 20px 10px',
      borderTop: `1px solid ${TH.line}`,
      background: TH.bg,
    }}>
      {items.map(it => {
        const id = it.toLowerCase();
        const isActive = id === active || (active === 'flows' && it === 'Flows');
        return (
          <div key={it} style={{
            flex: 1, textAlign: 'center',
            fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: isActive ? TH.ink : TH.ink3,
            fontWeight: isActive ? 600 : 500,
          }}>{it}</div>
        );
      })}
    </div>
  );
}

Object.assign(window, { FlowsLibrary, PackDetail, FlowPreview, BreathTabBar, MetaCell });