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

  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 Enhances Your Vision',  desc:'Meshy transforms your photo based on your prompt — then you choose when to build 3D.' },
  ];

  function SubmitPage() {
    var _title      = useState('');    var title = _title[0], setTitle = _title[1];
    var _prompt     = useState('');    var prompt = _prompt[0], setPrompt = _prompt[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 _photo      = useState(null);  var photo = _photo[0], setPhoto = _photo[1];
    var _drag       = useState(false); var drag = _drag[0], setDrag = _drag[1];
    var _step       = useState(0);     var step = _step[0], setStep = _step[1];
    var _submitting  = useState(false); var submitting = _submitting[0], setSubmitting = _submitting[1];
    var _submitted   = useState(false); var submitted = _submitted[0], setSubmitted = _submitted[1];
    var _submittedId = useState(null);  var submittedId = _submittedId[0], setSubmittedId = _submittedId[1];
    var _uploadPct   = useState(0);     var uploadPct = _uploadPct[0], setUploadPct = _uploadPct[1];
    var _arStatus    = useState(null);  var arStatus = _arStatus[0], setArStatus = _arStatus[1];
    var _generating3D = useState(false); var generating3D = _generating3D[0], setGenerating3D = _generating3D[1];

    useEffect(function() {
      if (!submitted || !submittedId) return;
      var poll = setInterval(function() {
        window.ApiClient.get('/projects/'+submittedId+'/ar-status').then(function(s) {
          setArStatus(s);
        }).catch(function(){});
      }, 4000);
      window.ApiClient.get('/projects/'+submittedId+'/ar-status').then(setArStatus).catch(function(){});
      return function() { clearInterval(poll); };
    }, [submitted, submittedId]);

    function startGenerate3D() {
      if (!submittedId) return;
      setGenerating3D(true);
      window.ApiClient.post('/projects/'+submittedId+'/generate-3d', {}).then(function() {
        setArStatus(function(s){ return Object.assign({}, s, { status:'ar_processing', processingStage:'ai_transform', progress:0 }); });
        window.showUserToast('3D generation started!', 'violet');
        window.navigate('project-detail', { id: submittedId });
      }).catch(function(e) {
        window.showUserToast(e.message || 'Failed to start 3D', 'rose');
      }).finally(function(){ setGenerating3D(false); });
    }

    function handleFilePick() {
      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); setStep(1); window.showUserToast('Photo ready!', 'lime'); }
      };
      inp.click();
    }

    async function handleSubmit() {
      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 your vision prompt', 'rose'); return; }
      setSubmitting(true);
      setUploadPct(10);
      var pctTimer = setInterval(function(){ setUploadPct(function(p){ return Math.min(p+8, 85); }); }, 400);
      var project = await window.UserSubmitService.submitProject({
        title:       title,
        description: prompt,
        prompt:      prompt,
        zone:        zone,
        district:    district,
        goal:        goal ? Number(goal) * 1000 : 0,
        photo:       photo,
      });
      clearInterval(pctTimer);
      setUploadPct(100);
      setSubmitting(false);
      if (project) {
        setSubmittedId(project._id || null);
        setSubmitted(true);
      }
    }

    if (submitted) {
      var enhancing = arStatus && arStatus.processingStage === 'enhancing';
      var enhanced  = arStatus && (arStatus.processingStage === 'enhanced' || arStatus.enhancedPhotoUrl);
      var building3D = arStatus && arStatus.status === 'ar_processing';

      return (
        <div className="user-screen">
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', minHeight:'70vh', padding:'40px', textAlign:'center' }}>
            <div style={{ fontSize:72, marginBottom:16 }}>{enhanced ? '✨' : '🚀'}</div>
            <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:48, letterSpacing:'.03em', color:'var(--lime)', marginBottom:12 }}>
              {enhanced ? 'Vision Enhanced!' : 'Submitted!'}
            </div>
            <p style={{ fontSize:15, color:'var(--text-dim)', maxWidth:460, lineHeight:1.7, marginBottom:12 }}>
              {enhancing && 'Meshy AI is enhancing your photo based on your vision prompt…'}
              {enhanced && !building3D && 'Review your enhanced vision below. Generate 3D only when you\'re ready.'}
              {building3D && 'Building your 3D model — this takes 2–5 minutes.'}
              {!arStatus && 'Upload complete — starting AI enhancement…'}
            </p>

            {arStatus && arStatus.photoUrl && arStatus.enhancedPhotoUrl && (
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, maxWidth:520, width:'100%', marginBottom:20 }}>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:8, color:'var(--text-faint)', marginBottom:6 }}>ORIGINAL</div>
                  <img src={arStatus.photoUrl} alt="Original" style={{ width:'100%', height:140, objectFit:'cover', borderRadius:10, border:'1px solid var(--border)' }} />
                </div>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:8, color:'var(--violet)', marginBottom:6 }}>AI ENHANCED</div>
                  <img src={arStatus.enhancedPhotoUrl} alt="Enhanced" style={{ width:'100%', height:140, objectFit:'cover', borderRadius:10, border:'1px solid oklch(0.35 0.1 295 / 0.5)' }} />
                </div>
              </div>
            )}

            <div className="submit-pipeline-steps">
              <div className="sps-step done">✓ Photo &amp; details uploaded</div>
              <div className={'sps-step' + (enhancing ? ' active' : enhanced ? ' done' : '')}>
                {enhancing ? <span><span className="sps-spin" />Enhancing vision…</span> : enhanced ? '✓ Vision enhanced' : '↳ AI vision enhance'}
              </div>
              <div className={'sps-step' + (building3D ? ' active' : '')}>
                {building3D ? <span><span className="sps-spin" />Building 3D model…</span> : '↳ Generate 3D (on demand)'}
              </div>
              <div className="sps-step">↳ Live AR view</div>
            </div>
            <div style={{ display:'flex', gap:12, marginTop:28, flexWrap:'wrap', justifyContent:'center' }}>
              {enhanced && !building3D && submittedId && (
                <button className="btn btn-v" style={{ padding:'12px 28px' }}
                  disabled={generating3D}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={startGenerate3D}>
                  {generating3D ? 'Starting…' : '🏗 Generate 3D Model'}
                </button>
              )}
              {submittedId && (
                <button className="btn btn-o" style={{ padding:'12px 28px' }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ window.navigate('project-detail', { id: submittedId }); }}>
                  View Project →
                </button>
              )}
              <button className="btn btn-o" style={{ padding:'12px 28px' }}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={function(){ setSubmitted(false); setTitle(''); setPrompt(''); setDistrict(''); setGoal(''); setPhoto(null); setStep(0); setSubmittedId(null); setArStatus(null); }}>
                Submit Another
              </button>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="user-screen">
        <div className="pg-hero">
          <button className="back-btn"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navBack(); }}>
            ← Back
          </button>
          <div className="pg-eyebrow">Submit a Project</div>
          <h1 className="pg-title">Your Idea<br /><span style={{ color:'var(--violet)' }}>Starts Here</span></h1>
          <p className="pg-sub">Anyone can propose a change to their city. No architecture degree required — just a photo and a vision.</p>
        </div>

        <div className="submit-pg-wrap">
          <div className="submit-two-col" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'start' }}>
            {/* Left — steps */}
            <div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {STEPS.map(function(s, i) {
                  return (
                    <div key={s.n}
                      onMouseEnter={function(){ document.body.classList.add('hov'); setStep(i); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      style={{ display:'flex', gap:14, padding:'16px 20px', borderRadius:12, border:'1px solid '+(step===i?'oklch(0.5 0.2 295 / 0.4)':'var(--border)'), background: step===i?'oklch(0.18 0.03 295 / 0.3)':'var(--bg-raised)', transition:'all .2s', cursor:'none' }}>
                      <div style={{ width:28, height:28, borderRadius:'50%', background: step===i?'var(--violet)':'var(--bg-float)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Mono,monospace', fontSize:11, color: step===i?'var(--bg)':'var(--text-faint)', flexShrink:0, transition:'all .2s' }}>{s.n}</div>
                      <div>
                        <div style={{ fontSize:14, color:'var(--text)', fontWeight:500, marginBottom:4 }}>{s.title}</div>
                        <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', lineHeight:1.5 }}>{s.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              <div style={{ marginTop:24, background:'oklch(0.16 0.02 188 / 0.3)', border:'1px solid oklch(0.3 0.05 188 / 0.4)', borderRadius:12, padding:'16px 20px' }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--cyan)', marginBottom:8 }}>Processing Time</div>
                <div style={{ display:'flex', gap:16, flexWrap:'wrap' }}>
                  {[['AI Enhancement','~12s'],['3D Rebuild','~8min'],['AR Deploy','~2min']].map(function(t) {
                    return (
                      <div key={t[0]}>
                        <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:20, color:'var(--cyan)' }}>{t[1]}</div>
                        <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>{t[0]}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* Right — form */}
            <div>
              {/* Title input */}
              <div style={{ marginBottom:14 }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', 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:'11px 14px', fontFamily:'DM Mono,monospace', fontSize:12, color:'var(--text)', outline:'none', boxSizing:'border-box', transition:'border-color .2s' }}
                  placeholder="e.g. Northside Community Garden"
                  value={title} onChange={function(e){ setTitle(e.target.value); }}
                  onFocus={function(e){ e.target.style.borderColor='oklch(0.5 0.2 295 / 0.6)'; }}
                  onBlur={function(e){ e.target.style.borderColor='var(--border)'; }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                />
              </div>

              {/* Photo upload */}
              <div style={{ background:'var(--bg-raised)', border:'2px dashed '+(drag||photo?'var(--violet)':'var(--border)'), borderRadius:14, padding:'28px', textAlign:'center', cursor:'none', transition:'all .2s', marginBottom:14 }}
                onDragOver={function(e){ e.preventDefault(); setDrag(true); }}
                onDragLeave={function(){ setDrag(false); }}
                onDrop={function(e){ e.preventDefault(); setDrag(false); var f=e.dataTransfer.files[0]; if(f&&f.type.startsWith('image/')){ setPhoto(f); setStep(1); window.showUserToast('Photo ready!','lime'); } }}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={handleFilePick}>
                <div style={{ fontSize:36, marginBottom:8 }}>{photo?'✅':'📸'}</div>
                <div style={{ fontSize:13, color:'var(--text)', marginBottom:4 }}>{photo ? photo.name : 'Drop your photo here'}</div>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>{photo ? 'Click to change' : 'or click to browse · JPG, PNG, HEIC · Max 25MB'}</div>
              </div>

              {/* Vision prompt */}
              <div style={{ marginBottom:14 }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>✦ Vision Prompt *</div>
                <textarea style={{ width:'100%', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:10, padding:'11px 14px', fontFamily:'DM Mono,monospace', fontSize:12, color:'var(--text)', outline:'none', resize:'vertical', boxSizing:'border-box', transition:'border-color .2s', minHeight:100 }}
                  rows={4}
                  placeholder="Transform this space into a vibrant community garden with solar-powered canopies, native plants, and a small amphitheatre…"
                  value={prompt} onChange={function(e){ setPrompt(e.target.value); setStep(2); }}
                  onFocus={function(e){ e.target.style.borderColor='oklch(0.5 0.2 295 / 0.6)'; }}
                  onBlur={function(e){ e.target.style.borderColor='var(--border)'; }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                />
              </div>

              {/* District + Goal + Zone */}
              <div className="submit-three-col" style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:14 }}>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>District</div>
                  <input style={{ width:'100%', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:8, padding:'9px 12px', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text)', outline:'none', boxSizing:'border-box' }}
                    placeholder="e.g. Downtown"
                    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>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>Goal ($K)</div>
                  <input style={{ width:'100%', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:8, padding:'9px 12px', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text)', outline:'none', boxSizing:'border-box' }}
                    placeholder="250" type="number" min="0"
                    value={goal} onChange={function(e){ setGoal(e.target.value); setStep(2); }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  />
                </div>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>Zone</div>
                  <select style={{ width:'100%', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:8, padding:'9px 12px', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text)', outline:'none', boxSizing:'border-box' }}
                    value={zone} onChange={function(e){ setZone(e.target.value); }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}>
                    {['civic','residential','commercial','parks','industrial'].map(function(z){ return <option key={z} value={z}>{z.charAt(0).toUpperCase()+z.slice(1)}</option>; })}
                  </select>
                </div>
              </div>

              {/* Actions */}
              <button className="btn btn-v" style={{ width:'100%', justifyContent:'center', padding:'15px', fontSize:13, position:'relative', overflow:'hidden' }}
                disabled={submitting}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={handleSubmit}>
                {submitting && (
                  <div style={{ position:'absolute', left:0, top:0, bottom:0, width:uploadPct+'%', background:'oklch(0.55 0.28 295 / 0.35)', transition:'width .3s ease', borderRadius:'inherit' }} />
                )}
                <span style={{ position:'relative', zIndex:1 }}>
                  {submitting ? '⏳ Uploading… ' + uploadPct + '%' : '📤 Submit Project — Enhance Vision with AI'}
                </span>
              </button>
              <div style={{ marginTop:10, textAlign:'center', fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>
                Step 1: AI enhances your photo · Step 2: you click to generate 3D · AR view when ready
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserSubmitPage = SubmitPage;
})();