/* FlowCard — the atom.
   One component, variants via prop. Everything derives from breath tokens.
   Variants: "featured" · "pack" · "standard" · "completed" · "locked"
*/

function FlowCardIcon({ tone, glyph, size = 44 }) {
  const t = FLOW_TONES[tone] || FLOW_TONES.premarket;
  return (
    <div style={{
      width: size, height: size, borderRadius: 14,
      background: t.soft,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <FlowGlyph name={glyph} size={size * 0.5} color={t.accent} />
    </div>
  );
}

function FlowMeta({ duration, steps, muted }) {
  // One canonical meta row — monospace, hairline dot separators
  return (
    <div style={{
      fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
      color: muted ? TH.ink3 : TH.ink2,
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>
      <span>{duration} MIN</span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span>{steps} STEPS</span>
    </div>
  );
}

// ─── Featured — the "Now" recommendation (replaces orange-bordered box) ───
function FlowCardFeatured({ flow, contextLabel = 'For right now' }) {
  const t = FLOW_TONES[flow.tone];
  return (
    <div style={{
      borderRadius: 20,
      padding: '20px 22px',
      background: TH.surface,
      border: `1px solid ${TH.line}`,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* serif context label — replaces the NOW badge */}
      <div style={{
        fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: t.accent, fontWeight: 600,
      }}>
        {contextLabel}
      </div>

      <div style={{ display: 'flex', gap: 16, marginTop: 12, alignItems: 'flex-start' }}>
        <FlowCardIcon tone={flow.tone} glyph={flow.glyph} size={52} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: TF.display, fontSize: 22, letterSpacing: '-0.02em',
            lineHeight: 1.15, color: TH.ink,
          }}>
            {flow.title}
          </div>
          <div style={{
            fontSize: 13, lineHeight: 1.45, color: TH.ink2, marginTop: 4,
          }}>
            {flow.subtitle}
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <FlowMeta duration={flow.duration} steps={flow.steps} />
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '8px 14px', borderRadius: 999,
          background: TH.ink, color: TH.bg,
          fontSize: 12, fontWeight: 500,
        }}>
          Begin <span style={{ opacity: 0.7 }}>→</span>
        </div>
      </div>
    </div>
  );
}

// ─── Pack — a group of flows, shown as an anchor (not the flows themselves) ───
function FlowCardPack({ title, subtitle, flowCount, completed = 0, glyph = 'shield', tone = 'premarket' }) {
  const t = FLOW_TONES[tone];
  return (
    <div style={{
      borderRadius: 20, padding: '20px 22px',
      background: TH.surface,
      border: `1px solid ${TH.line}`,
    }}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <FlowCardIcon tone={tone} glyph={glyph} size={44} />
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: TH.ink3, fontWeight: 600,
          }}>
            Pack
          </div>
          <div style={{
            fontFamily: TF.display, fontSize: 22, letterSpacing: '-0.02em',
            lineHeight: 1.15, color: TH.ink, marginTop: 2,
          }}>
            {title}
          </div>
          <div style={{ fontSize: 13, color: TH.ink2, marginTop: 4, lineHeight: 1.4 }}>
            {subtitle}
          </div>
        </div>
        <div style={{ color: TH.ink3, fontSize: 16, paddingTop: 4 }}>→</div>
      </div>

      {/* Pack progress — single line, no 3-stat grid */}
      <div style={{
        marginTop: 16, paddingTop: 14,
        borderTop: `1px solid ${TH.line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{
          fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
          color: TH.ink2,
        }}>
          {flowCount} FLOWS · {completed}/{flowCount} TODAY
        </div>
        {/* dot progress */}
        <div style={{ display: 'flex', gap: 6 }}>
          {Array.from({ length: flowCount }).map((_, i) => (
            <div key={i} style={{
              width: 6, height: 6, borderRadius: '50%',
              background: i < completed ? t.accent : TH.line2,
            }} />
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Standard — list row (default). Compact, hairline separated ───
function FlowCardStandard({ flow, suggested = false, streak, lastDone }) {
  const t = FLOW_TONES[flow.tone];
  return (
    <div style={{
      display: 'flex', gap: 14, alignItems: 'flex-start',
      padding: '16px 0',
      borderBottom: `1px solid ${TH.line}`,
      position: 'relative',
    }}>
      <FlowCardIcon tone={flow.tone} glyph={flow.glyph} size={40} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <div style={{
            fontFamily: TF.display, fontSize: 18, letterSpacing: '-0.01em',
            color: TH.ink, lineHeight: 1.2,
          }}>
            {flow.title}
          </div>
          {suggested && (
            <div style={{
              fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: t.accent, fontWeight: 700,
              padding: '2px 0', borderTop: `1px solid ${t.accent}`, borderBottom: `1px solid ${t.accent}`,
            }}>
              · Now ·
            </div>
          )}
        </div>
        <div style={{
          fontSize: 12, color: TH.ink2, marginTop: 2, lineHeight: 1.4,
        }}>
          {flow.subtitle}
        </div>
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
          <FlowMeta duration={flow.duration} steps={flow.steps} />
          {streak && (
            <>
              <span style={{ color: TH.ink3, fontSize: 10 }}>·</span>
              <span style={{
                fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
                color: TH.sage,
              }}>{streak}D STREAK</span>
            </>
          )}
          {lastDone && (
            <>
              <span style={{ color: TH.ink3, fontSize: 10 }}>·</span>
              <span style={{
                fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
                color: TH.ink3,
              }}>{lastDone}</span>
            </>
          )}
        </div>
      </div>
      <div style={{ color: TH.ink3, fontSize: 15, paddingTop: 4 }}>→</div>
    </div>
  );
}

// ─── Completed — done today ───
function FlowCardCompleted({ flow, doneAt }) {
  return (
    <div style={{
      display: 'flex', gap: 14, alignItems: 'flex-start',
      padding: '16px 0',
      borderBottom: `1px solid ${TH.line}`,
      opacity: 0.72,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 14,
        background: TH.sageSoft,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <FlowGlyph name="check" size={20} color={TH.sage} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: TF.display, fontSize: 18, letterSpacing: '-0.01em',
          color: TH.ink, textDecoration: 'line-through', textDecorationColor: TH.line2,
        }}>
          {flow.title}
        </div>
        <div style={{
          marginTop: 4,
          fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
          color: TH.sage,
        }}>
          DONE · {doneAt}
        </div>
      </div>
    </div>
  );
}

// ─── Locked / coming soon ───
function FlowCardLocked({ title, subtitle, eta = 'SOON' }) {
  return (
    <div style={{
      display: 'flex', gap: 14, alignItems: 'flex-start',
      padding: '16px 0',
      borderBottom: `1px solid ${TH.line}`,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 14,
        border: `1px dashed ${TH.line2}`, background: 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: TH.ink3, fontSize: 14, flexShrink: 0,
      }}>
        ◌
      </div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: TF.display, fontSize: 18, letterSpacing: '-0.01em',
          color: TH.ink3,
        }}>
          {title}
        </div>
        <div style={{ fontSize: 12, color: TH.ink3, marginTop: 2 }}>
          {subtitle}
        </div>
      </div>
      <div style={{
        fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.1em',
        color: TH.ink3, paddingTop: 6,
      }}>
        {eta}
      </div>
    </div>
  );
}

Object.assign(window, {
  FlowCardIcon, FlowMeta, FlowCardFeatured, FlowCardPack,
  FlowCardStandard, FlowCardCompleted, FlowCardLocked,
});