// Marketing OS — Data Entry Form (v2)
const { useState: useStateE2 } = React;

// Searchable combobox for selecting "เซียน"
function SeianCombobox({ users, value, onChange, disabled, invalid }) {
  const [q, setQ] = useStateE2('');
  const [open, setOpen] = useStateE2(false);
  const [activeIdx, setActiveIdx] = useStateE2(0);
  const boxRef = React.useRef(null);
  const inputRef = React.useRef(null);

  const selected = users.find(u => u.id === value);

  const filtered = useMemo(() => {
    if (!q.trim()) return users;
    const qq = q.toLowerCase();
    return users.filter(u =>
      u.name.toLowerCase().includes(qq) ||
      u.code.toLowerCase().includes(qq) ||
      (u.nickname || '').toLowerCase().includes(qq) ||
      (window.getSubteam(u.subteamId)?.name || '').toLowerCase().includes(qq)
    );
  }, [users, q]);

  React.useEffect(() => {
    const onDocClick = (e) => {
      if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, []);

  const pick = (u) => { onChange(u.id); setQ(''); setOpen(false); };

  const onKey = (e) => {
    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIdx(i => Math.min(i + 1, filtered.length - 1)); setOpen(true); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIdx(i => Math.max(i - 1, 0)); }
    else if (e.key === 'Enter') { e.preventDefault(); if (filtered[activeIdx]) pick(filtered[activeIdx]); }
    else if (e.key === 'Escape') { setOpen(false); }
  };

  return (
    <div ref={boxRef} style={{position:'relative'}}>
      <div
        className={`input ${invalid ? 'invalid' : ''}`}
        style={{
          display:'flex', alignItems:'center', gap:8,
          cursor: disabled ? 'not-allowed' : 'text',
          padding: '6px 12px',
          background: disabled ? 'var(--bg-sunken)' : 'var(--bg-elev)',
        }}
        onClick={() => { if (!disabled) { setOpen(true); inputRef.current?.focus(); } }}
      >
        {selected ? (
          <span className="row" style={{gap: 8, flex: 1, minWidth: 0}}>
            <span className="avatar" style={{width:22, height:22, fontSize:9}}>{window.initials(selected.name)}</span>
            <span style={{fontWeight:500}}>{selected.name.replace(/^คุณ/, '')}</span>
            <span style={{color:'var(--ink-3)', fontSize:12}}>· {selected.code}</span>
            <span className="badge outline" style={{marginLeft:'auto'}}>{window.getSubteam(selected.subteamId)?.name || '-'}</span>
          </span>
        ) : (
          <input
            ref={inputRef}
            value={q}
            onChange={e => { setQ(e.target.value); setOpen(true); setActiveIdx(0); }}
            onFocus={() => setOpen(true)}
            onKeyDown={onKey}
            disabled={disabled}
            placeholder="พิมพ์ชื่อ, ชื่อเล่น, รหัส, หรือทีมย่อย…"
            style={{flex:1, border:'none', outline:'none', background:'transparent', fontSize:13.5, padding:'4px 0', minWidth:0}}
          />
        )}
        {selected ? (
          <button type="button" onClick={(e) => { e.stopPropagation(); onChange(''); setQ(''); inputRef.current?.focus(); }} disabled={disabled} title="เคลียร์"
            style={{background:'transparent', border:'none', color:'var(--ink-3)', cursor:'pointer', padding:4}}>
            <Icon name="x" size={13}/>
          </button>
        ) : (
          <Icon name="search" size={13} style={{color:'var(--ink-4)'}}/>
        )}
      </div>

      {open && !disabled && (
        <div style={{
          position:'absolute', top:'calc(100% + 4px)', left:0, right:0, zIndex:30,
          background:'var(--bg-elev)', border:'1px solid var(--line-2)', borderRadius:10,
          boxShadow:'var(--shadow-md)', maxHeight: 280, overflowY:'auto', padding: 4,
        }}>
          {!selected && (
            <input
              autoFocus
              value={q}
              onChange={e => { setQ(e.target.value); setActiveIdx(0); }}
              onKeyDown={onKey}
              placeholder="พิมพ์เพื่อค้นหา…"
              style={{
                width:'100%', border:'1px solid var(--line)', borderRadius:8,
                padding:'7px 10px', fontSize: 13, marginBottom: 4, outline:'none'
              }}
            />
          )}
          {filtered.length === 0 && (
            <div style={{padding: 14, textAlign:'center', color:'var(--ink-3)', fontSize: 12.5}}>ไม่พบเซียนที่ค้น</div>
          )}
          {filtered.slice(0, 40).map((u, i) => (
            <div
              key={u.id}
              onMouseDown={(e) => { e.preventDefault(); pick(u); }}
              onMouseEnter={() => setActiveIdx(i)}
              style={{
                display:'flex', alignItems:'center', gap:10,
                padding:'8px 10px',
                borderRadius:7,
                background: i === activeIdx ? 'var(--bg-sunken)' : 'transparent',
                cursor:'pointer',
              }}
            >
              <span className="avatar" style={{width:26, height:26, fontSize:10}}>{window.initials(u.name)}</span>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13, fontWeight:500, color:'var(--ink)'}}>{u.name.replace(/^คุณ/,'')} <span style={{color:'var(--ink-3)', fontWeight:400}}>({u.nickname})</span></div>
                <div style={{fontSize:11, color:'var(--ink-3)'}}>{u.code} · {window.getSubteam(u.subteamId)?.name || '-'} · {window.ROLES[u.role].label}</div>
              </div>
              {u.id === value && <Icon name="check" size={13} style={{color:'var(--gold)'}}/>}
            </div>
          ))}
          {filtered.length > 40 && (
            <div style={{padding:'6px 10px', fontSize: 11, color:'var(--ink-4)'}}>แสดง 40 จาก {filtered.length} — พิมพ์ค้นต่อเพื่อแคบลง</div>
          )}
        </div>
      )}
    </div>
  );
}

