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

// ─────────── Document Checklist ───────────
const DocChecklist = ({ onDone, onUpload }) => {
  const docs = [
    { k:'id', title:'Government photo ID', req:true, note:'Driver\'s license, state ID, or passport', status:'done', filename:'DL_Maria_R.pdf' },
    { k:'ssn', title:'Social Security card or W-2', req:true, note:'One document showing your SSN', status:'done', filename:'W2_2024.pdf' },
    { k:'med', title:'Medical records (last 12 months)', req:true, note:'From any treating doctor — we can help request these', status:'needs', why:'One file was blurry — please re-upload' },
    { k:'meds', title:'List of current medications', req:true, note:'Photo of labels or pharmacy printout works', status:'pending' },
    { k:'work', title:'Employment history (past 15 yrs)', req:true, note:'Job titles, employers, dates — we\'ll help you build this', status:'pending' },
    { k:'va', title:'DD-214 (if veteran)', req:false, note:'Skip if not applicable', status:'skip' },
    { k:'bank', title:'Bank statements (last 60 days)', req:false, note:'Optional for SSDI, required for SSI', status:'skip' },
  ];
  const progress = Math.round((docs.filter(d=>d.status==='done').length / docs.filter(d=>d.req).length) * 100);
  return (
    <div className="center-wrap" style={{padding:'40px 24px', alignItems:'flex-start'}}>
      <div style={{width:'100%', maxWidth: 820}} className="rise">
        <div className="eyebrow" style={{marginBottom:14}}>Personalized checklist</div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:20, marginBottom:8}}>
          <h1 className="h-section" style={{fontSize:32, maxWidth:520}}>Documents we need for your SSDI claim.</h1>
          <div style={{textAlign:'right'}}>
            <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.14em', textTransform:'uppercase'}}>Ready to file</div>
            <div style={{fontFamily:'var(--serif)', fontSize:36, lineHeight:1}}>{progress}%</div>
          </div>
        </div>
        <Progress value={progress}/>
        <p className="muted" style={{marginTop:14, marginBottom:22, fontSize:13.5}}>Upload what you have now. You can add the rest anytime. We'll tell you exactly what each one is for.</p>

        <div className="col" style={{gap:10}}>
          {docs.map(d => (
            <div key={d.k} className="card" style={{padding:'14px 18px', display:'grid', gridTemplateColumns:'22px 1fr auto', gap:14, alignItems:'center'}}>
              <div style={{
                width:22, height:22, borderRadius:'50%',
                background: d.status==='done'?'var(--accent)':d.status==='needs'?'var(--warn-soft)':'var(--bg-sunk)',
                color: d.status==='done'?'#fff':d.status==='needs'?'var(--warn)':'var(--ink-4)',
                display:'grid', placeItems:'center',
                border: d.status==='done'?'0':'1px solid var(--line-strong)'
              }}>
                {d.status==='done' && <Icon name="check" size={13} stroke={2.8}/>}
                {d.status==='needs' && <Icon name="warn" size={13}/>}
                {d.status==='pending' && <div style={{width:6, height:6, borderRadius:'50%', background:'var(--ink-4)'}}/>}
                {d.status==='skip' && <Icon name="minus" size={12}/>}
              </div>
              <div>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{fontSize:14, fontWeight:500}}>{d.title}</span>
                  {d.req ? <Badge>Required</Badge> : <Badge variant="info">Optional</Badge>}
                  {d.status === 'needs' && <Badge variant="warn" dot>Re-upload</Badge>}
                </div>
                <div className="tiny" style={{marginTop:3}}>
                  {d.status === 'done' && <><Icon name="docCheck" size={11} style={{verticalAlign:'-2px'}}/> <span style={{color:'var(--accent-ink)'}}>{d.filename}</span> · uploaded 2h ago</>}
                  {d.status === 'needs' && <span style={{color:'var(--warn)'}}>{d.why}</span>}
                  {d.status === 'pending' && d.note}
                  {d.status === 'skip' && d.note}
                </div>
              </div>
              <div style={{display:'flex', gap:6}}>
                {d.status === 'pending' && <Btn variant="secondary" size="sm" onClick={onUpload}><Icon name="upload" size={12}/> Upload</Btn>}
                {d.status === 'needs' && <Btn variant="accent" size="sm" onClick={onUpload}>Re-upload</Btn>}
                {d.status === 'done' && <Btn variant="ghost" size="sm"><Icon name="eye" size={12}/></Btn>}
                {d.status === 'skip' && <Btn variant="ghost" size="sm">Add anyway</Btn>}
              </div>
            </div>
          ))}
        </div>

        <Explainer>
          <strong>Don't have them all?</strong> We can request medical records on your behalf with a signed release form. This adds 10–14 days to the case but nothing comes out of your pocket.
        </Explainer>

        <div style={{display:'flex', justifyContent:'space-between', marginTop:26}}>
          <Btn variant="ghost"><Icon name="arrowL" size={14}/> Back to intake</Btn>
          <Btn variant="primary" size="lg" onClick={onDone}>Continue <Icon name="arrow" size={15}/></Btn>
        </div>
      </div>
    </div>
  );
};

