// proto-board.jsx — 게시판 list / write / detail

// ── List ───────────────────────────────────────────────────────
function BoardListPage() {
  const posts = usePosts();
  const [filter, setFilter] = React.useState('전체');
  const [query, setQuery] = React.useState('');
  const filtered = posts.filter(p => {
    if (filter !== '전체' && p.tag !== filter) return false;
    if (query && !(p.title.includes(query) || (p.nick || '').includes(query))) return false;
    return true;
  });

  return (
    <div className="fade-in">
      <div className="page-h">
        <div className="crumbs">
          <a href="#/">Mate</a>
          <span>/</span>
          <span style={{ color: 'var(--ink-2)' }}>게시판</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <h1>게시판</h1>
            <p className="lead">비로그인 · 닉네임과 이메일만 있으면 누구나 글을 남길 수 있어요.</p>
          </div>
          <a className="btn primary accent-board lg" href="#/board/new">
            + 글쓰기
          </a>
        </div>
      </div>

      <div className="toolbar">
        <div className="filters">
          {[
            { v: '전체',  cls: '' },
            { v: '토론',  cls: 'tag-discuss' },
            { v: '질문',  cls: 'tag-question' },
            { v: '잡담',  cls: 'tag-chat' },
          ].map(f => (
            <button key={f.v}
              className={`chip ${f.cls} ${filter === f.v ? 'active' : ''}`}
              onClick={() => setFilter(f.v)}>
              {f.v}{filter === f.v ? '' : ''}
              <span style={{ marginLeft: 4, opacity: 0.6, fontVariantNumeric: 'tabular-nums' }}>
                {f.v === '전체' ? posts.length : posts.filter(p => p.tag === f.v).length}
              </span>
            </button>
          ))}
        </div>
        <div className="search">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="4.2" stroke="currentColor" strokeWidth="1.4" />
            <path d="M9.5 9.5L13 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
          </svg>
          <input type="text" placeholder="제목 · 닉네임 검색" value={query} onChange={e => setQuery(e.target.value)} />
        </div>
      </div>

      <div className="post-list">
        <div className="post-row head">
          <span>분류</span>
          <span>제목</span>
          <span>닉네임</span>
          <span style={{ textAlign: 'center' }}>댓글</span>
          <span style={{ textAlign: 'center' }}>조회</span>
          <span style={{ textAlign: 'right' }}>작성</span>
        </div>
        {filtered.length === 0 ? (
          <div className="empty">
            <div className="icon">∅</div>
            <div className="title">아직 글이 없습니다</div>
            <div>첫 글의 주인공이 되어 보세요.</div>
            <div style={{ marginTop: 16 }}>
              <a className="btn primary accent-board" href="#/board/new">+ 글쓰기</a>
            </div>
          </div>
        ) : filtered.map(p => (
          <div key={p.id} className="post-row" onClick={() => go(`/board/${p.id}`)}>
            <span><span className={`chip tag-${tagClass(p.tag)} active`} style={{ pointerEvents: 'none' }}>{p.tag}</span></span>
            <span className="title-cell">
              <span className="title">{p.title}</span>
              {p.comments?.length > 0 && (
                <span className="badge">[{p.comments.length}]</span>
              )}
            </span>
            <span className="nick">{p.nick}</span>
            <span className="num"><span className="num-label">댓글</span>{p.comments?.length || 0}</span>
            <span className="num"><span className="num-label">조회</span>{p.views || 0}</span>
            <span className="time">{relTime(p.ts)}</span>
            <div className="meta-row" style={{ display: 'none' }}>
              <span>{p.nick}</span>
              <span>댓글 {p.comments?.length || 0}</span>
              <span>조회 {p.views || 0}</span>
              <span>{relTime(p.ts)}</span>
            </div>
          </div>
        ))}
      </div>

      <Pager />

      <div style={{ marginTop: 18, padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 'var(--r-sm)', fontSize: 13, color: 'var(--muted)' }}>
        <strong style={{ color: 'var(--ink-2)' }}>운영 방침</strong>
        <span className="divider-dot" />
        자유 게시 · 비로그인
        <span className="divider-dot" />
        욕설/스팸은 사후 삭제
        <span className="divider-dot" />
        이메일은 공개되지 않음
        <span style={{ float: 'right' }}>
          <button className="btn ghost sm" onClick={() => { if (confirm('게시판 데모 데이터를 초기화할까요?')) { resetPosts(); location.reload(); } }}>
            데모 초기화
          </button>
        </span>
      </div>
    </div>
  );
}

