// ===========================================================
// Wizards: AddCustomerModal + AddPartnerWizard
// 2 form đa bước để Coder build theo
// ===========================================================

// ---------- ADD CUSTOMER ----------
function AddCustomerModal({ onClose, onSave }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    name:'', phone:'', email:'', gender:'female', birthYear:'', city:'TP.HCM',
    channel:'store',
    consent:{ call:true, sms:true, email:true, zalo:true },
    preferredContact:'Zalo',
    tags:[], notes:'',
  });
  const [saving, setSaving] = useState(false);
  const [done, setDone] = useState(false);

  const [importMode, setImportMode] = useState('single'); // 'single' | 'bulk'
  const [bulkText, setBulkText] = useState('');
  const [bulkResult, setBulkResult] = useState(null);

  const update = (k, v) => setData(d => ({...d, [k]: v}));
  const updateConsent = (k, v) => setData(d => ({...d, consent: {...d.consent, [k]: v}}));
  const toggleTag = (t) => setData(d => ({...d, tags: d.tags.includes(t) ? d.tags.filter(x => x !== t) : [...d.tags, t]}));

  const canNext = (() => {
    if (importMode === 'bulk') return bulkText.trim().length > 0;
    if (step === 1) return data.name.trim() && /^[0-9\s+]{8,}$/.test(data.phone);
    if (step === 2) return Object.values(data.consent).some(v => v);
    return true;
  })();

  const save = () => {
    setSaving(true);
    if (window.TVS_API && window.TVS_API.isAuthed()) {
      window.TVS_API.createCustomer(data)
        .then(async (r) => {
          setSaving(false);
          // Nếu backend trả deduped + claimed -> khách đã được claim về cho sale này
          if (r && r.claimed) {
            window.tvsToast && window.tvsToast('Khách hàng đã có trên hệ thống, đã nhận về cho bạn.');
          }
          setDone(true);
          await window.TVS_API.refresh();
          window.tvsRefreshUI && window.tvsRefreshUI();
          setTimeout(() => onSave && onSave(data), 1100);
        })
        .catch(e => {
          setSaving(false);
          window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
        });
    } else {
      setTimeout(() => { setSaving(false); setDone(true); setTimeout(() => onSave && onSave(data), 1100); }, 700);
    }
  };

  const saveBulk = async () => {
    setSaving(true);
    const phones = bulkText.split(/[\n,]+/).map(s => s.trim()).filter(s => s.length >= 6);
    if (!phones.length) {
      window.tvsToast && window.tvsToast('Không tìm thấy SĐT hợp lệ');
      setSaving(false);
      return;
    }
    try {
      if (window.TVS_API && window.TVS_API.isAuthed()) {
        const r = await window.TVS_API.api('/api/customers/bulk', {
          method: 'POST',
          body: JSON.stringify({ phones })
        });
        setBulkResult(r);
        setDone(true);
        await window.TVS_API.refresh();
        window.tvsRefreshUI && window.tvsRefreshUI();
      } else {
        setDone(true);
      }
    } catch (e) {
      window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
    }
    setSaving(false);
  };

  return (
    <div className="drawer-overlay" style={{justifyContent:'center',alignItems:'center'}} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()}
        style={{background:'var(--bg-page)',width:'min(640px, 95vw)',maxHeight:'92vh',display:'flex',flexDirection:'column',borderRadius:'var(--radius-lg)',overflow:'hidden',boxShadow:'var(--shadow-pop)',animation:'slidein 0.28s var(--ease-out)'}}>

        {/* Header */}
        <div style={{padding:'var(--space-5) var(--space-6)',background:'var(--vs-dark-blue)',color:'#fff'}}>
          <div className="row">
            <div style={{flex:1}}>
              <div className="eyebrow" style={{color:'var(--vs-light-blue)'}}>Đăng ký khách hàng mới</div>
              <h2 style={{margin:'4px 0 0',fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'#fff'}}>
                {done ? 'Hoàn tất!' : 'Thông tin khách hàng'}
              </h2>
            </div>
            <button onClick={onClose} style={{background:'rgba(255,255,255,0.18)',border:'none',color:'#fff',width:36,height:36,borderRadius:'50%',cursor:'pointer',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
              <Icon name="close" size={16}/>
            </button>
          </div>

          {!done && importMode === 'single' && (
            <div className="row mt-4" style={{gap:8}}>
              {[
                {n:1, l:'Thông tin'},
                {n:2, l:'Đồng ý liên hệ'},
                {n:3, l:'Tags & Ghi chú'},
              ].map((s, i) => (
                <div key={s.n} style={{flex:1,display:'flex',alignItems:'center',gap:8}}>
                  <div style={{
                    width:28,height:28,borderRadius:'50%',
                    background: step >= s.n ? 'var(--vs-light-blue)' : 'rgba(255,255,255,0.18)',
                    color: step >= s.n ? 'var(--vs-dark-blue)' : 'rgba(255,255,255,0.6)',
                    display:'flex',alignItems:'center',justifyContent:'center',
                    fontWeight:700,fontSize:13,
                    transition:'all 0.2s',
                  }}>
                    {step > s.n ? <Icon name="check" size={14} stroke={3}/> : s.n}
                  </div>
                  <div style={{fontSize:12,color: step >= s.n ? '#fff' : 'rgba(255,255,255,0.6)',fontWeight: step === s.n ? 700 : 400}}>{s.l}</div>
                  {i < 2 && <div style={{flex:1,height:2,background: step > s.n ? 'var(--vs-light-blue)' : 'rgba(255,255,255,0.18)',marginLeft:4}}/>}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Body */}
        <div style={{padding:'var(--space-5) var(--space-6)',overflow:'auto',flex:1}}>
          {done ? (
            <div style={{textAlign:'center',padding:'var(--space-8) 0'}}>
              <div style={{width:80,height:80,borderRadius:'50%',background:'var(--status-success)',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',marginBottom:'var(--space-4)'}}>
                <Icon name="check" size={40} stroke={3}/>
              </div>
              <h3 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:700,color:'var(--fg-1)',margin:0}}>
                {importMode === 'bulk' ? 'Đã nhập danh sách' : 'Đã tạo khách hàng'}
              </h3>
              {importMode === 'bulk' ? (
                bulkResult && (
                  <p className="text-sm fg-muted mt-2" style={{lineHeight:1.6}}>
                    Đã thêm: <b>{bulkResult.created}</b> số mới · <b>{bulkResult.claimed || 0}</b> số nhận về · <b>{bulkResult.deduped - (bulkResult.claimed || 0)}</b> số trùng (bỏ qua) · <b>{bulkResult.invalid}</b> số lỗi.
                    <br/>Tổng cộng xử lý: <b>{bulkResult.total}</b> số điện thoại.
                  </p>
                )
              ) : (
                <p className="text-sm fg-muted mt-2">Mã thành viên đã được cấp · SMS chào mừng đã gửi tới <b className="tnum">{data.phone}</b></p>
              )}
            </div>
          ) : step === 1 ? (
            <>
              {/* Chế độ nhập (Từng người / Hàng loạt) */}
              <div className="mb-4" style={{display:'flex',justifyContent:'center'}}>
                <Segmented value={importMode} options={[
                  {value:'single', label:'Thêm 1 khách hàng'},
                  {value:'bulk',   label:'Nhập danh sách SĐT nhanh'}
                ]} onChange={(v) => { setImportMode(v); setStep(1); }}/>
              </div>

              {importMode === 'bulk' ? (
                <div>
                  <div className="field-label">Copy & paste danh sách SĐT <span style={{color:'var(--status-sale)'}}>*</span></div>
                  <textarea className="textarea" autoFocus
                    placeholder="Mỗi dòng là 1 số điện thoại hoặc các số cách nhau bằng dấu phẩy. Ví dụ:&#13;0903821447&#13;0912445678, 0987654321&#13;0909 111 222"
                    value={bulkText} onChange={(e)=>setBulkText(e.target.value)}
                    style={{minHeight:180,fontFamily:'var(--font-mono)',fontSize:13,lineHeight:1.5}}/>
                  <div className="text-xs fg-muted mt-2">Hệ thống sẽ tự động làm sạch SĐT. SĐT đã có trên hệ thống sẽ được nhận về cho bạn (nếu chưa có người phụ trách).</div>
                </div>
              ) : (
                <>
                  <div className="grid grid-2 mb-3">
                    <div>
                      <div className="field-label">Họ và tên <span style={{color:'var(--status-sale)'}}>*</span></div>
                      <input className="input" autoFocus placeholder="Đặng Hoàng Mai" value={data.name} onChange={(e)=>update('name',e.target.value)}/>
                    </div>
                    <div>
                      <div className="field-label">SĐT <span style={{color:'var(--status-sale)'}}>*</span></div>
                      <input className="input tnum" placeholder="0903 821 447" value={data.phone} onChange={(e)=>update('phone',e.target.value)}/>
                    </div>
                  </div>
                  <div className="field-label">Email</div>
                  <input className="input mb-3" placeholder="mai.dang@email.vn" value={data.email} onChange={(e)=>update('email',e.target.value)}/>

                  <div className="grid grid-3 mb-3">
                    <div>
                      <div className="field-label">Giới tính</div>
                      <Segmented value={data.gender} options={[
                        {value:'female',label:'Nữ'},{value:'male',label:'Nam'},{value:'other',label:'Khác'}
                      ]} onChange={(v)=>update('gender',v)}/>
                    </div>
                    <div>
                      <div className="field-label">Năm sinh</div>
                      <input className="input tnum" placeholder="1992" value={data.birthYear} onChange={(e)=>update('birthYear',e.target.value)}/>
                    </div>
                    <div>
                      <div className="field-label">Thành phố</div>
                      <select className="select" value={data.city} onChange={(e)=>update('city',e.target.value)}>
                        {['TP.HCM','Hà Nội','Đà Nẵng','Hải Phòng','Cần Thơ','Khác'].map(c => <option key={c}>{c}</option>)}
                      </select>
                    </div>
                  </div>

                  <div className="field-label">Kênh đăng ký</div>
                  <div className="row gap-1" style={{flexWrap:'wrap'}}>
                    {[
                      {k:'store',l:'Cửa hàng',ic:'store'},
                      {k:'web',  l:'Web/App',ic:'home'},
                      {k:'telesale',l:'Telesale',ic:'phone'},
                      {k:'tiktok',l:'TikTok',ic:'sparkles'},
                      {k:'referral',l:'Giới thiệu',ic:'users'},
                      {k:'event',l:'Event',ic:'calendar'},
                    ].map(c => (
                      <button key={c.k}
                        className={data.channel===c.k ? 'btn btn-cta btn-sm' : 'btn btn-secondary btn-sm'}
                        onClick={() => update('channel',c.k)}>
                        <Icon name={c.ic} size={12}/>{c.l}
                      </button>
                    ))}
                  </div>
                </>
              )}
            </>
          ) : step === 2 ? (
            <>
              <div className="banner mb-4">
                <Icon name="zap" size={16}/>
                <div className="text-sm" style={{flex:1}}>
                  <b>Tuân thủ PDPL Việt Nam:</b> bạn phải ghi nhận sự đồng ý của khách trước khi gửi marketing.
                </div>
              </div>
              <div className="text-sm fg-2 mb-4" style={{lineHeight:1.6}}>
                Khách <b>{data.name || '...'}</b> đồng ý cho The Vitamin Shoppe liên hệ qua các kênh sau:
              </div>
              {[
                {k:'call',  l:'Gọi điện thoại',  desc:'Telesale gọi tư vấn, follow-up'},
                {k:'sms',   l:'SMS',              desc:'Nhắn tin OTP, thông báo đơn, khuyến mãi'},
                {k:'email', l:'Email',            desc:'Bản tin sản phẩm, voucher'},
                {k:'zalo',  l:'Zalo OA',          desc:'Tin nhắn qua Zalo Official Account'},
              ].map(c => (
                <label key={c.k} className="row mb-3" style={{cursor:'pointer',padding:'var(--space-3) var(--space-4)',background: data.consent[c.k] ? 'rgba(6,167,125,0.06)' : 'var(--bg-soft)',border:`1px solid ${data.consent[c.k] ? 'rgba(6,167,125,0.30)' : 'var(--border-1)'}`,borderRadius:'var(--radius-md)'}}>
                  <input type="checkbox" checked={data.consent[c.k]} onChange={(e)=>updateConsent(c.k, e.target.checked)} style={{accentColor:'var(--status-success)',width:18,height:18}}/>
                  <div style={{flex:1,marginLeft:8}}>
                    <div className="strong fg-1">{c.l}</div>
                    <div className="text-xs fg-muted">{c.desc}</div>
                  </div>
                  {data.consent[c.k] && <Tag variant="success" dot>Đã đồng ý</Tag>}
                </label>
              ))}

              <div className="mt-4">
                <div className="field-label">Kênh ưa thích</div>
                <div className="row gap-1" style={{flexWrap:'wrap'}}>
                  {['Gọi điện','Zalo','SMS','Email','Cửa hàng'].map(c => (
                    <button key={c}
                      className={data.preferredContact===c ? 'btn btn-cta btn-sm' : 'btn btn-secondary btn-sm'}
                      onClick={() => update('preferredContact', c)}>
                      {c}
                    </button>
                  ))}
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="field-label">Tags (mối quan tâm)</div>
              <div className="row gap-1 mb-4" style={{flexWrap:'wrap'}}>
                {['Whey Protein','Vitamin','Collagen','Omega 3','BCAA','Pre-Workout','Magnesium','Probiotic','Sleep','Family','Active'].map(t => (
                  <button key={t}
                    className={data.tags.includes(t) ? 'btn btn-cta btn-sm' : 'btn btn-secondary btn-sm'}
                    onClick={() => toggleTag(t)}>
                    {data.tags.includes(t) ? <Icon name="check" size={11}/> : <Icon name="plus" size={11}/>}{t}
                  </button>
                ))}
              </div>
              <div className="text-xs fg-muted mb-4">Đã chọn {data.tags.length} tag. Tags giúp telesale + cửa hàng nhanh chóng nắm bắt nhu cầu khách.</div>

              <div className="field-label">Ghi chú ban đầu (tuỳ chọn)</div>
              <textarea className="textarea" placeholder="VD: Khách mới biết đến qua TikTok, quan tâm sản phẩm cho thể hình tăng cơ..." value={data.notes} onChange={(e)=>update('notes',e.target.value)}/>

              <div className="banner mt-4">
                <Icon name="gift" size={16}/>
                <div className="text-sm" style={{flex:1}}>
                  <b>Hoàn tất:</b> hệ thống sẽ tự cấp mã thành viên, gửi SMS chào mừng tới <b className="tnum">{data.phone}</b>, và áp dụng voucher giảm 10% cho đơn đầu tiên.
                </div>
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        {!done && (
          <div style={{padding:'var(--space-4) var(--space-6)',background:'var(--bg-soft)',borderTop:'1px solid var(--border-1)',display:'flex',gap:'var(--space-3)',alignItems:'center'}}>
            {importMode === 'single' ? (
              <>
                <span className="text-xs fg-muted">Bước {step}/3</span>
                <div style={{flex:1}}/>
                {step > 1 && <button className="btn btn-secondary" onClick={() => setStep(step - 1)}><Icon name="arrowleft" size={14}/>Quay lại</button>}
                {step < 3 ? (
                  <button className="btn btn-cta" disabled={!canNext} onClick={() => setStep(step + 1)}>
                    Tiếp tục<Icon name="arrowright" size={14}/>
                  </button>
                ) : (
                  <button className="btn btn-cta btn-lg" disabled={saving} onClick={save}>
                    {saving ? 'Đang lưu...' : <><Icon name="check" size={14}/>Tạo khách hàng</>}
                  </button>
                )}
              </>
            ) : (
              <>
                <span className="text-xs fg-muted">Nhập danh sách nhanh</span>
                <div style={{flex:1}}/>
                <button className="btn btn-cta btn-lg" disabled={!canNext || saving} onClick={saveBulk}>
                  {saving ? 'Đang xử lý...' : <><Icon name="check" size={14}/>Lưu danh sách</>}
                </button>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ---------- ADD PARTNER WIZARD ----------
function AddPartnerWizard({ onClose, onSave }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    name:'', type:'tiktok_affiliate',
    contactName:'', contactPhone:'', contactEmail:'', city:'TP.HCM',
    followers:'', socialHandle:'',
    legal:{ businessLicense:false, taxCode:'', nda:false },
    priceList:'Affiliate KOC', commission:12,
    onboardingSteps:['intro_call','send_samples','content_brief'],
    notes:'',
  });
  const [saving, setSaving] = useState(false);
  const [done, setDone] = useState(false);

  const update = (k, v) => setData(d => ({...d, [k]: v}));
  const updateLegal = (k, v) => setData(d => ({...d, legal: {...d.legal, [k]: v}}));

  const partnerTypes = [
    {k:'tiktok_affiliate', l:'TikTok Affiliate / KOC', ic:'sparkles'},
    {k:'pharmacy',         l:'Nhà thuốc',              ic:'pill'},
    {k:'wholesale',        l:'Đại lý phân phối',       ic:'truck'},
    {k:'gym',              l:'Phòng gym',              ic:'flame'},
    {k:'pt',               l:'PT / HLV',               ic:'award'},
    {k:'spa',              l:'Spa & Clinic',           ic:'heart'},
    {k:'enterprise',       l:'Doanh nghiệp',           ic:'briefcase'},
  ];
  const isAffiliate = data.type === 'tiktok_affiliate' || data.type === 'pt';

  const canNext = (() => {
    if (step === 1) return data.name.trim() && data.type;
    if (step === 2) return data.contactName.trim() && /^[0-9\s+]{8,}$/.test(data.contactPhone);
    return true;
  })();

  const save = () => {
    setSaving(true);
    setTimeout(() => { setSaving(false); setDone(true); setTimeout(() => onSave && onSave(data), 1200); }, 800);
  };

  return (
    <div className="drawer-overlay" style={{justifyContent:'center',alignItems:'center'}} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()}
        style={{background:'var(--bg-page)',width:'min(720px, 95vw)',maxHeight:'92vh',display:'flex',flexDirection:'column',borderRadius:'var(--radius-lg)',overflow:'hidden',boxShadow:'var(--shadow-pop)',animation:'slidein 0.28s var(--ease-out)'}}>

        {/* Header */}
        <div style={{padding:'var(--space-5) var(--space-6)',background:'var(--vs-dark-blue)',color:'#fff'}}>
          <div className="row">
            <div style={{flex:1}}>
              <div className="eyebrow" style={{color:'var(--vs-light-blue)'}}>Thêm đối tác B2B</div>
              <h2 style={{margin:'4px 0 0',fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'#fff'}}>
                {done ? 'Đã tạo đối tác!' : ['Loại đối tác','Liên hệ chính','Pháp lý','Bảng giá & Hoa hồng','Onboarding'][step-1]}
              </h2>
            </div>
            <button onClick={onClose} style={{background:'rgba(255,255,255,0.18)',border:'none',color:'#fff',width:36,height:36,borderRadius:'50%',cursor:'pointer',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
              <Icon name="close" size={16}/>
            </button>
          </div>

          {!done && (
            <div className="row mt-4" style={{gap:6}}>
              {[1,2,3,4,5].map(n => (
                <div key={n} style={{flex:1,height:4,borderRadius:2,background: step >= n ? 'var(--vs-light-blue)' : 'rgba(255,255,255,0.18)',transition:'all 0.2s'}}/>
              ))}
            </div>
          )}
        </div>

        {/* Body */}
        <div style={{padding:'var(--space-5) var(--space-6)',overflow:'auto',flex:1}}>
          {done ? (
            <div style={{textAlign:'center',padding:'var(--space-8) 0'}}>
              <div style={{width:80,height:80,borderRadius:'50%',background:'var(--status-success)',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',marginBottom:'var(--space-4)'}}>
                <Icon name="check" size={40} stroke={3}/>
              </div>
              <h3 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:700,color:'var(--fg-1)',margin:0}}>Đã tạo đối tác {data.name}</h3>
              <p className="text-sm fg-muted mt-2">
                Stage: <b>Onboarding</b> · Tracking link đã được generate · {data.onboardingSteps.length} task onboarding đã được tạo
              </p>
              <button className="btn btn-cta mt-4">
                <Icon name="eye" size={14}/>Xem hồ sơ đối tác
              </button>
            </div>
          ) : step === 1 ? (
            <>
              <div className="field-label">Tên đối tác / KOC <span style={{color:'var(--status-sale)'}}>*</span></div>
              <input className="input mb-4" autoFocus placeholder={isAffiliate ? 'VD: KOC Mai Linh Beauty' : 'VD: Nhà thuốc Long Châu Q.3'} value={data.name} onChange={(e)=>update('name',e.target.value)}/>

              <div className="field-label">Loại đối tác <span style={{color:'var(--status-sale)'}}>*</span></div>
              <div className="grid grid-2" style={{gap:8}}>
                {partnerTypes.map(t => (
                  <button key={t.k}
                    className="card"
                    onClick={() => update('type', t.k)}
                    style={{
                      padding:'var(--space-3) var(--space-4)',
                      cursor:'pointer',
                      border: data.type===t.k ? '2px solid var(--vs-light-blue)' : '1px solid var(--border-1)',
                      background: data.type===t.k ? 'rgba(65,182,230,0.06)' : 'var(--bg-page)',
                      display:'flex',alignItems:'center',gap:12,textAlign:'left',
                    }}>
                    <div style={{width:36,height:36,background: data.type===t.k ? 'var(--vs-light-blue)' : 'var(--bg-soft)',color: data.type===t.k ? 'var(--vs-dark-blue)' : 'var(--vs-light-blue)',borderRadius:'var(--radius-md)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                      <Icon name={t.ic} size={18}/>
                    </div>
                    <div style={{fontWeight: data.type===t.k ? 700 : 500,color:'var(--fg-1)',fontSize:14}}>{t.l}</div>
                    {data.type===t.k && <Icon name="check" size={16} style={{color:'var(--vs-light-blue)',marginLeft:'auto'}} stroke={3}/>}
                  </button>
                ))}
              </div>
            </>
          ) : step === 2 ? (
            <>
              <div className="grid grid-2 mb-3">
                <div>
                  <div className="field-label">Tên người liên hệ <span style={{color:'var(--status-sale)'}}>*</span></div>
                  <input className="input" placeholder="Ngô Thị Mai Linh" value={data.contactName} onChange={(e)=>update('contactName',e.target.value)}/>
                </div>
                <div>
                  <div className="field-label">Số điện thoại <span style={{color:'var(--status-sale)'}}>*</span></div>
                  <input className="input tnum" placeholder="0903 778 991" value={data.contactPhone} onChange={(e)=>update('contactPhone',e.target.value)}/>
                </div>
              </div>
              <div className="field-label">Email</div>
              <input className="input mb-3" placeholder="contact@partner.com" value={data.contactEmail} onChange={(e)=>update('contactEmail',e.target.value)}/>
              <div className="field-label">Thành phố</div>
              <select className="select mb-3" value={data.city} onChange={(e)=>update('city',e.target.value)}>
                {['TP.HCM','Hà Nội','Đà Nẵng','Hải Phòng','Cần Thơ','Khác'].map(c => <option key={c}>{c}</option>)}
              </select>
              {isAffiliate && (
                <>
                  <div className="grid grid-2">
                    <div>
                      <div className="field-label">Followers (TikTok / IG)</div>
                      <input className="input tnum" placeholder="385K" value={data.followers} onChange={(e)=>update('followers',e.target.value)}/>
                    </div>
                    <div>
                      <div className="field-label">Social handle</div>
                      <input className="input" placeholder="@mailinhbeauty" value={data.socialHandle} onChange={(e)=>update('socialHandle',e.target.value)}/>
                    </div>
                  </div>
                </>
              )}
            </>
          ) : step === 3 ? (
            <>
              <div className="text-sm fg-muted mb-4">Đính kèm giấy tờ pháp lý — có thể bổ sung sau, nhưng đối tác sẽ ở stage <b>Onboarding</b> cho đến khi đủ.</div>
              <div className="grid grid-2 mb-3">
                <button onClick={() => updateLegal('businessLicense', !data.legal.businessLicense)}
                  className="card" style={{padding:'var(--space-4)',cursor:'pointer',border: data.legal.businessLicense?'2px solid var(--status-success)':'1px dashed var(--border-1)',background: data.legal.businessLicense?'rgba(6,167,125,0.06)':'var(--bg-page)',textAlign:'center'}}>
                  <Icon name={data.legal.businessLicense?'check':'plus'} size={24} style={{color: data.legal.businessLicense?'var(--status-success)':'var(--fg-muted)',margin:'0 auto var(--space-2)'}}/>
                  <div className="bold fg-1">Giấy ĐKKD</div>
                  <div className="text-xs fg-muted mt-1">{data.legal.businessLicense ? 'Đã upload' : 'Click để upload PDF'}</div>
                </button>
                <button onClick={() => updateLegal('nda', !data.legal.nda)}
                  className="card" style={{padding:'var(--space-4)',cursor:'pointer',border: data.legal.nda?'2px solid var(--status-success)':'1px dashed var(--border-1)',background: data.legal.nda?'rgba(6,167,125,0.06)':'var(--bg-page)',textAlign:'center'}}>
                  <Icon name={data.legal.nda?'check':'plus'} size={24} style={{color: data.legal.nda?'var(--status-success)':'var(--fg-muted)',margin:'0 auto var(--space-2)'}}/>
                  <div className="bold fg-1">NDA cộng tác</div>
                  <div className="text-xs fg-muted mt-1">{data.legal.nda ? 'Đã ký' : 'Click để gửi e-sign'}</div>
                </button>
              </div>
              <div className="field-label">Mã số thuế</div>
              <input className="input tnum" placeholder="0312345678" value={data.legal.taxCode} onChange={(e)=>updateLegal('taxCode',e.target.value)}/>
            </>
          ) : step === 4 ? (
            <>
              <div className="field-label">Bảng giá áp dụng</div>
              <div className="row gap-1 mb-4" style={{flexWrap:'wrap'}}>
                {['Affiliate KOC','Pharmacy Chain','Wholesale Tier 1','Gym & PT','Spa & Clinic','Enterprise B2B'].map(p => (
                  <button key={p}
                    className={data.priceList===p ? 'btn btn-cta btn-sm' : 'btn btn-secondary btn-sm'}
                    onClick={() => update('priceList', p)}>
                    {p}
                  </button>
                ))}
              </div>

              <div className="field-label">% Hoa hồng / Chiết khấu</div>
              <div className="row gap-3" style={{alignItems:'center'}}>
                <input type="range" min="5" max="35" step="1" value={data.commission} onChange={(e)=>update('commission', +e.target.value)}
                  style={{flex:1,accentColor:'var(--vs-light-blue)'}}/>
                <div style={{minWidth:80,textAlign:'right'}}>
                  <span className="tnum bold" style={{fontSize:24,fontFamily:'var(--font-display)',color:'var(--vs-dark-blue)'}}>{data.commission}%</span>
                </div>
              </div>
              <div className="text-xs fg-muted mt-2">Range thường: 5-15% cho phân phối · 12-20% cho KOC · 18-30% cho enterprise</div>

              <div className="banner mt-4">
                <Icon name="zap" size={16}/>
                <div className="text-sm" style={{flex:1}}>
                  Sau khi tạo, hệ thống sẽ generate <b>tracking link riêng</b> và <b>promo code</b> cho đối tác này — dùng để đo conversion.
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="text-sm fg-muted mb-4">Chọn các bước onboarding sẽ tự tạo task cho Account Manager:</div>
              {[
                {k:'intro_call',   l:'Cuộc gọi giới thiệu chương trình',           ic:'phone',  due:'Trong 3 ngày'},
                {k:'send_samples', l:'Gửi sample sản phẩm',                         ic:'package',due:'Trong 7 ngày'},
                {k:'content_brief',l:'Gửi content brief + key message',             ic:'fileText',due:'Trong 7 ngày'},
                {k:'first_payment',l:'Setup thanh toán hoa hồng',                   ic:'receipt',due:'Trong 14 ngày'},
                {k:'store_visit',  l:'Visit cửa hàng / showroom đối tác (nếu có)',  ic:'pin',    due:'Trong 30 ngày'},
                {k:'first_report', l:'Báo cáo kết quả 30 ngày đầu',                 ic:'chart',  due:'Sau 30 ngày'},
              ].map(s => (
                <label key={s.k} className="row mb-2" style={{cursor:'pointer',padding:'10px 14px',background: data.onboardingSteps.includes(s.k) ? 'rgba(65,182,230,0.06)' : 'var(--bg-soft)',border:`1px solid ${data.onboardingSteps.includes(s.k) ? 'rgba(65,182,230,0.30)' : 'var(--border-1)'}`,borderRadius:'var(--radius-md)'}}>
                  <input type="checkbox" checked={data.onboardingSteps.includes(s.k)}
                    onChange={() => update('onboardingSteps', data.onboardingSteps.includes(s.k) ? data.onboardingSteps.filter(x => x !== s.k) : [...data.onboardingSteps, s.k])}
                    style={{accentColor:'var(--vs-light-blue)',width:18,height:18}}/>
                  <Icon name={s.ic} size={16} style={{color:'var(--vs-light-blue)',marginLeft:8}}/>
                  <div style={{flex:1,marginLeft:8}}>
                    <div className="strong fg-1 text-sm">{s.l}</div>
                    <div className="text-xs fg-muted">{s.due}</div>
                  </div>
                </label>
              ))}

              <div className="mt-4">
                <div className="field-label">Ghi chú nội bộ (tuỳ chọn)</div>
                <textarea className="textarea" placeholder="VD: Cần ưu tiên brief sản phẩm Sports Nutrition cho KOC này..." value={data.notes} onChange={(e)=>update('notes',e.target.value)}/>
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        {!done && (
          <div style={{padding:'var(--space-4) var(--space-6)',background:'var(--bg-soft)',borderTop:'1px solid var(--border-1)',display:'flex',gap:'var(--space-3)',alignItems:'center'}}>
            <span className="text-xs fg-muted">Bước {step}/5</span>
            <div style={{flex:1}}/>
            {step > 1 && <button className="btn btn-secondary" onClick={() => setStep(step - 1)}><Icon name="arrowleft" size={14}/>Quay lại</button>}
            {step < 5 ? (
              <button className="btn btn-cta" disabled={!canNext} onClick={() => setStep(step + 1)}>
                Tiếp tục<Icon name="arrowright" size={14}/>
              </button>
            ) : (
              <button className="btn btn-cta btn-lg" disabled={saving} onClick={save}>
                {saving ? <><LoadingSpinner size={14}/>Đang tạo...</> : <><Icon name="check" size={14}/>Tạo đối tác</>}
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AddCustomerModal, AddPartnerWizard });