/* global React, Icon, Btn, Logo, BUSINESS_TYPES, INDUSTRIES, REVENUE_BANDS, TAX_METHODS */
// Taxai — Onboarding: collect business profile before advising.
const { useState: useObState } = React;

function Onboarding({ onComplete }) {
  const [step, setStep] = useObState(0);
  const [p, setP] = useObState({ type: '', name: '', industry: '', revenue: '', method: '' });
  const set = (k, v) => setP((o) => ({ ...o, [k]: v }));
  const steps = ['Loại hình', 'Lĩnh vực', 'Quy mô'];
  const canNext = step === 0 ? p.type : step === 1 ? (p.industry && p.name) : p.revenue;

  const next = () => { if (step < 2) setStep(step + 1); else onComplete(p); };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-2)' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 28px', background: 'var(--surface)', borderBottom: '1px solid var(--border-1)' }}>
        <Logo size={22} />
        <button onClick={() => onComplete(p)} style={{ border: 0, background: 'none', color: 'var(--fg-3)', fontSize: 13.5, fontWeight: 600, cursor: 'pointer' }}>Bỏ qua</button>
      </div>

      {/* progress */}
      <div style={{ display: 'flex', gap: 8, padding: '20px 28px 0', maxWidth: 760, width: '100%', margin: '0 auto', boxSizing: 'border-box' }}>
        {steps.map((s, i) => (
          <div key={s} style={{ flex: 1 }}>
            <div style={{ height: 4, borderRadius: 999, background: i <= step ? 'var(--brand)' : 'var(--border-2)', transition: 'background var(--dur)' }} />
            <div style={{ fontSize: 11.5, fontWeight: 700, marginTop: 8, color: i <= step ? 'var(--fg-1)' : 'var(--fg-3)', letterSpacing: '.02em' }}>{String(i + 1).padStart(2, '0')} · {s}</div>
          </div>
        ))}
      </div>

      {/* body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '32px 28px 24px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {step === 0 && (
            <Step title="Bạn đang ở mô hình kinh doanh nào?" sub="Taxai cần biết để tư vấn đúng quy định áp dụng cho bạn.">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {BUSINESS_TYPES.map((b) => (
                  <SelectCard key={b.id} active={p.type === b.id} icon={b.icon} title={b.label} desc={b.desc} onClick={() => set('type', b.id)} />
                ))}
              </div>
            </Step>
          )}
          {step === 1 && (
            <Step title="Cho mình biết thêm về hoạt động của bạn" sub="Tên hiển thị và lĩnh vực giúp cá nhân hoá câu trả lời.">
              <FieldText label="Tên bạn / hộ kinh doanh" placeholder="VD: Quán cà phê Nhà Mình" value={p.name} onChange={(v) => set('name', v)} icon="user" />
              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--fg-2)', margin: '20px 0 10px' }}>Lĩnh vực kinh doanh</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
                {INDUSTRIES.map((ind) => (
                  <button key={ind} onClick={() => set('industry', ind)} className="af-chip" style={p.industry === ind ? { background: 'var(--brand)', borderColor: 'var(--brand)', color: '#fff' } : {}}>{ind}</button>
                ))}
              </div>
            </Step>
          )}
          {step === 2 && (
            <Step title="Quy mô doanh thu" sub="Ước lượng tương đối là đủ — bạn có thể chỉnh sau.">
              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--fg-2)', marginBottom: 10 }}>Doanh thu ước tính / năm</label>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {REVENUE_BANDS.map((r) => (
                  <RadioRow key={r.id} active={p.revenue === r.id} icon={r.icon} title={r.label} onClick={() => set('revenue', r.id)} />
                ))}
              </div>
            </Step>
          )}
        </div>
      </div>

      {/* footer nav */}
      <div style={{ borderTop: '1px solid var(--border-1)', background: 'var(--surface)', padding: '16px 28px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Btn variant="ghost" icon="arrow-left" onClick={() => step > 0 && setStep(step - 1)} style={{ visibility: step > 0 ? 'visible' : 'hidden' }}>Quay lại</Btn>
          <Btn variant="primary" iconRight={step < 2 ? 'arrow-right' : 'check'} disabled={!canNext} onClick={next}>
            {step < 2 ? 'Tiếp tục' : 'Bắt đầu trò chuyện'}
          </Btn>
        </div>
      </div>
    </div>
  );
}

function Step({ title, sub, children }) {
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 27, letterSpacing: '-.015em', margin: 0 }}>{title}</h2>
      <p style={{ color: 'var(--fg-2)', fontSize: 15, marginTop: 8, marginBottom: 26 }}>{sub}</p>
      {children}
    </div>
  );
}

function SelectCard({ active, icon, title, desc, onClick }) {
  return (
    <button onClick={onClick} style={{
      textAlign: 'left', cursor: 'pointer', background: 'var(--surface)', padding: 18,
      border: '1px solid', borderColor: active ? 'var(--brand)' : 'var(--border-1)',
      boxShadow: active ? '0 0 0 3px var(--danger-bg)' : 'var(--shadow-sm)', borderRadius: 'var(--r-lg)',
      transition: 'all var(--dur)', display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <span style={{ width: 42, height: 42, borderRadius: 'var(--r-md)', background: active ? 'var(--brand)' : 'var(--bg-2)', color: active ? '#fff' : 'var(--fg-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'all var(--dur)' }}>
        <Icon name={icon} size={22} />
      </span>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5 }}>{title}</div>
        <div style={{ color: 'var(--fg-2)', fontSize: 13.5, marginTop: 4, lineHeight: 1.45 }}>{desc}</div>
      </div>
    </button>
  );
}

function RadioRow({ active, icon, title, onClick }) {
  return (
    <button onClick={onClick} style={{
      textAlign: 'left', cursor: 'pointer', background: 'var(--surface)', padding: '14px 16px',
      border: '1px solid', borderColor: active ? 'var(--brand)' : 'var(--border-1)',
      boxShadow: active ? '0 0 0 3px var(--danger-bg)' : 'var(--shadow-sm)', borderRadius: 'var(--r-md)',
      transition: 'all var(--dur)', display: 'flex', alignItems: 'center', gap: 12,
    }}>
      {icon && (
        <span style={{ width: 36, height: 36, borderRadius: 'var(--r-sm)', flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: active ? 'var(--brand)' : 'var(--bg-2)', color: active ? '#fff' : 'var(--fg-2)', transition: 'all var(--dur)' }}>
          <Icon name={icon} size={18} />
        </span>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 14 }}>{title}</div>
        <span style={{ width: 16, height: 16, borderRadius: '50%', border: '2px solid', borderColor: active ? 'var(--brand)' : 'var(--border-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginLeft: 'auto', transition: 'all var(--dur)' }}>
          {active && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--brand)' }} />}
        </span>
      </div>
    </button>
  );
}

function FieldText({ label, placeholder, value, onChange, icon }) {
  const [f, setF] = useObState(false);
  return (
    <div>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--fg-2)', marginBottom: 8 }}>{label}</label>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, border: '1px solid', borderColor: f ? 'var(--brand)' : 'var(--border-2)', boxShadow: f ? '0 0 0 3px var(--danger-bg)' : 'none', borderRadius: 'var(--r-md)', padding: '11px 13px', background: 'var(--surface)', transition: 'all var(--dur)', maxWidth: 420 }}>
        <Icon name={icon} size={17} color="var(--fg-3)" />
        <input value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} onFocus={() => setF(true)} onBlur={() => setF(false)}
          style={{ border: 0, outline: 0, background: 'transparent', flex: 1, fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg-1)' }} />
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;