// Admin — จัดการเมนู, วัตถุดิบ, สูตร, ประวัติขาย

const API_BASE = 'https://butterfly-coffee.butterfly-coffee.workers.dev';

async function adminFetch(path, opts = {}) {
  const res = await fetch(API_BASE + path, {
    headers: { 'Content-Type': 'application/json' },
    ...opts,
  });
  const data = await res.json();
  if (!res.ok) throw new Error(data.error || `API error ${res.status}`);
  return data;
}

// ── Top-level Admin component ──────────────────────────────────────────────────
const Admin = () => {
  const [tab, setTab] = React.useState('menus');
  return (
    <div className="bf-records">
      <SectionHead eyebrow="จัดการระบบ" title="Admin" />
      <div className="bf-rec-tabs" style={{ flexWrap: 'wrap' }}>
        {[
          { id: 'menus',       label: 'เมนู'        },
          { id: 'ingredients', label: 'วัตถุดิบ'    },
          { id: 'recipes',     label: 'สูตร'        },
          { id: 'history',     label: 'ประวัติขาย'  },
          { id: 'breakeven',   label: 'จุดคุ้มทุน'  },
        ].map(t => (
          <button key={t.id} className={tab === t.id ? 'is-active' : ''} onClick={() => setTab(t.id)}>
            {t.label}
          </button>
        ))}
      </div>
      <div className="bf-rec-grid" style={{ '--cols': 1 }}>
        {tab === 'menus'       && <MenuManager />}
        {tab === 'ingredients' && <IngredientManager />}
        {tab === 'recipes'     && <RecipeManager />}
        {tab === 'history'     && <SalesHistory />}
        {tab === 'breakeven'   && <BreakevenAnalysis />}
      </div>
    </div>
  );
};

// ── Shared: inline editable row ───────────────────────────────────────────────
const FieldRow = ({ label, value, type = 'text', onChange, step }) => (
  <div className="bf-field" style={{ marginBottom: 6 }}>
    <label style={{ fontSize: 11, color: 'var(--bf-text-3)', marginBottom: 2 }}>{label}</label>
    <input
      type={type} step={step} value={value}
      onChange={e => onChange(type === 'number' ? Number(e.target.value) : e.target.value)}
      style={{ padding: '4px 8px', fontSize: 14, width: '100%',
               border: '1px solid var(--bf-border)', borderRadius: 6,
               background: 'var(--bf-surface)', color: 'var(--bf-text-1)' }}
    />
  </div>
);

// ── STATUS badge ──────────────────────────────────────────────────────────────
const StatusBadge = ({ active }) => (
  <span style={{
    fontSize: 11, padding: '2px 8px', borderRadius: 99, fontWeight: 600,
    background: active ? 'rgba(80,180,100,0.15)' : 'rgba(200,100,100,0.12)',
    color: active ? '#2a7a40' : '#a03030',
  }}>
    {active ? 'เปิด' : 'ปิด'}
  </span>
);

