// Records — purchase & loss tracking
// อัปเดต: submit ฟอร์มไปที่ Cloudflare Workers API จริง

const Records = ({ tweaks }) => {
  const { INVENTORY, LOSS_TYPES } = window.BFData;
  const [tab,       setTab]       = React.useState('purchase');
  const [purchases, setPurchases] = React.useState(window.BFData.PURCHASES);
  const [losses,    setLosses]    = React.useState(window.BFData.LOSSES);

  return (
    <div className="bf-records">
      <SectionHead eyebrow="บันทึกรายการ" title={tab === 'purchase' ? 'ซื้อวัตถุดิบ' : 'สูญเสีย'} />

      <div className="bf-rec-tabs">
        <button className={tab === 'purchase' ? 'is-active' : ''} onClick={() => setTab('purchase')}>
          <span className="bf-rec-tab-dot bf-rec-dot-buy" />
          ซื้อวัตถุดิบ
          <em>{purchases.length}</em>
        </button>
        <button className={tab === 'loss' ? 'is-active' : ''} onClick={() => setTab('loss')}>
          <span className="bf-rec-tab-dot bf-rec-dot-loss" />
          สูญเสีย
          <em>{losses.length}</em>
        </button>
      </div>

      <div className="bf-rec-grid">
        {tab === 'purchase' ? (
          <>
            <PurchaseForm
              inventory={INVENTORY}
              onAdd={p => setPurchases(prev => [p, ...prev])}
            />
            <RecentList
              title="รายการล่าสุด"
              items={purchases}
              empty="ยังไม่มีประวัติการซื้อ"
              renderItem={p => (
                <>
                  <div className="bf-rec-item-top">
                    <strong>{p.item}</strong>
                    <span>{baht(p.total)}</span>
                  </div>
                  <div className="bf-rec-item-bot">
                    <span>{p.qty} {p.unit}</span>
                    <span>{p.date}</span>
                  </div>
                </>
              )}
            />
          </>
        ) : (
          <>
            <LossForm
              types={LOSS_TYPES}
              onAdd={l => setLosses(prev => [l, ...prev])}
            />
            <RecentList
              title="รายการล่าสุด"
              items={losses}
              empty="ยังไม่มีประวัติการสูญเสีย"
              renderItem={l => (
                <>
                  <div className="bf-rec-item-top">
                    <strong>{l.type}</strong>
                    <span className="bf-loss-amt">−{baht(l.value)}</span>
                  </div>
                  <div className="bf-rec-item-detail">{l.detail}</div>
                  <div className="bf-rec-item-bot">
                    <span>{l.note || '—'}</span>
                    <span>{l.date}</span>
                  </div>
                </>
              )}
            />
          </>
        )}
      </div>
    </div>
  );
};

// ── Purchase form ──────────────────────────────────────────────────────────────
const PurchaseForm = ({ inventory, onAdd }) => {
  const todayDefault = new Date().toLocaleDateString('sv-SE', { timeZone: 'Asia/Bangkok' });
  const [date,    setDate]    = React.useState(todayDefault);
  const [itemId,  setItemId]  = React.useState('');
  const [qty,     setQty]     = React.useState('');
  const [total,   setTotal]   = React.useState('');
  const [saving,  setSaving]  = React.useState(false);
  const [errMsg,  setErrMsg]  = React.useState('');

  const itemData = inventory.find(i => String(i.id) === itemId);
  // ราคาประมาณจาก cost_per_unit ที่คำนวณจาก weighted avg ของการซื้อที่ผ่านมา
  const suggestedTotal = itemData && qty
    ? Math.round((itemData.costPer || itemData.cost_per_unit || 0) * Number(qty))
    : null;

  const submit = async (e) => {
    e.preventDefault();
    if (!itemId || !qty || !total) return;
    setSaving(true);
    setErrMsg('');
    try {
      await window.BFApi.addPurchase({
        date,
        ingredient_id:   itemData.id,
        ingredient_name: itemData.name,
        qty:             Number(qty),
        total_price:     Number(total),
      });
      const newEntry = {
        date,
        item:  itemData.name,
        qty:   Number(qty),
        unit:  itemData.unit,
        total: Number(total),
      };
      onAdd(newEntry);
      setItemId(''); setQty(''); setTotal('');
    } catch (e) {
      setErrMsg(e.message || 'บันทึกไม่สำเร็จ');
    } finally {
      setSaving(false);
    }
  };

  return (
    <Card title="บันทึกการซื้อวัตถุดิบ">
      <form className="bf-form" onSubmit={submit}>
        <div className="bf-field">
          <label>วันที่</label>
          <input type="date" value={date} onChange={e => setDate(e.target.value)} />
        </div>
        <div className="bf-field">
          <label>วัตถุดิบ</label>
          <select value={itemId} onChange={e => setItemId(e.target.value)}>
            <option value="">— เลือกวัตถุดิบ —</option>
            {inventory.map(i => (
              <option key={i.id} value={String(i.id)}>{i.name} ({i.unit})</option>
            ))}
          </select>
        </div>
        <div className="bf-field-row">
          <div className="bf-field">
            <label>ปริมาณ {itemData && <em>({itemData.unit})</em>}</label>
            <input
              type="number" min="0" step="0.01" placeholder="0"
              value={qty} onChange={e => setQty(e.target.value)}
            />
          </div>
          <div className="bf-field">
            <label>ราคารวม (฿)</label>
            <input
              type="number" min="0" step="1"
              placeholder={suggestedTotal ? `~${suggestedTotal}` : '0'}
              value={total}
              onChange={e => setTotal(e.target.value)}
            />
            {suggestedTotal !== null && suggestedTotal !== Number(total) && (
              <button type="button" className="bf-suggest" onClick={() => setTotal(String(suggestedTotal))}>
                ใช้ราคาประมาณ ฿{suggestedTotal}
              </button>
            )}
          </div>
        </div>
        {errMsg && <div style={{ color: 'var(--bf-warn)', fontSize: 13 }}>{errMsg}</div>}
        <button
          type="submit"
          className="bf-btn bf-btn-primary bf-btn-block"
          disabled={!itemId || !qty || !total || saving}
        >
          {saving ? 'กำลังบันทึก...' : 'บันทึกการซื้อ'}
        </button>
      </form>
    </Card>
  );
};

