// writer-tool.jsx — AI Writing tool

const WriterToolScreen = () => {
  const [tone, setTone] = React.useState('professional');
  const [length, setLength] = React.useState('medium');
  const [lang, setLang] = React.useState('English');

  const tones = ['professional', 'casual', 'witty', 'persuasive', 'academic', 'friendly'];
  const docOutline = [
    { type: 'h1', text: 'Introducing Aurora — light that learns your day' },
    { type: 'p', text: 'Aurora is the first ambient lamp that adjusts color, intensity, and rhythm based on what you\'re doing. We built it for the people who treat their desk like a sanctuary — designers, writers, founders, anyone whose best work happens when the room gets out of the way.' },
    { type: 'h2', text: 'Why we built this' },
    { type: 'p', text: 'After three years of testing 47 light profiles with creative teams across four cities, one pattern kept showing up: the right light, at the right moment, beats more light every time.' },
    { type: 'h2', text: 'How it works' },
    { type: 'p', text: 'Aurora pairs with your calendar and your music. Deep work blocks dim the room and warm the temperature. Calls brighten the speaker side. Wind-down hours fade through dusk tones — the kind of light that signals to your nervous system, gently, that the day is closing.' },
    { type: 'cursor' },
  ];

  return (
    <AppShell active="writer">
      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr 280px', height: '100%', minHeight: 700 }}>
        {/* LEFT: brief */}
        <aside style={{ borderRight: '1px solid var(--line)', padding: 22, display: 'flex', flexDirection: 'column', gap: 20, overflowY: 'auto' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: 'linear-gradient(135deg, #a78bfa30, #a78bfa08)', border: '1px solid #a78bfa40', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a78bfa' }}>
                <Icon name="pen" size={15} />
              </div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>AI Writer</div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Long-form · brand-voice aware</div>
          </div>

          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 8 }}>Topic</div>
            <textarea defaultValue="Launch announcement for Aurora — an adaptive ambient lamp for creative pros."
              style={{ width: '100%', minHeight: 80, resize: 'vertical', background: 'rgba(255,255,255,0.03)', border: '1px solid var(--line-2)', borderRadius: 'var(--input-radius, 10px)', padding: 12, fontSize: 13, lineHeight: 1.5, color: 'var(--fg-0)', fontFamily: 'inherit', outline: 'none' }} />
          </div>

          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Format</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[['layers', 'Long-form article'], ['flash', 'Ad copy'], ['mail', 'Email'], ['code', 'Social post']].map(([ic, l], i) => (
                <button key={l} style={{
                  padding: '10px 12px', borderRadius: 8, fontSize: 13, textAlign: 'left',
                  background: i === 0 ? 'rgba(167,139,250,0.1)' : 'transparent',
                  border: '1px solid ' + (i === 0 ? 'rgba(167,139,250,0.4)' : 'var(--line)'),
                  color: i === 0 ? '#d4c5fd' : 'var(--fg-1)',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <Icon name={ic} size={13} />{l}
                </button>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Tone</div>
            <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
              {tones.map(t => (
                <button key={t} onClick={() => setTone(t)} style={{
                  height: 28, padding: '0 11px', borderRadius: 999,
                  border: '1px solid ' + (tone === t ? 'rgba(167,139,250,0.4)' : 'var(--line-2)'),
                  background: tone === t ? 'rgba(167,139,250,0.12)' : 'rgba(255,255,255,0.03)',
                  color: tone === t ? '#d4c5fd' : 'var(--fg-1)',
                  fontSize: 12, textTransform: 'capitalize',
                }}>{t}</button>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Length</div>
            <div style={{ display: 'flex', gap: 4 }}>
              {['short', 'medium', 'long'].map(l => (
                <button key={l} onClick={() => setLength(l)} style={{
                  flex: 1, height: 32, borderRadius: 8,
                  border: '1px solid ' + (length === l ? 'rgba(167,139,250,0.4)' : 'var(--line-2)'),
                  background: length === l ? 'rgba(167,139,250,0.12)' : 'transparent',
                  color: length === l ? '#d4c5fd' : 'var(--fg-1)',
                  fontSize: 13, textTransform: 'capitalize',
                }}>{l}</button>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 'auto' }}>
            <button className="yt-btn yt-btn-primary" style={{ width: '100%', height: 44, background: 'linear-gradient(180deg, #b89cfb 0%, #a78bfa 50%, #8a6df1 100%)', color: '#0d0a1f', boxShadow: '0 1px 0 rgba(255,255,255,.4) inset, 0 6px 16px rgba(167,139,250,.3)' }}>
              <Icon name="sparkle" size={14} /> Generate · 3 credits
            </button>
          </div>
        </aside>

        {/* CENTER: editor */}
        <main style={{ overflowY: 'auto', position: 'relative', background: 'var(--bg-1)' }}>
          <div style={{ position: 'sticky', top: 0, zIndex: 5, padding: '14px 32px', background: 'rgba(10,14,26,0.7)', backdropFilter: 'blur(18px)', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ flex: 1, fontSize: 13, color: 'var(--fg-2)' }}>Aurora launch · Draft</div>
            <span className="yt-badge"><span style={{ width: 6, height: 6, borderRadius: 999, background: '#4ade80' }} />Saved</span>
            <button className="yt-btn yt-btn-ghost" style={{ height: 30, padding: '0 12px', fontSize: 12 }}>
              <Icon name="download" size={12} /> Export
            </button>
          </div>
          <div style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px 60px', fontFamily: 'Inter, serif' }}>
            {docOutline.map((b, i) => {
              if (b.type === 'h1') return <h1 key={i} style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 18px', color: 'var(--fg-0)' }}>{b.text}</h1>;
              if (b.type === 'h2') return <h2 key={i} style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', margin: '32px 0 12px', color: 'var(--fg-0)' }}>{b.text}</h2>;
              if (b.type === 'cursor') return <span key={i} style={{ display: 'inline-block', width: 2, height: 18, background: 'var(--accent-2)', verticalAlign: 'middle', animation: 'blink 1s infinite' }} />;
              return <p key={i} style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--fg-1)', margin: '0 0 12px' }}>{b.text}</p>;
            })}
            <style>{`@keyframes blink{50%{opacity:0}}`}</style>
            {/* inline AI suggestion */}
            <div style={{ marginTop: 20, padding: 14, borderRadius: 10, background: 'linear-gradient(135deg, rgba(167,139,250,0.08), rgba(34,211,238,0.04))', border: '1px solid rgba(167,139,250,0.25)' }}>
              <div style={{ fontSize: 12, color: 'var(--accent-2)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="sparkle" size={11} />Suggestion</div>
              <div style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.5, marginBottom: 10 }}>Continue with a short paragraph about the early access waitlist and pricing tier.</div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="yt-btn yt-btn-primary" style={{ height: 28, padding: '0 12px', fontSize: 12 }}>Insert</button>
                <button className="yt-btn yt-btn-ghost" style={{ height: 28, padding: '0 12px', fontSize: 12 }}>Try another</button>
              </div>
            </div>
          </div>
        </main>

        {/* RIGHT: outline */}
        <aside style={{ borderLeft: '1px solid var(--line)', padding: 20, display: 'flex', flexDirection: 'column', gap: 16, overflowY: 'auto' }}>
          <div style={{ fontSize: 12, color: 'var(--fg-2)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Outline</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {['Introducing Aurora', 'Why we built this', 'How it works', 'Early access', 'Pricing & availability'].map((s, i) => (
              <div key={s} style={{ padding: '8px 10px', borderRadius: 7, fontSize: 13, color: i < 3 ? 'var(--fg-1)' : 'var(--fg-3)', background: i === 0 ? 'rgba(167,139,250,0.08)' : 'transparent', borderLeft: i < 3 ? '2px solid var(--accent-2)' : '2px solid transparent', display: 'flex', justifyContent: 'space-between' }}>
                <span>{s}</span>
                {i >= 3 && <span style={{ fontSize: 10, color: 'var(--fg-3)' }}>pending</span>}
              </div>
            ))}
          </div>
          <div className="yt-divider" />
          <div style={{ fontSize: 12, color: 'var(--fg-2)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Stats</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[['Words', '342'], ['Reading', '1m 32s'], ['Grade', '8.4'], ['Tone', 'Pro · 92%']].map(([l, v]) => (
              <div key={l} style={{ padding: 10, borderRadius: 8, background: 'rgba(255,255,255,0.02)', border: '1px solid var(--line)' }}>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </AppShell>
  );
};
Object.assign(window, { WriterToolScreen });