// ════════════════════════════════════════════════════════════════════════════════
// MENU MANAGER
// ════════════════════════════════════════════════════════════════════════════════
const MenuManager = () => {
  const [menus,   setMenus]   = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editId,  setEditId]  = React.useState(null);
  const [editData, setEditData] = React.useState({});
  const [adding,  setAdding]  = React.useState(false);
  const [newMenu, setNewMenu] = React.useState({ name: '', price: '', delivery_price: '', sort_order: 99 });
  const [saving,  setSaving]  = React.useState(false);

  const load = () => {
    setLoading(true);
    adminFetch('/api/admin/menus')
      .then(d => { setMenus(d); })
      .catch(e => { console.error('load menus:', e); })
      .finally(() => setLoading(false));
  };
  React.useEffect(load, []);

  const startEdit = (m) => {
    setEditId(m.id);
    setEditData({ name: m.name, price: m.price, delivery_price: m.delivery_price || 0, sort_order: m.sort_order, is_active: !!m.is_active });
  };
  const saveEdit = async () => {
    setSaving(true);
    try {
      await adminFetch(`/api/admin/menus/${editId}`, { method: 'PUT', body: JSON.stringify(editData) });
      setEditId(null);
      load();
    } finally { setSaving(false); }
  };
  const addMenu = async () => {
    if (!newMenu.name || !newMenu.price) return;
    setSaving(true);
    try {
      await adminFetch('/api/admin/menus', { method: 'POST', body: JSON.stringify({
        name: newMenu.name, price: Number(newMenu.price),
        delivery_price: Number(newMenu.delivery_price) || 0,
        sort_order: Number(newMenu.sort_order) || 99,
      })});
      setAdding(false);
      setNewMenu({ name: '', price: '', delivery_price: '', sort_order: 99 });
      load();
      // reload app menus too
      window.initBFData().catch(() => {});
    } finally { setSaving(false); }
  };

  if (loading) return <Card title="เมนู"><div style={{ padding: 24, color: 'var(--bf-text-3)' }}>กำลังโหลด...</div></Card>;

  return (
    <Card title={`เมนูทั้งหมด (${menus.length})`} action={
      <button className="bf-btn bf-btn-primary" style={{ padding: '6px 14px', fontSize: 13 }} onClick={() => setAdding(v => !v)}>
        {adding ? 'ยกเลิก' : '+ เพิ่มเมนู'}
      </button>
    }>
      {adding && (
        <div style={{ background: 'var(--bf-surface-2)', borderRadius: 10, padding: 16, marginBottom: 16 }}>
          <div style={{ fontWeight: 600, marginBottom: 10, fontSize: 14 }}>เมนูใหม่</div>
          <FieldRow label="ชื่อเมนู" value={newMenu.name} onChange={v => setNewMenu(p => ({...p, name: v}))} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <FieldRow label="ราคาปกติ (฿)" value={newMenu.price} type="number" onChange={v => setNewMenu(p => ({...p, price: v}))} />
            <FieldRow label="ราคา Delivery (฿)" value={newMenu.delivery_price} type="number" onChange={v => setNewMenu(p => ({...p, delivery_price: v}))} />
          </div>
          <FieldRow label="ลำดับ sort" value={newMenu.sort_order} type="number" onChange={v => setNewMenu(p => ({...p, sort_order: v}))} />
          <button className="bf-btn bf-btn-primary bf-btn-block" disabled={saving || !newMenu.name || !newMenu.price} onClick={addMenu}>
            {saving ? 'กำลังบันทึก...' : 'บันทึกเมนูใหม่'}
          </button>
        </div>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {menus.map(m => (
          <div key={m.id} style={{
            padding: '10px 12px', borderRadius: 8, border: '1px solid var(--bf-border)',
            background: editId === m.id ? 'var(--bf-surface-2)' : 'transparent',
          }}>
            {editId === m.id ? (
              <div>
                <FieldRow label="ชื่อเมนู" value={editData.name} onChange={v => setEditData(p => ({...p, name: v}))} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <FieldRow label="ราคาปกติ (฿)" value={editData.price} type="number" onChange={v => setEditData(p => ({...p, price: v}))} />
                  <FieldRow label="ราคา Delivery (฿)" value={editData.delivery_price} type="number" onChange={v => setEditData(p => ({...p, delivery_price: v}))} />
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 8 }}>
                  <label style={{ fontSize: 13 }}>สถานะ:</label>
                  <Pill active={editData.is_active} onClick={() => setEditData(p => ({...p, is_active: !p.is_active}))}>
                    {editData.is_active ? 'เปิด' : 'ปิด'}
                  </Pill>
                  <div style={{ flex: 1 }} />
                  <button className="bf-btn bf-btn-ghost" style={{ padding: '4px 12px', fontSize: 13 }} onClick={() => setEditId(null)}>ยกเลิก</button>
                  <button className="bf-btn bf-btn-primary" style={{ padding: '4px 12px', fontSize: 13 }} disabled={saving} onClick={saveEdit}>บันทึก</button>
                </div>
              </div>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{m.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--bf-text-3)' }}>
                    ฿{m.price} {m.delivery_price ? `· Delivery ฿${m.delivery_price}` : ''}
                  </div>
                </div>
                <StatusBadge active={m.is_active} />
                <button className="bf-btn bf-btn-ghost" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => startEdit(m)}>แก้ไข</button>
              </div>
            )}
          </div>
        ))}
      </div>
    </Card>
  );
};

