// Functional local-first admin tabs. Data is persisted by LocalDB/localStorage.

const ADMIN_INPUT_STYLE = {
  width: "100%", padding: "11px 12px", borderRadius: 11,
  border: "1px solid rgba(255,244,226,.16)",
  background: "rgba(255,244,226,.06)", color: "var(--paper)",
  fontFamily: "inherit", fontSize: 13,
};

function useAdminStore(key, seed) {
  const state = useStoredValue(key, seed);
  useEffect(() => {
    if (LocalDB.snapshot()[key] === undefined) LocalDB.set(key, seed);
  }, [key]);
  return state;
}

function seedAdminMenu() {
  return MENU.map(item => ({
    ...item,
    active: item.active !== false,
    photo: KotletoImages.resolve(item.photo, item.id),
  }));
}

function seedAdminStaff() {
  return STAFF.map((person, index) => ({ ...person, id: person.id || `staff-${index + 1}` }));
}

function getFunctionalAdminOrders() {
  const localOrders = LocalDB.get("orders", []).map(order => ({
    ...order,
    id: order.id,
    name: T(order.customer?.name || "مشتری وب", order.customer?.name || "Web customer"),
    items: Array.isArray(order.items) ? order.items.length : Number(order.items) || 0,
    total: Number(order.total) || 0,
    status: order.status === "placed" ? "new" : order.status,
    channel: order.channel || "وب",
    time: order.time || "الان",
  }));
  const merged = new Map(ORDER_FEED.map(order => [order.id, order]));
  localOrders.forEach(order => merged.set(order.id, order));
  const overrides = LocalDB.get("adminOrderStatuses", {});
  return [...merged.values()].map(order => ({ ...order, status: overrides[order.id] || order.status }));
}

function setFunctionalOrderStatus(order, status, lang) {
  const storedStatus = status === "new" ? "placed" : status;
  const active = LocalDB.get("activeOrder", null);
  LocalDB.patch({
    adminOrderStatuses: { ...LocalDB.get("adminOrderStatuses", {}), [order.id]: status },
    orders: LocalDB.get("orders", []).map(item => item.id === order.id ? { ...item, status: storedStatus } : item),
    ...(active?.id === order.id ? { activeOrder: { ...active, status: storedStatus } } : {}),
  });
  notify(lang === "fa" ? `وضعیت سفارش ${order.id} به‌روزرسانی شد` : `Order ${order.id} updated`);
}

function adminCustomerPhone(order) {
  const customer = CUSTOMERS.find(person => pick(person.name, "en") === pick(order.name, "en"));
  const phone = order.customer?.phone || order.phone || customer?.phone;
  return toEn(pick(phone, "fa")).replace(/[^0-9+]/g, "");
}

const FUNCTIONAL_STATUS = {
  new: { fa: "جدید", en: "New", color: "#9AB8E8" },
  preparing: { fa: "در حال آماده‌سازی", en: "Preparing", color: "#D9461E" },
  out: { fa: "در راه", en: "On the way", color: "#E8B14A" },
  delivered: { fa: "تحویل‌شده", en: "Delivered", color: "#7FCB5A" },
};

function AdminModal({ title, onClose, children, width = 620 }) {
  useEffect(() => {
    const closeOnEscape = event => event.key === "Escape" && onClose();
    window.addEventListener("keydown", closeOnEscape);
    return () => window.removeEventListener("keydown", closeOnEscape);
  }, [onClose]);
  return (
    <div onMouseDown={event => event.target === event.currentTarget && onClose()} style={{
      position: "fixed", inset: 0, zIndex: 90, background: "rgba(0,0,0,.7)",
      display: "grid", placeItems: "center", padding: 16, backdropFilter: "blur(8px)",
    }}>
      <section role="dialog" aria-modal="true" aria-label={title} style={{
        width: `min(${width}px, 100%)`, maxHeight: "90vh", overflowY: "auto",
        background: "#17110D", border: "1px solid rgba(255,244,226,.15)",
        borderRadius: 20, boxShadow: "0 35px 90px rgba(0,0,0,.6)",
      }}>
        <header style={{ position: "sticky", top: 0, zIndex: 2, background: "#17110D", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "16px 18px", borderBottom: "1px solid rgba(255,244,226,.08)" }}>
          <h2 className="display" style={{ margin: 0, fontSize: 21 }}>{title}</h2>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Close" style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.16)", padding: 9 }}><Ico.X /></button>
        </header>
        <div style={{ padding: 18 }}>{children}</div>
      </section>
    </div>
  );
}

function AdminToggle({ on, onChange, color = "#D9461E", label }) {
  const { lang } = useLang();
  return (
    <button type="button" role="switch" aria-checked={on}
      aria-label={label || (lang === "fa" ? "فعال یا غیرفعال" : "Enable or disable")}
      className="admin-switch" style={{ "--switch-color": color }} onClick={() => onChange(!on)}>
      <span className="admin-switch-track" aria-hidden="true"><span className="admin-switch-thumb" /></span>
    </button>
  );
}