// Currency input: THB / USD / OTHER (with custom code + rate)
function CurrencyInput({ value, onChange, invalid, placeholder = '0', allowZero = true }) {
  // value: { amount: '', currency: 'THB', customCode: '', customRate: '' }
  const cur = window.CURRENCIES.find(c => c.code === value.currency) || window.CURRENCIES[0];
  const isOther = value.currency === 'OTHER';

  const upd = (patch) => onChange({ ...value, ...patch });

  // Compute THB equivalent
  const rate = isOther ? (+value.customRate || 0) : (cur.rate || 0);
  const thbEq = (+value.amount || 0) * rate;

  return (
    <div>
      <div className="input-group">
        <select className="select" value={value.currency} onChange={e => upd({ currency: e.target.value })}>
          {window.CURRENCIES.map(c => <option key={c.code} value={c.code}>{c.symbol} {c.code === 'OTHER' ? 'อื่นๆ' : c.code}</option>)}
        </select>
        <input
          type="number" min="0" step="0.01"
          className={`input num ${invalid ? 'invalid' : ''}`}
          value={value.amount}
          onChange={e => upd({ amount: e.target.value })}
          placeholder={placeholder}
        />
      </div>
      {isOther && (
        <div className="row" style={{gap: 8, marginTop: 8}}>
          <input
            className="input"
            placeholder="รหัสสกุลเงิน เช่น CNY, MYR, SGD"
            value={value.customCode}
            onChange={e => upd({ customCode: e.target.value.toUpperCase().slice(0,5) })}
            style={{flex: 1}}
          />
          <div className="input-suffix-group" style={{flex: 1}}>
            <input
              type="number" min="0" step="0.001"
              className="input num"
              placeholder="อัตราแลกเป็นบาท (เช่น 36.5)"
              value={value.customRate}
              onChange={e => upd({ customRate: e.target.value })}
            />
            <span className="input-suffix">บาท/หน่วย</span>
          </div>
        </div>
      )}
      {value.amount !== '' && rate > 0 && value.currency !== 'THB' && (
        <div className="hint" style={{marginTop:6}}>
          ≈ {window.fmtTHB(thbEq)} (แปลงจาก {isOther ? (value.customCode || '?') : value.currency})
        </div>
      )}
    </div>
  );
}