function Pager() {
  return (
    <div className="pager">
      <span className="pg">‹</span>
      <span className="pg active">1</span>
      <span className="pg">2</span>
      <span className="pg">3</span>
      <span className="pg">›</span>
    </div>
  );
}

// ── Write ──────────────────────────────────────────────────────
function BoardWritePage() {
  const [tag, setTag] = React.useState('토론');
  const [title, setTitle] = React.useState('');
  const [nick, setNick] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [body, setBody] = React.useState('');
  const [robot, setRobot] = React.useState(false);

  const canSubmit = title.trim().length >= 2 && nick.trim().length >= 2 && body.trim().length >= 4 && robot;
  const submit = (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    const id = addPost({ tag, title: title.trim(), nick: nick.trim(), email: email.trim(), body: body.trim() });
    window.toast?.('게시 완료');
    go(`/board/${id}`);
  };

  return (
    <div className="fade-in">
      <div className="page-h">
        <div className="crumbs">
          <a href="#/">Mate</a>
          <span>/</span>
          <a href="#/board">게시판</a>
          <span>/</span>
          <span style={{ color: 'var(--ink-2)' }}>새 글</span>
        </div>
        <h1>새 글 작성</h1>
        <p className="lead">로그인 없이 닉네임과 이메일만 있으면 글을 남길 수 있어요. 이메일은 공개되지 않습니다.</p>
      </div>

      <form className="two-col" onSubmit={submit}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* Tag */}
          <div className="field">
            <span className="field-label">분류</span>
            <div className="filters" style={{ display: 'flex', gap: 6 }}>
              {[
                { v: '토론', cls: 'tag-discuss' },
                { v: '질문', cls: 'tag-question' },
                { v: '잡담', cls: 'tag-chat' },
              ].map(o => (
                <button type="button" key={o.v}
                  className={`chip ${o.cls} ${tag === o.v ? 'active' : ''}`}
                  onClick={() => setTag(o.v)}>{o.v}</button>
              ))}
            </div>
          </div>

          <div className="field">
            <span className="field-label">제목</span>
            <input className="input" type="text" maxLength={80}
                   value={title} onChange={e => setTitle(e.target.value)}
                   placeholder="짧고 분명하게" />
            <span className="field-hint">{title.length} / 80</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="field">
              <span className="field-label">닉네임</span>
              <input className="input" type="text" maxLength={12}
                     value={nick} onChange={e => setNick(e.target.value)}
                     placeholder="2~12자" />
            </div>
            <div className="field">
              <span className="field-label">이메일 <span style={{ color: 'var(--muted)', fontWeight: 400 }}>(선택)</span></span>
              <input className="input" type="email"
                     value={email} onChange={e => setEmail(e.target.value)}
                     placeholder="공개되지 않음 · 답변 알림용" />
            </div>
          </div>

          <div className="field">
            <span className="field-label">본문</span>
            <textarea className="textarea"
                      value={body} onChange={e => setBody(e.target.value)}
                      placeholder="마크다운(기본 문법)을 지원합니다. 줄바꿈은 그대로 유지돼요." />
            <span className="field-hint">{body.length}자 · Cloudflare D1에 저장됩니다</span>
          </div>

          {/* Turnstile mock */}
          <label className="card" style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, background: '#fafafa', cursor: 'pointer', maxWidth: 320 }}>
            <input type="checkbox" checked={robot} onChange={e => setRobot(e.target.checked)} style={{ width: 18, height: 18 }} />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontSize: 13, color: 'var(--ink)' }}>저는 봇이 아닙니다</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)' }}>Cloudflare Turnstile</span>
            </div>
          </label>

          <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
            <button type="submit" className="btn primary accent-board lg" disabled={!canSubmit}
                    style={{ opacity: canSubmit ? 1 : 0.4 }}>
              게시하기
            </button>
            <a className="btn lg" href="#/board">취소</a>
            <button type="button" className="btn ghost lg" style={{ marginLeft: 'auto' }}
                    onClick={() => window.toast?.('임시 저장 (브라우저)')}>
              임시 저장
            </button>
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="card card-pad" style={{ background: 'var(--briefing-tint)' }}>
            <div className="eyebrow" style={{ color: 'var(--briefing)', marginBottom: 8 }}>운영 방침</div>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.8, color: 'var(--ink-2)' }}>
              <li>자유 게시 · 비로그인</li>
              <li>욕설/스팸은 사후 삭제</li>
              <li>이메일은 공개되지 않음</li>
              <li>저장: Cloudflare D1</li>
            </ul>
          </div>
          <div className="card card-pad">
            <div className="eyebrow" style={{ marginBottom: 8 }}>미리보기</div>
            {title || body ? (
              <div>
                <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 6, letterSpacing: '-0.01em' }}>
                  {title || '(제목 없음)'}
                </div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10 }}>
                  {nick || '익명'} · 방금
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
                  {body || '본문을 입력하면 여기에 미리 보여요.'}
                </div>
              </div>
            ) : (
              <div style={{ color: 'var(--muted)', fontSize: 13 }}>제목·본문을 입력하면 여기서 확인할 수 있어요.</div>
            )}
          </div>
        </aside>
      </form>
    </div>
  );
}

