/* =============================================================
   KASDAP ONE — AUTH SCREEN (customer)
============================================================= */
const { useState: useStateAuth } = React;

function AuthScreen() {
  const { login, signup, SEED_USERS, roleMeta } = useStore();
  const [tab, setTab] = useStateAuth('login');
  const [email, setEmail] = useStateAuth('');
  const [pass, setPass] = useStateAuth('');
  const [err, setErr] = useStateAuth('');
  const [name, setName] = useStateAuth('');
  const [org, setOrg] = useStateAuth('');
  const [acc, setAcc] = useStateAuth('d2c');        // d2c | b2b | both
  const [role, setRole] = useStateAuth('chemist');  // sub-role for trade

  const ACCS = [
    { key: 'd2c', name: 'Retail (D2C)', desc: 'Buy single packs for yourself', icon: 'user' },
    { key: 'b2b', name: 'Trade (B2B)', desc: 'Bulk boxes at partner pricing', icon: 'building' },
    { key: 'both', name: 'Both', desc: 'Retail and bulk in one account', icon: 'layers' },
  ];
  const SUBROLES = [
    { key: 'chemist', name: 'Chemist / Retailer', icon: 'store' },
    { key: 'distributor', name: 'Distributor', icon: 'truck' },
    { key: 'hospital', name: 'Hospital / Institution', icon: 'building' },
  ];

  const doLogin = async () => { const r = await login(email, pass); if (!r.ok) setErr(r.err); };
  const doSignup = async () => {
    if (!name || !email || !pass) { setErr('Please fill all required fields'); return; }
    const r = await signup({ name, email, pass, accountType: acc, role: acc === 'd2c' ? 'retail' : role, org });
    if (!r.ok) setErr(r.err);
  };
  const quick = (u) => { setEmail(u.email); setPass(u.pass); setErr(''); setTab('login'); setTimeout(() => login(u.email, u.pass), 120); };
  const needsTrade = acc === 'b2b' || acc === 'both';

  return React.createElement('div', { className: 'auth' },
    React.createElement('div', { className: 'auth-brand' },
      React.createElement('div', { className: 'auth-logo' },
        React.createElement('div', { className: 'brand-mark' }, React.createElement(Icon, { name: 'plus', size: 22 })),
        React.createElement('div', { className: 'brand-txt' },
          React.createElement('div', { className: 'brand-name' }, 'Kasdap', React.createElement('b', null, ' ONE')),
          React.createElement('div', { className: 'brand-sub' }, 'Unified Commerce'))
      ),
      React.createElement('div', { className: 'auth-hero' },
        React.createElement('div', { className: 'auth-kicker' }, React.createElement(Icon, { name: 'sparkles', size: 13 }), 'One catalogue · Two ways to order'),
        React.createElement('h1', { className: 'auth-h1' }, 'Wholesale ', React.createElement('span', { className: 'g-in' }, 'and'), ' retail,', React.createElement('br'), 'on ', React.createElement('span', { className: 'g-em' }, 'one'), ' platform.'),
        React.createElement('p', { className: 'auth-sub' }, 'Kasdap channel partners order in bulk at trade pricing, while patients buy single packs — from the same live catalogue of 700+ specialty generics. Pick how you want to order when you sign up.'),
        React.createElement('div', { className: 'auth-split' },
          React.createElement('div', { className: 'card em' },
            React.createElement('div', { className: 'ic' }, React.createElement(Icon, { name: 'user', size: 18 })),
            React.createElement('h4', null, React.createElement(Icon, { name: 'bolt', size: 14 }), 'D2C · Retail'),
            React.createElement('p', null, 'Patients order single packs at online MRP, fast home delivery.')
          ),
          React.createElement('div', { className: 'card in' },
            React.createElement('div', { className: 'ic' }, React.createElement(Icon, { name: 'building', size: 18 })),
            React.createElement('h4', null, React.createElement(Icon, { name: 'layers', size: 14 }), 'B2B · Trade'),
            React.createElement('p', null, 'Distributors & hospitals get tier pricing, slabs and RFQ quotes.')
          )
        ),
        React.createElement('div', { className: 'auth-trust' },
          React.createElement('div', null, React.createElement(Icon, { name: 'shieldCheck', size: 15 }), 'GMP & WHO-GMP Certified'),
          React.createElement('div', null, React.createElement(Icon, { name: 'globe', size: 15 }), 'PAN India delivery'),
          React.createElement('div', null, React.createElement(Icon, { name: 'box', size: 15 }), '700+ Specialty SKUs')
        )
      )
    ),
    React.createElement('div', { className: 'auth-form-wrap' },
      React.createElement('div', { className: 'auth-form' },
        React.createElement('h2', null, tab === 'login' ? 'Sign in' : 'Create account'),
        React.createElement('p', { className: 'sub' }, tab === 'login' ? 'Access your Kasdap ONE account' : 'Choose how you want to order'),
        React.createElement('div', { className: 'auth-tabs' },
          React.createElement('button', { className: tab==='login'?'on':'', onClick: () => { setTab('login'); setErr(''); } }, 'Sign in'),
          React.createElement('button', { className: tab==='signup'?'on':'', onClick: () => { setTab('signup'); setErr(''); } }, 'Sign up')
        ),
        err && React.createElement('div', { className: 'auth-err' }, err),
        tab === 'signup' && React.createElement(React.Fragment, null,
          React.createElement('div', { className: 'field' }, React.createElement('label', null, 'How do you want to order?'),
            React.createElement('div', { className: 'acc-grid' },
              ACCS.map(a => React.createElement('button', { key: a.key, type: 'button', className: 'acc-opt' + (acc===a.key?' on':''), onClick: () => setAcc(a.key) },
                React.createElement('div', { className: 'acc-ic' }, React.createElement(Icon, { name: a.icon, size: 17 })),
                React.createElement('div', { className: 'acc-nm' }, a.name),
                React.createElement('div', { className: 'acc-ds' }, a.desc)
              ))
            )
          ),
          needsTrade && React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Business type'),
            React.createElement('div', { className: 'role-grid', style: { gridTemplateColumns: '1fr 1fr 1fr' } },
              SUBROLES.map(r => React.createElement('div', { key: r.key, className: 'role-opt' + (role===r.key?' on':''), onClick: () => setRole(r.key) },
                React.createElement('div', { className: 'rn', style: { fontSize: '.72rem' } }, React.createElement(Icon, { name: r.icon, size: 14 }), r.name.split(' ')[0])
              ))
            )
          ),
          React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Full name'), React.createElement('input', { className: 'input', value: name, onChange: e => setName(e.target.value), placeholder: 'Your name' })),
          needsTrade && React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Business / organisation'), React.createElement('input', { className: 'input', value: org, onChange: e => setOrg(e.target.value), placeholder: 'e.g. Apollo Medical Store' }))
        ),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Email'),
          React.createElement('input', { className: 'input', type: 'email', value: email, onChange: e => setEmail(e.target.value), placeholder: 'you@example.com', onKeyDown: e => e.key==='Enter' && (tab==='login'?doLogin():doSignup()) })),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Password'),
          React.createElement('input', { className: 'input', type: 'password', value: pass, onChange: e => setPass(e.target.value), placeholder: '••••••••', onKeyDown: e => e.key==='Enter' && (tab==='login'?doLogin():doSignup()) })),
        React.createElement('button', { className: 'btn btn-accent btn-block btn-lg', style: { marginTop: 6 }, onClick: tab==='login'?doLogin:doSignup },
          React.createElement(Icon, { name: 'lock', size: 16 }), tab==='login' ? 'Sign in securely' : 'Create account'),

        tab === 'login' && React.createElement('div', { className: 'demo-box' },
          React.createElement('div', { className: 'dl' }, 'Try a demo account — one tap'),
          React.createElement('div', { className: 'demo-chips' },
            SEED_USERS.map(u => React.createElement('button', { key: u.id, className: 'demo-chip', onClick: () => quick(u) },
              React.createElement('span', { className: 'di' }, roleMeta(u.role).short),
              roleMeta(u.role).label
            ))
          )
        ),
        React.createElement('a', { className: 'admin-link', href: window.pageHref('admin') },
          React.createElement(Icon, { name: 'shield', size: 14 }), 'Company staff? Go to the Admin console')
      )
    )
  );
}
Object.assign(window, { AuthScreen });