// screen-add.jsx — Add new idea slide-over drawer
const { useState: useAddState } = React;

function AddIdeaDrawer({ open, onClose, onSubmit }) {
  const Icon = window.Icon;
  const [title, setTitle] = useAddState('');
  const [cat, setCat] = useAddState('');
  const [catOpen, setCatOpen] = useAddState(false);
  const [desc, setDesc] = useAddState('');
  const [tags, setTags] = useAddState([]);
  const [tagInput, setTagInput] = useAddState('');
  const [imgs, setImgs] = useAddState([]);

  const reset = () => { setTitle(''); setCat(''); setDesc(''); setTags([]); setTagInput(''); setImgs([]); };
  const close = () => { onClose(); };
  const addTag = (e) => {
    if (e.key === 'Enter' && tagInput.trim() && tags.length < 5) {
      e.preventDefault(); setTags([...tags, tagInput.trim()]); setTagInput('');
    }
  };
  const valid = title.trim() && cat && desc.trim() && tags.length > 0;
  const submit = () => { if (!valid) return; onSubmit({ title, cat }); reset(); };

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 100, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={close} style={{ position: 'absolute', inset: 0, background: 'rgba(14,22,38,.5)', opacity: open ? 1 : 0, transition: 'opacity .3s' }} />
      <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 560, maxWidth: '92vw', background: 'var(--surface)', boxShadow: 'var(--sh-xl)', transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform .34s cubic-bezier(.4,0,.1,1)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 28px', borderBottom: '1px solid var(--line)' }}>
          <div>
            <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--ink-900)', letterSpacing: '-.02em' }}>Add new idea</div>
            <div className="muted" style={{ fontSize: 13.5, marginTop: 3 }}>Share something worth building.</div>
          </div>
          <button className="icon-btn" onClick={close} style={{ background: 'var(--ink-50)' }}><Icon name="close" size={20} /></button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Field label="General title" required>
            <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Enter your idea's general title" className="fld" />
          </Field>

          <Field label="Category" required>
            <div style={{ position: 'relative' }}>
              <button className="fld" onClick={() => setCatOpen(o => !o)} style={{ textAlign: 'left', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: cat ? 'var(--ink-800)' : 'var(--ink-400)' }}>
                {cat || 'Choose the category your idea relates to'}<Icon name="chevDown" size={18} />
              </button>
              {catOpen && (
                <div style={{ position: 'absolute', top: 52, left: 0, right: 0, background: 'var(--pop-bg)', border: '1px solid var(--line)', borderRadius: 12, boxShadow: 'var(--sh-lg)', padding: 6, zIndex: 10 }}>
                  {window.CATEGORIES.map(c => (
                    <button key={c.name} onClick={() => { setCat(c.name); setCatOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 9, width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 8, fontSize: 14, fontWeight: 600, color: 'var(--ink-700)' }}>
                      <span className="cat-dot" style={{ background: c.color }} />{c.name}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </Field>

          <Field label="Description" required>
            <textarea value={desc} onChange={e => setDesc(e.target.value)} placeholder="Enter your idea description in detail" rows={5} className="fld" style={{ resize: 'none' }} />
          </Field>

          <Field label="Relevant tags (up to 5)" required>
            <div className="fld" style={{ display: 'flex', flexWrap: 'wrap', gap: 7, minHeight: 48, height: 'auto', alignItems: 'center', padding: '8px 10px' }}>
              {tags.map((t, i) => (
                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: 'var(--accent-700)', background: 'var(--accent-50)', padding: '5px 8px 5px 11px', borderRadius: 99 }}>
                  {t}<button onClick={() => setTags(tags.filter((_, idx) => idx !== i))} style={{ color: 'var(--accent-700)', display: 'grid' }}><Icon name="close" size={13} /></button>
                </span>
              ))}
              {tags.length < 5 && <input value={tagInput} onChange={e => setTagInput(e.target.value)} onKeyDown={addTag} placeholder={tags.length ? '' : 'Add tags, press Enter'} style={{ border: 'none', outline: 'none', flex: 1, minWidth: 100, fontSize: 14, background: 'none' }} />}
            </div>
          </Field>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Dropzone label="Upload images" hint="Drop images or click" icon="image" />
            <Dropzone label="Upload videos" hint="Drop videos or click" icon="upload" />
          </div>
        </div>

        <div style={{ padding: '18px 28px', borderTop: '1px solid var(--line)', display: 'flex', gap: 12 }}>
          <button className="btn btn-ghost" onClick={close} style={{ flex: '0 0 auto' }}>Cancel</button>
          <button className="btn btn-primary" onClick={submit} disabled={!valid} style={{ flex: 1, opacity: valid ? 1 : .5, cursor: valid ? 'pointer' : 'not-allowed', boxShadow: valid ? undefined : 'none' }}>Submit idea</button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, required, children }) {
  return (
    <div>
      <label style={{ display: 'block', fontSize: 13.5, fontWeight: 700, color: 'var(--ink-800)', marginBottom: 8 }}>{label} {required && <span style={{ color: 'var(--coral-500)' }}>*</span>}</label>
      {children}
    </div>
  );
}

function Dropzone({ label, hint, icon }) {
  const Icon = window.Icon;
  return (
    <div>
      <label style={{ display: 'block', fontSize: 13.5, fontWeight: 700, color: 'var(--ink-800)', marginBottom: 8 }}>{label}</label>
      <div style={{ border: '1.6px dashed var(--line-strong)', borderRadius: 'var(--r)', padding: '26px 14px', textAlign: 'center', cursor: 'pointer', transition: 'border-color .15s, background .15s' }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent-600)'; e.currentTarget.style.background = 'var(--accent-50)'; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.style.background = 'transparent'; }}>
        <div style={{ color: 'var(--ink-400)', display: 'grid', placeItems: 'center', marginBottom: 8 }}><Icon name={icon} size={26} /></div>
        <div style={{ fontSize: 13, color: 'var(--ink-500)', fontWeight: 600 }}>{hint}</div>
      </div>
    </div>
  );
}

window.AddIdeaDrawer = AddIdeaDrawer;