function AdminInfo({ label, value }) {
  return <div style={{ background: "rgba(255,244,226,.05)", borderRadius: 12, padding: 13 }}><div style={{ color: "rgba(255,244,226,.5)", fontSize: 11 }}>{label}</div><div style={{ marginTop: 5, fontWeight: 700 }}>{value}</div></div>;
}

function AdminField({ label, value, onChange, type = "text", dir, min }) {
  return <label style={{ display: "grid", gap: 7 }}><span style={{ fontSize: 12, color: "rgba(255,244,226,.6)" }}>{label}</span><input type={type} min={min} dir={dir} value={value} onChange={event => onChange(event.target.value)} style={ADMIN_INPUT_STYLE} /></label>;
}

function FunctionalOverview({ accent, onNavigate }) {
  const { lang } = useLang();
  const [, refresh] = useState(0);
  useEffect(() => LocalDB.subscribe(() => refresh(value => value + 1)), []);
  const orders = getFunctionalAdminOrders();
  const staff = LocalDB.get("adminStaff", seedAdminStaff());
  const menu = LocalDB.get("adminMenu", seedAdminMenu());
  const revenue = orders.filter(order => order.status === "delivered").reduce((sum, order) => sum + Number(order.total || 0), 0);
  const cards = [
    [T("درآمد ثبت‌شده", "Recorded revenue"), <Price value={revenue} />, "#7FCB5A"],
    [T("کل سفارش‌ها", "All orders"), lang === "fa" ? toFa(orders.length) : orders.length, accent],
    [T("نیازمند اقدام", "Needs action"), lang === "fa" ? toFa(orders.filter(order => order.status === "new").length) : orders.filter(order => order.status === "new").length, "#9AB8E8"],
    [T("آیتم فعال", "Active items"), lang === "fa" ? toFa(menu.filter(item => item.active !== false).length) : menu.filter(item => item.active !== false).length, "#E8B14A"],
  ];
  return <div style={{ display: "grid", gap: 20 }}>
    <div className="grid grid-kpi" style={{ gap: 16 }}>{cards.map(([label, value, color]) => <div key={label.en} style={{ background: "#15100B", border: "1px solid rgba(255,244,226,.08)", borderRadius: 17, padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "rgba(255,244,226,.55)", fontSize: 12 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: color }} />{pick(label, lang)}</div>
      <div className="display" style={{ marginTop: 11, fontSize: "clamp(24px,3vw,33px)" }}>{value}</div>
    </div>)}</div>
    <Panel title={lang === "fa" ? "آخرین سفارش‌ها" : "Recent orders"} action={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate?.("orders")} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.2)" }}>{lang === "fa" ? "مدیریت سفارش‌ها" : "Manage orders"}</button>} padded={false}>
      <FunctionalOrdersTable rows={orders.slice(0, 5)} accent={accent} onSelect={() => onNavigate?.("orders")} />
    </Panel>
    <Panel title={lang === "fa" ? "وضعیت تیم" : "Team status"}>
      <div style={{ display: "flex", gap: 10 }}>{["on", "break", "off"].map(status => <div key={status} style={{ flex: 1, background: "rgba(255,244,226,.04)", borderRadius: 12, padding: 13, textAlign: "center" }}>
        <div className="display" style={{ fontSize: 23 }}>{lang === "fa" ? toFa(staff.filter(person => person.status === status).length) : staff.filter(person => person.status === status).length}</div>
        <div style={{ fontSize: 11, color: "rgba(255,244,226,.5)" }}>{status === "on" ? (lang === "fa" ? "در شیفت" : "On shift") : status === "break" ? (lang === "fa" ? "استراحت" : "Break") : (lang === "fa" ? "آفلاین" : "Off")}</div>
      </div>)}</div>
    </Panel>
  </div>;
}

