// Letters list — envelope-style rows

const LETTERS = [
  { id: 1, title: 'For you, my love.', date: 'Apr 23', tag: 'tender', unread: true,  favorite: false, preview: 'I always sit and think to myself of how much you blow my mind…' },
  { id: 2, title: 'On sunsets, and you.', date: 'Apr 10', tag: 'tender', unread: false, favorite: true,  preview: 'There is a particular gold — the one just before the day lets go…' },
  { id: 3, title: 'A small, silly thought.', date: 'Mar 29', tag: 'playful', unread: false, favorite: false, preview: 'If laughter had a shape, it would be the way you tilt your head when…' },
  { id: 4, title: 'Before I knew your name.', date: 'Mar 14', tag: 'tender', unread: false, favorite: true,  preview: 'Long before you, I was a room with the lights off. Not dark — just…' },
  { id: 5, title: 'The grocery aisle theory.', date: 'Feb 22', tag: 'playful', unread: false, favorite: false, preview: 'I have decided the frozen-foods aisle is the most romantic place on…' },
  { id: 6, title: 'Steady, pt. 2.', date: 'Feb 09', tag: 'tender', unread: false, favorite: false, preview: 'Some songs feel like rooms. This one, I want to live inside with you…' },
];

const TAG_COLORS = {
  tender:   { dot: '#A06B6E', label: 'Tender' },
  playful:  { dot: '#B9975B', label: 'Playful' },
  favorite: { dot: '#C3A2A4', label: 'Favorite' },
};

function LettersScreen({ letters = [], onOpen }) {
  const [filter, setFilter] = useState('all');

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'unread', label: 'Unread' },
    { id: 'favorite', label: 'Favorites' },
    { id: 'tender', label: 'Tender' },
    { id: 'playful', label: 'Playful' },
  ];

  const visible = letters.filter(l => {
    if (filter === 'all') return true;
    if (filter === 'unread') return l.status === 'unread';
    if (filter === 'favorite') return l.favorite;
    return l.mood?.toLowerCase() === filter;
  });

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 120 }}>
      {/* Header */}
      <div style={{ padding: '64px 26px 10px' }}>
        <div style={{
          fontFamily: sans, fontSize: 10, letterSpacing: 3,
          color: MUTED, textTransform: 'uppercase',
        }}>Twelve · In quiet correspondence</div>
        <div style={{
          fontFamily: serifDisplay, fontStyle: 'italic', fontWeight: 400,
          fontSize: 44, lineHeight: '48px', color: INK, marginTop: 8, letterSpacing: -0.5,
        }}>Letters</div>
      </div>

      {/* Filter chips */}
      <div style={{
        display: 'flex', gap: 6, padding: '10px 22px 18px',
        overflowX: 'auto',
        scrollbarWidth: 'none',
      }}
      className="lcn-no-scrollbar">
        {filters.map(f => (
          <button key={f.id} onClick={() => setFilter(f.id)} style={{
            flexShrink: 0,
            padding: '7px 13px', borderRadius: 99,
            background: filter === f.id ? INK : 'transparent',
            color: filter === f.id ? PAPER : INK,
            border: `0.5px solid ${filter === f.id ? INK : 'rgba(27,36,71,0.25)'}`,
            fontFamily: sans, fontSize: 11, letterSpacing: 1, cursor: 'pointer',
            textTransform: 'uppercase',
          }}>{f.label}</button>
        ))}
      </div>
      <style>{`.lcn-no-scrollbar::-webkit-scrollbar { display: none; }`}</style>

      {/* Letter rows */}
      <div style={{ padding: '0 20px' }}>
        {visible.map((l, i) => (
          <LetterRow key={l.id} letter={l} onClick={() => onOpen(l)} first={i === 0}/>
        ))}
      </div>
    </div>
  );
}

function LetterRow({ letter, onClick, first }) {
  const moodKey = letter.mood?.toLowerCase() || 'tender';
  const tag = TAG_COLORS[moodKey] || TAG_COLORS.tender;
  const isUnread = letter.status === 'unread';

  return (
    <button onClick={onClick} style={{
      display: 'block', width: '100%', textAlign: 'left',
      padding: '18px 6px', background: 'transparent', border: 'none',
      borderTop: first ? `0.5px solid rgba(27,36,71,0.15)` : 'none',
      borderBottom: `0.5px solid rgba(27,36,71,0.15)`,
      cursor: 'pointer', position: 'relative',
    }}>
      {/* Unread dot */}
      {isUnread && (
        <div style={{
          position: 'absolute', left: -6, top: 26,
          width: 6, height: 6, borderRadius: 99, background: ROSE,
        }}/>
      )}

      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
        {/* Mini envelope */}
        <div style={{
          width: 54, height: 38, flexShrink: 0, position: 'relative',
          background: 'linear-gradient(var(--env-face-1), var(--env-face-2))',
          border: '0.5px solid #A4A8BA',
          borderRadius: 1, marginTop: 6,
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: `linear-gradient(to bottom right, transparent 49.5%, #A4A8BA 49.5% 50%, transparent 50%),
                              linear-gradient(to bottom left, transparent 49.5%, #A4A8BA 49.5% 50%, transparent 50%)`,
          }}/>
          {/* mini wax seal */}
          <div style={{
            position: 'absolute', top: 14, left: 22, width: 10, height: 10, borderRadius: 99,
            background: `radial-gradient(circle at 35% 30%, var(--wax-light), var(--wax-mid) 60%, var(--wax-dark))`,
            boxShadow: '0 0 0 0.5px rgba(0,0,0,0.15)',
          }}/>
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, justifyContent: 'space-between' }}>
            <div style={{
              fontFamily: serif, fontStyle: 'italic', fontSize: 20, lineHeight: '24px',
              color: INK, fontWeight: isUnread ? 500 : 400,
              letterSpacing: -0.2, flex: 1, textWrap: 'pretty',
              paddingTop: 2,
            }}>{letter.title}</div>
            {letter.favorite && <span style={{ flexShrink: 0, marginTop: 2 }}>{Icon.heart(ROSE, true)}</span>}
          </div>

          <div style={{
            fontFamily: sans, fontSize: 12, color: MUTED,
            marginTop: 8, lineHeight: '18px',
            overflow: 'hidden', textOverflow: 'ellipsis',
            display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical',
          }}>{letter.preview}</div>

          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginTop: 8,
            fontFamily: sans, fontSize: 9, letterSpacing: 2, color: MUTED, textTransform: 'uppercase',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: tag.dot }}/>
              {tag.label}
            </span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>{letter.date}</span>
          </div>
        </div>
      </div>
    </button>
  );
}

Object.assign(window, { LettersScreen });