// ════════════════════════════════════════════════════════════════════════════════
// INGREDIENT MANAGER
// ════════════════════════════════════════════════════════════════════════════════
const IngredientManager = () => {
  const [ings,    setIngs]    = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editId,  setEditId]  = React.useState(null);
  const [editData, setEditData] = React.useState({});
  const [adding,  setAdding]  = React.useState(false);
  const [newIng,  setNewIng]  = React.useState({ name: '', unit: '', cost_per_unit: 0, initial_qty: 0, min_threshold: 0 });
  const [saving,  setSaving]  = React.useState(false);

  const load = () => {
    setLoading(true);
    adminFetch('/api/admin/ingredients')
      .then(d => { setIngs(d); })
      .catch(e => { console.error('load ingredients:', e); })
      .finally(() => setLoading(false));
  };
  React.useEffect(load, []);

  const startEdit = (i) => {
    setEditId(i.id);
    setEditData({ name: i.name, unit: i.unit, cost_per_unit: i.cost_per_unit, initial_qty: i.initial_qty, min_threshold: i.min_threshold, is_active: !!i.is_active });
  };
  const saveEdit = async () => {
    setSaving(true);
    try {
      await adminFetch(`/api/admin/ingredients/${editId}`, { method: 'PUT', body: JSON.stringify(editData) });
      setEditId(null); load();
    } finally { setSaving(false); }
  };
  const addIng = async () => {
    if (!newIng.name || !newIng.unit) return;
    setSaving(true);
    try {
      await adminFetch('/api/admin/ingredients', { method: 'POST', body: JSON.stringify({
        name: newIng.name, unit: newIng.unit,
        cost_per_unit: Number(newIng.cost_per_unit),
        initial_qty: Number(newIng.initial_qty),
        min_threshold: Number(newIng.min_threshold),
      })});
      setAdding(false);
      setNewIng({ name: '', unit: '', cost_per_unit: 0, initial_qty: 0, min_threshold: 0 });
      load();
    } finally { setSaving(false); }
  };

  if (loading) return <Card title="วัตถุดิบ"><div style={{ padding: 24, color: 'var(--bf-text-3)' }}>กำลังโหลด...</div></Card>;

  return (
    <Card title={`วัตถุดิบทั้งหมด (${ings.length})`} action={
      <button className="bf-btn bf-btn-primary" style={{ padding: '6px 14px', fontSize: 13 }} onClick={() => setAdding(v => !v)}>
        {adding ? 'ยกเลิก' : '+ เพิ่มวัตถุดิบ'}
      </button>
    }>
      {adding && (
        <div style={{ background: 'var(--bf-surface-2)', borderRadius: 10, padding: 16, marginBottom: 16 }}>
          <div style={{ fontWeight: 600, marginBottom: 10, fontSize: 14 }}>วัตถุดิบใหม่</div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 8 }}>
            <FieldRow label="ชื่อ" value={newIng.name} onChange={v => setNewIng(p => ({...p, name: v}))} />
            <FieldRow label="หน่วย (กก./ลิตร/ใบ)" value={newIng.unit} onChange={v => setNewIng(p => ({...p, unit: v}))} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            <FieldRow label="ราคา/หน่วย (฿)" value={newIng.cost_per_unit} type="number" step="0.01" onChange={v => setNewIng(p => ({...p, cost_per_unit: v}))} />
            <FieldRow label="สต๊อกเริ่มต้น" value={newIng.initial_qty} type="number" step="0.01" onChange={v => setNewIng(p => ({...p, initial_qty: v}))} />
            <FieldRow label="แจ้งเตือนเมื่อ ≤" value={newIng.min_threshold} type="number" step="0.01" onChange={v => setNewIng(p => ({...p, min_threshold: v}))} />
          </div>
          <button className="bf-btn bf-btn-primary bf-btn-block" disabled={saving || !newIng.name || !newIng.unit} onClick={addIng}>
            {saving ? 'กำลังบันทึก...' : 'บันทึกวัตถุดิบ'}
          </button>
        </div>
      )}

      {(() => {
        // จัดกลุ่มตาม category
        const ORDER = ['เมล็ดกาแฟ','นม','ไซรัป/ผง','บรรจุภัณฑ์','ต้นทุนแฝง','อื่นๆ'];
        const groups = {};
        ings.forEach(i => {
          const cat = i.category || 'อื่นๆ';
          if (!groups[cat]) groups[cat] = [];
          groups[cat].push(i);
        });
        const sortedCats = ORDER.filter(c => groups[c]).concat(
          Object.keys(groups).filter(c => !ORDER.includes(c))
        );
        return sortedCats.map(cat => (
          <div key={cat} style={{ marginBottom: 16 }}>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
              color: 'var(--bf-text-3)', textTransform: 'uppercase',
              padding: '6px 4px 4px', borderBottom: '1px solid var(--bf-border)',
              marginBottom: 4,
            }}>
              {cat}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {groups[cat].map(i => (
                <div key={i.id} style={{
                  padding: '10px 12px', borderRadius: 8, border: '1px solid var(--bf-border)',
                  background: editId === i.id ? 'var(--bf-surface-2)' : 'transparent',
                }}>
                  {editId === i.id ? (
                    <div>
                      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 8 }}>
                        <FieldRow label="ชื่อ" value={editData.name} onChange={v => setEditData(p => ({...p, name: v}))} />
                        <FieldRow label="หน่วย" value={editData.unit} onChange={v => setEditData(p => ({...p, unit: v}))} />
                      </div>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                        <FieldRow label="ราคา/หน่วย (฿)" value={editData.cost_per_unit} type="number" step="0.01" onChange={v => setEditData(p => ({...p, cost_per_unit: v}))} />
                        <FieldRow label="สต๊อกเริ่มต้น" value={editData.initial_qty} type="number" step="0.01" onChange={v => setEditData(p => ({...p, initial_qty: v}))} />
                        <FieldRow label="แจ้งเตือนเมื่อ ≤" value={editData.min_threshold} type="number" step="0.01" onChange={v => setEditData(p => ({...p, min_threshold: v}))} />
                      </div>
                      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 6 }}>
                        <Pill active={editData.is_active} onClick={() => setEditData(p => ({...p, is_active: !p.is_active}))}>
                          {editData.is_active ? 'เปิด' : 'ปิด'}
                        </Pill>
                        <div style={{ flex: 1 }} />
                        <button className="bf-btn bf-btn-ghost" style={{ padding: '4px 12px', fontSize: 13 }} onClick={() => setEditId(null)}>ยกเลิก</button>
                        <button className="bf-btn bf-btn-primary" style={{ padding: '4px 12px', fontSize: 13 }} disabled={saving} onClick={saveEdit}>บันทึก</button>
                      </div>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{i.name} <span style={{ fontSize: 12, color: 'var(--bf-text-3)' }}>({i.unit})</span></div>
                        <div style={{ fontSize: 12, color: 'var(--bf-text-3)' }}>
                          ฿{i.cost_per_unit?.toFixed(3)}/หน่วย · สต๊อก {i.remaining ?? '-'} {i.unit}
                        </div>
                      </div>
                      <StatusBadge active={i.is_active} />
                      <button className="bf-btn bf-btn-ghost" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => startEdit(i)}>แก้ไข</button>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        ));
      })()}
    </Card>
  );
};