function FunctionalOrdersTab({ accent, search = "" }) {
  const { lang } = useLang();
  const [filter, setFilter] = useState("all");
  const [selected, setSelected] = useState(null);
  const [, refresh] = useState(0);
  useEffect(() => LocalDB.subscribe(() => refresh(value => value + 1)), []);
  const allOrders = getFunctionalAdminOrders();
  const query = search.trim().toLowerCase();
  const rows = allOrders.filter(order => filter === "all" || order.status === filter).filter(order => !query || `${order.id} ${pick(order.name, lang)} ${order.channel}`.toLowerCase().includes(query));
  const updateStatus = (order, status) => {
    setFunctionalOrderStatus(order, status, lang);
    refresh(value => value + 1);
    setSelected(current => current?.id === order.id ? { ...current, status } : current);
  };
  return <div style={{ display: "grid", gap: 16 }}>
    {search && <div style={{ padding: "11px 14px", borderRadius: 12, background: "rgba(154,184,232,.1)", border: "1px solid rgba(154,184,232,.2)", fontSize: 13 }}>{lang === "fa" ? `نتایج جستجو برای «${search}»` : `Search results for “${search}”`}</div>}
    <div style={{ display: "flex", gap: 8, overflowX: "auto" }}>{["all", "new", "preparing", "out", "delivered"].map(id => {
      const label = id === "all" ? T("همه", "All") : FUNCTIONAL_STATUS[id];
      const count = id === "all" ? allOrders.length : allOrders.filter(order => order.status === id).length;
      return <button key={id} onClick={() => setFilter(id)} style={{ whiteSpace: "nowrap", padding: "9px 13px", borderRadius: 999, background: filter === id ? accent : "rgba(255,244,226,.06)", color: "var(--paper)", border: "1px solid rgba(255,244,226,.1)", fontWeight: 700 }}>{pick(label, lang)} · {lang === "fa" ? toFa(count) : count}</button>;
    })}</div>
    <Panel padded={false}><FunctionalOrdersTable rows={rows} accent={accent} onSelect={setSelected} onStatus={updateStatus} /></Panel>
    {selected && <AdminModal title={lang === "fa" ? `سفارش ${selected.id}` : `Order ${selected.id}`} onClose={() => setSelected(null)} width={540}>
      <div className="grid grid-2" style={{ gap: 10 }}><AdminInfo label={lang === "fa" ? "مشتری" : "Customer"} value={pick(selected.name, lang)} /><AdminInfo label={lang === "fa" ? "مبلغ" : "Total"} value={<Price value={selected.total} />} /><AdminInfo label={lang === "fa" ? "تعداد آیتم" : "Items"} value={lang === "fa" ? toFa(selected.items) : selected.items} /><AdminInfo label={lang === "fa" ? "کانال" : "Channel"} value={selected.channel} /></div>
      <div style={{ display: "grid", gap: 7, marginTop: 14 }}><span>{lang === "fa" ? "تغییر وضعیت" : "Change status"}</span><AdminSelect value={selected.status} onValueChange={status => updateStatus(selected, status)} label={lang === "fa" ? "تغییر وضعیت سفارش" : "Change order status"} options={Object.entries(FUNCTIONAL_STATUS).map(([value, data]) => ({ value, label: data[lang], color: data.color }))} /></div>
      {adminCustomerPhone(selected) ? (
        <a href={`tel:${adminCustomerPhone(selected)}`} className="btn btn-primary" style={{ justifyContent: "center", marginTop: 14 }}><Ico.Phone />{lang === "fa" ? "تماس با مشتری" : "Call customer"}</a>
      ) : (
        <div style={{ marginTop: 14 }}><button disabled className="btn btn-primary">{lang === "fa" ? "تماس با مشتری" : "Call customer"}</button><p style={{ fontSize: 12, color: "rgba(255,244,226,.65)" }}>{lang === "fa" ? "شماره مشتری برای این سفارش ثبت نشده است." : "No customer phone number is recorded for this order."}</p></div>
      )}
    </AdminModal>}
  </div>;
}

function FunctionalOrdersTable({ rows, accent, onSelect, onStatus }) {
  const { lang } = useLang();
  return <table style={{ width: "100%", minWidth: 720, borderCollapse: "collapse", fontSize: 13 }}>
    <thead><tr style={{ background: "rgba(255,244,226,.03)" }}>{[lang === "fa" ? "سفارش" : "Order", lang === "fa" ? "مشتری" : "Customer", lang === "fa" ? "آیتم" : "Items", lang === "fa" ? "مبلغ" : "Total", lang === "fa" ? "وضعیت" : "Status", ""].map((head, index) => <th key={index} style={{ textAlign: "start", padding: "12px 16px", color: "rgba(255,244,226,.5)", fontSize: 11 }}>{head}</th>)}</tr></thead>
    <tbody>{rows.length === 0 ? <tr><td colSpan="6" style={{ padding: 32, textAlign: "center", color: "rgba(255,244,226,.5)" }}>{lang === "fa" ? "سفارشی پیدا نشد." : "No orders found."}</td></tr> : rows.map(order => <tr key={order.id} style={{ borderTop: "1px solid rgba(255,244,226,.06)" }}>
      <td style={{ padding: "13px 16px", color: accent, fontWeight: 800 }} dir="ltr">{order.id}</td><td style={{ padding: "13px 16px" }}>{pick(order.name, lang)}</td><td style={{ padding: "13px 16px" }}>{lang === "fa" ? toFa(order.items) : order.items}</td><td style={{ padding: "13px 16px" }}><Price value={order.total} /></td>
      <td style={{ padding: "13px 16px" }}>{onStatus ? <AdminSelect value={order.status} onValueChange={status => onStatus(order, status)} label={lang === "fa" ? `وضعیت سفارش ${order.id}` : `Status for order ${order.id}`} style={{ minWidth: 172 }} options={Object.entries(FUNCTIONAL_STATUS).map(([value, data]) => ({ value, label: data[lang], color: data.color }))} /> : <span style={{ color: FUNCTIONAL_STATUS[order.status]?.color }}>{FUNCTIONAL_STATUS[order.status]?.[lang]}</span>}</td>
      <td style={{ padding: "13px 16px", textAlign: "end" }}><button className="btn btn-ghost btn-sm" onClick={() => onSelect?.(order)} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.16)" }}>{lang === "fa" ? "جزئیات" : "Details"}</button></td>
    </tr>)}</tbody>
  </table>;
}

