// Menu management — list/edit menu items with cost & margin analysis
const { useState: useStateMN, useMemo: useMemoMN } = React;

function MenuPage({ pushToast }) {
  const [cat, setCat] = useStateMN('all');
  const [search, setSearch] = useStateMN('');
  const [station, setStation] = useStateMN('all');

  const filtered = useMemoMN(() => MENU.filter(m => {
    if (cat !== 'all' && m.cat !== cat) return false;
    if (station !== 'all' && m.station !== station) return false;
    if (search) {
      const q = search.toLowerCase();
      if (!m.name.toLowerCase().includes(q) && !m.sku.toLowerCase().includes(q)) return false;
    }
    return true;
  }), [cat, search, station]);

  // Best/worst margin
  const sortedByMargin = [...MENU].sort((a, b) => ((b.price - b.cost) / b.price) - ((a.price - a.cost) / a.price));
  const bestMargin = sortedByMargin.slice(0, 3);
  const worstMargin = sortedByMargin.slice(-3).reverse();

  const avgPrice = Math.round(MENU.reduce((s, m) => s + m.price, 0) / MENU.length);
  const avgMargin = MENU.reduce((s, m) => s + (m.price - m.cost) / m.price, 0) / MENU.length;
  const signatureCount = MENU.filter(m => m.signature).length;
  const popularCount = MENU.filter(m => m.popular).length;

  return (
    <>
      <PageHeader
        eyebrow="Master menu · Outlet utama"
        title="Manajemen Menu"
        subtitle={`${MENU.length} menu aktif di ${KATEGORI.length - 1} kategori. Atur harga, biaya bahan, station, dan badge signature/popular.`}
        actions={<>
          <Btn icon="upload">Import CSV</Btn>
          <Btn icon="download">Export</Btn>
          <Btn tone="primary" icon="plus">Tambah Menu</Btn>
        </>}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Total Menu" value={MENU.length + ' item'} icon="utensils" tone="accent" />
        <Kpi label="Avg. Harga" value={rupiah(avgPrice, {sym:true})} icon="dollar" tone="success" />
        <Kpi label="Avg. Margin" value={Math.round(avgMargin*100) + '%'} icon="trending" tone="success"
             hint="Selisih harga jual − HPP" />
        <Kpi label="Signature" value={signatureCount + ' item'} icon="star" tone="warn"
             hint={`+${popularCount} popular`} />
      </div>

      <div className="grid-2 mb-4">
        <Card>
          <div className="card-header">
            <h3 className="card-title">Margin Tertinggi</h3>
            <p className="card-desc">Top 3 — fokuskan promosi di sini</p>
          </div>
          <div className="card-body">
            {bestMargin.map((m, i) => {
              const margin = (m.price - m.cost) / m.price;
              return (
                <div key={m.sku} className="row between" style={{padding:'8px 0', borderBottom: i < 2 ? '1px solid hsl(var(--border))' : 'none'}}>
                  <div className="row gap-3">
                    <div style={{width:28, textAlign:'center', fontWeight:700, color:'hsl(var(--success))'}}>{i+1}</div>
                    <div>
                      <div style={{fontWeight:500}}>{m.name}</div>
                      <div className="muted text-sm mono">{m.sku}</div>
                    </div>
                  </div>
                  <div className="num" style={{textAlign:'right'}}>
                    <div style={{fontWeight:600, color:'hsl(var(--success))'}}>{Math.round(margin*100)}%</div>
                    <div className="muted text-sm mono">{rupiah(m.price - m.cost, {sym:true})}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
        <Card>
          <div className="card-header">
            <h3 className="card-title">Margin Terendah</h3>
            <p className="card-desc">Pertimbangkan kenaikan harga / efisiensi bahan</p>
          </div>
          <div className="card-body">
            {worstMargin.map((m, i) => {
              const margin = (m.price - m.cost) / m.price;
              return (
                <div key={m.sku} className="row between" style={{padding:'8px 0', borderBottom: i < 2 ? '1px solid hsl(var(--border))' : 'none'}}>
                  <div className="row gap-3">
                    <div style={{width:28, textAlign:'center', fontWeight:700, color:'hsl(var(--warn))'}}>{i+1}</div>
                    <div>
                      <div style={{fontWeight:500}}>{m.name}</div>
                      <div className="muted text-sm mono">{m.sku}</div>
                    </div>
                  </div>
                  <div className="num" style={{textAlign:'right'}}>
                    <div style={{fontWeight:600, color:'hsl(var(--warn))'}}>{Math.round(margin*100)}%</div>
                    <div className="muted text-sm mono">{rupiah(m.price - m.cost, {sym:true})}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      <div className="filter-bar">
        <input className="filter-search" placeholder="Cari nama menu / SKU…" value={search} onChange={e => setSearch(e.target.value)} />
        <select value={cat} onChange={e => setCat(e.target.value)}>
          {KATEGORI.map(k => <option key={k.id} value={k.id}>{k.label}</option>)}
        </select>
        <select value={station} onChange={e => setStation(e.target.value)}>
          <option value="all">Semua station</option>
          <option value="bar">Bar</option>
          <option value="kitchen">Kitchen</option>
        </select>
        <span className="muted text-sm" style={{marginLeft:'auto'}}>{filtered.length} dari {MENU.length} menu</span>
      </div>

      <Card>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>SKU</th>
                  <th>Nama</th>
                  <th>Kategori</th>
                  <th>Station</th>
                  <th className="num">HPP</th>
                  <th className="num">Harga</th>
                  <th className="num">Margin</th>
                  <th>Tags</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(m => {
                  const margin = (m.price - m.cost) / m.price;
                  const cat = KATEGORI.find(k => k.id === m.cat);
                  return (
                    <tr key={m.sku}>
                      <td className="mono" style={{fontSize:12.5}}>{m.sku}</td>
                      <td>
                        <div style={{fontWeight:500}}>{m.name}</div>
                        {m.desc && <div className="muted text-sm">{m.desc}</div>}
                      </td>
                      <td>{cat?.label || m.cat}</td>
                      <td>
                        <span className="badge">
                          <Icon name={m.station === 'kitchen' ? 'chefHat' : 'coffee'} size={12} />
                          {m.station}
                        </span>
                      </td>
                      <td className="num mono muted">{rupiah(m.cost, {sym:true})}</td>
                      <td className="num mono" style={{fontWeight:600}}>{rupiah(m.price, {sym:true})}</td>
                      <td className="num mono" style={{fontWeight:600, color: margin > 0.65 ? 'hsl(var(--success))' : margin > 0.5 ? 'hsl(var(--accent))' : 'hsl(var(--warn))'}}>
                        {Math.round(margin*100)}%
                      </td>
                      <td>
                        <div className="row gap-1">
                          {m.signature && <Pill tone="warn">SIG</Pill>}
                          {m.popular && <Pill tone="accent">POP</Pill>}
                        </div>
                      </td>
                      <td>
                        <div className="row gap-1">
                          <button className="btn ghost sm" onClick={() => pushToast({msg:`Edit ${m.name}`})}><Icon name="edit" size={13}/></button>
                          <button className="btn ghost sm"><Icon name="more" size={13}/></button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {filtered.length === 0 && <div className="empty">Tidak ada menu cocok dengan filter</div>}
          </div>
        </div>
      </Card>
    </>
  );
}

window.MenuPage = MenuPage;