// ════════════════════════════════════════════════════════════════════════════════
// RECIPE MANAGER
// ════════════════════════════════════════════════════════════════════════════════
const RecipeManager = () => {
  const [menus,   setMenus]   = React.useState([]);
  const [ings,    setIngs]    = React.useState([]);
  const [menuId,  setMenuId]  = React.useState('');
  const [recipe,  setRecipe]  = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [saving,  setSaving]  = React.useState(false);
  const [addIngId, setAddIngId] = React.useState('');
  const [addQty,   setAddQty]  = React.useState('');

  React.useEffect(() => {
    Promise.all([
      adminFetch('/api/admin/menus'),
      adminFetch('/api/admin/ingredients'),
    ]).then(([m, i]) => { setMenus(m.filter(x => x.is_active)); setIngs(i.filter(x => x.is_active)); setLoading(false); });
  }, []);

  const loadRecipe = (id) => {
    setMenuId(id);
    if (!id) { setRecipe([]); return; }
    adminFetch(`/api/admin/recipes/${id}`).then(setRecipe);
  };

  const removeRow = (ingId) => setRecipe(r => r.filter(x => x.ingredient_id !== ingId));
  const updateQty = (ingId, qty) => setRecipe(r => r.map(x => x.ingredient_id === ingId ? {...x, quantity: qty} : x));

  const addRow = () => {
    if (!addIngId || !addQty) return;
    const ing = ings.find(i => String(i.id) === addIngId);
    if (!ing || recipe.find(r => r.ingredient_id === ing.id)) return;
    setRecipe(r => [...r, { ingredient_id: ing.id, name: ing.name, unit: ing.unit, quantity: Number(addQty) }]);
    setAddIngId(''); setAddQty('');
  };

  const save = async () => {
    setSaving(true);
    try {
      await adminFetch(`/api/admin/recipes/${menuId}`, { method: 'PUT', body: JSON.stringify({
        ingredients: recipe.map(r => ({ ingredient_id: r.ingredient_id, quantity: r.quantity })),
      })});
      alert('บันทึกสูตรสำเร็จ!');
    } finally { setSaving(false); }
  };

  if (loading) return <Card title="สูตร"><div style={{ padding: 24, color: 'var(--bf-text-3)' }}>กำลังโหลด...</div></Card>;

  const selectedMenu = menus.find(m => String(m.id) === menuId);
  const cost = recipe.reduce((s, r) => s + (r.quantity || 0) * (ings.find(i => i.id === r.ingredient_id)?.cost_per_unit || 0), 0);

  return (
    <Card title="แก้สูตรวัตถุดิบ">
      <div className="bf-field" style={{ marginBottom: 16 }}>
        <label>เลือกเมนู</label>
        <select value={menuId} onChange={e => loadRecipe(e.target.value)}>
          <option value="">— เลือกเมนู —</option>
          {menus.map(m => <option key={m.id} value={String(m.id)}>{m.name}</option>)}
        </select>
      </div>

      {menuId && (
        <>
          <div style={{ marginBottom: 8 }}>
            <div style={{ fontSize: 13, color: 'var(--bf-text-3)', marginBottom: 6 }}>
              ต้นทุน/แก้ว ≈ <strong style={{ color: 'var(--bf-text-1)' }}>{baht(cost)}</strong>
            </div>
            {selectedMenu && (() => {
              const normalMargin   = selectedMenu.price > 0
                ? ((selectedMenu.price - cost) / selectedMenu.price * 100).toFixed(0) : '—';
              const deliPrice      = selectedMenu.delivery_price || 0;
              // Grab หัก 30% → ร้านได้จริง 70%
              const deliNet        = deliPrice * 0.70;
              const deliMargin     = deliNet > 0
                ? ((deliNet - cost) / deliNet * 100).toFixed(0) : '—';
              const deliProfit     = deliNet - cost;
              return (
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <div style={{
                    flex: 1, minWidth: 120, padding: '8px 12px', borderRadius: 8,
                    background: 'var(--bf-surface-2)', fontSize: 12,
                  }}>
                    <div style={{ color: 'var(--bf-text-3)', marginBottom: 2 }}>Dine in / Takeaway</div>
                    <div style={{ fontWeight: 700, fontSize: 15 }}>
                      {baht(selectedMenu.price - cost)}
                      <span style={{ fontWeight: 400, fontSize: 12, color: 'var(--bf-text-3)', marginLeft: 4 }}>
                        ({normalMargin}% margin)
                      </span>
                    </div>
                  </div>
                  <div style={{
                    flex: 1, minWidth: 120, padding: '8px 12px', borderRadius: 8,
                    background: deliProfit >= 0 ? 'rgba(80,180,100,0.08)' : 'rgba(200,80,80,0.08)',
                    fontSize: 12,
                  }}>
                    <div style={{ color: 'var(--bf-text-3)', marginBottom: 2 }}>
                      Delivery (฿{deliPrice} → หัก Grab 30% → ได้ {baht(deliNet)})
                    </div>
                    <div style={{ fontWeight: 700, fontSize: 15, color: deliProfit >= 0 ? 'var(--bf-text-1)' : '#c0392b' }}>
                      {baht(deliProfit)}
                      <span style={{ fontWeight: 400, fontSize: 12, color: 'var(--bf-text-3)', marginLeft: 4 }}>
                        ({deliMargin}% margin)
                      </span>
                    </div>
                  </div>
                </div>
              );
            })()}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 12 }}>
            {recipe.length === 0 && <div style={{ color: 'var(--bf-text-3)', fontSize: 13, padding: 8 }}>ยังไม่มีวัตถุดิบ — เพิ่มด้านล่าง</div>}
            {recipe.map(r => (
              <div key={r.ingredient_id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 8, background: 'var(--bf-surface-2)' }}>
                <div style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{r.name}</div>
                <input
                  type="number" step="0.001" value={r.quantity}
                  onChange={e => updateQty(r.ingredient_id, Number(e.target.value))}
                  style={{ width: 80, padding: '3px 6px', fontSize: 13, border: '1px solid var(--bf-border)', borderRadius: 6, background: 'var(--bf-surface)', color: 'var(--bf-text-1)' }}
                />
                <span style={{ fontSize: 12, color: 'var(--bf-text-3)', minWidth: 30 }}>{r.unit}</span>
                <button onClick={() => removeRow(r.ingredient_id)} style={{ color: 'var(--bf-text-3)', background: 'none', border: 'none', cursor: 'pointer', fontSize: 18, lineHeight: 1 }}>×</button>
              </div>
            ))}
          </div>

          {/* Add ingredient row */}
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', marginBottom: 14 }}>
            <div style={{ flex: 2 }}>
              <label style={{ fontSize: 11, color: 'var(--bf-text-3)' }}>เพิ่มวัตถุดิบ</label>
              <select value={addIngId} onChange={e => setAddIngId(e.target.value)} style={{ width: '100%' }}>
                <option value="">— เลือก —</option>
                {ings.filter(i => !recipe.find(r => r.ingredient_id === i.id))
                  .map(i => <option key={i.id} value={String(i.id)}>{i.name} ({i.unit})</option>)}
              </select>
            </div>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: 11, color: 'var(--bf-text-3)' }}>ปริมาณ</label>
              <input type="number" step="0.001" value={addQty} onChange={e => setAddQty(e.target.value)}
                placeholder="0" style={{ width: '100%', padding: '6px 8px', border: '1px solid var(--bf-border)', borderRadius: 6, background: 'var(--bf-surface)', color: 'var(--bf-text-1)' }} />
            </div>
            <button className="bf-btn bf-btn-ghost" style={{ padding: '6px 14px' }} onClick={addRow} disabled={!addIngId || !addQty}>เพิ่ม</button>
          </div>

          <button className="bf-btn bf-btn-primary bf-btn-block" disabled={saving} onClick={save}>
            {saving ? 'กำลังบันทึก...' : 'บันทึกสูตร'}
          </button>
        </>
      )}
    </Card>
  );
};