function FunctionalMenuTab({ accent }) {
  const { lang } = useLang();
  const [items, saveItems] = useAdminStore("adminMenu", seedAdminMenu());
  const [editing, setEditing] = useState(null);
  const [formOpen, setFormOpen] = useState(false);
  const saveItem = item => {
    const exists = items.some(current => current.id === item.id);
    saveItems(exists ? items.map(current => current.id === item.id ? item : current) : [item, ...items]);
    notify(lang === "fa" ? (exists ? "آیتم ویرایش شد" : "آیتم به منو اضافه شد") : (exists ? "Item updated" : "Item added"));
    setFormOpen(false); setEditing(null);
  };
  const removeItem = item => {
    if (!window.confirm(lang === "fa" ? `«${item.fa.name}» حذف شود؟` : `Delete “${item.en.name}”?`)) return;
    saveItems(items.filter(current => current.id !== item.id));
    notify(lang === "fa" ? "آیتم حذف شد" : "Item deleted");
  };
  return <div style={{ display: "grid", gap: 16 }}>
    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
      <p style={{ margin: 0, color: "rgba(255,244,226,.55)", fontSize: 13 }}>{lang === "fa" ? "تغییرات بلافاصله در منوی سایت ذخیره می‌شوند." : "Changes are saved and reflected in the public menu."}</p>
      <button className="btn btn-primary btn-sm" onClick={() => { setEditing(null); setFormOpen(true); }}><Ico.Plus /> {lang === "fa" ? "افزودن آیتم" : "Add item"}</button>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }}>
      {items.map(item => <article key={item.id} style={{ background: "#15100B", border: "1px solid rgba(255,244,226,.09)", borderRadius: 18, overflow: "hidden", opacity: item.active === false ? .58 : 1 }}>
        <div style={{ height: 142, background: item.color || accent, position: "relative", overflow: "hidden" }}>
          {KotletoImages.resolve(item.photo, item.id) && <img src={KotletoImages.resolve(item.photo, item.id)} alt="" onError={event => { event.currentTarget.style.display = "none"; }} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
          <span style={{ position: "absolute", top: 10, insetInlineStart: 10, background: "rgba(10,8,6,.78)", padding: "5px 8px", borderRadius: 999, fontSize: 10 }}>{CATEGORIES.find(category => category.id === item.cat)?.[lang] || item.cat}</span>
        </div>
        <div style={{ padding: 15 }}>
          <div className="display" style={{ fontSize: 17 }}>{item[lang]?.name || item.fa?.name}</div>
          <div style={{ marginTop: 7, color: accent, fontWeight: 800 }}><Price value={item.price} /></div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginTop: 14 }}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, color: "rgba(255,244,226,.6)", fontSize: 11 }}>
              <AdminToggle on={item.active !== false} onChange={active => saveItems(items.map(current => current.id === item.id ? { ...current, active } : current))} label={lang === "fa" ? "موجودی آیتم" : "Item availability"} color={accent} />
              {item.active !== false ? (lang === "fa" ? "موجود" : "Available") : (lang === "fa" ? "ناموجود" : "Unavailable")}
            </label>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => { setEditing(item); setFormOpen(true); }} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.16)", padding: 8 }} aria-label={lang === "fa" ? "ویرایش" : "Edit"}><Ico.Cog /></button>
              <button className="btn btn-ghost btn-sm" onClick={() => removeItem(item)} style={{ color: "#FF7A68", borderColor: "rgba(255,122,104,.25)", padding: 8 }} aria-label={lang === "fa" ? "حذف" : "Delete"}><Ico.X /></button>
            </div>
          </div>
        </div>
      </article>)}
    </div>
    {formOpen && <AdminMenuForm item={editing} accent={accent} onSave={saveItem} onClose={() => { setFormOpen(false); setEditing(null); }} />}
  </div>;
}