// ── Detail ─────────────────────────────────────────────────────
function BoardDetailPage({ id }) {
  const posts = usePosts();
  const post = posts.find(p => p.id === id);
  const seenRef = React.useRef(false);

  React.useEffect(() => {
    if (post && !seenRef.current) {
      seenRef.current = true;
      bumpView(id);
    }
  }, [id, !!post]);

  if (!post) {
    return (
      <div className="fade-in">
        <div className="page-h">
          <div className="crumbs">
            <a href="#/">Mate</a><span>/</span><a href="#/board">게시판</a>
          </div>
          <h1>글을 찾을 수 없어요</h1>
          <p className="lead">삭제됐거나, 주소가 잘못됐을 수 있습니다.</p>
          <div style={{ marginTop: 16 }}>
            <a className="btn" href="#/board">← 목록으로</a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in post-detail">
      <div className="crumbs" style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 10, display: 'flex', gap: 6 }}>
        <a href="#/">Mate</a><span>/</span><a href="#/board">게시판</a><span>/</span>
        <span style={{ color: 'var(--ink-2)' }}>{post.tag}</span>
      </div>

      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
        <span className={`chip tag-${tagClass(post.tag)} active`} style={{ pointerEvents: 'none' }}>{post.tag}</span>
      </div>

      <h1>{post.title}</h1>

      <div className="post-meta">
        <span><strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>{post.nick}</strong></span>
        <span>{relTime(post.ts)}</span>
        <span>조회 {post.views || 0}</span>
        <span>댓글 {post.comments?.length || 0}</span>
      </div>

      <div className="post-body">{post.body}</div>

      <div style={{ display: 'flex', gap: 8, padding: '8px 0', borderTop: '1px solid var(--divider)', borderBottom: '1px solid var(--divider)' }}>
        <button className="btn sm" onClick={() => window.toast?.('좋아요!')}>👍 좋아요</button>
        <button className="btn sm ghost" onClick={() => { navigator.clipboard?.writeText(location.href); window.toast?.('링크 복사됨'); }}>🔗 링크 복사</button>
        <a className="btn sm ghost" href="#/board" style={{ marginLeft: 'auto' }}>← 목록</a>
      </div>

      <div className="comments">
        <div className="section-h" style={{ marginBottom: 14 }}>
          <h2 style={{ fontSize: 18 }}>댓글 {post.comments?.length || 0}</h2>
        </div>

        {post.comments?.length > 0 ? post.comments.map((c, i) => (
          <div key={i} className="comment">
            <div className="head">
              <span className="nick">{c.nick}</span>
              <span className="time">{relTime(c.ts)}</span>
            </div>
            <div className="body">{c.body}</div>
          </div>
        )) : (
          <div className="empty" style={{ padding: 32 }}>
            <div style={{ color: 'var(--muted)' }}>첫 댓글을 남겨보세요.</div>
          </div>
        )}

        <CommentForm postId={post.id} />
      </div>
    </div>
  );
}

function CommentForm({ postId }) {
  const [nick, setNick] = React.useState('');
  const [body, setBody] = React.useState('');
  const can = nick.trim().length >= 2 && body.trim().length >= 1;
  const submit = (e) => {
    e.preventDefault();
    if (!can) return;
    addComment(postId, { nick: nick.trim(), body: body.trim() });
    setNick(''); setBody('');
    window.toast?.('댓글 추가됨');
  };
  return (
    <form onSubmit={submit} style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <input className="input" type="text" placeholder="닉네임 (2~12자)" maxLength={12}
             value={nick} onChange={e => setNick(e.target.value)} style={{ maxWidth: 220 }} />
      <textarea className="textarea" placeholder="댓글을 남겨주세요"
                value={body} onChange={e => setBody(e.target.value)}
                style={{ minHeight: 90 }} />
      <div>
        <button className="btn primary accent-board" type="submit" disabled={!can}
                style={{ opacity: can ? 1 : 0.4 }}>
          댓글 등록
        </button>
      </div>
    </form>
  );
}

Object.assign(window, { BoardListPage, BoardWritePage, BoardDetailPage });