const ROLES_G = [
  ['hard-hat', 'Labour Contractors', 'You supply workforce to construction sites.', 'Select'],
  ['building-2', 'EPC / general contractor', 'You execute packages and hire workforce for them.', 'Select'],
  ['landmark', 'Builder / developer', 'You run projects and procure workforce across them.', 'Select'],
];

const TRADES = ['Masonry', 'Helpers', 'Carpentry', 'Bar bending', 'Electrical', 'Plumbing', 'Painting', 'Shuttering', 'Welding', 'Tiling', 'Scaffolding', 'Plastering'];

function Field({ label, req, children, ph, type = 'text', half, value, onChange }) {
  return (
    <div className="field" style={half ? null : { gridColumn: '1 / -1' }}>
      <label>{label} {req && <i>*</i>}</label>
      {children || <input type={type} placeholder={ph} value={value} onChange={onChange} />}
    </div>
  );
}

function GetStartedPage() {
  const [step, setStep] = useState(0);
  const [role, setRole] = useState(1);
  const [trades, setTrades] = useState(['Masonry', 'Helpers']);
  const [pw, setPw] = useState('');
  const [pw2, setPw2] = useState('');
  const [showPw, setShowPw] = useState(false);
  const [gErr, setGErr] = useState('');
  const [busy, setBusy] = useState(false);
  const [noGst, setNoGst] = useState(false);
  const [f, setF] = useState({ business_name: '', contact: '', designation: '', mobile: '', email: '', location: 'Pune city', state: 'Maharashtra', address: '', gstin: '', pan: '', years: 'Under 2 years', capacity: '1 project', kyc_gstin: '', kyc_pan: '' });
  const set = k => e => setF(p => ({ ...p, [k]: e.target.value }));
  const saveRegistration = async () => {
    try {
      await LTData.submit('registrations', {
        role_type: ['contractor', 'epc', 'builder'][role],
        business_name: f.business_name, contact: f.contact, designation: f.designation,
        mobile: f.mobile, email: f.email, location: f.location, state: f.state, address: f.address,
        gstin: noGst ? '' : (f.kyc_gstin || f.gstin), pan: f.kyc_pan || f.pan, no_gst: noGst,
        years: f.years, capacity: f.capacity, trades: trades.join(', '),
        mobile_verified: false, status: 'Submitted',
      });
    } catch (e) { console.warn(e); }
  };
  const [pending, setPending] = useState(false);
  const createAccount = async () => {
    const v = (f.email || '').trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) { setGErr('Enter a valid email address.'); return false; }
    if (pw.length < 8) { setGErr('Use a password of at least eight characters.'); return false; }
    if (pw !== pw2) { setGErr('The two passwords do not match.'); return false; }
    setGErr(''); setBusy(true);
    try {
      const r = await LTAuth.signUp(v, pw, { business_name: f.business_name, contact: f.contact, role_type: ['contractor', 'epc', 'builder'][role] });
      const hasSession = !!(r && r.session);
      setPending(!hasSession);
      try {
        localStorage.setItem('lt_role', ['contractor', 'epc', 'builder'][role]);
        if (hasSession) { localStorage.setItem('lt_signed_in', '1'); localStorage.setItem('lt_verified', '0'); }
        else localStorage.removeItem('lt_signed_in');
      } catch (e) {}
      if (hasSession) { try { await LTAuth.sendVerification(v); } catch (e) {} }
      setBusy(false); return true;
    } catch (e) {
      const m = e.message || '';
      setGErr(/registered|exists/i.test(m) ? 'An account already exists for this address. Sign in instead.' : (m || 'Could not create the account.'));
      setBusy(false); return false;
    }
  };
  const next = async () => {
    if (step === 2 && !(await createAccount())) return;
    if (step === 3) saveRegistration();
    setStep(step + 1); window.scrollTo(0, 0);
  };
  const back = () => { setStep(Math.max(0, step - 1)); window.scrollTo(0, 0); };
  const isContractor = role === 0;

  const heads = [
    ['Choose your business type', 'Your role decides what you can do on the platform and which plan applies.'],
    ['Business details', 'Registered details as they appear on your GST certificate.'],
    ['Create your log-in', 'You will sign in with this email address and password. No code to wait for.'],
    ['GST & KYC verification', 'Bidding and posting open once verification clears. Documents are stored privately.'],
    ['Verification submitted', 'You can explore the dashboard while our team reviews your documents.'],
  ];

  return (
    <div className="authpage">
      <aside className="authside">
        <a href="index.html" className="logo on-dark"><span className="logo-mark">LT</span><span className="logo-t"><b>Labour Tech</b><span className="logo-tag">Digitizing India's construction workforce</span></span></a>
        <div>
          <h2>Register your business in a few minutes.</h2>
          <p style={{ marginTop: 14 }}>Verification is what makes the marketplace worth being on — so it comes first, before any transaction.</p>
        </div>
        <Ticks items={[
          <span><b>Role-based workspace</b> — contractors bid, buyers post and compare</span>,
          <span><b>GST & KYC checked</b> — status visible on every profile</span>,
          <span><b>No commission</b> — a flat monthly subscription shown in your account, GST invoiced</span>,
          <span><b>Team access</b> — HR, procurement, finance and viewers</span>,
        ]} />
        <div style={{ marginTop: 'auto', fontSize: 13, color: 'rgba(255,255,255,.55)' }}>Already registered? <a href="dashboard.html" style={{ color: '#fff', fontWeight: 600 }}>Log in</a></div>
      </aside>
      <main className="authmain">
        <div className="authcard">
          <div className="progress">{[0, 1, 2, 3, 4].map(i => <i key={i} className={i <= step ? 'on' : ''} />)}</div>
          <span className="eyebrow">Step {step + 1} of 5</span>
          <h2 className="h3" style={{ margin: '10px 0 8px' }}>{heads[step][0]}</h2>
          <p className="small" style={{ marginBottom: 26 }}>{heads[step][1]}</p>

          {step === 0 && (
            <div className="rolegrid">
              {ROLES_G.map(([ic, t, d, p], i) => (
                <button className={'rolecard' + (role === i ? ' on' : '')} key={t} onClick={() => { setRole(i); setF(p => ({ ...p, capacity: i === 0 ? 'Up to 50 workers' : '1 project' })); }}>
                  <span className="ic"><Icon n={ic} /></span>
                  <span><b>{t}</b><span>{d}</span></span>
                  <i>{p}</i>
                </button>
              ))}
            </div>
          )}

          {step === 1 && (
            <div className="formgrid">
              <Field label="Registered business name" req ph="As per GST certificate, or your trading name" value={f.business_name} onChange={set('business_name')} />
              <Field label="Contact person" req ph="Full name" half value={f.contact} onChange={set('contact')} />
              <Field label="Designation" ph="e.g. Director, Procurement Head" half value={f.designation} onChange={set('designation')} />
              <Field label="Mobile number" req ph="10-digit mobile" half value={f.mobile} onChange={set('mobile')} />
              <Field label="Email address" req ph="Business or personal email" half value={f.email} onChange={set('email')} />
              <Field label="Site location" req half><select value={f.location} onChange={set('location')}><option>Pune city</option><option>Pimpri-Chinchwad (PCMC)</option><option>Hinjawadi / Wakad</option><option>Baner / Balewadi</option><option>Kharadi / Wagholi</option><option>Hadapsar / Magarpatta</option><option>Ravet / Punawale</option><option>Chakan / Talegaon</option><option>Undri / NIBM</option><option>Alandi / Lonikand</option><option>Mulshi / Pirangut</option><option>Other location in Pune Metropolitan Region</option></select></Field>
              <Field label="State" req half><select value={f.state} onChange={set('state')}><option>Maharashtra</option><option>Karnataka</option><option>Telangana</option><option>Gujarat</option><option>Other</option></select></Field>
              <Field label="Business address" ph="Office address" value={f.address} onChange={set('address')} />
              <Field label={noGst ? 'GST number' : 'GST number'} half>
                <input placeholder="15-character GSTIN" disabled={noGst} value={f.gstin} onChange={set('gstin')} style={noGst ? { background: 'var(--mist)', color: 'var(--muted)' } : null} />
                <label className="optout"><input type="checkbox" checked={noGst} onChange={e => setNoGst(e.target.checked)} /> <span>Not registered under GST</span></label>
              </Field>
              <Field label="PAN" req={noGst} ph="10-character PAN" half value={f.pan} onChange={set('pan')} />
              <Field label="Years in business" half><select value={f.years} onChange={set('years')}><option>Under 2 years</option><option>2–5 years</option><option>5–10 years</option><option>Over 10 years</option></select></Field>
              {isContractor && <Field label="Workforce capacity" half><select value={f.capacity} onChange={set('capacity')}><option>Up to 50 workers</option><option>50–200 workers</option><option>200–500 workers</option><option>Over 500 workers</option></select></Field>}
              {!isContractor && <Field label="Active projects" half><select value={f.capacity} onChange={set('capacity')}><option>1 project</option><option>2–5 projects</option><option>6–15 projects</option><option>Over 15 projects</option></select></Field>}
              <Field label={isContractor ? 'Trades you supply' : 'Trades you hire for'} req>
                <div className="chips">
                  {TRADES.map(t => (
                    <button key={t} className="chip" style={trades.includes(t) ? { background: 'var(--lav)', borderColor: 'var(--blue)', color: 'var(--blue)', fontWeight: 600, cursor: 'pointer' } : { cursor: 'pointer' }}
                      onClick={() => setTrades(trades.includes(t) ? trades.filter(x => x !== t) : [...trades, t])}>{t}</button>
                  ))}
                </div>
              </Field>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: 'grid', gap: 16 }}>
              <div className="field"><label>Email address <i>*</i></label>
                <input value={f.email} onChange={e => { set('email')(e); setGErr(''); }} placeholder="you@company.com" /></div>
              {f.email && LTAuth.isFreemail(f.email) && <div className="note">That looks like a personal address. A company address is better — quotes, GST invoices and the monthly audit pack are all sent here.</div>}
              {[['Password', pw, setPw, 'At least 8 characters'], ['Confirm password', pw2, setPw2, 'Type it again']].map(([l, val, setVal, ph]) => (
                <div className="field" key={l}><label>{l} <i>*</i></label>
                  <div style={{ position: 'relative' }}>
                    <input type={showPw ? 'text' : 'password'} value={val} placeholder={ph} onChange={e => { setVal(e.target.value); setGErr(''); }} style={{ paddingRight: 62 }} />
                    <button onClick={() => setShowPw(!showPw)} style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', border: 0, background: 'none', color: 'var(--blue)', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>{showPw ? 'Hide' : 'Show'}</button>
                  </div>
                </div>
              ))}
              {gErr && <div className="note" style={{ borderColor: '#f3c2c2', background: '#fdf0f0', color: '#b3261e' }}>{gErr}</div>}
              <div className="note">Your account opens straight away. We also email a verification link — confirm it to unlock contact reveals and quote requests.</div>
            </div>
          )}

          {step === 3 && (
            <div style={{ display: 'grid', gap: 16 }}>
              {!noGst && <div className="field"><label>GSTIN <i>*</i></label><input placeholder="15-character GSTIN" value={f.kyc_gstin} onChange={set('kyc_gstin')} /></div>}
              <div className="field"><label>PAN <i>*</i></label><input placeholder="10-character PAN" value={f.kyc_pan} onChange={set('kyc_pan')} /></div>
              {noGst && <div className="note">You have told us you are not GST registered. We verify you on PAN and your registration or Udyam certificate instead. You can add a GSTIN later from your dashboard, and invoices we raise to you will not carry input credit until you do.</div>}
              {[['Certificate of registration or Udyam certificate', 'PDF or JPG, up to 10 MB'], noGst ? ['Shop Act / trade licence', 'PDF or JPG, up to 10 MB'] : ['GST certificate', 'PDF or JPG, up to 10 MB'], ['Identity document of authorised signatory', 'Aadhaar, passport or driving licence']].map(([t, h]) => (
                <div key={t}>
                  <label style={{ display: 'block', fontSize: 14, fontWeight: 600, color: 'var(--ink)', marginBottom: 6 }}>{t} <i style={{ color: 'var(--amber-ink)', fontStyle: 'normal' }}>*</i></label>
                  <div className="drop"><Icon n="upload-cloud" /><div style={{ marginTop: 8 }}>Drag a file here or <span style={{ color: 'var(--blue)', fontWeight: 600 }}>browse</span></div><div style={{ fontSize: 12.5, marginTop: 4 }}>{h}</div></div>
                </div>
              ))}
              <div className="note">Documents are held in restricted storage. Public profiles show verification status only — never the file itself.</div>
            </div>
          )}

          {step === 4 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div className="panel tint" style={{ display: 'grid', gap: 14 }}>
                {[['Log-in created', 'Done', 'ok'], ['Email address', pending ? 'Confirm the emailed link to sign in' : 'Verify to unlock reveals', 'wait'], ['Business details', 'Submitted', 'info'], [noGst ? 'PAN verification' : 'GST verification', 'Under review', 'wait'], ['KYC verification', 'Under review', 'wait'], ['Bidding access', 'Opens on approval', 'off']].map(([t, s, c]) => (
                  <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: 14.5, color: 'var(--ink)', fontWeight: 600 }}>{t}</span>
                    <span style={{ marginLeft: 'auto' }} className={'badge ' + c}>{s}</span>
                  </div>
                ))}
              </div>
              <p className="small">{pending
                ? 'Open the confirmation link we emailed to ' + f.email + ', then sign in with your password. Reviews of your documents usually complete within a few working days.'
                : 'Reviews usually complete within a few working days. You will be notified in-app and by email, and your subscription is not charged until verification clears.'}</p>
              <a className="btn btn-primary" href={pending ? 'login.html' : 'dashboard.html'}>{pending ? 'Go to log in' : 'Go to my dashboard'}</a>
            </div>
          )}

          <div style={{ display: 'flex', gap: 12, marginTop: 28, alignItems: 'center' }}>
            {step > 0 && step < 4 && <button className="btn btn-ghost" onClick={back}>Back</button>}
            {step < 4 && <button className="btn btn-primary" onClick={next} disabled={busy} style={{ marginLeft: 'auto' }}>{busy ? 'Creating account…' : (step === 3 ? 'Submit for verification' : (step === 2 ? 'Create account' : 'Continue'))}</button>}
          </div>
          {step === 0 && <p className="small" style={{ marginTop: 18 }}>Wrong place? <a className="link" href="home.html">Back to the website</a></p>}
        </div>
      </main>
    </div>
  );
}

LTMount('getstarted', <GetStartedPage />);