// ── Loss form ──────────────────────────────────────────────────────────────────
const LossForm = ({ types, onAdd }) => {
  const todayDefault = new Date().toLocaleDateString('sv-SE', { timeZone: 'Asia/Bangkok' });
  const [date,   setDate]   = React.useState(todayDefault);
  const [type,   setType]   = React.useState(types[0]);
  const [detail, setDetail] = React.useState('');
  const [value,  setValue]  = React.useState('');
  const [note,   setNote]   = React.useState('');
  const [saving, setSaving] = React.useState(false);
  const [errMsg, setErrMsg] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!type || !detail || !value) return;
    setSaving(true);
    setErrMsg('');
    try {
      await window.BFApi.addLoss({
        date,
        loss_type: type,
        detail,
        amount: Number(value),
        note,
      });
      onAdd({ date, type, detail, value: Number(value), note });
      setDetail(''); setValue(''); setNote('');
    } catch (e) {
      setErrMsg(e.message || 'บันทึกไม่สำเร็จ');
    } finally {
      setSaving(false);
    }
  };

  return (
    <Card title="บันทึกการสูญเสีย">
      <form className="bf-form" onSubmit={submit}>
        <div className="bf-field">
          <label>วันที่</label>
          <input type="date" value={date} onChange={e => setDate(e.target.value)} />
        </div>
        <div className="bf-field">
          <label>ประเภท</label>
          <div className="bf-radio-row">
            {types.map(t => (
              <Pill key={t} active={type === t} onClick={() => setType(t)}>{t}</Pill>
            ))}
          </div>
        </div>
        <div className="bf-field">
          <label>รายละเอียด</label>
          <input
            type="text"
            placeholder="เช่น กาแฟเทหล่น 2 แก้ว"
            value={detail}
            onChange={e => setDetail(e.target.value)}
          />
        </div>
        <div className="bf-field-row">
          <div className="bf-field">
            <label>มูลค่า (฿)</label>
            <input type="number" min="0" step="1" placeholder="0" value={value} onChange={e => setValue(e.target.value)} />
          </div>
          <div className="bf-field">
            <label>หมายเหตุ</label>
            <input type="text" placeholder="ไม่บังคับ" value={note} onChange={e => setNote(e.target.value)} />
          </div>
        </div>
        {errMsg && <div style={{ color: 'var(--bf-warn)', fontSize: 13 }}>{errMsg}</div>}
        <button
          type="submit"
          className="bf-btn bf-btn-warn bf-btn-block"
          disabled={!type || !detail || !value || saving}
        >
          {saving ? 'กำลังบันทึก...' : 'บันทึกการสูญเสีย'}
        </button>
      </form>
    </Card>
  );
};

// ── Recent list ────────────────────────────────────────────────────────────────
const RecentList = ({ title, items, empty, renderItem }) => (
  <Card title={title} subtitle={items.length > 0 ? `${items.length} รายการ` : null}>
    {items.length === 0 ? (
      <EmptyState icon="∅" title={empty} />
    ) : (
      <div className="bf-rec-list">
        {items.map((it, i) => (
          <div key={it.id ?? i} className="bf-rec-item">
            {renderItem(it)}
          </div>
        ))}
      </div>
    )}
  </Card>
);

window.Records = Records;