function DataEntryForm({ currentUser, allUsers, onSubmit, onCancel, prefill }) {
  const selectableSiens = window.visibleUsersFor(currentUser).filter(u => u.role === 'staff' || u.role === 'sub_lead');
  const isStaff = currentUser.role === 'staff';
  const defaultSien = isStaff ? currentUser.id : (prefill?.userId || '');
  const today = new Date('2026-05-20').toISOString().slice(0,10);

  const [form, setForm] = useStateE2({
    userId:         prefill?.userId         || defaultSien,
    date:           prefill?.date           || today,
    website:        prefill?.website        || '',
    signup:         prefill?.signup         ?? '',
    signupDeposit:  prefill?.signupDeposit  ?? '',
    firstDeposit:   prefill?.firstDeposit   ?? '',
    dailyDeposit:   prefill?.dailyDeposit   ?? '',
    adSpend: {
      amount:       prefill?.adSpend        ?? '',
      currency:     prefill?.adSpendCurrency|| 'THB',
      customCode:   prefill?.adSpendCustomCode || '',
      customRate:   prefill?.adSpendCustomRate || '',
    },
    action:         prefill?.action         || '',
    methods:        prefill?.methods        || [],
    withdraw: {
      amount:       prefill?.withdraw       ?? '',
      currency:     prefill?.withdrawCurrency|| 'THB',
      customCode:   prefill?.withdrawCustomCode || '',
      customRate:   prefill?.withdrawCustomRate || '',
    },
    contentLink:    prefill?.contentLink    || '',
    note:           prefill?.note           || '',
  });

  const [errors, setErrors] = useStateE2({});
  const [showError, setShowError] = useStateE2(false);

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => { const n = {...e}; delete n[k]; return n; });
  };
  const toggleMethod = (id) => {
    setForm(f => ({ ...f, methods: f.methods.includes(id) ? f.methods.filter(m => m !== id) : [...f.methods, id] }));
    if (errors.methods) setErrors(e => { const n = {...e}; delete n.methods; return n; });
  };

  function validate() {
    const e = {};
    if (!form.userId)                                    e.userId = 'กรุณาเลือกเซียน';
    if (!form.date)                                      e.date = 'กรุณาเลือกวันที่';
    if (!form.website)                                   e.website = 'กรุณาเลือกเว็บไซต์';
    if (form.signup === '' || isNaN(+form.signup))       e.signup = 'กรุณากรอกยอดสมัคร';
    if (form.signupDeposit === '' || isNaN(+form.signupDeposit)) e.signupDeposit = 'กรุณากรอกยอดสมัครฝาก';
    else if (+form.signupDeposit > +form.signup)         e.signupDeposit = 'ต้องไม่เกินยอดสมัคร';
    if (form.firstDeposit === '' || isNaN(+form.firstDeposit))   e.firstDeposit = 'กรุณากรอกยอดฝากแรก';
    if (form.dailyDeposit === '' || isNaN(+form.dailyDeposit))   e.dailyDeposit = 'กรุณากรอกยอดฝากทั้งวัน';
    if (form.adSpend.amount === '' || isNaN(+form.adSpend.amount))  e.adSpend = 'กรุณากรอกค่าแอด';
    else if (form.adSpend.currency === 'OTHER' && (!form.adSpend.customCode || !form.adSpend.customRate)) e.adSpend = 'ระบุรหัสสกุลเงินและอัตราแลก';
    if (!form.action)                                    e.action = 'กรุณาเลือก';
    if (form.methods.length === 0)                       e.methods = 'เลือกอย่างน้อย 1 วิธี';
    if (form.withdraw.amount === '' || isNaN(+form.withdraw.amount)) e.withdraw = 'กรุณากรอกยอดเบิก';
    else if (form.withdraw.currency === 'OTHER' && (!form.withdraw.customCode || !form.withdraw.customRate)) e.withdraw = 'ระบุรหัสสกุลเงินและอัตราแลก';
    return e;
  }

  function calcTHB(money) {
    if (money.currency === 'OTHER') return (+money.amount || 0) * (+money.customRate || 0);
    const c = window.CURRENCIES.find(c => c.code === money.currency);
    return (+money.amount || 0) * (c?.rate || 1);
  }

  function handleSubmit(ev) {
    ev?.preventDefault?.();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) {
      setShowError(true);
      setTimeout(() => {
        const el = document.querySelector('.invalid');
        if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
      }, 50);
      return;
    }
    setShowError(false);
    const adTHB = calcTHB(form.adSpend);
    const wdTHB = calcTHB(form.withdraw);
    const u = window.getUser(form.userId);
    const entry = {
      id: prefill?.id || 'E' + Date.now(),
      userId: form.userId,
      userName: u.name,
      userNick: u.nickname,
      teamId: u.teamId,
      subteamId: u.subteamId,
      date: form.date,
      website: form.website,
      signup: +form.signup,
      signupDeposit: +form.signupDeposit,
      firstDeposit: +form.firstDeposit,
      dailyDeposit: +form.dailyDeposit,
      adSpend: +form.adSpend.amount,
      adSpendCurrency: form.adSpend.currency,
      adSpendCustomCode: form.adSpend.customCode,
      adSpendCustomRate: form.adSpend.customRate ? +form.adSpend.customRate : null,
      adSpendTHB: Math.round(adTHB),
      action: form.action,
      methods: form.methods,
      withdraw: +form.withdraw.amount,
      withdrawCurrency: form.withdraw.currency,
      withdrawCustomCode: form.withdraw.customCode,
      withdrawCustomRate: form.withdraw.customRate ? +form.withdraw.customRate : null,
      withdrawTHB: Math.round(wdTHB),
      contentLink: form.contentLink,
      note: form.note,
      createdAt: new Date().toISOString(),
    };
    onSubmit(entry);
  }

  const invalidCls = (key) => errors[key] ? 'invalid' : '';
  const errorCount = Object.keys(errors).length;

  return (
    <form className="card" onSubmit={handleSubmit} noValidate>
      <div className="card-header" style={{justifyContent:'space-between'}}>
        <div className="row" style={{gap: 12}}>
          <div style={{width:34, height:34, borderRadius:8, background:'var(--gold-tint)', display:'grid', placeItems:'center', color:'var(--gold)'}}>
            <Icon name="plus" size={16}/>
          </div>
          <div>
            <div className="card-title">บันทึกผลการทำงานรายวัน</div>
            <div className="card-sub">กรอกข้อมูลให้ครบทุกช่อง · ฟิลด์ที่มีเครื่องหมาย <span style={{color:'var(--gold)'}}>*</span> = บังคับ</div>
          </div>
        </div>
        <div className="row" style={{gap:8}}>
          {errorCount > 0 && <span className="badge" style={{background:'var(--danger-soft)', color:'var(--danger)'}}>
            <Icon name="alert" size={11}/> ขาด {errorCount} ช่อง
          </span>}
        </div>
      </div>

      {showError && errorCount > 0 && (
        <div style={{padding:'12px 22px', background:'var(--danger-soft)', borderBottom:'1px solid var(--line)', color:'var(--danger)', fontSize:13, display:'flex', alignItems:'center', gap:10}}>
          <Icon name="alert" size={15}/>
          <strong>กรอกข้อมูลไม่ครบ</strong>
          <span style={{opacity:0.8}}>— กรุณาตรวจสอบช่องที่มีกรอบสีแดงด้านล่าง</span>
        </div>
      )}

      <div className="card-pad-lg">
        <div className="form-grid">

          {/* Row 1: เซียน + วันที่ */}
          <div className="field field-col-6">
            <label className="label">เลือกเซียน <span className="req">*</span></label>
            <SeianCombobox
              users={selectableSiens}
              value={form.userId}
              onChange={(v) => update('userId', v)}
              disabled={isStaff}
              invalid={!!errors.userId}
            />
            {errors.userId && <div className="error-text"><Icon name="alert" size={11}/> {errors.userId}</div>}
            {isStaff && <div className="hint">พนักงานบันทึกของตนเองเท่านั้น</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">วันที่ <span className="req">*</span></label>
            <input type="date" className={`input ${invalidCls('date')}`} value={form.date} onChange={e => update('date', e.target.value)} max="2026-05-20"/>
            {errors.date && <div className="error-text"><Icon name="alert" size={11}/> {errors.date}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">เว็บไซต์ <span className="req">*</span></label>
            <select className={`select ${invalidCls('website')}`} value={form.website} onChange={e => update('website', e.target.value)}>
              <option value="">— เลือกเว็บไซต์ —</option>
              {window.WEBSITES.map(w => <option key={w.id} value={w.id}>{w.label}</option>)}
            </select>
            {errors.website && <div className="error-text"><Icon name="alert" size={11}/> {errors.website}</div>}
          </div>

          {/* Row 2: ยอดต่างๆ */}
          <div className="field field-col-3">
            <label className="label">ยอดสมัคร <span className="req">*</span></label>
            <div className="input-suffix-group">
              <input type="number" min="0" className={`input num ${invalidCls('signup')}`} value={form.signup} onChange={e => update('signup', e.target.value)} placeholder="0"/>
              <span className="input-suffix">คน</span>
            </div>
            {errors.signup && <div className="error-text"><Icon name="alert" size={11}/> {errors.signup}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">ยอดสมัครฝาก <span className="req">*</span></label>
            <div className="input-suffix-group">
              <input type="number" min="0" className={`input num ${invalidCls('signupDeposit')}`} value={form.signupDeposit} onChange={e => update('signupDeposit', e.target.value)} placeholder="0"/>
              <span className="input-suffix">คน</span>
            </div>
            {errors.signupDeposit && <div className="error-text"><Icon name="alert" size={11}/> {errors.signupDeposit}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">ยอดฝากแรก <span className="req">*</span></label>
            <div className="input-suffix-group">
              <input type="number" min="0" className={`input num ${invalidCls('firstDeposit')}`} value={form.firstDeposit} onChange={e => update('firstDeposit', e.target.value)} placeholder="0"/>
              <span className="input-suffix">฿</span>
            </div>
            {errors.firstDeposit && <div className="error-text"><Icon name="alert" size={11}/> {errors.firstDeposit}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">ยอดฝากทั้งวัน <span className="req">*</span></label>
            <div className="input-suffix-group">
              <input type="number" min="0" className={`input num ${invalidCls('dailyDeposit')}`} value={form.dailyDeposit} onChange={e => update('dailyDeposit', e.target.value)} placeholder="0"/>
              <span className="input-suffix">฿</span>
            </div>
            {errors.dailyDeposit && <div className="error-text"><Icon name="alert" size={11}/> {errors.dailyDeposit}</div>}
          </div>

          {/* Row 3: ค่าแอด + ยอดเบิก */}
          <div className="field field-col-6">
            <label className="label">ค่าแอดที่ใช้ไป <span className="req">*</span></label>
            <CurrencyInput value={form.adSpend} onChange={v => update('adSpend', v)} invalid={!!errors.adSpend}/>
            {errors.adSpend && <div className="error-text"><Icon name="alert" size={11}/> {errors.adSpend}</div>}
          </div>

          <div className="field field-col-6">
            <label className="label">ยอดเบิก (ค่าแอด) <span className="req">*</span></label>
            <CurrencyInput value={form.withdraw} onChange={v => update('withdraw', v)} invalid={!!errors.withdraw}/>
            {errors.withdraw && <div className="error-text"><Icon name="alert" size={11}/> {errors.withdraw}</div>}
            <div className="hint">ยอดเบิกอื่นๆ (อุปกรณ์ ค่าจ้าง ฯลฯ) บันทึกที่หน้า "กรอกค่าใช้จ่าย"</div>
          </div>

          {/* Row 4: การกระทำ */}
          <div className="field field-col-6">
            <label className="label">วันนี้ได้ทำการตลาดมั้ย? <span className="req">*</span></label>
            <div className={`seg ${errors.action ? 'invalid' : ''}`} style={errors.action ? {borderColor:'var(--danger)', background:'var(--danger-soft)'} : {}}>
              <span className={`seg-opt ${form.action === 'did_market' ? 'active' : ''}`} onClick={() => update('action', 'did_market')}>
                <span className="seg-dot dot-sold"/> ได้ทำ
              </span>
              <span className={`seg-opt ${form.action === 'no_market' ? 'active' : ''}`} onClick={() => update('action', 'no_market')}>
                <span className="seg-dot dot-nosold"/> ไม่ได้ทำ
              </span>
            </div>
            {errors.action && <div className="error-text"><Icon name="alert" size={11}/> {errors.action}</div>}
          </div>

          {/* Row 5: วิธี */}
          <div className="field field-col-12">
            <label className="label">วิธีที่ใช้ <span className="req">*</span> <span className="hint" style={{fontWeight:400, marginLeft:8}}>เลือกได้มากกว่า 1</span></label>
            <div className={`pill-group ${errors.methods ? 'invalid' : ''}`}>
              {window.METHODS.map(m => (
                <span key={m.id} className={`pill ${form.methods.includes(m.id) ? 'active' : ''}`} onClick={() => toggleMethod(m.id)}>
                  <Icon name={m.icon} size={13}/>
                  {m.label}
                  {form.methods.includes(m.id) && <Icon name="check" size={11}/>}
                </span>
              ))}
            </div>
            {errors.methods && <div className="error-text"><Icon name="alert" size={11}/> {errors.methods}</div>}
          </div>

          {/* Row 6: ลิงก์ + หมายเหตุ */}
          <div className="field field-col-6">
            <label className="label">ลิงก์คอนเทนต์ <span className="hint">(ถ้ามี)</span></label>
            <div className="input-suffix-group">
              <input type="url" className="input" placeholder="https://..." value={form.contentLink} onChange={e => update('contentLink', e.target.value)}/>
              <span className="input-suffix"><Icon name="link" size={13}/></span>
            </div>
          </div>

          <div className="field field-col-6">
            <label className="label">หมายเหตุ <span className="hint">(ถ้ามี)</span></label>
            <textarea className="textarea" rows="2" placeholder="ระบุรายละเอียดเพิ่มเติม..." value={form.note} onChange={e => update('note', e.target.value)}/>
          </div>

        </div>
      </div>

      <div className="card-header" style={{borderTop:'1px solid var(--line)', borderBottom:'none', justifyContent:'space-between', background:'var(--bg-sunken)', borderRadius:'0 0 14px 14px'}}>
        <div className="row" style={{gap:14, fontSize:12, color:'var(--ink-3)'}}>
          <span className="kbd">⌘ + Enter</span>
          <span>ส่งฟอร์ม</span>
        </div>
        <div className="row" style={{gap:8}}>
          <button type="button" className="btn btn-secondary btn-sm" onClick={onCancel}>ยกเลิก</button>
          <button type="submit" className="btn btn-primary">
            <Icon name="check" size={14}/> บันทึกข้อมูล
          </button>
        </div>
      </div>
    </form>
  );
}

window.DataEntryForm = DataEntryForm;
window.SeianCombobox = SeianCombobox;
window.CurrencyInput = CurrencyInput;