// ─────────── Document Upload ───────────
const DocUpload = ({ onDone, onBack }) => {
  const [drag, setDrag] = useState(false);
  const [files, setFiles] = useState([
    { name:'Dr_Patel_Visit_2024-11.pdf', size:'1.2 MB', status:'ok', date:'Just now' },
    { name:'MRI_Report.jpg', size:'3.8 MB', status:'ok', date:'Just now' },
    { name:'IMG_4218.heic', size:'2.1 MB', status:'quality', date:'Just now' },
  ]);

  return (
    <div className="center-wrap" style={{padding:'40px 24px', alignItems:'flex-start'}}>
      <div style={{width:'100%', maxWidth: 720}} className="rise">
        <button className="icon-btn" onClick={onBack} style={{marginBottom:6}}><Icon name="arrowL" size={16}/></button>
        <div className="eyebrow" style={{marginBottom:12}}>Upload · Medical records</div>
        <h2 className="h-section" style={{fontSize:28, marginBottom:6}}>Drop in anything you have.</h2>
        <p className="muted" style={{marginBottom:20, fontSize:13.5}}>PDFs, photos, or scans. We\'ll read them and pull out what\'s relevant. Nothing is submitted to the SSA from here.</p>

        <div
          className={`doczone ${drag?'drag':''}`}
          onDragOver={e=>{e.preventDefault(); setDrag(true);}}
          onDragLeave={()=>setDrag(false)}
          onDrop={e=>{e.preventDefault(); setDrag(false);}}
        >
          <div style={{width:56, height:56, margin:'0 auto 12px', borderRadius:14, background:'var(--bg-elev)', display:'grid', placeItems:'center', color:'var(--accent)', border:'1px solid var(--line)'}}>
            <Icon name="upload" size={22}/>
          </div>
          <div style={{fontFamily:'var(--serif)', fontSize:22, marginBottom:4}}>Drop files here</div>
          <div className="tiny" style={{marginBottom:14}}>or <a style={{color:'var(--accent)', textDecoration:'underline', cursor:'pointer'}}>browse from your device</a></div>
          <div style={{display:'flex', gap:12, justifyContent:'center', fontSize:11.5, color:'var(--ink-3)', fontFamily:'var(--mono)', letterSpacing:'.05em'}}>
            <span>PDF</span><span>·</span><span>JPG</span><span>·</span><span>PNG</span><span>·</span><span>HEIC</span><span>·</span><span>up to 25MB</span>
          </div>
        </div>

        <div style={{display:'flex', gap:10, marginTop: 14}}>
          <Btn variant="secondary" block><Icon name="phone" size={13}/> Take a photo</Btn>
          <Btn variant="secondary" block><Icon name="folder" size={13}/> Import from Drive</Btn>
          <Btn variant="secondary" block><Icon name="mail" size={13}/> Email to us</Btn>
        </div>

        <div style={{marginTop: 26}}>
          <div className="mono tiny" style={{color:'var(--ink-4)', letterSpacing:'.14em', textTransform:'uppercase', marginBottom:10}}>This session</div>
          <div className="col" style={{gap:8}}>
            {files.map((f, i) => (
              <div key={i} className="doc-item">
                <div className="doc-ico">{f.name.split('.').pop().toUpperCase()}</div>
                <div>
                  <div style={{fontSize:13.5, fontWeight:500}}>{f.name}</div>
                  <div className="tiny">{f.size} · {f.date}</div>
                </div>
                <div style={{display:'flex', gap:8, alignItems:'center'}}>
                  {f.status === 'ok' && <Badge variant="accent" dot>Looks good</Badge>}
                  {f.status === 'quality' && <Badge variant="warn" dot>Check quality</Badge>}
                  <button className="icon-btn"><Icon name="more" size={16}/></button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="flag accent" style={{marginTop:20}}>
          <div className="ico"><Icon name="shield" size={16}/></div>
          <div><strong>Encrypted in transit and at rest.</strong> Files live in your case only. You can delete any file anytime.</div>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', marginTop:26}}>
          <Btn variant="ghost" onClick={onBack}>Skip for now</Btn>
          <Btn variant="primary" size="lg" onClick={onDone}>Continue <Icon name="arrow" size={15}/></Btn>
        </div>
      </div>
    </div>
  );
};

// ─────────── Upload Review (re-upload guidance) ───────────
const UploadReview = ({ onDone, onBack }) => {
  return (
    <div className="center-wrap" style={{padding:'40px 24px'}}>
      <div style={{width:'100%', maxWidth: 720}} className="rise">
        <button className="icon-btn" onClick={onBack} style={{marginBottom:6}}><Icon name="arrowL" size={16}/></button>
        <div className="eyebrow" style={{marginBottom:10, color:'var(--warn)'}}>Needs attention · 1 file</div>
        <h2 className="h-section" style={{fontSize:28, marginBottom:6}}>We couldn\'t quite read this one.</h2>
        <p className="muted" style={{marginBottom:22, fontSize:13.5}}>The image is a little blurry in the corners. A clearer photo will help the reviewer move faster — usually 2–3 days.</p>

        <div className="card" style={{display:'grid', gridTemplateColumns:'240px 1fr', gap:0, overflow:'hidden'}}>
          <div style={{background:'var(--bg-sunk)', display:'grid', placeItems:'center', padding:'32px 18px', borderRight:'1px solid var(--line)'}}>
            <div style={{
              width:'100%', aspectRatio:'3/4', borderRadius:8,
              background: 'repeating-linear-gradient(45deg, var(--line-strong), var(--line-strong) 4px, var(--bg-sunk) 4px, var(--bg-sunk) 12px)',
              border:'1px solid var(--line)', position:'relative'
            }}>
              <div style={{position:'absolute', inset:'35% 25%', background:'var(--bg-elev)', borderRadius:4, padding:8, fontFamily:'var(--mono)', fontSize:9, textAlign:'center', color:'var(--ink-3)'}}>IMG_4218.heic</div>
            </div>
          </div>
          <div style={{padding:'18px 20px'}}>
            <div style={{fontSize:14, fontWeight:500}}>IMG_4218.heic</div>
            <div className="tiny" style={{marginBottom:14}}>2.1 MB · uploaded 2 min ago</div>
            <div className="col" style={{gap:10}}>
              {[
                ['Corners are blurry', 'warn'],
                ['Text on right side is cut off', 'warn'],
                ['Looks like a photo of a screen', 'warn'],
              ].map(([msg, kind], i) => (
                <div key={i} style={{display:'flex', alignItems:'flex-start', gap:8, fontSize:13}}>
                  <Icon name="warn" size={14} style={{color:'var(--warn)', marginTop:2}}/>
                  <span>{msg}</span>
                </div>
              ))}
            </div>
            <div className="hr"/>
            <div className="tiny">
              <strong style={{color:'var(--ink)'}}>Tips for a clean shot:</strong><br/>
              · Lay the paper flat on a dark surface<br/>
              · Turn on good room light, avoid shadows<br/>
              · Frame all four corners before tapping
            </div>
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
          <Btn variant="ghost">Use this file anyway</Btn>
          <Btn variant="accent" size="lg" onClick={onDone}><Icon name="upload" size={14}/> Re-upload</Btn>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DocChecklist, DocUpload, UploadReview });
