import { useEffect, useRef, useState } from 'react';
import { useWorkspace } from '@/store/workspace';
import { Icon } from '@/ui/Icon';
import styles from './Notepad.module.css';

const SAVE_DELAY_MS = 400;

/** 共享便签:空间唯一的快照槽,最后写入者胜(protocol §9)。默认折叠,不占首屏 */
export function Notepad({ defaultOpen = false }: { defaultOpen?: boolean }) {
  const snapshot = useWorkspace((s) => s.snapshot);
  const setSnapshot = useWorkspace((s) => s.setSnapshot);
  const [open, setOpen] = useState(defaultOpen);
  const [draft, setDraft] = useState<string | null>(null);
  const timer = useRef<number | undefined>(undefined);

  useEffect(() => () => clearTimeout(timer.current), []);

  function onChange(text: string) {
    setDraft(text);
    clearTimeout(timer.current);
    timer.current = window.setTimeout(() => void setSnapshot(text), SAVE_DELAY_MS);
  }

  const text = draft ?? snapshot.text;
  const firstLine = text.split('\n').find((l) => l.trim() !== '') ?? '空';

  return (
    <section className={styles.pad}>
      <button type="button" className={styles.head} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
        <span className={`${styles.chev} ${open ? styles.open : ''}`}><Icon name="chevronRight" size={16} /></span>
        <span className={styles.title}>便签</span>
        {open ? null : <span className={styles.preview}>{firstLine}</span>}
      </button>
      {open ? (
        <textarea
          className={styles.input}
          rows={4}
          placeholder="常改的草稿放这里,所有设备实时同步"
          value={text}
          onChange={(e) => onChange(e.target.value)}
          onBlur={() => setDraft(null)}
        />
      ) : null}
    </section>
  );
}