// ════════════════════════════════════════════════════════════════════════════════
// SALES HISTORY
// ════════════════════════════════════════════════════════════════════════════════
const SalesHistory = () => {
  const today = new Date().toLocaleDateString('sv-SE', { timeZone: 'Asia/Bangkok' });
  const [from,    setFrom]    = React.useState(today);
  const [to,      setTo]      = React.useState(today);
  const [rows,    setRows]    = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [summary, setSummary] = React.useState(null);

  const load = () => {
    setLoading(true);
    adminFetch(`/api/sales/history?from=${from}&to=${to}`)
      .then(data => {
        setRows(data);
        setSummary({
          revenue: data.reduce((s, r) => s + (r.net_revenue || 0), 0),
          cost:    data.reduce((s, r) => s + (r.cost_per_cup * r.qty || 0), 0),
          cups:    data.reduce((s, r) => s + (r.qty || 0), 0),
          records: data.length,
        });
      })
      .finally(() => setLoading(false));
  };

  React.useEffect(load, []);

  return (
    <Card title="ประวัติการขาย">
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="bf-field" style={{ margin: 0 }}>
          <label>จากวันที่</label>
          <input type="date" value={from} onChange={e => setFrom(e.target.value)} />
        </div>
        <div className="bf-field" style={{ margin: 0 }}>
          <label>ถึงวันที่</label>
          <input type="date" value={to} onChange={e => setTo(e.target.value)} />
        </div>
        <button className="bf-btn bf-btn-primary" onClick={load} disabled={loading}>
          {loading ? 'กำลังโหลด...' : 'ค้นหา'}
        </button>
      </div>

      {summary && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 16 }}>
          {[
            { label: 'ยอดขาย', value: baht(summary.revenue) },
            { label: 'ต้นทุน',  value: baht(summary.cost)    },
            { label: 'กำไร',   value: baht(summary.revenue - summary.cost) },
            { label: 'แก้ว',   value: `${summary.cups} แก้ว` },
          ].map(s => (
            <div key={s.label} style={{ background: 'var(--bf-surface-2)', borderRadius: 8, padding: '10px 12px', textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: 'var(--bf-text-3)', marginBottom: 2 }}>{s.label}</div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>{s.value}</div>
            </div>
          ))}
        </div>
      )}

      {rows.length === 0 && !loading && (
        <div style={{ color: 'var(--bf-text-3)', textAlign: 'center', padding: 24 }}>ไม่พบข้อมูลในช่วงที่เลือก</div>
      )}

      {rows.length > 0 && (
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ borderBottom: '2px solid var(--bf-border)', textAlign: 'left' }}>
                {['วันที่','เมนู','ประเภท','แก้ว','ราคา/แก้ว','ยอดรับ','ต้นทุน','หมายเหตุ'].map(h => (
                  <th key={h} style={{ padding: '6px 10px', color: 'var(--bf-text-3)', fontWeight: 600, whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.id} style={{ borderBottom: '1px solid var(--bf-border)' }}>
                  <td style={{ padding: '6px 10px', whiteSpace: 'nowrap' }}>{r.sale_date}</td>
                  <td style={{ padding: '6px 10px' }}>{r.menu_name}</td>
                  <td style={{ padding: '6px 10px', color: 'var(--bf-text-2)', whiteSpace: 'nowrap' }}>{r.sale_type}</td>
                  <td style={{ padding: '6px 10px', textAlign: 'right' }}>{r.qty}</td>
                  <td style={{ padding: '6px 10px', textAlign: 'right' }}>{baht(r.unit_price)}</td>
                  <td style={{ padding: '6px 10px', textAlign: 'right', fontWeight: 600 }}>{baht(r.net_revenue)}</td>
                  <td style={{ padding: '6px 10px', textAlign: 'right', color: 'var(--bf-text-3)' }}>{baht(r.cost_per_cup * r.qty)}</td>
                  <td style={{ padding: '6px 10px', color: 'var(--bf-text-3)', maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.note || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Card>
  );
};

// ════════════════════════════════════════════════════════════════════════════════
// BREAKEVEN ANALYSIS — จุดคุ้มทุน
// ════════════════════════════════════════════════════════════════════════════════
const BreakevenAnalysis = () => {
  const [salesData, setSalesData] = React.useState(null);
  const [settings,  setSettings]  = React.useState(null);
  const [saving,    setSaving]    = React.useState(false);
  const [loading,   setLoading]   = React.useState(true);

  // ค่าใช้จ่ายคงที่ (แก้ได้)
  const [fixed, setFixed] = React.useState({
    rent: 0, salary: 0, utilities: 1000, internet: 500, depreciation: 100,
  });
  // override ราคา/ต้นทุน (ถ้าไม่มีข้อมูลขายจริง หรืออยากกำหนดเอง)
  const [override, setOverride] = React.useState({ price: '', cost: '', cups_per_day: '', work_days: 25 });

  React.useEffect(() => {
    Promise.all([
      adminFetch('/api/admin/breakeven-data'),
      adminFetch('/api/settings'),
    ]).then(([sd, st]) => {
      setSalesData(sd);
      setSettings(st);
      setFixed({
        rent:         Number(st.fixed_rent         || 0),
        salary:       Number(st.fixed_salary        || 0),
        utilities:    Number(st.fixed_utilities     || 1000),
        internet:     Number(st.fixed_internet      || 500),
        depreciation: Number(st.fixed_depreciation  || 100),
      });
      setOverride(o => ({ ...o, work_days: Number(st.work_days_per_month || 25) }));
    }).catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  const saveSettings = async () => {
    setSaving(true);
    try {
      await adminFetch('/api/settings', { method: 'PUT', body: JSON.stringify({
        fixed_rent:          String(fixed.rent),
        fixed_salary:        String(fixed.salary),
        fixed_utilities:     String(fixed.utilities),
        fixed_internet:      String(fixed.internet),
        fixed_depreciation:  String(fixed.depreciation),
        work_days_per_month: String(override.work_days),
      })});
    } finally { setSaving(false); }
  };

  if (loading) return <Card title="จุดคุ้มทุน"><div style={{ padding: 24, color: 'var(--bf-text-3)' }}>กำลังโหลด...</div></Card>;

  // ── คำนวณ ──────────────────────────────────────────────────────
  const totalFixed = fixed.rent + fixed.salary + fixed.utilities + fixed.internet + fixed.depreciation;

  // ใช้ค่าจริงจาก sales ถ้าไม่มี override
  const avgPrice    = Number(override.price)        || salesData?.avg_price        || 0;
  const avgCost     = Number(override.cost)         || salesData?.avg_cost         || 0;
  const cupsPerDay  = Number(override.cups_per_day) || salesData?.avg_cups_per_day || 0;
  const workDays    = Number(override.work_days)    || 25;

  const contribution  = avgPrice - avgCost;           // กำไรต่อแก้ว (Contribution Margin)
  const bepMonthly    = contribution > 0 ? Math.ceil(totalFixed / contribution) : 0;
  const bepDaily      = workDays > 0 ? Math.ceil(bepMonthly / workDays) : 0;
  const monthlyRevenue = avgPrice * cupsPerDay * workDays;
  const monthlyProfit  = (contribution * cupsPerDay * workDays) - totalFixed;
  const currentCupsMonth = cupsPerDay * workDays;
  const safetyMargin  = bepMonthly > 0 ? ((currentCupsMonth - bepMonthly) / bepMonthly * 100) : 0;

  const statBox = (label, value, sub, accent) => (
    <div style={{
      padding: '14px 16px', borderRadius: 10,
      background: accent === 'warn' ? 'rgba(176,74,48,0.08)' : accent === 'good' ? 'rgba(74,112,88,0.08)' : 'var(--bf-surface-2)',
      border: `1px solid ${accent === 'warn' ? 'rgba(176,74,48,0.2)' : accent === 'good' ? 'rgba(74,112,88,0.2)' : 'var(--bf-border)'}`,
    }}>
      <div style={{ fontSize: 11, color: 'var(--bf-text-3)', marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Inter, sans-serif', color: accent === 'warn' ? '#b04a30' : accent === 'good' ? '#4a7058' : 'var(--bf-text-1)' }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--bf-text-3)', marginTop: 2 }}>{sub}</div>}
    </div>
  );

  const fieldRow = (label, key, stateObj, setter, note) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--bf-border)' }}>
      <div style={{ flex: 1, fontSize: 14 }}>{label}</div>
      {note && <div style={{ fontSize: 11, color: 'var(--bf-text-3)' }}>{note}</div>}
      <input
        type="number" min="0" step="1" value={stateObj[key]}
        onChange={e => setter(p => ({ ...p, [key]: Number(e.target.value) }))}
        style={{ width: 100, padding: '4px 8px', fontSize: 14, textAlign: 'right',
                 border: '1px solid var(--bf-border)', borderRadius: 6,
                 background: 'var(--bf-surface)', color: 'var(--bf-text-1)' }}
      />
      <span style={{ fontSize: 12, color: 'var(--bf-text-3)', width: 24 }}>฿</span>
    </div>
  );

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

      {/* ── ผลลัพธ์ ── */}
      <Card title="ผลการวิเคราะห์จุดคุ้มทุน">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10, marginBottom: 16 }}>
          {statBox('กำไรต่อแก้ว (Contribution)', `฿${contribution.toFixed(0)}`, `ราคา ฿${avgPrice} − ต้นทุน ฿${avgCost}`)}
          {statBox('จุดคุ้มทุน', `${bepMonthly} แก้ว/เดือน`, `= ${bepDaily} แก้ว/วัน`, contribution <= 0 ? 'warn' : null)}
          {statBox('ยอดขายต่อเดือน (คาด)', baht(monthlyRevenue), `${cupsPerDay} แก้ว/วัน × ${workDays} วัน`)}
          {statBox('กำไรสุทธิ/เดือน (คาด)', baht(monthlyProfit), monthlyProfit >= 0 ? 'หลังหักค่าใช้จ่ายคงที่' : '⚠️ ยังขาดทุนอยู่', monthlyProfit >= 0 ? 'good' : 'warn')}
        </div>
        {bepMonthly > 0 && currentCupsMonth > 0 && (
          <div style={{ background: 'var(--bf-surface-2)', borderRadius: 10, padding: '12px 16px' }}>
            <div style={{ fontSize: 12, color: 'var(--bf-text-3)', marginBottom: 6 }}>
              ปัจจุบันขาย {currentCupsMonth} แก้ว/เดือน vs จุดคุ้มทุน {bepMonthly} แก้ว
            </div>
            <div style={{ height: 8, background: 'var(--bf-border)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{
                height: '100%', borderRadius: 99, transition: 'width 0.4s',
                background: safetyMargin >= 0 ? 'var(--bf-good, #4a7058)' : 'var(--bf-warn, #b04a30)',
                width: `${Math.min(100, (currentCupsMonth / Math.max(bepMonthly, 1)) * 100)}%`,
              }} />
            </div>
            <div style={{ fontSize: 12, color: safetyMargin >= 0 ? '#4a7058' : '#b04a30', marginTop: 4, fontWeight: 600 }}>
              {safetyMargin >= 0
                ? `✓ เกินจุดคุ้มทุน ${safetyMargin.toFixed(0)}% (Safety margin)`
                : `ยังต้องขายเพิ่มอีก ${bepMonthly - currentCupsMonth} แก้ว/เดือน`}
            </div>
          </div>
        )}
        {salesData?.days_with_sales === 0 && (
          <div style={{ fontSize: 12, color: 'var(--bf-text-3)', marginTop: 8, padding: '8px 12px', background: 'rgba(200,150,50,0.1)', borderRadius: 8 }}>
            ⚠️ ยังไม่มีข้อมูลขายจริง — กรอกราคา/ต้นทุน/จำนวนแก้วด้านล่างเพื่อประมาณการ
          </div>
        )}
      </Card>

      {/* ── ค่าใช้จ่ายคงที่ ── */}
      <Card title="ค่าใช้จ่ายคงที่รายเดือน">
        {fieldRow('ค่าเช่าร้าน',          'rent',         fixed, setFixed, 'บาท/เดือน')}
        {fieldRow('เงินเดือนพนักงาน',     'salary',       fixed, setFixed, 'บาท/เดือน')}
        {fieldRow('ค่าน้ำ-ไฟ',            'utilities',    fixed, setFixed, 'บาท/เดือน')}
        {fieldRow('ค่าอินเทอร์เน็ต/อื่นๆ','internet',     fixed, setFixed, 'บาท/เดือน')}
        {fieldRow('ค่าเสื่อมอุปกรณ์',     'depreciation', fixed, setFixed, 'บาท/เดือน')}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0 4px', fontWeight: 700 }}>
          <span>รวมค่าใช้จ่ายคงที่/เดือน</span>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 18 }}>{baht(totalFixed)}</span>
        </div>
        <button className="bf-btn bf-btn-primary bf-btn-block" style={{ marginTop: 10 }} disabled={saving} onClick={saveSettings}>
          {saving ? 'กำลังบันทึก...' : 'บันทึกค่าใช้จ่ายคงที่'}
        </button>
      </Card>

      {/* ── ข้อมูลการขาย ── */}
      <Card title="ข้อมูลการขาย" subtitle={salesData?.days_with_sales > 0 ? `จากยอดขายจริง ${salesData.days_with_sales} วัน (30 วันล่าสุด)` : 'กรอกเองเพื่อประมาณการ'}>
        {[
          { label: 'ราคาขายเฉลี่ย/แก้ว (฿)', key: 'price',        placeholder: salesData?.avg_price        || 0 },
          { label: 'ต้นทุนผันแปร/แก้ว (฿)',  key: 'cost',         placeholder: salesData?.avg_cost         || 0 },
          { label: 'จำนวนแก้วเฉลี่ย/วัน',    key: 'cups_per_day', placeholder: salesData?.avg_cups_per_day || 0 },
          { label: 'วันทำการ/เดือน',           key: 'work_days',    placeholder: 25 },
        ].map(({ label, key, placeholder }) => (
          <div key={key} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--bf-border)' }}>
            <div style={{ flex: 1, fontSize: 14 }}>{label}</div>
            <div style={{ fontSize: 11, color: 'var(--bf-text-3)' }}>
              {key !== 'work_days' && salesData?.days_with_sales > 0 ? `จริง: ${placeholder}` : ''}
            </div>
            <input
              type="number" min="0" step="1"
              placeholder={String(placeholder)}
              value={override[key] || ''}
              onChange={e => setOverride(p => ({ ...p, [key]: e.target.value }))}
              style={{ width: 100, padding: '4px 8px', fontSize: 14, textAlign: 'right',
                       border: '1px solid var(--bf-border)', borderRadius: 6,
                       background: 'var(--bf-surface)', color: 'var(--bf-text-1)' }}
            />
          </div>
        ))}
        <div style={{ fontSize: 11, color: 'var(--bf-text-3)', marginTop: 8 }}>
          ถ้าปล่อยว่างจะใช้ค่าเฉลี่ยจากยอดขายจริงอัตโนมัติ
        </div>
      </Card>

    </div>
  );
};

window.Admin = Admin;