function AdminMenuForm({ item, onSave, onClose, accent }) {
  const { lang } = useLang();
  const [form, setForm] = useState(() => ({
    nameFa: item?.fa?.name || "", nameEn: item?.en?.name || "",
    descFa: item?.fa?.desc || "", descEn: item?.en?.desc || "",
    price: item?.price || "", cat: item?.cat || "signature",
    photo: KotletoImages.resolve(item?.photo, item?.id),
    color: item?.color || accent, active: item?.active !== false,
  }));
  const field = (key, value) => setForm(current => ({ ...current, [key]: value }));
  const submit = event => {
    event.preventDefault();
    if (!form.nameFa.trim() || !form.nameEn.trim() || Number(form.price) < 1000) {
      notify(lang === "fa" ? "نام فارسی، انگلیسی و قیمت معتبر لازم است" : "Persian name, English name and a valid price are required", "error");
      return;
    }
    onSave({
      ...(item || {}), id: item?.id || `custom-${Date.now()}`,
      cat: form.cat, price: Number(form.price), photo: KotletoImages.resolve(form.photo.trim(), item?.id),
      color: form.color || accent, active: form.active,
      emoji: item?.emoji || "🍽️", spice: item?.spice || 0,
      fa: { ...(item?.fa || {}), name: form.nameFa.trim(), desc: form.descFa.trim() || "آماده‌شده با مواد تازه و باکیفیت." },
      en: { ...(item?.en || {}), name: form.nameEn.trim(), desc: form.descEn.trim() || "Made fresh with quality ingredients." },
    });
  };
  return <AdminModal title={item ? (lang === "fa" ? "ویرایش آیتم" : "Edit item") : (lang === "fa" ? "آیتم جدید" : "New item")} onClose={onClose}>
    <form onSubmit={submit} style={{ display: "grid", gap: 13 }}>
      <div className="grid grid-2" style={{ gap: 12 }}><AdminField label="نام فارسی" value={form.nameFa} onChange={value => field("nameFa", value)} /><AdminField label="English name" value={form.nameEn} onChange={value => field("nameEn", value)} dir="ltr" /></div>
      <div className="grid grid-2" style={{ gap: 12 }}><AdminField label="توضیح فارسی" value={form.descFa} onChange={value => field("descFa", value)} /><AdminField label="English description" value={form.descEn} onChange={value => field("descEn", value)} dir="ltr" /></div>
      <div className="grid grid-2" style={{ gap: 12 }}>
        <AdminField label={lang === "fa" ? "قیمت (تومان)" : "Price (Toman)"} type="number" min="1000" value={form.price} onChange={value => field("price", value)} dir="ltr" />
      <div style={{ display: "grid", gap: 7 }}><span style={{ fontSize: 12, color: "rgba(255,244,226,.6)" }}>{lang === "fa" ? "دسته‌بندی" : "Category"}</span><AdminSelect value={form.cat} onValueChange={value => field("cat", value)} label={lang === "fa" ? "دسته‌بندی محصول" : "Product category"} options={CATEGORIES.map(category => ({ value: category.id, label: category[lang] }))} /></div>
      </div>
      <AdminField label={lang === "fa" ? "لینک تصویر" : "Image URL"} value={form.photo} onChange={value => field("photo", value)} dir="ltr" />
      <label style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, padding: 12, background: "rgba(255,244,226,.04)", borderRadius: 12 }}><span>{lang === "fa" ? "نمایش در منوی سایت" : "Visible in public menu"}</span><AdminToggle on={form.active} onChange={value => field("active", value)} color={accent} /></label>
      <div style={{ display: "flex", gap: 9, justifyContent: "flex-end" }}><button type="button" className="btn btn-ghost" onClick={onClose} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.18)" }}>{lang === "fa" ? "انصراف" : "Cancel"}</button><button className="btn btn-primary" type="submit">{lang === "fa" ? "ذخیره آیتم" : "Save item"}</button></div>
    </form>
  </AdminModal>;
}

function FunctionalStaffTab({ accent }) {
  const { lang } = useLang();
  const [staff, saveStaff] = useAdminStore("adminStaff", seedAdminStaff());
  const [editing, setEditing] = useState(null);
  const [open, setOpen] = useState(false);
  const statuses = { on: T("در شیفت", "On shift"), break: T("استراحت", "On break"), off: T("خارج از شیفت", "Off") };
  const savePerson = person => {
    const exists = staff.some(current => current.id === person.id);
    saveStaff(exists ? staff.map(current => current.id === person.id ? person : current) : [person, ...staff]);
    setOpen(false); setEditing(null);
    notify(lang === "fa" ? "اطلاعات کارمند ذخیره شد" : "Staff member saved");
  };
  const remove = person => {
    if (!window.confirm(lang === "fa" ? "این کارمند حذف شود؟" : "Delete this staff member?")) return;
    saveStaff(staff.filter(current => current.id !== person.id));
    notify(lang === "fa" ? "کارمند حذف شد" : "Staff member deleted");
  };
  return <Panel title={lang === "fa" ? "مدیریت کارکنان" : "Staff management"} action={<button className="btn btn-primary btn-sm" onClick={() => { setEditing(null); setOpen(true); }}><Ico.Plus />{lang === "fa" ? "کارمند جدید" : "Add staff"}</button>} padded={false}>
    <table style={{ width: "100%", minWidth: 760, borderCollapse: "collapse", fontSize: 13 }}>
      <thead><tr style={{ background: "rgba(255,244,226,.03)" }}>{[lang === "fa" ? "کارمند" : "Staff", lang === "fa" ? "نقش" : "Role", lang === "fa" ? "شیفت" : "Shift", lang === "fa" ? "امروز" : "Today", lang === "fa" ? "وضعیت" : "Status", ""].map((head, index) => <th key={index} style={{ textAlign: "start", padding: "12px 16px", color: "rgba(255,244,226,.5)", fontSize: 11 }}>{head}</th>)}</tr></thead>
      <tbody>{staff.map(person => <tr key={person.id} style={{ borderTop: "1px solid rgba(255,244,226,.06)" }}>
        <td style={{ padding: "13px 16px", fontWeight: 700 }}>{pick(person.name, lang)}</td>
        <td style={{ padding: "13px 16px", color: "rgba(255,244,226,.65)" }}>{pick(person.role, lang)}</td>
        <td style={{ padding: "13px 16px" }} dir="ltr">{person.shift}</td>
        <td style={{ padding: "13px 16px" }}>{lang === "fa" ? toFa(person.today || 0) : person.today || 0}</td>
        <td style={{ padding: "13px 16px" }}><AdminSelect value={person.status} onValueChange={status => saveStaff(staff.map(current => current.id === person.id ? { ...current, status } : current))} label={lang === "fa" ? `وضعیت ${pick(person.name, lang)}` : `Status for ${pick(person.name, lang)}`} style={{ minWidth: 165 }} options={Object.entries(statuses).map(([value, label]) => ({ value, label: pick(label, lang) }))} /></td>
        <td style={{ padding: "13px 16px", textAlign: "end" }}><div style={{ display: "inline-flex", gap: 6 }}><button className="btn btn-ghost btn-sm" onClick={() => { setEditing(person); setOpen(true); }} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.16)" }}>{lang === "fa" ? "ویرایش" : "Edit"}</button><button className="btn btn-ghost btn-sm" onClick={() => remove(person)} style={{ color: "#FF7A68", borderColor: "rgba(255,122,104,.22)" }}>{lang === "fa" ? "حذف" : "Delete"}</button></div></td>
      </tr>)}</tbody>
    </table>
    {open && <AdminStaffForm person={editing} onSave={savePerson} onClose={() => { setOpen(false); setEditing(null); }} />}
  </Panel>;
}

