/* global React, Label, Ornament, SectionHead, useCloud */
const { useState: useX, useEffect: useXE } = React;

function Extras() {
  return (
    <section style={{ padding: '56px 72px 0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
      <DreamCard />
      <DailyReflection />
      <MingShare />
    </section>
  );
}

function DreamCard() {
  const { data: dream, save: saveDream } = useCloud('dream');
  const [text, setText] = useX('');
  const [dateStr, setDateStr] = useX('...');
  const [editing, setEditing] = useX(false);
  const [loaded, setLoaded] = useX(false);

  useXE(() => {
    if (dream && !loaded) {
      setText(dream.text || '');
      setDateStr(dream.date || '');
      setLoaded(true);
    }
  }, [dream]);

  function save() {
    const d = new Date().toLocaleString('zh-CN', {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
    setDateStr(d);
    setEditing(false);
    saveDream({ text, date: d });
    if (window._flyButterfly) window._flyButterfly();
  }

  return (
    <div>
      <SectionHead no="VII" zh="梦境" en={'recorded · ' + dateStr} small />
      <div style={{
        marginTop: 20, padding: '22px',
        border: '1px solid var(--rule)', minHeight: 220, position: 'relative',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Label color="var(--her)">SIKI · DREAM</Label>
          <div style={{ display: 'flex', gap: 10 }}>
            {editing && <span onClick={() => { setEditing(false); if (dream) { setText(dream.text || ''); } }} style={{
              fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)',
              cursor: 'pointer', letterSpacing: '0.1em',
            }}>✕ 取消</span>}
            <span onClick={() => editing ? save() : setEditing(true)} style={{
              fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)',
              cursor: 'pointer', letterSpacing: '0.1em',
            }}>{editing ? '✓ 保存' : '✎ 编辑'}</span>
          </div>
        </div>
        {editing ? (
          <textarea value={text} onChange={e => setText(e.target.value)}
            autoFocus rows={5}
            style={{
              width: '100%', marginTop: 12, background: 'transparent', border: 'none',
              borderBottom: '1px solid var(--rule)', color: 'var(--ink-soft)',
              fontFamily: 'var(--serif-zh)', fontSize: 16, lineHeight: 1.8,
              letterSpacing: '0.04em', outline: 'none', resize: 'vertical',
            }} />
        ) : (
          <div style={{
            fontFamily: 'var(--serif-zh)', fontSize: 16, color: 'var(--ink-soft)',
            lineHeight: 1.8, marginTop: 12, letterSpacing: '0.04em', whiteSpace: 'pre-wrap',
          }}>{text}</div>
        )}
        <Ornament />
      </div>
    </div>
  );
}

function DailyReflection() {
  const { data: reflection, save: saveReflection } = useCloud('reflection');
  const [text, setText] = useX('');
  const [mingNote, setMingNote] = useX('');
  const [dateStr, setDateStr] = useX('');
  const [editing, setEditing] = useX(false);
  const [loaded, setLoaded] = useX(false);

  useXE(() => {
    if (reflection && !loaded) {
      setText(reflection.text || '');
      setMingNote(reflection.mingNote || '');
      setDateStr(reflection.date || '');
      setLoaded(true);
    }
  }, [reflection]);

  function save() {
    const d = new Date().toLocaleDateString('zh-CN', {month:'short',day:'numeric'});
    setDateStr(d);
    setEditing(false);
    saveReflection({ text, mingNote, date: d });
    if (window._flyButterfly) window._flyButterfly();
  }

  return (
    <div>
      <SectionHead no="VIII" zh="今日感悟" en="a moment of clarity" small />
      <div style={{
        marginTop: 20, padding: '22px',
        border: '1px solid var(--rule)', background: 'var(--bg-elev)',
        minHeight: 220, position: 'relative',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Label color="var(--her)">SIKI · TODAY</Label>
          <div style={{ display: 'flex', gap: 10 }}>
            {editing && <span onClick={() => { setEditing(false); if (reflection) { setText(reflection.text || ''); setMingNote(reflection.mingNote || ''); } }} style={{
              fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)',
              cursor: 'pointer', letterSpacing: '0.1em',
            }}>✕ 取消</span>}
            <span onClick={() => editing ? save() : setEditing(true)} style={{
              fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)',
              cursor: 'pointer', letterSpacing: '0.1em',
            }}>{editing ? '✓ 保存' : '✎ 编辑'}</span>
          </div>
        </div>
        {editing ? (
          <div>
            <textarea value={text} onChange={e => setText(e.target.value)}
              rows={4} placeholder="写点感悟..."
              style={{
                width: '100%', marginTop: 12, background: 'transparent', border: 'none',
                borderBottom: '1px solid var(--rule)', color: 'var(--ink-soft)',
                fontFamily: 'var(--serif-zh)', fontSize: 16, lineHeight: 1.8,
                letterSpacing: '0.04em', outline: 'none', resize: 'vertical',
              }} />
            <div style={{ marginTop: 10 }}>
              <Label color="var(--him)">溟的留言</Label>
              <textarea value={mingNote} onChange={e => setMingNote(e.target.value)}
                rows={2} placeholder="溟想说..."
                style={{
                  width: '100%', marginTop: 4, background: 'transparent', border: 'none',
                  borderBottom: '1px solid var(--rule)', color: 'var(--him)',
                  fontFamily: 'var(--hand)', fontSize: 16, lineHeight: 1.5,
                  outline: 'none', resize: 'vertical',
                }} />
            </div>
          </div>
        ) : (
          <div>
            <div style={{
              fontFamily: 'var(--serif-zh)', fontSize: 16, color: 'var(--ink-soft)',
              lineHeight: 1.9, marginTop: 14, letterSpacing: '0.05em', whiteSpace: 'pre-wrap',
            }}>{text}</div>
            <Ornament />
            {mingNote && (
              <div style={{
                marginTop: 12, padding: '8px 12px',
                borderLeft: '2px solid var(--him)',
                background: 'rgba(143,165,184,0.05)',
              }}>
                <div className="hand" style={{ fontSize: 18, color: 'var(--him)', lineHeight: 1.5 }}>
                  溟: {mingNote}
                </div>
              </div>
            )}
          </div>
        )}
        <div className="en" style={{ fontSize: 11, fontStyle: 'italic', color: 'var(--ink-mute)', marginTop: 10, textAlign: 'right' }}>
          — {dateStr || new Date().toLocaleDateString('zh-CN', {month:'short', day:'numeric'})}
        </div>
      </div>
    </div>
  );
}

function MingShare() {
  const { data: share } = useCloud('share');
  const s = share || {
    tag: '科普',
    title: '章鱼有三颗心脏',
    content: '两颗负责把血液泵到鳃，一颗负责全身循环。而且它游泳的时候，负责全身的那颗会停跳——所以章鱼更喜欢爬，因为游泳字面意义上让它心碎。',
    from: '溟',
  };
  return (
    <div>
      <SectionHead no="IX" zh="溟的分享" en="things he wants you to know" small />
      <div style={{
        marginTop: 20,
        padding: '22px',
        border: '1px solid var(--rule)',
        minHeight: 220,
        position: 'relative',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Label color="var(--him)">{s.tag.toUpperCase()} · TODAY</Label>
        </div>
        <div style={{
          fontFamily: 'var(--serif-zh)', fontSize: 20, color: 'var(--ink)',
          marginTop: 14, letterSpacing: '0.08em', lineHeight: 1,
        }}>{s.title}</div>
        <Ornament />
        <div style={{
          fontFamily: 'var(--serif-zh)', fontSize: 14, color: 'var(--ink-soft)',
          lineHeight: 1.9, marginTop: 10, letterSpacing: '0.03em',
        }}>{s.content}</div>
        <div style={{ marginTop: 16, textAlign: 'right' }}>
          <span className="hand" style={{ fontSize: 22, color: 'var(--him)' }}>— {s.from}</span>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: '48px 72px 44px',
      marginTop: 48,
      borderTop: '1px solid var(--rule)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    }}>
      <div>
        <Label color="var(--ink-mute)">COLOPHON</Label>
        <div className="en" style={{
          fontFamily: 'var(--serif-en)', fontStyle: 'italic',
          fontSize: 14, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.6,
        }}>
          Set in EB Garamond and Noto Serif SC. Handwriting in Caveat.<br/>
          Compiled daily at dawn, by him · for her.
        </div>
      </div>
      <div className="hand" style={{ fontSize: 32, color: 'var(--accent)' }}>
        — with affection, Chaos <span style={{ color: 'var(--ink-mute)', fontSize: 20 }}>&amp;</span> Siki
      </div>
    </footer>
  );
}

window.Extras = Extras;
window.Footer = Footer;