/* global React */
const { useState } = React;

// ─────────── Draft Form Preview ───────────
const DraftPreview = ({ onDone, onBack }) => {
  return (
    <div style={{flex:1, overflow:'auto', background:'var(--bg-sunk)'}}>
      <div style={{padding:'20px 28px', borderBottom:'1px solid var(--line)', background:'var(--bg-elev)', display:'flex', justifyContent:'space-between', alignItems:'center', position:'sticky', top:0, zIndex:5}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <button className="icon-btn" onClick={onBack}><Icon name="arrowL" size={16}/></button>
          <div>
            <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.14em', textTransform:'uppercase'}}>Draft · SSA-16 preview</div>
            <div style={{fontFamily:'var(--serif)', fontSize:20}}>Your SSDI Application</div>
          </div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <Btn variant="ghost" size="sm"><Icon name="print" size={13}/> Print</Btn>
          <Btn variant="ghost" size="sm"><Icon name="download" size={13}/> Download</Btn>
          <Btn variant="primary" size="sm" onClick={onDone}>Continue to final review →</Btn>
        </div>
      </div>

      <div style={{maxWidth: 820, margin:'28px auto 80px', background:'var(--bg-elev)', boxShadow:'var(--shadow-lg)', border:'1px solid var(--line)', position:'relative'}}>
        {/* DRAFT watermark */}
        <div style={{position:'absolute', inset:0, pointerEvents:'none', overflow:'hidden'}}>
          <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%) rotate(-24deg)', fontFamily:'var(--serif)', fontSize:180, color:'var(--line-strong)', opacity:.22, letterSpacing:'.05em'}}>DRAFT</div>
        </div>

        <div style={{padding:'42px 56px', position:'relative'}}>
          <div style={{display:'flex', justifyContent:'space-between', borderBottom:'2px solid var(--ink)', paddingBottom:12, marginBottom:22}}>
            <div>
              <div className="mono tiny" style={{letterSpacing:'.1em', color:'var(--ink-3)'}}>FORM SSA-16-BK</div>
              <div style={{fontFamily:'var(--serif)', fontSize:24, marginTop:4}}>Application for Disability Insurance Benefits</div>
            </div>
            <div className="tiny" style={{textAlign:'right', color:'var(--ink-3)'}}>
              OMB No. 0960-0618<br/>
              Page 1 of 6
            </div>
          </div>

          <div className="flag warn" style={{marginBottom:22}}>
            <div className="ico"><Icon name="info" size={15}/></div>
            <div><strong>This is a draft preview only.</strong> Nothing has been submitted to the Social Security Administration. A human reviewer will check this before anything is filed.</div>
          </div>

          <section style={{marginBottom:26}}>
            <div className="mono tiny" style={{letterSpacing:'.14em', textTransform:'uppercase', color:'var(--accent-ink)', marginBottom:10, borderBottom:'1px solid var(--line)', paddingBottom:6}}>Section 1 — Applicant Information</div>
            <div className="grid-2" style={{gap:16, marginTop:10}}>
              {[
                ['Full name (last, first, middle)', 'Ramirez, Maria L.'],
                ['Social Security number', '•••-••-4719'],
                ['Date of birth', 'June 12, 1979'],
                ['Place of birth', 'Newark, NJ, USA'],
                ['Mailing address', '1248 Elm St, Apt 3B, Brooklyn, NY 11226'],
                ['Phone', '(347) 555-0132'],
              ].map(([k,v]) => (
                <div key={k}>
                  <div className="tiny" style={{color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', fontSize:10}}>{k}</div>
                  <div style={{fontSize:14, marginTop:4, paddingBottom:6, borderBottom:'1px dotted var(--line-strong)'}}>{v}</div>
                </div>
              ))}
            </div>
          </section>

          <section style={{marginBottom:26}}>
            <div className="mono tiny" style={{letterSpacing:'.14em', textTransform:'uppercase', color:'var(--accent-ink)', marginBottom:10, borderBottom:'1px solid var(--line)', paddingBottom:6}}>Section 2 — Medical Condition</div>
            <div style={{marginTop:10}}>
              <div className="tiny" style={{color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', fontSize:10}}>Primary condition(s) preventing you from working</div>
              <div style={{fontSize:14, marginTop:6, lineHeight:1.7}}>
                Applicant reports fibromyalgia with widespread pain, cognitive fog, and chronic fatigue. Onset of functional impairment documented as March 2023 following a workplace fall. Symptoms have persisted continuously for more than 12 months and are expected to last another 12+ months per treating physician (Dr. A. Patel, MD).
              </div>
            </div>
            <div className="grid-2" style={{gap:16, marginTop:16}}>
              <div>
                <div className="tiny" style={{color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', fontSize:10}}>First treatment date</div>
                <div style={{fontSize:14, marginTop:4, paddingBottom:6, borderBottom:'1px dotted var(--line-strong)'}}>February 14, 2023</div>
              </div>
              <div>
                <div className="tiny" style={{color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', fontSize:10}}>Most recent visit</div>
                <div style={{fontSize:14, marginTop:4, paddingBottom:6, borderBottom:'1px dotted var(--line-strong)'}}>November 22, 2024</div>
              </div>
            </div>
          </section>

          <section style={{marginBottom:26}}>
            <div className="mono tiny" style={{letterSpacing:'.14em', textTransform:'uppercase', color:'var(--accent-ink)', marginBottom:10, borderBottom:'1px solid var(--line)', paddingBottom:6}}>Section 3 — Work History (last 15 years)</div>
            <table className="table" style={{marginTop:10, border:'1px solid var(--line)'}}>
              <thead>
                <tr><th>Employer</th><th>Role</th><th>From</th><th>To</th></tr>
              </thead>
              <tbody>
                <tr><td>Riverside Medical Center</td><td>Admin Assistant</td><td>Aug 2019</td><td>Mar 2023</td></tr>
                <tr><td>Bright Start Daycare</td><td>Assistant Teacher</td><td>Jun 2014</td><td>Jul 2019</td></tr>
                <tr><td>Target Stores #2187</td><td>Cashier</td><td>Oct 2010</td><td>May 2014</td></tr>
              </tbody>
            </table>
          </section>

          <div className="tiny" style={{textAlign:'center', color:'var(--ink-3)', paddingTop:22, borderTop:'1px solid var(--line)'}}>
            Continued on page 2 · generated by GovEase DCW · Not for submission
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────── Final Review & E-sign ───────────
const FinalReview = ({ onDone, onBack }) => {
  const { tweaks } = useApp();
  const T = tweaks.lang === 'ES';
  const [acks, setAcks] = useState({ a:false, b:false, c:false });
  const [sig, setSig] = useState('');
  const ready = Object.values(acks).every(Boolean) && sig.trim().length > 3;
  return (
    <div style={{flex:1, overflow:'auto'}}>
      <div style={{maxWidth:820, margin:'0 auto', padding:'32px 36px 80px'}}>
        <button className="icon-btn" onClick={onBack} style={{marginBottom:6}}><Icon name="arrowL" size={16}/></button>
        <div className="eyebrow" style={{marginBottom:14}}>{T?'Revisión final':'Final review & acknowledgment'}</div>
        <h1 className="h-section" style={{fontSize:34, marginBottom:8}}>{T?'Último paso antes de enviar.':'Last step before we file.'}</h1>
        <p className="muted" style={{marginBottom:26, fontSize:14, maxWidth:620}}>{T?'Léalo con calma. Una vez firmado, su reviewer enviará el paquete a la SSA dentro de 24 horas.':'Take your time. Once you sign, your reviewer submits the package to the SSA within 24 hours.'}</p>

        {/* Bilingual summary cards */}
        <div className="grid-2" style={{gap:14, marginBottom:20}}>
          {[
            { en:'Applicant', es:'Solicitante', v:'Maria L. Ramirez · DOB Jun 12, 1979' },
            { en:'Case type', es:'Tipo de caso', v:'Social Security Disability Insurance (SSDI)' },
            { en:'Primary condition', es:'Condición principal', v:'Fibromyalgia · onset Mar 2023' },
            { en:'Documents attached', es:'Documentos adjuntos', v:'8 files · 12.4 MB' },
            { en:'Reviewer', es:'Revisor', v:'J. Delacruz · approved Apr 22' },
            { en:'Filing target', es:'Fecha de envío', v:'Apr 24, 2026 · 9:00 AM ET' },
          ].map((row, i) => (
            <div key={i} className="card card-pad" style={{padding:'14px 16px'}}>
              <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.12em', textTransform:'uppercase'}}>{row.en} · <span style={{opacity:.6}}>{row.es}</span></div>
              <div style={{fontSize:14, marginTop:4, fontWeight:500}}>{row.v}</div>
            </div>
          ))}
        </div>

        <div className="card" style={{marginBottom:20}}>
          <div style={{padding:'14px 20px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between'}}>
            <h3 style={{fontFamily:'var(--serif)', fontSize:18, fontWeight:400}}>Your acknowledgment</h3>
            <Badge variant="accent" dot>Bilingual record</Badge>
          </div>
          <div style={{padding:'8px 20px'}}>
            {[
              { k:'a', en:'I confirm all information is true and complete to the best of my knowledge.', es:'Confirmo que toda la información es verdadera y completa a mi leal saber.' },
              { k:'b', en:'I understand this is submitted to a federal agency and false statements are punishable by law.', es:'Entiendo que se envía a una agencia federal y las declaraciones falsas son punibles por ley.' },
              { k:'c', en:'I authorize GovEase and the assigned reviewer to file this packet on my behalf.', es:'Autorizo a GovEase y al revisor asignado a presentar este paquete en mi nombre.' },
            ].map(a => (
              <label key={a.k} className="check" style={{padding:'14px 0', borderBottom:'1px solid var(--line)', cursor:'pointer'}}>
                <input type="checkbox" checked={acks[a.k]} onChange={e=>setAcks(s=>({...s, [a.k]:e.target.checked}))}/>
                <div>
                  <div style={{fontSize:13.5}}>{a.en}</div>
                  <div className="tiny" style={{marginTop:3, fontStyle:'italic'}}>{a.es}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div className="card card-pad">
          <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.14em', textTransform:'uppercase', marginBottom:10}}>Digital signature</div>
          <Field label="Type your full legal name">
            <input className="input" placeholder="Maria L. Ramirez" value={sig} onChange={e=>setSig(e.target.value)}/>
          </Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14}}>
            <div>
              <div className="tiny" style={{textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', color:'var(--ink-3)'}}>Signed by</div>
              <div style={{fontFamily:'var(--serif)', fontSize:30, minHeight:40, fontStyle:'italic', color: sig ? 'var(--ink)' : 'var(--ink-4)', borderBottom:'1px solid var(--line-strong)', paddingBottom:4}}>{sig || '—'}</div>
            </div>
            <div>
              <div className="tiny" style={{textTransform:'uppercase', letterSpacing:'.08em', fontFamily:'var(--mono)', color:'var(--ink-3)'}}>Date</div>
              <div style={{fontFamily:'var(--mono)', fontSize:16, paddingTop:12, borderBottom:'1px solid var(--line-strong)', paddingBottom:4}}>Apr 23, 2026 · 3:47 PM ET</div>
            </div>
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', marginTop:26, alignItems:'center'}}>
          <Btn variant="ghost" onClick={onBack}>Go back to draft</Btn>
          <Btn variant="accent" size="lg" onClick={ready?onDone:null} disabled={!ready} style={!ready?{opacity:.5, pointerEvents:'none'}:null}>
            <Icon name="pen" size={14}/> Sign & submit to SSA
          </Btn>
        </div>
      </div>
    </div>
  );
};

// ─────────── Secure Delivery ───────────
const DeliveryScreen = ({ onDone }) => {
  return (
    <div className="center-wrap" style={{padding:'40px 24px'}}>
      <div style={{width:'100%', maxWidth:620, textAlign:'center'}} className="rise">
        <div style={{width:64, height:64, margin:'0 auto 18px', borderRadius:20, background:'var(--accent-soft)', color:'var(--accent-ink)', display:'grid', placeItems:'center'}}>
          <Icon name="shieldCheck" size={30}/>
        </div>
        <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex', marginBottom:10}}>Case GE-2026-4782 · submitted</div>
        <h1 className="h-display" style={{fontSize: 48}}>Your packet is <em>on its way.</em></h1>
        <p className="lead" style={{marginTop:16, fontSize:15, maxWidth:480, marginLeft:'auto', marginRight:'auto'}}>
          Everything was filed with the SSA at <strong style={{color:'var(--ink)'}}>Apr 24, 2026 · 9:02 AM ET</strong>. Confirmation emailed to maria.r@outlook.com.
        </p>

        <div className="card" style={{marginTop:32, textAlign:'left', padding:'18px 22px'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
            <div>
              <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.12em', textTransform:'uppercase'}}>Your full packet</div>
              <div style={{fontFamily:'var(--serif)', fontSize:20, marginTop:4}}>SSDI_Maria_Ramirez.zip</div>
            </div>
            <Btn variant="primary"><Icon name="download" size={14}/> Download</Btn>
          </div>
          <div style={{display:'flex', gap:16, fontSize:12.5, color:'var(--ink-3)', borderTop:'1px solid var(--line)', paddingTop:12}}>
            <span><Icon name="doc" size={12} style={{verticalAlign:'-2px'}}/> 8 documents</span>
            <span><Icon name="clock" size={12} style={{verticalAlign:'-2px'}}/> Link expires in 72h</span>
            <span><Icon name="lock" size={12} style={{verticalAlign:'-2px'}}/> Password-protected</span>
          </div>
        </div>

        <div className="flag info" style={{marginTop:18, textAlign:'left'}}>
          <div className="ico"><Icon name="info" size={16}/></div>
          <div>
            <strong>What happens next?</strong> The SSA typically takes 3–5 months to reach a decision. You'll get an SSA-acknowledgment letter in the mail within 14 days. Keep that letter — you'll need the case number on it for any follow-up.
          </div>
        </div>

        <div style={{display:'flex', gap:10, marginTop:24, justifyContent:'center'}}>
          <Btn variant="secondary" onClick={onDone}>Go to dashboard</Btn>
          <Btn variant="ghost">Refer a friend</Btn>
        </div>
      </div>
    </div>
  );
};

// ─────────── Retention / Delete Request ───────────
const RetentionScreen = ({ onBack }) => {
  const [confirm, setConfirm] = useState(false);
  return (
    <div style={{flex:1, overflow:'auto'}}>
      <div style={{maxWidth:720, margin:'0 auto', padding:'32px 36px 80px'}}>
        <button className="icon-btn" onClick={onBack} style={{marginBottom:6}}><Icon name="arrowL" size={16}/></button>
        <div className="eyebrow" style={{marginBottom:10}}>Data & privacy</div>
        <h1 className="h-section" style={{fontSize:32, marginBottom:8}}>Your data, your choice.</h1>
        <p className="muted" style={{marginBottom:22, fontSize:14}}>Here\'s what we hold, for how long, and how to get rid of it.</p>

        <div className="card" style={{marginBottom:18}}>
          <div style={{padding:'14px 20px', borderBottom:'1px solid var(--line)'}}>
            <h3 style={{fontFamily:'var(--serif)', fontSize:20, fontWeight:400}}>Retention policy</h3>
          </div>
          <div style={{padding:'14px 20px'}}>
            <div className="col" style={{gap:14}}>
              {[
                { label:'Your intake answers', span:'24 months after submission', why:'Required by SSA audit rules.' },
                { label:'Uploaded documents', span:'24 months after submission, then deleted', why:'Originals returned to you; copies erased.' },
                { label:'Audit log & consent records', span:'7 years (legal requirement)', why:'Anonymized after case closure.' },
                { label:'Account & contact info', span:'Until you delete your account', why:'Used only to log you back in.' },
              ].map((r,i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'1.2fr 1fr auto', gap:16, paddingBottom:14, borderBottom: i<3 ? '1px solid var(--line)' : '0', alignItems:'start'}}>
                  <div>
                    <div style={{fontSize:13.5, fontWeight:500}}>{r.label}</div>
                    <div className="tiny" style={{marginTop:2}}>{r.why}</div>
                  </div>
                  <div style={{fontSize:13, color:'var(--ink-2)'}}>{r.span}</div>
                  <Icon name="shield" size={14} style={{color:'var(--accent)', marginTop:2}}/>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card" style={{background:'var(--danger-soft)', borderColor:'transparent'}}>
          <div style={{padding:'18px 22px'}}>
            <div style={{display:'flex', gap:12, alignItems:'flex-start'}}>
              <div style={{width:36, height:36, borderRadius:10, background:'var(--bg-elev)', color:'var(--danger)', display:'grid', placeItems:'center'}}>
                <Icon name="trash" size={16}/>
              </div>
              <div style={{flex:1}}>
                <h3 style={{fontFamily:'var(--serif)', fontSize:20, fontWeight:400, marginBottom:6}}>Delete everything</h3>
                <p style={{fontSize:13, color:'var(--ink-2)', margin:0, lineHeight:1.55}}>Permanently erases your intake answers, uploaded documents, and personal details. <strong>Cannot be undone.</strong> Audit logs are retained per legal requirements (anonymized).</p>
                {!confirm ? (
                  <Btn variant="secondary" size="sm" style={{marginTop:14, color:'var(--danger)', borderColor:'var(--danger)'}} onClick={()=>setConfirm(true)}>Request deletion</Btn>
                ) : (
                  <div style={{marginTop:14, padding:14, background:'var(--bg-elev)', borderRadius:10, border:'1px solid var(--line)'}}>
                    <div style={{fontSize:13, marginBottom:10}}>Type <strong className="mono">DELETE</strong> to confirm:</div>
                    <input className="input" style={{marginBottom:10}} placeholder="DELETE"/>
                    <div style={{display:'flex', gap:8}}>
                      <Btn variant="secondary" size="sm" onClick={()=>setConfirm(false)}>Cancel</Btn>
                      <Btn variant="primary" size="sm" style={{background:'var(--danger)', color:'#fff'}}>Yes, delete my case</Btn>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DraftPreview, FinalReview, DeliveryScreen, RetentionScreen });