function AdminStaffForm({ person, onSave, onClose }) {
  const { lang } = useLang();
  const [form, setForm] = useState({ nameFa: person?.name?.fa || "", nameEn: person?.name?.en || "", roleFa: person?.role?.fa || "", roleEn: person?.role?.en || "", shift: person?.shift || "11:30 – 19:00", status: person?.status || "on" });
  const field = (key, value) => setForm(current => ({ ...current, [key]: value }));
  const submit = event => {
    event.preventDefault();
    if (!form.nameFa.trim() || !form.nameEn.trim() || !form.roleFa.trim()) return notify(lang === "fa" ? "نام و نقش را کامل کنید" : "Complete name and role", "error");
    onSave({ ...(person || {}), id: person?.id || `staff-${Date.now()}`, name: T(form.nameFa.trim(), form.nameEn.trim()), role: T(form.roleFa.trim(), form.roleEn.trim() || form.roleFa.trim()), shift: form.shift, status: form.status, today: person?.today || 0 });
  };
  return <AdminModal title={person ? (lang === "fa" ? "ویرایش کارمند" : "Edit staff") : (lang === "fa" ? "کارمند جدید" : "New staff")} onClose={onClose} width={560}>
    <form onSubmit={submit} style={{ display: "grid", gap: 13 }}>
      <div className="grid grid-2" style={{ gap: 12 }}><AdminField label="نام فارسی" value={form.nameFa} onChange={value => field("nameFa", value)} /><AdminField label="English name" value={form.nameEn} onChange={value => field("nameEn", value)} dir="ltr" /></div>
      <div className="grid grid-2" style={{ gap: 12 }}><AdminField label="نقش" value={form.roleFa} onChange={value => field("roleFa", value)} /><AdminField label="Role" value={form.roleEn} onChange={value => field("roleEn", value)} dir="ltr" /></div>
      <div className="grid grid-2" style={{ gap: 12 }}>
        <AdminField label={lang === "fa" ? "ساعت شیفت" : "Shift hours"} value={form.shift} onChange={value => field("shift", value)} dir="ltr" />
        <div style={{ display: "grid", gap: 7 }}><span style={{ fontSize: 12, color: "rgba(255,244,226,.6)" }}>{lang === "fa" ? "وضعیت" : "Status"}</span><AdminSelect value={form.status} onValueChange={value => field("status", value)} label={lang === "fa" ? "وضعیت کارمند" : "Staff status"} options={[{ value: "on", label: lang === "fa" ? "در شیفت" : "On shift" }, { value: "break", label: lang === "fa" ? "استراحت" : "On break" }, { value: "off", label: lang === "fa" ? "خارج از شیفت" : "Off" }]} /></div>
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", gap: 9 }}><button type="button" className="btn btn-ghost" onClick={onClose} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.18)" }}>{lang === "fa" ? "انصراف" : "Cancel"}</button><button className="btn btn-primary" type="submit">{lang === "fa" ? "ذخیره" : "Save"}</button></div>
    </form>
  </AdminModal>;
}

