// =====================================================================
// Tasker24 — Account pages (Login/Register, Registration flow)
// =====================================================================
const { useState: useStateA } = React;

function LoginPage({ lang, onLogin }) {
  const [mode, setMode] = useStateA('login'); // login | register | forgot
  return (
    <main>
      <section className="py-4 py-md-5">
        <div className="container">
          <div className="row g-4 align-items-stretch">
            {/* Brand panel */}
            <div className="col-lg-5">
              <div className="t24-card h-100 p-4 p-md-5 position-relative overflow-hidden"
                   style={{background:'var(--t24-grad-blue)', color:'#fff', border:0, minHeight: 520}}>
                <div className="position-absolute top-0 end-0" style={{width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle at 30% 30%, rgba(34,211,238,.5), transparent 60%)', filter:'blur(20px)'}}></div>
                <div className="d-flex align-items-center gap-2 mb-4 position-relative">
                  <img src="assets/logo/tasker-logo.svg" style={{width:36,height:36, filter:'drop-shadow(0 0 12px rgba(34,211,238,.5))'}}/>
                  <span className="fw-bold fs-4">Tasker<span style={{color:'var(--t24-cyan)'}}>24</span></span>
                </div>
                <h2 className="mb-3 position-relative" style={{color:'#fff', lineHeight:1.15}}>The bridge between Service Takers & Providers.</h2>
                <p style={{color:'#C7D6F1'}} className="position-relative mb-4">Welcome back. Sign in to manage your services, messages and reviews — or create your account to join the Tasker24 community.</p>
                <ul className="list-unstyled d-flex flex-column gap-2 position-relative">
                  {['Verified, real Bangladeshi providers','Direct negotiation — no per-task commission','NID / Passport never shown publicly','24/7 support'].map((b,i)=>(
                    <li key={i} className="d-flex align-items-start gap-2"><i className="bi bi-check2-circle" style={{color:'var(--t24-cyan)'}}></i><span>{b}</span></li>
                  ))}
                </ul>
                <div className="position-relative mt-4">
                  <SafetyCard lang={lang} compact />
                </div>
              </div>
            </div>
            {/* Form panel */}
            <div className="col-lg-7">
              <div className="t24-card h-100 p-4 p-md-5">
                <div className="d-flex align-items-center justify-content-between mb-4">
                  <h3 className="mb-0">{mode==='login'?'Sign in to Tasker24':mode==='forgot'?'Reset your password':'Create your account'}</h3>
                  <div className="t24-seg">
                    <button className={mode==='login'?'active':''} onClick={()=>setMode('login')}>Login</button>
                    <button className={mode==='register'?'active':''} onClick={()=>setMode('register')}>Register</button>
                  </div>
                </div>

                {mode==='login' && (
                  <form onSubmit={(e)=>{ e.preventDefault(); onLogin(true); window.location.hash='#/'; }}>
                    <div className="mb-3">
                      <label className="form-label">Email or phone</label>
                      <input className="form-control" placeholder="you@email.com or 01XXXXXXXXX"/>
                    </div>
                    <div className="mb-3">
                      <div className="d-flex justify-content-between">
                        <label className="form-label">Password</label>
                        <button type="button" className="btn btn-link p-0 small" onClick={()=>setMode('forgot')}>Forgot password?</button>
                      </div>
                      <input className="form-control" type="password" placeholder="••••••••"/>
                    </div>
                    <div className="d-flex justify-content-between align-items-center mb-3">
                      <label className="d-flex align-items-center gap-2 small">
                        <input type="checkbox" className="form-check-input"/> Keep me signed in
                      </label>
                      <span className="t24-chip"><i className="bi bi-shield-lock"></i> Secure 2-factor</span>
                    </div>
                    <button className="btn btn-t24 w-100 btn-lg mb-2">Sign in <i className="bi bi-arrow-right ms-1"></i></button>
                    <div className="text-center small text-muted">No account? <a href="#" onClick={(e)=>{e.preventDefault();setMode('register');}}>Create one</a></div>
                  </form>
                )}

                {mode==='register' && (
                  <div>
                    <div className="row g-3 mb-3">
                      <div className="col-sm-6"><label className="form-label">Full name</label><input className="form-control" placeholder="As on NID"/></div>
                      <div className="col-sm-6"><label className="form-label">Phone</label><input className="form-control" placeholder="01XXXXXXXXX"/></div>
                      <div className="col-sm-6"><label className="form-label">Email</label><input className="form-control" placeholder="you@email.com"/></div>
                      <div className="col-sm-6"><label className="form-label">Password</label><input className="form-control" type="password" placeholder="At least 8 chars"/></div>
                    </div>
                    <label className="form-label">Choose a role</label>
                    <div className="row g-2 mb-3">
                      {[
                        ['taker','Service Taker','bi-person-heart'],
                        ['provider','Provider / Freelancer','bi-briefcase'],
                        ['both','Both','bi-arrow-left-right']
                      ].map(([id,lbl,ic])=>(
                        <div className="col-sm-4" key={id}>
                          <label className="t24-card p-3 d-flex align-items-center gap-2" style={{cursor:'pointer'}}>
                            <input type="radio" name="role" defaultChecked={id==='taker'}/>
                            <i className={"bi "+ic} style={{color:'var(--t24-blue)'}}></i>
                            <span className="small fw-semibold">{lbl}</span>
                          </label>
                        </div>
                      ))}
                    </div>
                    <label className="d-flex align-items-start gap-2 small mb-3">
                      <input type="checkbox" className="form-check-input mt-1" />
                      <span>I agree to the <a href="#/terms">Terms</a>, <a href="#/privacy">Privacy</a> & <a href="#/refund">Refund</a> policies, and I confirm Tasker24 will never ask for my password, PIN or OTP.</span>
                    </label>
                    <a href="#/registration" className="btn btn-t24 w-100 btn-lg">Proceed to registration flow <i className="bi bi-arrow-right ms-1"></i></a>
                  </div>
                )}

                {mode==='forgot' && (
                  <form onSubmit={(e)=>{ e.preventDefault(); setMode('login'); }}>
                    <p className="text-muted">Enter your email and we'll send a reset link. Never share the link or any OTP — Tasker24 staff will never ask for it.</p>
                    <input className="form-control mb-3" placeholder="you@email.com"/>
                    <button className="btn btn-t24 w-100">Send reset link</button>
                    <button type="button" className="btn btn-link mt-2 w-100" onClick={()=>setMode('login')}><i className="bi bi-arrow-left me-1"></i> Back to sign in</button>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
// Registration flow page (role cards → terms → form → payment → verify)
// =====================================================================
function RegistrationPage({ lang }) {
  const [role, setRole] = useStateA(null);     // taker | provider | both
  const [step, setStep] = useStateA(1);        // 1..5
  const stepLabels = ['Choose role','Agree to terms','Profile details','Payment','Verify email'];

  const rolePlans = [
    { id:'taker',    title:'Service Taker',      price:200, benefits:['Browse 94+ services','Direct messaging','Save providers','Review after task'], req:['Name, phone, email','NID number (private)','Profile photo'] },
    { id:'provider', title:'Service Provider',   price:200, benefits:['Public service profile','Add multiple services','Direct payments — no cut','Show certificates'], req:['Name, phone, email','NID/Passport (private)','Service certificates','Working area'], featured:true },
    { id:'both',     title:'Taker & Provider',   price:400, benefits:['Both roles, one profile','Earn while you spend','Switch context anytime','Priority listing'], req:['All of the above'] },
  ];

  return (
    <main>
      <PageHero eyebrow="Registration" title="Join Tasker24"
        subtitle="Five quick steps — pick a role, agree to terms, complete your profile, pay the one-time registration fee, then verify your email."
        crumbs={[{label:'Home', href:'#/'}, {label:'Registration'}]} />

      <section className="py-4 py-md-5">
        <div className="container">
          {/* Stepper */}
          <div className="t24-card p-3 p-md-4 mb-4">
            <div className="d-flex align-items-center justify-content-between flex-wrap gap-3">
              {stepLabels.map((lbl, idx) => {
                const n = idx+1;
                const done = step > n; const active = step === n;
                return (
                  <div key={lbl} className="d-flex align-items-center gap-2 flex-grow-1">
                    <div className="t24-iconbox t24-iconbox--sm" style={{
                      background: done?'var(--t24-success)':(active?'var(--t24-grad-blue)':'var(--t24-surface-2)'),
                      border: 'none', color:'#fff', fontWeight:800,
                    }}>
                      {done ? <i className="bi bi-check-lg"/> : <span style={{color: active?'#fff':'var(--t24-text-3)'}}>{n}</span>}
                    </div>
                    <div className="d-none d-md-block">
                      <div className="small text-muted">Step {n}</div>
                      <strong style={{fontSize:13}}>{lbl}</strong>
                    </div>
                    {idx<stepLabels.length-1 && <div className="flex-grow-1" style={{height:2, background: done?'var(--t24-success)':'var(--t24-card-border)', borderRadius:2, margin:'0 6px'}}/>}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Body */}
          {step===1 && (
            <div>
              <SectionTitle eyebrow="Step 1" title="Choose your role" subtitle="Pick the role that matches how you'll use Tasker24. You can change later from your dashboard." />
              <div className="row g-3">
                {rolePlans.map(p => (
                  <div className="col-md-4" key={p.id}>
                    <div className={"t24-card t24-card--lift h-100 p-4 d-flex flex-column "+(role===p.id?'t24-card--active':'')+(p.featured?' border-2':'')}
                         onClick={()=>setRole(p.id)} style={{cursor:'pointer'}}>
                      {p.featured && <div className="t24-chip t24-chip--cyan mb-2 align-self-start"><i className="bi bi-stars"></i> Recommended</div>}
                      <strong className="d-block mb-1" style={{fontSize:18}}>{p.title}</strong>
                      <div className="display-6 fw-bold mb-1" style={{color:'var(--t24-blue)'}}>৳{p.price}</div>
                      <div className="small text-muted mb-3">One-time registration · placeholder</div>
                      <small className="text-muted text-uppercase" style={{letterSpacing:'.1em', fontSize:11}}>Benefits</small>
                      <ul className="list-unstyled mb-3 mt-1">
                        {p.benefits.map((b,i)=>(<li key={i} className="d-flex align-items-start gap-2 small mb-1"><i className="bi bi-check-circle-fill" style={{color:'var(--t24-success)'}}></i>{b}</li>))}
                      </ul>
                      <small className="text-muted text-uppercase" style={{letterSpacing:'.1em', fontSize:11}}>You'll need</small>
                      <ul className="list-unstyled mb-3 mt-1">
                        {p.req.map((b,i)=>(<li key={i} className="d-flex align-items-start gap-2 small mb-1 text-muted"><i className="bi bi-dot"></i>{b}</li>))}
                      </ul>
                      <button className={"btn mt-auto "+(role===p.id?'btn-t24':'btn-t24-outline')}>{role===p.id?'Selected':'Select role'}</button>
                    </div>
                  </div>
                ))}
              </div>
              <div className="d-flex justify-content-end mt-4">
                <button className="btn btn-t24 btn-lg" disabled={!role} onClick={()=>setStep(2)}>Proceed to terms <i className="bi bi-arrow-right ms-1"></i></button>
              </div>
            </div>
          )}

          {step===2 && (
            <div>
              <SectionTitle eyebrow="Step 2" title="Agree to terms" subtitle="Quick summary. Read the full Terms & Privacy before confirming." />
              <div className="row g-3">
                <div className="col-lg-8">
                  <div className="t24-card p-4">
                    <ul className="list-unstyled d-flex flex-column gap-2">
                      {[
                        ['Tasker24 connects parties only','You and your counter-party negotiate price and complete payment directly.'],
                        ['NID / Passport stays private','Identity documents are collected for verification and never shown publicly.'],
                        ['Never share Password / PIN / OTP','Tasker24 staff will never ask for these. Anyone who does is a scammer.'],
                        ['Honest reviews stay public','Reviews are removed only when they breach community guidelines.'],
                        ['Registration fee is one-time','Refund policy applies as detailed in the Refund Policy page.'],
                      ].map(([h, b], i) => (
                        <li key={i} className="d-flex gap-3 align-items-start">
                          <i className="bi bi-check2-square mt-1" style={{color:'var(--t24-blue)', fontSize:20}}></i>
                          <div><strong>{h}</strong><div className="small text-muted">{b}</div></div>
                        </li>
                      ))}
                    </ul>
                    <label className="d-flex align-items-start gap-2 mt-3">
                      <input type="checkbox" className="form-check-input mt-1"/>
                      <span className="small">I have read and agree to the <a href="#/terms">Terms & Conditions</a>, <a href="#/privacy">Privacy Policy</a> and <a href="#/refund">Refund Policy</a>.</span>
                    </label>
                  </div>
                </div>
                <div className="col-lg-4"><SafetyCard lang={lang}/></div>
              </div>
              <div className="d-flex justify-content-between mt-4">
                <button className="btn btn-t24-outline" onClick={()=>setStep(1)}><i className="bi bi-arrow-left me-1"></i> Back</button>
                <button className="btn btn-t24 btn-lg" onClick={()=>setStep(3)}>Continue <i className="bi bi-arrow-right ms-1"></i></button>
              </div>
            </div>
          )}

          {step===3 && (
            <div>
              <SectionTitle eyebrow="Step 3" title="Complete your profile" subtitle="Tell us about you and the services you provide (if applicable)." />
              <div className="row g-3">
                <div className="col-lg-8">
                  <div className="t24-card p-4">
                    <div className="row g-3">
                      <div className="col-sm-6"><label className="form-label">Full name</label><input className="form-control"/></div>
                      <div className="col-sm-6"><label className="form-label">Date of birth</label><input className="form-control" type="date"/></div>
                      <div className="col-sm-6"><label className="form-label">Phone</label><input className="form-control" placeholder="01XXXXXXXXX"/></div>
                      <div className="col-sm-6"><label className="form-label">Email</label><input className="form-control"/></div>
                      <div className="col-sm-6">
                        <label className="form-label">Document type</label>
                        <select className="form-select"><option>NID</option><option>Passport</option><option>Birth Registration (with guardian)</option></select>
                      </div>
                      <div className="col-sm-6">
                        <label className="form-label">Document number <small className="text-muted">(private)</small></label>
                        <input className="form-control" placeholder="Hidden from other users"/>
                      </div>
                      <div className="col-12">
                        <label className="form-label">Address</label>
                        <input className="form-control mb-2" placeholder="Street, area"/>
                        <div className="row g-2">
                          <div className="col"><select className="form-select"><option>Dhaka</option><option>Chittagong</option><option>Rajshahi</option><option>Sylhet</option><option>Khulna</option><option>Barishal</option><option>Rangpur</option><option>Mymensingh</option></select></div>
                          <div className="col"><input className="form-control" placeholder="District"/></div>
                          <div className="col"><input className="form-control" placeholder="Thana"/></div>
                        </div>
                      </div>
                      {role!=='taker' && (
                        <>
                          <div className="col-12 mt-2">
                            <div className="t24-divider mb-3"></div>
                            <strong>Service profile</strong>
                            <div className="small text-muted">As a provider, list the services you offer.</div>
                          </div>
                          <div className="col-md-6">
                            <label className="form-label">Service categories</label>
                            <select className="form-select" multiple style={{minHeight:120}}>
                              {window.T24.cats.map(c=>(<option key={c.id}>{c.name}</option>))}
                            </select>
                            <div className="form-text">Hold Ctrl/Cmd to select multiple.</div>
                          </div>
                          <div className="col-md-6">
                            <label className="form-label">Services <span className="text-muted">(multi-select preview)</span></label>
                            <div className="t24-card p-2" style={{maxHeight:120, overflow:'auto'}}>
                              {['Tuition','Language Training (Bangla, English, Arabic)','Computer Training','Driving Training','Graphics Work','Software/App Development'].map((s,i)=>(
                                <label key={i} className="d-flex align-items-center gap-2 py-1 small"><input type="checkbox" className="form-check-input" defaultChecked={i<2}/> {s}</label>
                              ))}
                            </div>
                            <div className="form-text">Language Training opens a sub-dropdown for languages (Bangla, English, Arabic, Hindi, Urdu, Mandarin, …).</div>
                          </div>
                          <div className="col-md-6">
                            <label className="form-label">Certificate / experience (optional)</label>
                            <div className="t24-card p-3 d-flex align-items-center gap-3" style={{borderStyle:'dashed'}}>
                              <i className="bi bi-cloud-upload" style={{fontSize:24, color:'var(--t24-blue)'}}></i>
                              <div>
                                <div className="small fw-semibold">Drop a PDF/JPG</div>
                                <div className="small text-muted">Visible only to Tasker24 verification team.</div>
                              </div>
                            </div>
                          </div>
                          <div className="col-md-6">
                            <label className="form-label">Working area / availability</label>
                            <input className="form-control mb-2" placeholder="e.g. Dhanmondi, Mohammadpur (5 km radius)"/>
                            <div className="t24-seg t24-seg--lg">
                              <button>On-site</button><button className="active">Both</button><button>Online</button>
                            </div>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                </div>
                <div className="col-lg-4">
                  <div className="t24-card p-4 mb-3">
                    <strong className="d-block mb-1">Why we collect this</strong>
                    <p className="small text-muted mb-0">Name and contact help users reach you. Document number is only used internally for verification — never shown to the public.</p>
                  </div>
                  <SafetyCard lang={lang}/>
                </div>
              </div>
              <div className="d-flex justify-content-between mt-4">
                <button className="btn btn-t24-outline" onClick={()=>setStep(2)}><i className="bi bi-arrow-left me-1"></i> Back</button>
                <button className="btn btn-t24 btn-lg" onClick={()=>setStep(4)}>Continue to payment <i className="bi bi-arrow-right ms-1"></i></button>
              </div>
            </div>
          )}

          {step===4 && (
            <div>
              <SectionTitle eyebrow="Step 4" title="One-time registration payment" subtitle="Pick a payment method. After successful payment, you'll receive an email verification." />
              <div className="row g-3">
                <div className="col-lg-7">
                  <div className="t24-card p-4">
                    <strong className="d-block mb-2">Payment method</strong>
                    <div className="row g-2 mb-3">
                      {['bKash','Nagad','Rocket','Card (Visa/Master)'].map((m,i)=>(
                        <div className="col-6" key={i}>
                          <label className="t24-card p-3 d-flex align-items-center gap-2" style={{cursor:'pointer'}}>
                            <input type="radio" name="pay" defaultChecked={i===0}/>
                            <i className="bi bi-credit-card-2-front" style={{color:'var(--t24-blue)'}}></i>
                            <span className="small fw-semibold">{m}</span>
                          </label>
                        </div>
                      ))}
                    </div>
                    <div className="row g-3">
                      <div className="col-md-7"><label className="form-label">Mobile / Card number</label><input className="form-control" placeholder="01XXXXXXXXX"/></div>
                      <div className="col-md-5"><label className="form-label">Reference</label><input className="form-control" placeholder="Optional"/></div>
                    </div>
                  </div>
                </div>
                <div className="col-lg-5">
                  <div className="t24-card p-4">
                    <strong className="d-block mb-2">Order summary</strong>
                    <div className="d-flex justify-content-between py-1"><span className="text-muted">Role</span><span className="fw-semibold">{role || 'Service Taker'}</span></div>
                    <div className="d-flex justify-content-between py-1"><span className="text-muted">Registration fee</span><span>৳{role==='both'?400:200}.00</span></div>
                    <div className="d-flex justify-content-between py-1"><span className="text-muted">VAT</span><span>৳0.00</span></div>
                    <div className="t24-divider my-2"></div>
                    <div className="d-flex justify-content-between"><strong>Total</strong><strong style={{color:'var(--t24-blue)'}}>৳{role==='both'?400:200}.00</strong></div>
                    <div className="form-text mt-2">Refundable within 7 days, see <a href="#/refund">Refund Policy</a>.</div>
                  </div>
                </div>
              </div>
              <div className="d-flex justify-content-between mt-4">
                <button className="btn btn-t24-outline" onClick={()=>setStep(3)}><i className="bi bi-arrow-left me-1"></i> Back</button>
                <button className="btn btn-t24 btn-lg" onClick={()=>setStep(5)}>Pay & continue <i className="bi bi-arrow-right ms-1"></i></button>
              </div>
            </div>
          )}

          {step===5 && (
            <div>
              <div className="t24-card p-4 p-md-5 text-center" style={{maxWidth: 640, margin:'0 auto'}}>
                <div className="t24-iconbox mx-auto mb-3" style={{background:'var(--t24-grad-cyan)', border:0}}>
                  <i className="bi bi-envelope-check" style={{fontSize:34, color:'var(--t24-navy)'}}></i>
                </div>
                <h3 className="mb-2">Verify your email</h3>
                <p className="text-muted">We sent a verification link to <strong>you@email.com</strong>. Click it within 24 hours to activate your account.</p>
                <div className="d-flex flex-wrap gap-2 justify-content-center mt-3">
                  <a href="#/login" className="btn btn-t24">Go to sign in</a>
                  <button className="btn btn-t24-outline">Resend email</button>
                </div>
                <div className="mt-4"><SafetyCard lang={lang} compact /></div>
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { LoginPage, RegistrationPage });