// Feedback page (user-facing)
const { useState: useStateFB } = React;

function FeedbackPage() {
  const store = useStore();
  const user = store.getCurrentUser();
  const [kind, setKind] = useStateFB('bug');
  const [title, setTitle] = useStateFB('');
  const [body, setBody] = useStateFB('');
  const [severity, setSeverity] = useStateFB('normal');
  const [contact, setContact] = useStateFB(user?.email || '');
  const [sent, setSent] = useStateFB(false);

  const submit = () => {
    if (!title.trim() || !body.trim()) return;
    store.submitFeedback({ kind, title: title.trim(), body: body.trim(), severity, contact });
    setSent(true);
    setTitle(''); setBody('');
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <div className="page feedback-page">
      <div className="page-head">
        <div>
          <div className="loc-kicker">FEEDBACK · BUGS · IDEAS</div>
          <h1 className="page-title">Tell us what's broken or missing</h1>
          <div className="page-sub">All feedback goes straight to admins. Include screenshots in the body if helpful.</div>
        </div>
      </div>

      <div className="feedback-form">
        <div className="filter-label">TYPE</div>
        <div className="radio-row">
          <button className={`chip ${kind === 'bug' ? 'on' : ''}`} onClick={() => setKind('bug')}>🐞 Bug</button>
          <button className={`chip ${kind === 'feature' ? 'on' : ''}`} onClick={() => setKind('feature')}>✨ Feature idea</button>
          <button className={`chip ${kind === 'question' ? 'on' : ''}`} onClick={() => setKind('question')}>? Question</button>
        </div>

        <div className="filter-label" style={{ marginTop: 16 }}>TITLE</div>
        <input className="settings-input" value={title} onChange={e => setTitle(e.target.value)} placeholder="Short summary"/>

        <div className="filter-label" style={{ marginTop: 16 }}>DETAILS</div>
        <textarea className="settings-input bio-text" rows="6" value={body} onChange={e => setBody(e.target.value)}
          placeholder="What happened? What did you expect? Steps to reproduce, ideas, etc."/>

        {kind === 'bug' && (
          <>
            <div className="filter-label" style={{ marginTop: 16 }}>SEVERITY</div>
            <div className="radio-row">
              {['low','normal','high','critical'].map(s => (
                <button key={s} className={`chip ${severity === s ? 'on' : ''}`} onClick={() => setSeverity(s)}>{s}</button>
              ))}
            </div>
          </>
        )}

        <div className="filter-label" style={{ marginTop: 16 }}>CONTACT (optional)</div>
        <input className="settings-input" value={contact} onChange={e => setContact(e.target.value)} placeholder="email or handle"/>

        <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
          <button className="ask-btn auth-submit" onClick={submit} disabled={!title.trim() || !body.trim()}>
            {sent ? '✓ Sent — thank you' : 'Send to admins →'}
          </button>
          <span className="muted">{store.getFeedback().length} reports total</span>
        </div>
      </div>
    </div>
  );
}

window.FeedbackPage = FeedbackPage;