function FunctionalSettingsTab({ accent }) {
  const { lang } = useLang();
  const [settings, saveSettings] = useAdminStore("settings", { newOrder: true, dailyReport: true, lowStock: true, newReview: false });
  const [hours, saveHours] = useAdminStore("adminHours", HOURS.map((row, index) => ({ ...row, id: `hours-${index}`, active: true })));
  const [delivery, saveDelivery] = useAdminStore("deliveryConfig", { fee: 65000, freeFrom: 900000, minOrder: 250000, maxDistance: 8 });
  const [draft, setDraft] = useState(delivery);
  useEffect(() => setDraft(delivery), [delivery]);
  const submitDelivery = () => {
    if (!["fee", "freeFrom", "minOrder", "maxDistance"].every(key => Number.isFinite(draft[key]) && draft[key] >= 0) || draft.maxDistance <= 0) {
      notify(lang === "fa" ? "مبالغ باید نامنفی و فاصله ارسال بیشتر از صفر باشد" : "Amounts must be non-negative and delivery distance must be greater than zero", "error");
      return;
    }
    saveDelivery(draft);
    notify(lang === "fa" ? "تنظیمات ارسال ذخیره شد" : "Delivery settings saved");
  };
  const notificationRows = [["newOrder", T("سفارش جدید", "New orders")], ["dailyReport", T("گزارش روزانه", "Daily report")], ["lowStock", T("هشدار موجودی", "Low stock")], ["newReview", T("نظر جدید", "New reviews")]];
  const importJson = event => {
    const file = event.target.files?.[0];
    if (!file) return;
    if (file.size > 8 * 1024 * 1024) {
      notify(lang === "fa" ? "حجم فایل JSON باید کمتر از ۸ مگابایت باشد" : "JSON file must be smaller than 8 MB", "error");
      event.target.value = "";
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const parsed = JSON.parse(reader.result);
        LocalDB.importSnapshot(parsed);
        notify(lang === "fa" ? "دیتابیس JSON وارد شد" : "JSON database imported");
      } catch (_) { notify(lang === "fa" ? "ساختار فایل JSON معتبر نیست؛ اطلاعات قبلی تغییر نکرد." : "Invalid JSON database structure; existing data was not changed.", "error"); }
      event.target.value = "";
    };
    reader.onerror = () => {
      notify(lang === "fa" ? "خواندن فایل JSON ناموفق بود" : "Could not read the JSON file", "error");
      event.target.value = "";
    };
    reader.readAsText(file);
  };
  const resetDemo = () => {
    if (!window.confirm(lang === "fa" ? "اطلاعات مدیریتی به حالت دمو برگردد؟" : "Reset admin data to demo defaults?")) return;
    LocalDB.set("adminMenu", seedAdminMenu());
    LocalDB.set("adminStaff", seedAdminStaff());
    LocalDB.set("adminOrderStatuses", {});
    LocalDB.set("adminHours", HOURS.map((row, index) => ({ ...row, id: `hours-${index}`, active: true })));
    LocalDB.set("deliveryConfig", { fee: 65000, freeFrom: 900000, minOrder: 250000, maxDistance: 8 });
    notify(lang === "fa" ? "اطلاعات دمو بازیابی شد" : "Demo data restored");
  };
  return <div className="grid grid-2" style={{ gap: 18 }}>
    <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end", gap: 8, flexWrap: "wrap" }}>
      <label className="btn btn-ghost btn-sm" style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.22)", cursor: "pointer" }}>{lang === "fa" ? "ورود فایل JSON" : "Import JSON"}<input type="file" accept="application/json,.json" onChange={importJson} style={{ display: "none" }} /></label>
      <button className="btn btn-ghost btn-sm" onClick={() => { LocalDB.export(); notify(lang === "fa" ? "فایل JSON دانلود شد" : "JSON database downloaded"); }} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.22)" }}>{lang === "fa" ? "خروجی JSON" : "Export JSON"}</button>
      <button className="btn btn-ghost btn-sm" onClick={resetDemo} style={{ color: "#FF8C7C", borderColor: "rgba(255,140,124,.25)" }}>{lang === "fa" ? "بازیابی دمو" : "Reset demo"}</button>
    </div>
    <Panel title={lang === "fa" ? "اعلان‌ها" : "Notifications"}>
      <div style={{ display: "grid", gap: 10 }}>{notificationRows.map(([key, label]) => <label key={key} style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", background: "rgba(255,244,226,.04)", borderRadius: 12, padding: 12 }}><span style={{ fontSize: 13 }}>{pick(label, lang)}</span><AdminToggle on={Boolean(settings[key])} onChange={value => saveSettings({ ...settings, [key]: value })} color={accent} /></label>)}</div>
    </Panel>
    <Panel title={lang === "fa" ? "ساعت کاری" : "Business hours"}>
      <div style={{ display: "grid", gap: 10 }}>{hours.map(row => <div key={row.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, alignItems: "center", background: "rgba(255,244,226,.04)", borderRadius: 12, padding: 10 }}><AdminToggle on={row.active !== false} onChange={active => saveHours(hours.map(current => current.id === row.id ? { ...current, active } : current))} color={accent} /><div><div style={{ fontSize: 12, marginBottom: 6 }}>{row[lang]}</div><input dir="ltr" value={row.time} onChange={event => saveHours(hours.map(current => current.id === row.id ? { ...current, time: event.target.value } : current))} style={{ ...ADMIN_INPUT_STYLE, padding: "7px 9px" }} /></div></div>)}</div>
    </Panel>
    <Panel title={lang === "fa" ? "تنظیمات ارسال" : "Delivery settings"} span="1 / -1">
      <div className="grid grid-2" style={{ gap: 12 }}>
        <AdminField label={lang === "fa" ? "هزینه ارسال (تومان)" : "Delivery fee (Toman)"} type="number" min="0" value={draft.fee} onChange={value => setDraft(current => ({ ...current, fee: Number(value) }))} dir="ltr" />
        <AdminField label={lang === "fa" ? "ارسال رایگان از (تومان)" : "Free delivery from"} type="number" min="0" value={draft.freeFrom} onChange={value => setDraft(current => ({ ...current, freeFrom: Number(value) }))} dir="ltr" />
        <AdminField label={lang === "fa" ? "حداقل سفارش (تومان)" : "Minimum order"} type="number" min="0" value={draft.minOrder} onChange={value => setDraft(current => ({ ...current, minOrder: Number(value) }))} dir="ltr" />
        <AdminField label={lang === "fa" ? "حداکثر فاصله (کیلومتر)" : "Max distance (km)"} type="number" min="1" value={draft.maxDistance} onChange={value => setDraft(current => ({ ...current, maxDistance: Number(value) }))} dir="ltr" />
      </div>
      <button className="btn btn-primary" onClick={submitDelivery} style={{ marginTop: 14 }}>{lang === "fa" ? "ذخیره تنظیمات ارسال" : "Save delivery settings"}</button>
    </Panel>
  </div>;
}

