// Dream journal — phone screen. List of past dreams with lucidity glyphs,
// themes, and timeline. Designed to feel like a grimoire, not a notes app.

const DREAMS = [
  { date: 'Last night', time: '04:12', title: 'The library that breathed',
    excerpt: 'I knew I was dreaming when the books rearranged themselves to my gaze. I asked the librarian her name. She said —',
    lucidity: 4, themes: ['library', 'language', 'reverence'], tag: 'WILD' },
  { date: '03 May', time: '03:48', title: 'Salt road',
    excerpt: 'Walking a road of crushed salt. Each footprint filled with seawater. The horizon wasn\'t there.',
    lucidity: 2, themes: ['water', 'absence'], tag: '—' },
  { date: '02 May', time: '05:01', title: 'Returning the key',
    excerpt: 'Mother handed me a brass key and asked me to put it back. I couldn\'t remember what it opened.',
    lucidity: 1, themes: ['family', 'object'], tag: '—' },
  { date: '01 May', time: '02:33', title: 'The room with no ceiling',
    excerpt: 'The cue came as a low hum on my left wrist. I looked at my hand — six fingers. Lucid.',
    lucidity: 5, themes: ['cue', 'hands'], tag: 'DILD' },
  { date: '29 Apr', time: '06:20', title: 'A field of telephones',
    excerpt: 'They all rang at once. I picked up the nearest. It was my own voice, a year older.',
    lucidity: 3, themes: ['sound', 'self'], tag: 'WILD' },
];

function DreamJournal({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{
      height: '100%',
      background: `linear-gradient(180deg, ${t.bg} 0%, ${t.bgEnd} 100%)`,
      color: t.ink,
      fontFamily: t.sans,
      paddingTop: 48,            // status bar
      paddingBottom: 44,         // home indicator
      overflowY: 'auto',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{ padding: '12px 22px 8px' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', color: t.inkFaint, textTransform: 'uppercase' }}>
          Grimoire
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 2 }}>
          <div style={{ fontFamily: t.serif, fontSize: 34, fontWeight: 400, lineHeight: 1 }}>
            <span style={{ fontStyle: 'italic' }}>Dreams</span>
          </div>
          <div style={{ fontFamily: t.mono, fontSize: 11, color: t.inkSoft }}>
            142 entries
          </div>
        </div>
        <div style={{ fontSize: 13, color: t.inkSoft, marginTop: 8, fontStyle: 'italic', lineHeight: 1.4 }}>
          you have been lucid 17 times this moon.
        </div>
      </div>

      {/* Lucidity glyph row */}
      <div style={{
        margin: '14px 22px',
        padding: '14px 16px',
        border: `1px solid ${t.line}`,
        borderRadius: 14,
        background: t.panel,
        backdropFilter: 'blur(14px)',
      }}>
        <div style={{ fontSize: 9, letterSpacing: '0.18em', color: t.inkFaint, textTransform: 'uppercase', marginBottom: 8 }}>
          lucidity · last 14 nights
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 38 }}>
          {[1,3,2,0,4,2,3,1,5,3,2,4,3,5].map((v, i) => (
            <div key={i} style={{
              flex: 1, height: `${(v/5)*100}%`,
              minHeight: 2,
              background: v >= 4 ? t.rem : v >= 2 ? t.accent : t.line,
              borderRadius: 2,
              opacity: 0.4 + v * 0.12,
            }} />
          ))}
        </div>
      </div>

      {/* Search */}
      <div style={{
        margin: '6px 22px 16px',
        padding: '10px 14px',
        border: `1px solid ${t.line}`,
        borderRadius: 999,
        background: t.surface,
        fontSize: 13, color: t.inkFaint,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ fontFamily: t.serif, fontStyle: 'italic' }}>⌕ remember…</span>
      </div>

      {/* Entries */}
      <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {DREAMS.map((d, i) => (
          <DreamCard key={i} t={t} d={d} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
        ))}
      </div>

      {/* Bottom CTA */}
      <div style={{ padding: '20px 22px 10px' }}>
        <div style={{
          padding: '14px 16px', borderRadius: 16,
          border: `1px dashed ${t.line}`, color: t.inkSoft,
          fontFamily: t.serif, fontStyle: 'italic', fontSize: 14,
          textAlign: 'center',
        }}>
          + record a dream
        </div>
      </div>
    </div>
  );
}

function DreamCard({ t, d, open, onClick }) {
  return (
    <div onClick={onClick} style={{
      padding: 14,
      border: `1px solid ${t.line}`,
      borderRadius: 14,
      background: t.panel,
      backdropFilter: 'blur(14px)',
      cursor: 'pointer',
      transition: 'all 220ms',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
        <div style={{ fontFamily: t.mono, fontSize: 9, letterSpacing: '0.18em', color: t.inkFaint, textTransform: 'uppercase' }}>
          {d.date} · {d.time}
        </div>
        <div style={{ display: 'flex', gap: 2 }}>
          {Array.from({length: 5}).map((_, i) => (
            <div key={i} style={{
              width: 5, height: 5, borderRadius: '50%',
              background: i < d.lucidity ? t.rem : t.line,
              boxShadow: i < d.lucidity ? `0 0 6px ${t.rem}` : 'none',
            }} />
          ))}
        </div>
      </div>
      <div style={{ fontFamily: t.serif, fontSize: 19, lineHeight: 1.2, marginBottom: 4 }}>
        {d.title}
      </div>
      <div style={{
        fontSize: 13, color: t.inkSoft, lineHeight: 1.45,
        textWrap: 'pretty',
        display: '-webkit-box',
        WebkitLineClamp: open ? 99 : 2,
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
        fontStyle: 'italic',
      }}>
        {d.excerpt}
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10, alignItems: 'center', flexWrap: 'wrap' }}>
        {d.themes.map(th => (
          <span key={th} style={{
            fontFamily: t.mono, fontSize: 9, letterSpacing: '0.14em',
            padding: '3px 8px', borderRadius: 999,
            border: `1px solid ${t.line}`, color: t.inkSoft,
            textTransform: 'uppercase',
          }}>{th}</span>
        ))}
        {d.tag !== '—' && (
          <span style={{
            fontFamily: t.mono, fontSize: 9, letterSpacing: '0.14em',
            padding: '3px 8px', borderRadius: 999,
            background: t.accent, color: '#000',
            marginLeft: 'auto',
          }}>{d.tag}</span>
        )}
      </div>
    </div>
  );
}

window.DreamJournal = DreamJournal;