(function() {
  var useState = React.useState;
  var useRef   = React.useRef;

  var STEPS = [
    { n:1, title:'Capture Your Location',    desc:'Take or upload a photo of any city space. Geo-tagging is automatic on mobile.' },
    { n:2, title:'Describe Your Vision',     desc:'Write a prompt describing how the space could look. The more detail, the better.' },
    { n:3, title:'Choose Funding Goal',      desc:'Set an optional funding target. Citizens and businesses can back your idea.' },
    { n:4, title:'AI Generates & Publishes', desc:'Our pipeline transforms your photo into a live AR experience within 10 minutes.' },
  ];

  var ZONES = ['civic','residential','commercial','parks','industrial'];

  function Submit() {
    var _prompt     = useState('');  var prompt     = _prompt[0],     setPrompt     = _prompt[1];
    var _title      = useState('');  var title      = _title[0],      setTitle      = _title[1];
    var _district   = useState('');  var district   = _district[0],   setDistrict   = _district[1];
    var _goal       = useState('');  var goal       = _goal[0],       setGoal       = _goal[1];
    var _zone       = useState('civic'); var zone   = _zone[0],       setZone       = _zone[1];
    var _drag       = useState(false); var drag     = _drag[0],       setDrag       = _drag[1];
    var _step       = useState(0);   var step       = _step[0],       setStep       = _step[1];
    var _photo      = useState(null); var photo     = _photo[0],      setPhoto      = _photo[1];
    var _submitting = useState(false); var submitting = _submitting[0], setSubmitting = _submitting[1];
    var ref = useRef(null);
    window.useReveal(ref);

    var handleGenerate = function() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to submit a project', 'rose');
        return;
      }
      if (!title.trim()) { window.showUserToast('Enter a project title first', 'rose'); return; }
      var ok = window.UserSubmitService.generateARPreview(prompt, function() { setStep(3); });
      if (ok) setStep(3);
    };

    var handleSubmit = async function() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to submit a project', 'rose');
        return;
      }
      if (!title.trim())  { window.showUserToast('Enter a project title', 'rose'); return; }
      if (!prompt.trim()) { window.showUserToast('Enter a vision prompt', 'rose'); return; }
      setSubmitting(true);
      var project = await window.UserSubmitService.submitProject({
        title:    title,
        description: prompt,
        prompt:   prompt,
        zone:     zone,
        district: district,
        goal:     goal ? Number(goal) * 1000 : 0,
        photo:    photo,
      });
      setSubmitting(false);
      if (project) {
        setTitle(''); setPrompt(''); setDistrict(''); setGoal(''); setPhoto(null); setStep(0);
      }
    };

    var handleDrop = function(e) {
      e.preventDefault(); setDrag(false);
      var file = e.dataTransfer.files[0];
      if (file && file.type.startsWith('image/')) {
        setPhoto(file);
        window.showUserToast('Photo uploaded!', 'lime');
      }
    };

    var handleFilePick = function() {
      var inp = document.createElement('input');
      inp.type = 'file'; inp.accept = 'image/*';
      inp.onchange = function(e) {
        var file = e.target.files[0];
        if (file) { setPhoto(file); window.showUserToast('Photo ready!', 'lime'); }
      };
      inp.click();
    };

    return (
      <div ref={ref}>
        <div className="section">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start' }}>
            {/* Left — steps */}
            <div>
              <div className="eyebrow reveal">Submit a Project</div>
              <h2 className="heading-lg reveal rd1">Your Idea<br /><span className="gradient-text">Starts Here</span></h2>
              <p className="reveal rd2" style={{ color:'var(--text-dim)', fontSize:16, lineHeight:1.7, margin:'20px 0 40px' }}>
                Anyone can propose a change to their city. No architecture degree required — just a photo and a vision.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                {STEPS.map(function(s, i) {
                  return (
                    <div key={s.n} className={'wiz-step reveal rd'+(i+2)}
                      onMouseEnter={function(){ document.body.classList.add('hov'); setStep(i); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      style={{ borderColor: step === i ? 'oklch(0.68 0.28 295 / 0.45)' : '' }}>
                      <div className="wiz-num wn-v">{s.n}</div>
                      <div><div className="wiz-title">{s.title}</div><div className="wiz-desc">{s.desc}</div></div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Right — form */}
            <div className="reveal rd2">
              {/* Title */}
              <div style={{ marginBottom:12 }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>Project Title</div>
                <input
                  style={{ width:'100%', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:10, padding:'10px 14px', fontFamily:'DM Mono,monospace', fontSize:12, color:'var(--text)', outline:'none', boxSizing:'border-box' }}
                  placeholder="e.g. Northside Community Garden"
                  value={title} onChange={function(e){ setTitle(e.target.value); }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                />
              </div>

              {/* Photo upload */}
              <div className={'upload-zone' + (drag ? ' drag' : '')}
                onDragOver={function(e){ e.preventDefault(); setDrag(true); }}
                onDragLeave={function(){ setDrag(false); }}
                onDrop={handleDrop}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={handleFilePick}>
                <span className={'uz-icon' + (photo ? ' ok' : '')}><window.CBIcon name={photo ? 'check' : 'camera'} size={30} /></span>
                <div className="uz-title">{photo ? photo.name : 'Drop your photo here'}</div>
                <div className="uz-sub">{photo ? 'Click to change' : 'or click to browse · JPG, PNG, HEIC · Max 25MB'}</div>
              </div>

              <div style={{ marginTop:16 }}>
                <div className="prompt-box">
                  <div className="pb-label">✦ Your Vision Prompt</div>
                  <textarea className="pb-input" rows={4}
                    placeholder="Transform this abandoned lot into a vibrant community garden with solar-powered canopies, native plants, and a small amphitheatre for local events..."
                    value={prompt} onChange={function(e){ setPrompt(e.target.value); }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  />
                </div>
              </div>

              <div style={{ marginTop:12, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <div style={{ background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:14, padding:'10px 14px' }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>District</div>
                  <input
                    style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontFamily:'DM Mono,monospace', fontSize:12, color:'var(--text)' }}
                    placeholder="e.g. Northside"
                    value={district} onChange={function(e){ setDistrict(e.target.value); }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  />
                </div>
                <div style={{ background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:14, padding:'10px 14px' }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>Funding Goal ($K)</div>
                  <input
                    style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontFamily:'DM Mono,monospace', fontSize:12, color:'var(--text)' }}
                    placeholder="e.g. 250"
                    type="number" min="0"
                    value={goal} onChange={function(e){ setGoal(e.target.value); }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  />
                </div>
              </div>

              <div style={{ marginTop:12, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <button className="btn btn-o" style={{ justifyContent:'center', padding:'12px 20px', fontSize:11 }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={handleGenerate}>
                  <window.CBIcon name="sparkles" size={14} /> Generate AR Preview
                </button>
                <button className="btn btn-v" style={{ justifyContent:'center', padding:'12px 20px', fontSize:11 }}
                  disabled={submitting}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={handleSubmit}>
                  {submitting ? 'Submitting…' : <React.Fragment><window.CBIcon name="send" size={14} /> Submit Project</React.Fragment>}
                </button>
              </div>

              <div style={{ marginTop:12, textAlign:'center', fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', letterSpacing:'.06em' }}>
                Free to submit · AI processing takes ~10 minutes · Community review required
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserSubmit = Submit;
})();