function FunctionalReportsTab({ accent }) {
  const { lang } = useLang();
  const [range, setRange] = useState("week");
  const orders = getFunctionalAdminOrders();
  const multiplier = range === "today" ? .18 : range === "month" ? 4.1 : 1;
  const revenue = Math.round(orders.reduce((sum, order) => sum + Number(order.total || 0), 0) * multiplier);
  const exportCsv = () => {
    const rows = [["order", "customer", "items", "total", "status"], ...orders.map(order => [order.id, pick(order.name, "en"), order.items, order.total, order.status])];
    const csv = rows.map(row => row.map(value => `"${String(value).replace(/"/g, '""')}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url; link.download = `kotleto-report-${range}.csv`; link.click();
    URL.revokeObjectURL(url);
    notify(lang === "fa" ? "گزارش CSV دانلود شد" : "CSV report downloaded");
  };
  const segments = [
    [T("امضاها", "Signature"), 42, accent],
    [T("ساندویچ", "Sandwiches"), 31, "#E8B14A"],
    [T("بشقاب", "Plates"), 18, "#7FCB5A"],
    [T("همراه و نوشیدنی", "Sides & drinks"), 9, "#9AB8E8"],
  ];
  return <div style={{ display: "grid", gap: 18 }}>
    <div style={{ display: "flex", justifyContent: "space-between", gap: 10, flexWrap: "wrap" }}>
      <AdminSelect value={range} onValueChange={setRange} label={lang === "fa" ? "بازه گزارش" : "Report period"} style={{ width: 190 }} options={[{ value: "today", label: lang === "fa" ? "امروز" : "Today" }, { value: "week", label: lang === "fa" ? "۷ روز اخیر" : "Last 7 days" }, { value: "month", label: lang === "fa" ? "۳۰ روز اخیر" : "Last 30 days" }]} />
      <button className="btn btn-ghost btn-sm" onClick={exportCsv} style={{ color: "var(--paper)", borderColor: "rgba(255,244,226,.2)" }}>{lang === "fa" ? "دانلود CSV" : "Download CSV"}</button>
    </div>
    <div className="grid grid-2" style={{ gap: 18 }}>
      <Panel title={lang === "fa" ? "فروش دوره" : "Period revenue"}><div className="display" style={{ fontSize: "clamp(28px,5vw,46px)", color: accent }}><Price value={revenue} /></div><p style={{ color: "rgba(255,244,226,.5)", fontSize: 12, marginBottom: 0 }}>{lang === "fa" ? "محاسبه‌شده از سفارش‌های دیتابیس محلی" : "Calculated from the local order database"}</p></Panel>
      <Panel title={lang === "fa" ? "ترکیب فروش" : "Sales mix"}><div style={{ display: "grid", gap: 12 }}>{segments.map(([label, value, color]) => <div key={value}><div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 6 }}><span>{pick(label, lang)}</span><span>{lang === "fa" ? toFa(value) : value}%</span></div><div style={{ height: 8, borderRadius: 99, background: "rgba(255,244,226,.08)", overflow: "hidden" }}><div style={{ width: `${value}%`, height: "100%", background: color, borderRadius: 99 }} /></div></div>)}</div></Panel>
    </div>
  </div>;
}

Object.assign(window, {
  FunctionalOverview,
  FunctionalOrdersTab,
  FunctionalMenuTab,
  FunctionalStaffTab,
  FunctionalSettingsTab,
  FunctionalReportsTab,
});