type MenuItem = {
  id?: string;
  name: string;
  price: number;
  item_name_marathi?: string | null;
  aliases?: string[];
};

type OrderItem = {
  item_id?: string | null;
  item_name: string;
  item_name_marathi?: string | null;
  portion?: "full" | "half" | "piece";
  quantity: number;
  portion_breakup?: Array<{ portion: "full" | "half"; qty: number }>;
  packing_note?: string;
  confidence_score?: number;
  confidence_reason?: string;
  customer_mentioned_rate?: number | null;
  menu_full_rate?: number | null;
  final_rate?: number | null;
  special_instruction: string;
  item_price: number;
  line_total: number;
  source_text?: string;
  confidence?: "high" | "medium" | "low";
  warnings?: string[];
};

type Order = {
  id: number | string;
  kotNumber: string;
  date: string;
  createdAt: string;
  customer_name: string;
  customer_phone: string;
  address: string;
  items: OrderItem[];
  order_total: number;
  subtotal?: number;
  discount?: number;
  payment_status?: string;
  order_status?: "New" | "Confirmed" | "Preparing" | "Delivered" | "Cancelled";
  statusHistory?: Array<{ status: string; at: string }>;
  updatedAt?: string;
  warnings: string[];
  preferences?: string;
  notes?: string;
  confidence?: "high" | "medium" | "low";
  unresolved_items?: string[];
  confirmation_message_marathi?: string;
  kot_text?: string;
  raw_text: string;
};

type AiMenuItem = {
  item_id: string;
  item_name: string;
  item_name_marathi: string | null;
  rate: number;
  aliases: string[];
  per_piece?: boolean;
  item_type?: "portion" | "piece" | "weight" | "plate" | "unknown";
};

type AiParsedItem = {
  item_id: string | null;
  itemName: string;
  marathiItemName: string | null;
  portion: "full" | "half" | "piece";
  quantity: number;
  customerMentionedRate: number | null;
  menuFullRate: number | null;
  finalRate: number | null;
  amount: number | null;
  confidence: "high" | "medium" | "low";
  warnings: string[];
};

type AiParsedOrder = {
  original_message: string;
  customer_name: string | null;
  mobile_number: string | null;
  address: string | null;
  items: AiParsedItem[];
  preferences: string;
  notes: string;
  total_amount: number | null;
  confirmation_message_marathi: string;
  kot_text: string;
  unresolved_items: string[];
  warnings: string[];
  confidence: "high" | "medium" | "low";
};

declare const React: any;
declare const ReactDOM: any;

const { useEffect, useMemo, useState } = React;
const parserApi = (window as any).RamaParser;
const menuFormatterApi = (window as any).RamaMenuFormatter;
const confirmationApi = (window as any).RamaConfirmation;
const kotFormatterApi = (window as any).RamaKotFormatter;
const orderStorageApi = (window as any).RamaOrderStorage;
const parserLearningApi = (window as any).RamaParserLearning;
const defaultMenuItems = parserApi.defaultMenuItems;
const itemAliases = parserApi.itemAliases || [];
const processIncomingWhatsAppMessage = parserApi.processIncomingWhatsAppMessage;
const parseDailyMenuText = menuFormatterApi.parseDailyMenuText;
const generateWhatsAppMenuMessage = menuFormatterApi.generateWhatsAppMenuMessage;
const generateConfirmationMessage = confirmationApi.generateConfirmationMessage;
const generateKotText = kotFormatterApi.generateKotText;
const ramaFoodsWhatsAppNumber = "9371148927";
const ramaFoodsLogo = "./assets/rama-foods-logo.png";
const kitchenImage = "./assets/unnamed%20(3).webp";
const foodImages = [
  { src: "./assets/unnamed%20(1).webp", alt: "Fresh bhakri on a plate" },
  { src: "./assets/unnamed.webp", alt: "Homestyle curry" },
  { src: "./assets/unnamed%20(2).webp", alt: "Fresh raita bowl" }
];

const marathiMenuSample = `पिठलं 65
फोडणीचे वरण 40
साधा भात 30
ज्वारी भाकरी 22
घडीची पोळी 10
पीयूष 70`;

const englishMenuSample = `pithala 65
fodniche varan 40
sadha bhat 30
jowar bhakri 22
poli 10
piyush 70`;

const sampleOrders = [
  `घडीची पोळी 7
C3-204, Aditya Shagun Society, Bavadhan`,
  `pithala 1/2
bhakri ek
B9, 702 Aditya Shagun`,
  `पिठलं-1
फोडणीचे वरण -2(separate)
साधा भात -1+1/2(seperate)
भाकरी-1
Sucheta Dhruv
203, Tridal, DSK Raanwara`
];

function todayKey() {
  const date = new Date();
  const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
  return offsetDate.toISOString().slice(0, 10);
}

function yesterdayKey() {
  const date = new Date();
  date.setDate(date.getDate() - 1);
  const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
  return offsetDate.toISOString().slice(0, 10);
}

function formatTime(value: string) {
  return new Date(value || Date.now()).toLocaleTimeString("en-IN", {
    hour: "2-digit",
    minute: "2-digit"
  });
}

function todayDisplay() {
  return new Date().toLocaleDateString("en-IN", {
    weekday: "long",
    day: "numeric",
    month: "long",
    year: "numeric"
  });
}

function uid() {
  return Math.random().toString(36).slice(2, 10);
}

function loadJson<T>(key: string, fallback: T): T {
  try {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : fallback;
  } catch {
    return fallback;
  }
}

function money(value: number) {
  return `₹${Number(value || 0).toFixed(2)}`;
}

function csvEscape(value: any) {
  const text = String(value ?? "");
  return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
}

function itemsSummary(items: OrderItem[]) {
  return (items || []).map((item) => {
    const shouldShowBreakup = Boolean(item.portion_breakup?.some((part) => part.portion === "half") || (item.portion_breakup?.length || 0) > 1);
    const portionText = shouldShowBreakup
      ? item.portion_breakup.map((part) => `${part.qty} ${part.portion}`).join(" + ")
      : `${item.portion || "full"} x ${item.quantity}`;
    const packing = item.packing_note ? ` | ${item.packing_note}` : "";
    return `${item.item_name} - ${portionText}${packing}`;
  }).join(", ");
}

function rupees(value: number) {
  const amount = Number(value || 0);
  return Number.isInteger(amount) ? `₹${amount}` : `₹${amount.toFixed(2)}`;
}

function slugify(value: string) {
  return String(value || "")
    .toLowerCase()
    .replace(/\s+/g, "-")
    .replace(/[^a-z0-9\u0900-\u097f-]/gi, "")
    .replace(/^-+|-+$/g, "");
}

function uniqueStrings(values: string[]) {
  return Array.from(new Set(values.filter(Boolean).map(String)));
}

function aliasGroupForName(name: string) {
  const clean = String(name || "").toLowerCase().trim();
  return itemAliases.find((group: any) => {
    const names = [group.canonical, ...(group.aliases || [])].map((alias: string) => String(alias).toLowerCase().trim());
    return names.includes(clean);
  });
}

function marathiNameForItem(name: string) {
  const group = aliasGroupForName(name);
  const aliases = [group?.canonical, ...(group?.aliases || []), name].filter(Boolean);
  const marathi = aliases.find((alias: string) => /[\u0900-\u097f]/.test(alias));
  if (String(name).toLowerCase() === "thalpeet") return "थालीपीठ";
  return marathi || null;
}

function isPerPieceItem(name: string) {
  return /घडीची\s*पोळी|पोळी|poli|chapati/i.test(String(name || ""));
}

function finalRateForPortion(menuFullRate: number | null | undefined, portion: string | undefined) {
  const rate = Number(menuFullRate);
  if (!Number.isFinite(rate)) return 0;
  return Number(((portion === "half" ? rate / 2 : rate)).toFixed(2));
}

function normalizedOrderItemKey(item: OrderItem) {
  return `${String(item.item_id || item.item_name_marathi || item.item_name || "").toLowerCase().trim()}|${item.portion || "full"}`;
}

function dedupeOrderItems(items: OrderItem[]) {
  const result: OrderItem[] = [];
  for (const item of items) {
    const key = normalizedOrderItemKey(item);
    const existingIndex = result.findIndex((candidate) => normalizedOrderItemKey(candidate) === key);
    if (existingIndex < 0) {
      result.push(item);
      continue;
    }

    const existing = result[existingIndex];
    const existingQty = Number(existing.quantity) || 0;
    const itemQty = Number(item.quantity) || 0;
    if (existingQty === 1 && itemQty > 1) {
      result[existingIndex] = item;
      continue;
    }
    if (itemQty === 1 && existingQty > 1) continue;
    result.push(item);
  }
  return result;
}

function isKnownPieceItem(name: string) {
  return isPerPieceItem(name) || /घडीची\s*पोळी|पोळी|पोळ्या|चपाती|समोसा|समोसे|मोदक|वडा|कटलेट|poli|polya|chapati|roti|samosa|samose|modak|vada|wada|cutlet|gulab\s*jamun/i.test(String(name || ""));
}

function menuToAiPayload(items: MenuItem[]): AiMenuItem[] {
  return items.map((item) => {
    const group = aliasGroupForName(item.name);
    const aliases = uniqueStrings([item.name, ...(group?.aliases || [])]);
    return {
      item_id: item.id || slugify(item.name),
      item_name: item.name,
      item_name_marathi: item.item_name_marathi ?? marathiNameForItem(item.name),
      rate: Number(item.price) || 0,
      aliases,
      per_piece: isKnownPieceItem(`${item.name} ${aliases.join(" ")}`),
      item_type: isKnownPieceItem(`${item.name} ${aliases.join(" ")}`) ? "piece" : "portion"
    };
  });
}

function toMenuRows(items: Array<{ name: string; price: number }>): MenuItem[] {
  return items.map((item) => ({ ...item, id: uid() }));
}

function menuToText(items: MenuItem[]) {
  return items.map((item) => `${item.name} ${item.price}`).join("\n");
}

function blankPreview(date: string): Order {
  return {
    id: 0,
    kotNumber: "0000",
    date,
    createdAt: new Date().toISOString(),
    customer_name: "",
    customer_phone: "",
    address: "",
    items: [],
    order_total: 0,
    warnings: [],
    preferences: "",
    notes: "",
    confidence: "low",
    unresolved_items: [],
    confirmation_message_marathi: "",
    kot_text: "",
    raw_text: ""
  };
}

function cleanPhone(phone: string) {
  return String(phone || "").replace(/[^\d]/g, "");
}

function openWhatsAppLink(url: string) {
  const whatsappWindow = window.open(url, "rama-foods-whatsapp");
  whatsappWindow?.focus();
}

function friendlyAuthError(error: any) {
  const message = String(error?.message || "");
  const status = error?.status ? ` (${error.status})` : "";
  if (/email not confirmed|not confirmed|confirm/i.test(message)) {
    return "Email is not confirmed. Open Supabase Auth Users and confirm this staff user.";
  }
  if (/email.*disabled|provider.*disabled|signup.*disabled|signups not allowed/i.test(message)) {
    return "Email password login is disabled in Supabase. Open Authentication > Sign In / Providers and enable Email.";
  }
  if (/invalid api key|api key|anon key|jwt malformed/i.test(message)) {
    return "Supabase key problem. Check the VITE_SUPABASE_ANON_KEY saved in Netlify.";
  }
  if (/unable to validate email|email.*invalid|invalid.*email/i.test(message)) {
    return "Enter the full staff email address, not a username.";
  }
  if (/invalid login credentials|invalid email|password/i.test(message)) {
    return "Invalid email or password.";
  }
  if (/failed to fetch|network|load failed/i.test(message)) {
    return "Network error. Please check internet and try again.";
  }
  if (/jwt|session|expired|refresh/i.test(message)) {
    return "Session expired. Please login again.";
  }
  if (/supabase is not configured|supabase/i.test(message)) {
    return "Supabase not configured.";
  }
  return message ? `Login failed: ${message}${status}` : "Login failed. Please try again.";
}

function friendlyStorageError(error: any) {
  const message = String(error?.message || "");
  if (/failed to fetch|network|load failed/i.test(message)) {
    return "Network error. Please check internet and try again.";
  }
  if (/jwt|session|expired|unauthorized|not authenticated/i.test(message)) {
    return "Session expired. Please login again.";
  }
  if (/supabase is not configured/i.test(message)) {
    return "Supabase is not configured. Please add Supabase URL and Anon Key.";
  }
  return message || "Could not complete this action. Please try again.";
}

function AppFooter() {
  return (
    <footer className="app-footer">
      © 2026 Rama Foods. Developed by Nishan Business Consultants.
    </footer>
  );
}

function BrandButton({ onClick }: { onClick?: () => void }) {
  return (
    <button className="home-link" onClick={onClick} aria-label="Rama Foods home">
      <img className="brand-logo" src={ramaFoodsLogo} alt="Rama Foods" />
    </button>
  );
}

function App() {
  const [screen, setScreen] = useState<"home" | "menu" | "orders" | "summary" | "history" | "learning">("home");
  const [selectedDate] = useState(todayKey());
  const [menuByDate, setMenuByDate] = useState<Record<string, MenuItem[]>>(() =>
    loadJson("rama.menuByDate", { [todayKey()]: toMenuRows(defaultMenuItems) })
  );
  const [orders, setOrders] = useState<Order[]>([]);
  const [menuText, setMenuText] = useState(() => menuToText(loadJson("rama.menuByDate", { [todayKey()]: toMenuRows(defaultMenuItems) })[todayKey()] || toMenuRows(defaultMenuItems)));
  const [menuWarnings, setMenuWarnings] = useState<string[]>([]);
  const [orderText, setOrderText] = useState("");
  const [orderMobile, setOrderMobile] = useState("");
  const [preview, setPreview] = useState<Order>(() => blankPreview(todayKey()));
  const [savedConfirmation, setSavedConfirmation] = useState("");
  const [copyStatus, setCopyStatus] = useState("");
  const [parseStatus, setParseStatus] = useState("");
  const [isParsingAi, setIsParsingAi] = useState(false);
  const [printOrder, setPrintOrder] = useState<Order | null>(null);
  const [session, setSession] = useState<any>(null);
  const [loginEmail, setLoginEmail] = useState("");
  const [loginPassword, setLoginPassword] = useState("");
  const [storageStatus, setStorageStatus] = useState("");
  const [authError, setAuthError] = useState("");
  const [isCheckingSession, setIsCheckingSession] = useState(true);
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [isSavingOrder, setIsSavingOrder] = useState(false);
  const [isSavingMenu, setIsSavingMenu] = useState(false);
  const [isLoadingMenu, setIsLoadingMenu] = useState(false);
  const [isLoadingOrders, setIsLoadingOrders] = useState(false);
  const [editingOrderId, setEditingOrderId] = useState<string | number | null>(null);
  const [unsavedOrders, setUnsavedOrders] = useState<any[]>(() => orderStorageApi?.readUnsaved?.() || []);
  const [historyFilters, setHistoryFilters] = useState({
    fromDate: todayKey(),
    toDate: todayKey(),
    customerName: "",
    mobile: "",
    address: "",
    orderNo: "",
    status: ""
  });
  const [selectedHistoryOrder, setSelectedHistoryOrder] = useState<Order | null>(null);
  const [originalParsedOrder, setOriginalParsedOrder] = useState<Order | null>(null);
  const [savedCorrectionKeys, setSavedCorrectionKeys] = useState<string[]>([]);
  const [learningCorrections, setLearningCorrections] = useState<any[]>([]);
  const [learningSuggestions, setLearningSuggestions] = useState<any[]>([]);
  const [isLoadingLearning, setIsLoadingLearning] = useState(false);

  const menu = menuByDate[selectedDate] || [];
  const parsedMenu = useMemo(() => parseDailyMenuText(menuText), [menuText]);
  const menuMessage = useMemo(() => generateWhatsAppMenuMessage(parsedMenu.items.length ? parsedMenu.items : menu), [parsedMenu.items, menu]);
  const dayOrders = useMemo(() => orders.filter((order) => order.date === selectedDate && order.order_status !== "Cancelled"), [orders, selectedDate]);
  const historyOrders = useMemo(() => orders, [orders]);
  const confirmationMessage = useMemo(() => preview.confirmation_message_marathi || generateConfirmationMessage(preview), [preview]);
  const kotText = useMemo(() => (printOrder || preview).kot_text || generateKotText(printOrder || preview), [printOrder, preview]);
  const outputOrder = printOrder || preview;
  const hasDraftItems = preview.items.length > 0;
  const hasSavedOutput = Boolean(savedConfirmation || printOrder?.items.length);
  const hasOrderOutput = hasDraftItems || hasSavedOutput;

  useEffect(() => {
    localStorage.setItem("rama.menuByDate", JSON.stringify(menuByDate));
  }, [menuByDate]);

  useEffect(() => {
    let active = true;
    if (!orderStorageApi?.isConfigured?.()) {
      setStorageStatus("Supabase is not configured. Please add Supabase URL and Anon Key.");
      setIsCheckingSession(false);
      return () => {
        active = false;
      };
    }

    setIsCheckingSession(true);
    orderStorageApi.getSession()
      .then((currentSession: any) => {
        if (active) setSession(currentSession);
      })
      .catch(() => setStorageStatus("Session expired. Please login again."))
      .finally(() => {
        if (active) setIsCheckingSession(false);
      });
    const subscription = orderStorageApi.onAuthStateChange((nextSession: any) => {
      setSession(nextSession);
      if (!nextSession) setOrders([]);
    });
    return () => {
      active = false;
      subscription?.unsubscribe?.();
    };
  }, []);

  useEffect(() => {
    if (session) {
      loadDailyMenu(selectedDate);
    }
  }, [session, selectedDate]);

  useEffect(() => {
    if (session && screen === "history") {
      loadOrders(historyFilters);
    }
    if (session && screen === "summary") {
      loadOrders({ ...historyFilters, fromDate: selectedDate, toDate: selectedDate });
    }
    if (session && screen === "learning") {
      loadParserLearning();
    }
  }, [session, screen]);

  function go(nextScreen: "home" | "menu" | "orders" | "summary" | "history" | "learning") {
    setCopyStatus("");
    setScreen(nextScreen);
  }

  async function login() {
    setStorageStatus("");
    setAuthError("");
    if (!orderStorageApi?.isConfigured?.()) {
      setAuthError("Supabase not configured.");
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginEmail.trim())) {
      setAuthError("Enter the full staff email address, not a username.");
      return;
    }
    setIsLoggingIn(true);
    try {
      const nextSession = await orderStorageApi.signIn(loginEmail.trim(), loginPassword);
      setSession(nextSession);
      setLoginPassword("");
      setStorageStatus("Logged in. Orders will be saved online.");
    } catch (error: any) {
      setAuthError(friendlyAuthError(error));
    } finally {
      setIsLoggingIn(false);
    }
  }

  async function logout() {
    try {
      await orderStorageApi.signOut();
      setSession(null);
      setOrders([]);
      setStorageStatus("Logged out.");
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    }
  }

  async function loadOrders(filters = historyFilters) {
    if (!orderStorageApi?.isConfigured?.()) {
      setStorageStatus("Supabase is not configured. Please add Supabase URL and Anon Key.");
      return;
    }
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    setIsLoadingOrders(true);
    setStorageStatus("");
    try {
      const rows = await orderStorageApi.fetchOrders(filters);
      setOrders(rows);
      if (selectedHistoryOrder) {
        setSelectedHistoryOrder(rows.find((order: Order) => order.id === selectedHistoryOrder.id) || null);
      }
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    } finally {
      setIsLoadingOrders(false);
    }
  }

  function quickHistoryRange(kind: "today" | "yesterday") {
    const key = kind === "today" ? todayKey() : yesterdayKey();
    const nextFilters = { ...historyFilters, fromDate: key, toDate: key };
    setHistoryFilters(nextFilters);
    loadOrders(nextFilters);
  }

  async function loadDailyMenu(dateKey = selectedDate) {
    if (!orderStorageApi?.isConfigured?.() || !session) return;
    setIsLoadingMenu(true);
    try {
      const onlineMenu = await orderStorageApi.fetchDailyMenu(dateKey);
      if (onlineMenu?.menu_items?.length) {
        setMenuByDate((current) => ({ ...current, [dateKey]: onlineMenu.menu_items }));
        setMenuText(onlineMenu.menu_text || menuToText(onlineMenu.menu_items));
        setCopyStatus("Online menu loaded.");
      }
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    } finally {
      setIsLoadingMenu(false);
    }
  }

  async function saveMenu() {
    const result = parseDailyMenuText(menuText);
    setMenuWarnings(result.warnings);
    if (!result.items.length) return;
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    const rows = result.items.map((item: MenuItem) => ({ ...item, id: item.id || uid() }));
    setIsSavingMenu(true);
    setStorageStatus("");
    try {
      await orderStorageApi.saveDailyMenu(selectedDate, rows, menuToText(rows), generateWhatsAppMenuMessage(rows));
      setMenuByDate((current) => ({ ...current, [selectedDate]: rows }));
      setMenuText(menuToText(rows));
      setCopyStatus("Menu saved online.");
    } catch (error: any) {
      setMenuByDate((current) => ({ ...current, [selectedDate]: rows }));
      setCopyStatus("Menu saved on this PC only.");
      setStorageStatus(`Menu not saved online. ${friendlyStorageError(error)}`);
    } finally {
      setIsSavingMenu(false);
    }
  }

  function updateMenuItem(index: number, patch: Partial<MenuItem>) {
    const rows = [...parsedMenu.items];
    rows[index] = { ...rows[index], ...patch };
    setMenuText(menuToText(rows));
  }

  async function copyText(text: string, success: string) {
    try {
      await navigator.clipboard.writeText(text);
    } catch {
      const helper = document.createElement("textarea");
      helper.value = text;
      document.body.appendChild(helper);
      helper.select();
      document.execCommand("copy");
      document.body.removeChild(helper);
    }
    setCopyStatus(success);
  }

  function shareMenuOnWhatsApp() {
    openWhatsAppLink(`https://wa.me/${ramaFoodsWhatsAppNumber}?text=${encodeURIComponent(menuMessage)}`);
  }

  function orderFromAiResult(result: AiParsedOrder): Order {
    const itemWarnings = result.items.flatMap((item) => item.warnings.map((warning) => `${item.itemName}: ${warning}`));
    const warnings = uniqueStrings([
      ...result.warnings,
      ...itemWarnings,
      ...result.unresolved_items.map((item) => `Unresolved item: ${item}`)
    ]);
    const mappedItems = result.items.map((item) => ({
      item_id: item.item_id,
      item_name: item.itemName,
      item_name_marathi: item.marathiItemName,
      portion: item.portion,
      quantity: Number(item.quantity) || 0,
      customer_mentioned_rate: item.customerMentionedRate,
      menu_full_rate: item.menuFullRate,
      final_rate: item.finalRate,
      special_instruction: result.preferences,
      item_price: Number(item.finalRate) || 0,
      line_total: Number(item.amount ?? ((Number(item.quantity) || 0) * (Number(item.finalRate) || 0)).toFixed(2)),
      confidence: item.confidence,
      confidence_score: item.confidence === "high" ? 0.9 : item.confidence === "medium" ? 0.74 : 0.5,
      confidence_reason: item.confidence === "high" ? "High confidence: known item + parsed quantity" : item.confidence === "medium" ? "Medium confidence: please verify quantity or address" : "Low confidence: Needs Review",
      warnings: item.warnings,
      source_text: result.original_message
    }));
    const items = dedupeOrderItems(mappedItems);

    return {
      ...blankPreview(selectedDate),
      customer_name: result.customer_name || "",
      customer_phone: result.mobile_number || orderMobile || "",
      address: result.address || "",
      items,
      order_total: Number(items.reduce((total, item) => total + item.line_total, 0).toFixed(2)),
      warnings,
      preferences: result.preferences,
      notes: result.notes,
      confidence: result.confidence,
      unresolved_items: result.unresolved_items,
      confirmation_message_marathi: result.confirmation_message_marathi,
      kot_text: result.kot_text,
      raw_text: result.original_message || orderText,
      date: selectedDate,
      createdAt: new Date().toISOString()
    };
  }

  async function parseOrder() {
    setIsParsingAi(true);
    setParseStatus("");
    setSavedConfirmation("");
    setCopyStatus("");
    setPrintOrder(null);
    setEditingOrderId(null);

    try {
      const response = await fetch("/api/parse-order-ai", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: orderText,
          mobile_number: orderMobile,
          today_menu: menuToAiPayload(menu.length ? menu : defaultMenuItems)
        })
      });
      const payload = await response.json().catch(() => ({}));

      if (!response.ok) {
        throw new Error(payload.error || "AI parser failed. Please enter order manually.");
      }

      const parsedOrder = orderFromAiResult(payload);
      setPreview(parsedOrder);
      setOriginalParsedOrder(parsedOrder);
      setSavedCorrectionKeys([]);
      setParseStatus("AI parsed the order. Please review every field before saving.");
    } catch (error: any) {
      console.error(error);
      const message = error?.message === "Failed to fetch" ? "AI parser failed. Please enter order manually." : error?.message;
      setParseStatus(message || "AI parser failed. Please enter order manually.");
    } finally {
      setIsParsingAi(false);
    }
  }

  function recalcItems(items: OrderItem[]) {
    const recalculated = dedupeOrderItems(items.map((item) => {
      const quantity = Number(item.quantity) || 0;
      const menuFullRate = Number(item.menu_full_rate ?? item.item_price) || 0;
      const portion = item.portion || (isKnownPieceItem(item.item_name) ? "piece" : "full");
      const finalRate = finalRateForPortion(menuFullRate, portion);
      return {
        ...item,
        portion,
        quantity,
        menu_full_rate: menuFullRate,
        final_rate: finalRate,
        item_price: finalRate,
        line_total: Number((quantity * finalRate).toFixed(2))
      };
    }));
    return {
      items: recalculated,
      order_total: Number(recalculated.reduce((total, item) => total + item.line_total, 0).toFixed(2))
    };
  }

  function correctionTypeForPatch(patch: Partial<OrderItem>) {
    if ("quantity" in patch) return "quantity_correction";
    if ("portion_breakup" in patch && Array.isArray(patch.portion_breakup) && patch.portion_breakup.some((part) => part.portion === "half")) return "decimal_half_portion_correction";
    if ("portion" in patch || "portion_breakup" in patch) return "half_full_correction";
    if ("packing_note" in patch || "special_instruction" in patch) return "packing_note_correction";
    if ("item_name" in patch || "item_id" in patch) return "item_name_correction";
    if ("menu_full_rate" in patch || "final_rate" in patch || "item_price" in patch) return "rate_correction";
    return "quantity_correction";
  }

  function changedValueForPatch(item: OrderItem, patch: Partial<OrderItem>) {
    const key = Object.keys(patch)[0] as keyof OrderItem;
    return {
      key,
      before: key ? (item as any)[key] : "",
      after: key ? (patch as any)[key] : ""
    };
  }

  async function captureParserCorrection(index: number, previousItem: OrderItem, nextItem: OrderItem, patch: Partial<OrderItem>) {
    if (!originalParsedOrder || !orderStorageApi?.saveParserCorrection || !session) return;
    const diff = changedValueForPatch(previousItem, patch);
    const key = `${index}:${diff.key}:${JSON.stringify(diff.before)}:${JSON.stringify(diff.after)}`;
    if (savedCorrectionKeys.includes(key)) return;

    try {
      await orderStorageApi.saveParserCorrection({
        raw_message: preview.raw_text || orderText,
        original_parsed_json: originalParsedOrder,
        corrected_parsed_json: { ...preview, items: preview.items.map((item, itemIndex) => itemIndex === index ? nextItem : item) },
        correction_type: correctionTypeForPatch(patch),
        item_name: nextItem.item_name,
        detected_wrong_value: diff.before,
        corrected_value: diff.after,
        staff_note: ""
      });
      setSavedCorrectionKeys((current) => [...current, key]);
      setCopyStatus("Correction saved. Parser will use this pattern next time.");
    } catch (error) {
      console.warn("[rama-parser] correction save skipped", error);
    }
  }

  function updatePreviewItem(index: number, patch: Partial<OrderItem>) {
    const previousItem = preview.items[index];
    const nextItems = preview.items.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item));
    const nextItem = nextItems[index];
    if (previousItem && JSON.stringify(previousItem) !== JSON.stringify(nextItem)) {
      captureParserCorrection(index, previousItem, nextItem, patch);
    }
    setPreview((current) => ({
      ...current,
      ...recalcItems(nextItems),
      confirmation_message_marathi: "",
      kot_text: ""
    }));
  }

  function addPreviewItem() {
    const first = menu[0] || defaultMenuItems[0];
    const nextItem = {
      item_id: first.id || slugify(first.name),
      item_name: first.name,
      item_name_marathi: marathiNameForItem(first.name),
      portion: isKnownPieceItem(first.name) ? "piece" as const : "full" as const,
      quantity: 1,
      customer_mentioned_rate: null,
      menu_full_rate: first.price,
      final_rate: first.price,
      special_instruction: "",
      item_price: first.price,
      line_total: first.price,
      confidence: "medium" as const,
      warnings: []
    };
    setPreview((current) => ({ ...current, ...recalcItems([...current.items, nextItem]), confirmation_message_marathi: "", kot_text: "" }));
  }

  function prepareOrderForSave(status: "New" | "Confirmed" | "Preparing" | "Delivered" | "Cancelled" = "Confirmed") {
    const warnings = preview.address
      ? preview.warnings.filter((warning) => warning !== "Address missing")
      : Array.from(new Set([...preview.warnings, "Address missing"]));
    if (!preview.customer_phone) warnings.push("Mobile missing");
    if (!preview.customer_name) warnings.push("Name missing");

    const orderNo = editingOrderId && preview.kotNumber && preview.kotNumber !== "0000"
      ? preview.kotNumber
      : orderStorageApi?.orderNoFor?.(selectedDate) || `RF-${Date.now()}`;
    const baseOrder: Order = {
      ...preview,
      id: editingOrderId || 0,
      kotNumber: orderNo,
      createdAt: editingOrderId && preview.createdAt ? preview.createdAt : new Date().toISOString(),
      date: selectedDate,
      warnings: Array.from(new Set(warnings)),
      order_status: status,
      payment_status: preview.payment_status || "Pending",
      subtotal: Number(preview.subtotal ?? preview.order_total ?? 0),
      discount: Number(preview.discount || 0)
    };
    const confirmation = baseOrder.confirmation_message_marathi || generateConfirmationMessage(baseOrder);
    const withMessages = {
      ...baseOrder,
      confirmation_message_marathi: confirmation,
      kot_text: baseOrder.kot_text || generateKotText(baseOrder)
    };
    return withMessages;
  }

  async function saveOrder(status: "New" | "Confirmed" | "Preparing" | "Delivered" | "Cancelled" = "Confirmed", options: { startNextOrder?: boolean } = {}) {
    if (!orderStorageApi?.isConfigured?.()) {
      setStorageStatus("Supabase is not configured. Please add Supabase URL and Anon Key.");
      return null;
    }
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return null;
    }

    const order = prepareOrderForSave(status);
    setPreview(order);
    setPrintOrder(order);
    setSavedConfirmation(order.confirmation_message_marathi || generateConfirmationMessage(order));
    setIsSavingOrder(true);
    setStorageStatus("");

    try {
      if (!orderStorageApi?.isConfigured?.()) {
        throw new Error("Supabase is not configured. Order not saved online. Please retry.");
      }
      if (!session) {
        throw new Error("Please log in first. Order not saved online. Please retry.");
      }

      const isNewOrder = !editingOrderId;
      if (isNewOrder) {
        const duplicate = await orderStorageApi.findDuplicate(order);
        if (duplicate && !window.confirm("Possible duplicate order found. Do you still want to save?")) {
          setStorageStatus("Save cancelled because possible duplicate order was found.");
          return null;
        }
      }

      const savedOrder = await orderStorageApi.saveOrder(order, { status });
      setOrders((current) => [savedOrder, ...current.filter((item) => item.id !== savedOrder.id)]);
      setSavedConfirmation(savedOrder.confirmation_message_marathi || generateConfirmationMessage(savedOrder));
      setPrintOrder(savedOrder);
      if (options.startNextOrder) {
        setPreview(blankPreview(selectedDate));
        setOrderText("");
        setOrderMobile("");
        setParseStatus("");
        setEditingOrderId(null);
        setOriginalParsedOrder(null);
        setSavedCorrectionKeys([]);
        setCopyStatus("Order saved online. Ready for next order. Confirmation ready.");
      } else {
        setPreview(savedOrder);
        setEditingOrderId(savedOrder.id);
        setCopyStatus("Order saved online. Confirmation ready.");
      }
      return savedOrder;
    } catch (error: any) {
      const message = friendlyStorageError(error);
      orderStorageApi?.backupUnsavedOrder?.(order, message);
      setUnsavedOrders(orderStorageApi?.readUnsaved?.() || []);
      setStorageStatus(`Order not saved online. Please retry. ${message}`);
      setCopyStatus("");
      return null;
    } finally {
      setIsSavingOrder(false);
    }
  }

  async function confirmAndGenerateKot() {
    await saveOrder("Confirmed", { startNextOrder: true });
  }

  function printKot(order: Order = outputOrder) {
    setPrintOrder(order);
    window.setTimeout(() => window.print(), 100);
  }

  function sendConfirmation() {
    const phone = cleanPhone(outputOrder.customer_phone);
    if (!phone) {
      alert("Mobile number missing. Please copy and send manually.");
      return;
    }
    const message = savedConfirmation || outputOrder.confirmation_message_marathi || generateConfirmationMessage(outputOrder);
    openWhatsAppLink(`https://wa.me/${phone}?text=${encodeURIComponent(message)}`);
  }

  function clearOrder() {
    setPreview(blankPreview(selectedDate));
    setOrderText("");
    setOrderMobile("");
    setParseStatus("");
    setSavedConfirmation("");
    setCopyStatus("");
    setStorageStatus("");
    setPrintOrder(null);
    setEditingOrderId(null);
    setOriginalParsedOrder(null);
    setSavedCorrectionKeys([]);
  }

  function editHistoryOrder(order: Order) {
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    setPreview(order);
    setOrderText(order.raw_text || "");
    setOrderMobile(order.customer_phone || "");
    setSavedConfirmation(order.confirmation_message_marathi || generateConfirmationMessage(order));
    setEditingOrderId(order.id);
    setOriginalParsedOrder(null);
    setSavedCorrectionKeys([]);
    setScreen("orders");
    setCopyStatus("Editing saved order. Click Save Order after changes.");
  }

  async function markStatus(order: Order, status: "New" | "Confirmed" | "Preparing" | "Delivered" | "Cancelled") {
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    setStorageStatus("");
    try {
      const updated = await orderStorageApi.updateOrderStatus(order, status);
      setOrders((current) => current.map((item) => item.id === updated.id ? updated : item));
      if (selectedHistoryOrder?.id === updated.id) setSelectedHistoryOrder(updated);
      setCopyStatus(`Order marked ${status}.`);
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    }
  }

  async function retryUnsavedOrders() {
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    setStorageStatus("");
    try {
      const result = await orderStorageApi.retryUnsavedOrders();
      setUnsavedOrders(orderStorageApi.readUnsaved());
      setOrders((current) => [...result.saved, ...current]);
      setStorageStatus(`${result.saved.length} unsaved order(s) saved online. ${result.failed.length} still need retry.`);
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    }
  }

  async function loadParserLearning() {
    if (!session) return;
    if (!orderStorageApi?.fetchParserCorrections) {
      setStorageStatus("Parser learning tables are not available yet. Run the Supabase migration first.");
      return;
    }
    setIsLoadingLearning(true);
    setStorageStatus("");
    try {
      const corrections = await orderStorageApi.fetchParserCorrections(100);
      setLearningCorrections(corrections);
      setLearningSuggestions(parserLearningApi?.suggestRulesFromCorrections?.(corrections) || []);
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    } finally {
      setIsLoadingLearning(false);
    }
  }

  async function approveLearningRule(suggestion: any) {
    try {
      await parserLearningApi.approveSuggestedRule(orderStorageApi, suggestion);
      setCopyStatus("Rule approved. Parser will use it after rules are loaded.");
      await loadParserLearning();
    } catch (error: any) {
      setStorageStatus(friendlyStorageError(error));
    }
  }

  function ignoreLearningSuggestion(suggestion: any) {
    setLearningSuggestions((current) => current.filter((item) => item.id !== suggestion.id));
    setCopyStatus("Suggestion ignored.");
  }

  function exportOrdersCsv() {
    if (!session) {
      setStorageStatus("Please login as staff to save and view orders.");
      return;
    }
    const columns = [
      "Order No",
      "Date",
      "Time",
      "Customer Name",
      "Mobile",
      "Address",
      "Items",
      "Subtotal",
      "Discount",
      "Total",
      "Payment Status",
      "Order Status",
      "Notes"
    ];
    const rows = historyOrders.map((order) => [
      order.kotNumber,
      order.date,
      formatTime(order.createdAt),
      order.customer_name,
      order.customer_phone,
      order.address,
      itemsSummary(order.items),
      order.subtotal ?? order.order_total,
      order.discount || 0,
      order.order_total,
      order.payment_status || "Pending",
      order.order_status || "New",
      order.notes || ""
    ]);
    const csv = [columns, ...rows].map((row) => row.map(csvEscape).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 = `rama-foods-orders-${historyFilters.fromDate || "all"}-${historyFilters.toDate || "all"}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    setCopyStatus("Filtered orders exported to CSV.");
  }

  function clearPendingOrders() {
    const confirmed = window.confirm("Clear pending orders from this PC? These orders will not be retried online.");
    if (!confirmed) return;
    orderStorageApi?.clearUnsaved?.();
    setUnsavedOrders([]);
    setStorageStatus("Pending local orders cleared from this PC.");
  }

  const itemTotals = useMemo(() => {
    const totals = new Map<string, { quantity: number; amount: number }>();
    for (const order of dayOrders) {
      for (const item of order.items) {
        const current = totals.get(item.item_name) || { quantity: 0, amount: 0 };
        current.quantity += Number(item.quantity) || 0;
        current.amount += Number(item.line_total) || 0;
        totals.set(item.item_name, current);
      }
    }
    return Array.from(totals.entries());
  }, [dayOrders]);

  const totalSales = dayOrders.reduce((total, order) => total + order.order_total, 0);
  const deliveryList = dayOrders
    .map((order) => `KOT #${order.kotNumber} - ${order.customer_name || "Name missing"} - ${order.customer_phone || "Mobile missing"}\n${order.address || "Address missing"}\n${order.items.map((item) => `${item.item_name} x ${item.quantity}`).join(", ")}\nTotal: ${rupees(order.order_total)}`)
    .join("\n\n");
  const staffEmail = session?.user?.email || "";

  if (isCheckingSession) {
    return (
      <div className="app-shell">
        <header className="topbar">
          <BrandButton />
          <div className="topbar-actions">
            <p>{todayDisplay()}</p>
          </div>
        </header>
        <main className="auth-screen">
          <section className="panel auth-card">
            <h1>Rama Foods</h1>
            <h2>Checking staff login...</h2>
            <p className="muted">Please wait.</p>
          </section>
        </main>
        <AppFooter />
      </div>
    );
  }

  if (!orderStorageApi?.isConfigured?.()) {
    return (
      <div className="app-shell">
        <header className="topbar">
          <BrandButton />
          <div className="topbar-actions">
            <span className="login-status logged-out">Staff Login</span>
            <p>{todayDisplay()}</p>
          </div>
        </header>
        <main className="auth-screen">
          <section className="panel auth-card">
            <h1>Staff Login</h1>
            <p className="error-line">Supabase is not configured. Please add Supabase URL and Anon Key.</p>
            <p className="muted">Orders cannot be saved online and Order History is unavailable until Supabase is configured.</p>
          </section>
        </main>
        <AppFooter />
      </div>
    );
  }

  if (!session) {
    return (
      <div className="app-shell">
        <header className="topbar">
          <BrandButton />
          <div className="topbar-actions">
            <span className="login-status logged-out">Staff Login</span>
            <p>{todayDisplay()}</p>
          </div>
        </header>
        <main className="auth-screen">
          <section className="auth-layout">
            <div className="auth-visual">
              <img className="auth-kitchen-photo" src={kitchenImage} alt="Rama Foods kitchen" />
              <div className="food-strip">
                {foodImages.map((image) => <img key={image.src} src={image.src} alt={image.alt} />)}
              </div>
            </div>
            <div className="panel auth-card">
              <h1>Staff Login</h1>
              <p className="auth-note">Please login as staff to save and view orders.</p>
              <label>Email
                <input
                  value={loginEmail}
                  onChange={(event: any) => setLoginEmail(event.target.value)}
                  placeholder="staff@example.com"
                />
              </label>
              <label>Password
                <input
                  type="password"
                  value={loginPassword}
                  onChange={(event: any) => setLoginPassword(event.target.value)}
                  placeholder="Enter password created in Supabase Auth"
                />
              </label>
              <button className="primary full-button" onClick={login} disabled={isLoggingIn || !loginEmail || !loginPassword}>
                {isLoggingIn ? "Logging in..." : "Login"}
              </button>
              {authError && <p className="error-line">{authError}</p>}
              {storageStatus && <p className="status-line">{storageStatus}</p>}
            </div>
          </section>
        </main>
        <AppFooter />
      </div>
    );
  }

  return (
    <>
      <div className="app-shell">
        <header className="topbar">
          <BrandButton onClick={() => go("home")} />
          <div className="topbar-actions">
            {screen !== "home" && (
              <button className="secondary back-button" onClick={() => go("home")}>Back to Main Page</button>
            )}
            <span className="login-status">Logged in as: {staffEmail}</span>
            <button className="secondary back-button" onClick={logout}>Logout</button>
            <p>{todayDisplay()}</p>
          </div>
        </header>

        {storageStatus && <p className={storageStatus.startsWith("Order not saved online") || storageStatus.includes("failed") || storageStatus.includes("Could not") ? "error-line" : "status-line"}>{storageStatus}</p>}
        {session && unsavedOrders.length > 0 && (
          <section className="panel unsaved-panel">
            <strong>{unsavedOrders.length} order(s) are waiting to save online.</strong>
            <div className="unsaved-actions">
              <button className="primary" onClick={retryUnsavedOrders}>Retry Unsaved Orders</button>
              <button className="danger" onClick={clearPendingOrders}>Clear Pending Orders</button>
            </div>
          </section>
        )}

        {screen === "home" && (
          <main className="welcome">
            <div className="welcome-content">
            <h1>Rama Foods</h1>
            <p className="today-line">Today: {todayDisplay()}</p>
            <div className="home-actions">
              <button onClick={() => go("menu")}>Create Today’s Menu</button>
              <button className="primary" onClick={() => go("orders")}>Take Orders</button>
              <button onClick={() => go("history")}>Order History</button>
              <button className="secondary" onClick={() => go("summary")}>Daily Summary</button>
              <button className="secondary" onClick={() => go("learning")}>Parser Learning</button>
            </div>
            </div>
            <div className="home-visual">
              <img className="home-kitchen-photo" src={kitchenImage} alt="Rama Foods kitchen counter" />
              <div className="food-strip home-food-strip">
                {foodImages.map((image) => <img key={image.src} src={image.src} alt={image.alt} />)}
              </div>
            </div>
          </main>
        )}

        {screen === "menu" && (
          <main className="screen-stack">
            <section className="panel">
              <div className="section-head">
                <div>
                  <h2>Today’s Menu</h2>
                  <p className="muted">एक ओळीत item आणि rate लिहा.</p>
                </div>
                <div className="button-row">
                  <button className="secondary" onClick={() => setMenuText(marathiMenuSample)}>Load Sample Menu</button>
                  <button className="secondary" onClick={() => setMenuText(englishMenuSample)}>English Sample</button>
                  <button className="secondary" onClick={() => loadDailyMenu(selectedDate)} disabled={isLoadingMenu}>
                    {isLoadingMenu ? "Loading..." : "Load Online Menu"}
                  </button>
                </div>
              </div>
              <textarea className="menu-input" value={menuText} onChange={(event: any) => setMenuText(event.target.value)} />
              <div className="button-row">
                <button className="primary" onClick={saveMenu} disabled={isSavingMenu}>{isSavingMenu ? "Saving..." : "Save Menu Online"}</button>
                <button className="secondary" onClick={() => copyText(menuMessage, "WhatsApp menu copied.")}>Copy WhatsApp Menu</button>
                <button onClick={shareMenuOnWhatsApp}>Share on WhatsApp</button>
                <button className="secondary" onClick={() => setMenuText(menuToText(menu))}>Edit Menu</button>
              </div>
              {copyStatus && <p className="status-line">{copyStatus}</p>}
              {(menuWarnings.length > 0 || parsedMenu.warnings.length > 0) && (
                <div className="warnings">
                  {[...new Set([...menuWarnings, ...parsedMenu.warnings])].map((warning: string) => <p key={warning}>{warning}</p>)}
                </div>
              )}
              <div className="food-strip menu-food-strip">
                {foodImages.map((image) => <img key={image.src} src={image.src} alt={image.alt} />)}
              </div>
            </section>

            <section className="two-column">
              <div className="panel">
                <h3>Menu Preview</h3>
                <div className="menu-preview-list">
                  {parsedMenu.items.map((item: MenuItem, index: number) => (
                    <div className="menu-preview-row" key={`${item.name}-${index}`}>
                      <input value={item.name} onChange={(event: any) => updateMenuItem(index, { name: event.target.value })} />
                      <input type="number" value={item.price} onChange={(event: any) => updateMenuItem(index, { price: Number(event.target.value) })} />
                    </div>
                  ))}
                </div>
              </div>
              <div className="panel">
                <h3>WhatsApp Menu Message</h3>
                <textarea className="message-box" readOnly value={menuMessage} />
              </div>
            </section>
          </main>
        )}

        {screen === "orders" && (
          <main className="order-grid">
            <section className="panel">
              <div className="section-head">
                <div>
                  <h2>AI Order Parser</h2>
                  <p className="muted">Paste one customer WhatsApp order. Review before saving or copying.</p>
                </div>
              </div>
              <label>Customer mobile number
                <input
                  value={orderMobile}
                  onChange={(event: any) => setOrderMobile(event.target.value)}
                  placeholder="Optional for now"
                />
              </label>
              <textarea
                className="paste-box"
                value={orderText}
                onChange={(event: any) => setOrderText(event.target.value)}
                placeholder="Paste WhatsApp order message here"
              />
              <button className="primary full-button" onClick={parseOrder} disabled={isParsingAi || !orderText.trim()}>
                {isParsingAi ? "Parsing..." : "Parse Order"}
              </button>
              {parseStatus && <p className={parseStatus.startsWith("AI parsed") ? "status-line" : "error-line"}>{parseStatus}</p>}
            </section>

            <section className="panel preview-panel">
              <div className="section-head">
                <div>
                  <h2>Order Preview</h2>
                  <p className={`confidence-line confidence-${preview.confidence || "low"}`}>Confidence: {preview.confidence || "low"}</p>
                </div>
                <strong className="total-pill">{money(preview.order_total)}</strong>
              </div>

              {(preview.warnings.length > 0 || (preview.unresolved_items || []).length > 0) && (
                <div className="warnings">
                  {preview.warnings.map((warning: string) => <p key={warning}>{warning}</p>)}
                  {(preview.unresolved_items || []).map((item: string) => <p key={item}>Unresolved item: {item}</p>)}
                </div>
              )}

              <div className="capture-fields">
                <label>Customer Name<input className={preview.confidence !== "high" ? "needs-review" : ""} value={preview.customer_name} onChange={(event: any) => setPreview({ ...preview, customer_name: event.target.value, confirmation_message_marathi: "", kot_text: "" })} /></label>
                <label>Mobile Number<input value={preview.customer_phone} onChange={(event: any) => setPreview({ ...preview, customer_phone: event.target.value, confirmation_message_marathi: "", kot_text: "" })} /></label>
              </div>
              <label>Address<textarea className={`address-box ${preview.confidence !== "high" ? "needs-review" : ""}`} value={preview.address} onChange={(event: any) => setPreview({ ...preview, address: event.target.value, confirmation_message_marathi: "", kot_text: "" })} /></label>

              <div className="item-table">
                <div className="item-header">
                  <span>Item</span><span>Marathi Item Name</span><span>Portion</span><span>Qty</span><span>Menu Rate</span><span>Final Rate</span><span>Amount</span><span>Warnings</span>
                </div>
                {preview.items.map((item, index) => (
                  <div className={`item-row confidence-${item.confidence || "medium"}`} key={`${item.item_name}-${index}`}>
                    <select
                      value={item.item_name}
                      onChange={(event: any) => {
                        const selected = menu.find((menuItem) => menuItem.name === event.target.value);
                        updatePreviewItem(index, {
                          item_id: selected?.id || slugify(event.target.value),
                          item_name: event.target.value,
                          item_name_marathi: selected ? marathiNameForItem(selected.name) : item.item_name_marathi,
                          portion: selected && isKnownPieceItem(selected.name) ? "piece" : item.portion || "full",
                          menu_full_rate: selected?.price ?? item.menu_full_rate ?? item.item_price
                        });
                      }}
                    >
                      {(menu.length ? menu : defaultMenuItems).map((menuItem: MenuItem) => <option key={menuItem.name} value={menuItem.name}>{menuItem.name}</option>)}
                    </select>
                    <input value={item.item_name_marathi || ""} onChange={(event: any) => updatePreviewItem(index, { item_name_marathi: event.target.value })} />
                    <select value={item.portion || "full"} onChange={(event: any) => updatePreviewItem(index, { portion: event.target.value })}>
                      <option value="full">full</option>
                      <option value="half">half</option>
                      <option value="piece">piece</option>
                    </select>
                    <input type="number" step="0.5" value={item.quantity} onChange={(event: any) => updatePreviewItem(index, { quantity: Number(event.target.value) })} />
                    <input type="number" value={item.menu_full_rate ?? item.item_price} onChange={(event: any) => updatePreviewItem(index, { menu_full_rate: Number(event.target.value) })} />
                    <input type="number" value={item.final_rate ?? item.item_price} onChange={(event: any) => updatePreviewItem(index, { final_rate: Number(event.target.value), item_price: Number(event.target.value) })} readOnly />
                    <strong>{money(item.line_total)}</strong>
                    <input className={(item.confidence_score ?? (item.confidence === "low" ? 0.5 : 1)) < 0.75 ? "needs-review" : ""} value={[...(item.confidence_score && item.confidence_score < 0.75 ? ["Needs Review"] : []), ...(item.confidence_reason ? [item.confidence_reason] : []), ...(item.warnings || [])].join(", ")} onChange={(event: any) => updatePreviewItem(index, { warnings: event.target.value.split(",").map((part: string) => part.trim()).filter(Boolean) })} />
                  </div>
                ))}
              </div>

              <div className="capture-fields">
                <label>Preferences<textarea className="compact-box" value={preview.preferences || ""} onChange={(event: any) => setPreview({ ...preview, preferences: event.target.value, items: preview.items.map((item) => ({ ...item, special_instruction: event.target.value })), confirmation_message_marathi: "", kot_text: "" })} /></label>
                <label>Notes<textarea className="compact-box" value={preview.notes || ""} onChange={(event: any) => setPreview({ ...preview, notes: event.target.value, confirmation_message_marathi: "", kot_text: "" })} /></label>
              </div>
              <div className="capture-fields">
                <label>Total Amount<input type="number" value={preview.order_total} onChange={(event: any) => setPreview({ ...preview, order_total: Number(event.target.value), confirmation_message_marathi: "", kot_text: "" })} /></label>
                <label>Confidence
                  <select value={preview.confidence || "low"} onChange={(event: any) => setPreview({ ...preview, confidence: event.target.value })}>
                    <option value="high">high</option>
                    <option value="medium">medium</option>
                    <option value="low">low</option>
                  </select>
                </label>
              </div>

              <div className="message-panel">
                <h3>Confirmation Message</h3>
                <textarea className="message-box" readOnly value={savedConfirmation || confirmationMessage} />
              </div>
              <div className="message-panel">
                <h3>Kitchen KOT</h3>
                <textarea className="message-box" readOnly value={kotText} />
              </div>

              {copyStatus && <p className="status-line">{copyStatus}</p>}
              <div className="button-row">
                <button className="secondary" onClick={addPreviewItem}>Add Item</button>
                <button className="primary" disabled={!hasDraftItems || isSavingOrder} onClick={confirmAndGenerateKot}>{isSavingOrder ? "Saving..." : "Confirm Order"}</button>
                <button disabled={!hasDraftItems || isSavingOrder} onClick={() => saveOrder("Confirmed", { startNextOrder: true })}>Save Order</button>
                <button disabled={!hasOrderOutput} onClick={() => printKot(outputOrder)}>Print KOT</button>
                <button className="secondary" disabled={!hasOrderOutput} onClick={() => copyText(savedConfirmation || confirmationMessage, "Confirmation copied.")}>Copy Confirmation Message</button>
                <button disabled={!hasOrderOutput} onClick={sendConfirmation}>Send Confirmation Message</button>
                <button className="secondary" disabled={!hasOrderOutput} onClick={() => copyText(kotText, "KOT copied.")}>Copy KOT</button>
                <button className="danger" onClick={clearOrder}>Clear</button>
              </div>
            </section>
          </main>
        )}

        {screen === "history" && (
          <main className="screen-stack">
            <section className="panel">
              <div className="section-head">
                <div>
                  <h2>Order History</h2>
                  <p className="muted">Search saved Supabase orders and reopen old KOTs.</p>
                </div>
                <div className="button-row">
                  <button onClick={() => quickHistoryRange("today")}>Today&apos;s Orders</button>
                  <button className="secondary" onClick={() => quickHistoryRange("yesterday")}>Yesterday&apos;s Orders</button>
                  <button className="primary" onClick={() => loadOrders(historyFilters)} disabled={isLoadingOrders || !session}>{isLoadingOrders ? "Loading..." : "Search"}</button>
                  <button className="secondary" onClick={exportOrdersCsv} disabled={!historyOrders.length}>Export Orders to Excel / CSV</button>
                </div>
              </div>

              <div className="history-filters">
                <label>From Date<input type="date" value={historyFilters.fromDate} onChange={(event: any) => setHistoryFilters({ ...historyFilters, fromDate: event.target.value })} /></label>
                <label>To Date<input type="date" value={historyFilters.toDate} onChange={(event: any) => setHistoryFilters({ ...historyFilters, toDate: event.target.value })} /></label>
                <label>Customer Name<input value={historyFilters.customerName} onChange={(event: any) => setHistoryFilters({ ...historyFilters, customerName: event.target.value })} /></label>
                <label>Mobile Number<input value={historyFilters.mobile} onChange={(event: any) => setHistoryFilters({ ...historyFilters, mobile: event.target.value })} /></label>
                <label>Address<input value={historyFilters.address} onChange={(event: any) => setHistoryFilters({ ...historyFilters, address: event.target.value })} /></label>
                <label>Order Number<input value={historyFilters.orderNo} onChange={(event: any) => setHistoryFilters({ ...historyFilters, orderNo: event.target.value })} /></label>
                <label>Status
                  <select value={historyFilters.status} onChange={(event: any) => setHistoryFilters({ ...historyFilters, status: event.target.value })}>
                    <option value="">All</option>
                    <option value="New">New</option>
                    <option value="Confirmed">Confirmed</option>
                    <option value="Preparing">Preparing</option>
                    <option value="Delivered">Delivered</option>
                    <option value="Cancelled">Cancelled</option>
                  </select>
                </label>
              </div>
            </section>

            <section className="panel history-table-wrap">
              <table className="history-table">
                <thead>
                  <tr>
                    <th>Order No</th>
                    <th>Time</th>
                    <th>Customer</th>
                    <th>Address</th>
                    <th>Items</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {historyOrders.map((order) => (
                    <tr key={order.id}>
                      <td>{order.kotNumber}</td>
                      <td>{formatTime(order.createdAt)}</td>
                      <td>{order.customer_name || "Name missing"}<br /><small>{order.customer_phone || "Mobile missing"}</small></td>
                      <td>{order.address || "Address missing"}</td>
                      <td>{itemsSummary(order.items)}</td>
                      <td>{money(order.order_total)}</td>
                      <td>{order.order_status || "New"}</td>
                      <td>
                        <div className="table-actions">
                          <button onClick={() => setSelectedHistoryOrder(order)}>View</button>
                          <button className="secondary" onClick={() => editHistoryOrder(order)}>Edit</button>
                          <button onClick={() => printKot(order)}>Reprint KOT</button>
                          <button className="secondary" onClick={() => copyText(order.confirmation_message_marathi || generateConfirmationMessage(order), "Confirmation copied.")}>Copy Confirmation</button>
                          <button onClick={() => markStatus(order, "Delivered")}>Mark Delivered</button>
                          <button className="danger" onClick={() => markStatus(order, "Cancelled")}>Cancel</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {!historyOrders.length && (
                    <tr>
                      <td colSpan={8}>No saved orders found for this search.</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </section>

            {selectedHistoryOrder && (
              <section className="panel detail-panel">
                <div className="section-head">
                  <div>
                    <h2>Order Detail</h2>
                    <p className="muted">{selectedHistoryOrder.kotNumber} | {selectedHistoryOrder.order_status || "New"}</p>
                  </div>
                  <button className="secondary" onClick={() => setSelectedHistoryOrder(null)}>Close Detail</button>
                </div>
                <div className="detail-grid">
                  <div>
                    <h3>Customer</h3>
                    <p><strong>{selectedHistoryOrder.customer_name || "Name missing"}</strong></p>
                    <p>{selectedHistoryOrder.customer_phone || "Mobile missing"}</p>
                    <p>{selectedHistoryOrder.address || "Address missing"}</p>
                  </div>
                  <div>
                    <h3>Bill</h3>
                    <p>Subtotal: {money(selectedHistoryOrder.subtotal ?? selectedHistoryOrder.order_total)}</p>
                    <p>Discount: {money(selectedHistoryOrder.discount || 0)}</p>
                    <p><strong>Total: {money(selectedHistoryOrder.order_total)}</strong></p>
                  </div>
                </div>
                <h3>Raw WhatsApp Message</h3>
                <textarea className="message-box" readOnly value={selectedHistoryOrder.raw_text || ""} />
                <h3>Parsed Items</h3>
                <table>
                  <thead><tr><th>Item</th><th>Half/Full</th><th>Qty</th><th>Rate</th><th>Total</th></tr></thead>
                  <tbody>
                    {selectedHistoryOrder.items.map((item, index) => (
                      <tr key={`${item.item_name}-${index}`}>
                        <td>{item.item_name}</td>
                        <td>{item.portion || "full"}</td>
                        <td>{item.quantity}</td>
                        <td>{money(item.final_rate ?? item.item_price)}</td>
                        <td>{money(item.line_total)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <div className="detail-grid">
                  <div>
                    <h3>KOT</h3>
                    <textarea className="message-box" readOnly value={selectedHistoryOrder.kot_text || generateKotText(selectedHistoryOrder)} />
                  </div>
                  <div>
                    <h3>Confirmation Message</h3>
                    <textarea className="message-box" readOnly value={selectedHistoryOrder.confirmation_message_marathi || generateConfirmationMessage(selectedHistoryOrder)} />
                  </div>
                </div>
                <h3>Status History</h3>
                <div className="status-history">
                  {(selectedHistoryOrder.statusHistory || []).length
                    ? selectedHistoryOrder.statusHistory.map((entry, index) => <p key={`${entry.status}-${index}`}>{entry.status} - {new Date(entry.at).toLocaleString("en-IN")}</p>)
                    : <p>{selectedHistoryOrder.order_status || "New"} - {new Date(selectedHistoryOrder.createdAt).toLocaleString("en-IN")}</p>}
                </div>
              </section>
            )}
          </main>
        )}

        {screen === "learning" && (
          <main className="screen-stack">
            <section className="panel">
              <div className="section-head">
                <div>
                  <h2>Parser Learning</h2>
                  <p className="muted">Review repeated staff corrections before adding parser rules.</p>
                </div>
                <div className="button-row">
                  <button className="primary" onClick={loadParserLearning} disabled={isLoadingLearning}>{isLoadingLearning ? "Loading..." : "Refresh"}</button>
                </div>
              </div>
              {copyStatus && <p className="status-line">{copyStatus}</p>}
            </section>

            <section className="panel">
              <h3>Suggested Rules</h3>
              <div className="learning-list">
                {learningSuggestions.map((suggestion) => (
                  <article className="learning-card" key={suggestion.id}>
                    <div>
                      <strong>{suggestion.display_text}</strong>
                      <p className="muted">{suggestion.count} similar correction(s) | {suggestion.strength === "strong" ? "Strong suggestion" : "Suggestion"}</p>
                      {suggestion.examples?.length > 0 && <small>{suggestion.examples.join(" | ")}</small>}
                    </div>
                    <div className="card-actions">
                      <button className="primary" onClick={() => approveLearningRule(suggestion)}>Approve Rule</button>
                      <button className="secondary" onClick={() => ignoreLearningSuggestion(suggestion)}>Ignore</button>
                    </div>
                  </article>
                ))}
                {!learningSuggestions.length && <p className="muted">No repeated mistakes ready for review.</p>}
              </div>
            </section>

            <section className="panel history-table-wrap">
              <h3>Recent Corrections</h3>
              <table className="history-table">
                <thead>
                  <tr><th>Time</th><th>Type</th><th>Item</th><th>Wrong</th><th>Corrected</th><th>Message</th></tr>
                </thead>
                <tbody>
                  {learningCorrections.slice(0, 25).map((row) => (
                    <tr key={row.id}>
                      <td>{row.created_at ? formatTime(row.created_at) : "-"}</td>
                      <td>{row.correction_type}</td>
                      <td>{row.item_name}</td>
                      <td>{row.detected_wrong_value}</td>
                      <td>{row.corrected_value}</td>
                      <td>{row.raw_message}</td>
                    </tr>
                  ))}
                  {!learningCorrections.length && <tr><td colSpan={6}>No corrections saved yet.</td></tr>}
                </tbody>
              </table>
            </section>
          </main>
        )}

        {screen === "summary" && (
          <main className="summary-grid">
            <section className="panel">
              <h2>Daily Summary</h2>
              <div className="metrics">
                <div><span>Total Orders</span><strong>{dayOrders.length}</strong></div>
                <div><span>Total Sales</span><strong>{money(totalSales)}</strong></div>
              </div>
              <h3>Item-wise Total Quantity</h3>
              <table>
                <thead><tr><th>Item</th><th>Qty</th><th>Amount</th></tr></thead>
                <tbody>
                  {itemTotals.map(([name, total]) => (
                    <tr key={name}><td>{name}</td><td>{total.quantity}</td><td>{money(total.amount)}</td></tr>
                  ))}
                </tbody>
              </table>
            </section>

            <section className="panel">
              <div className="section-head">
                <h2>Customer & Delivery List</h2>
                <button className="secondary" onClick={() => copyText(deliveryList, "Delivery list copied.")}>Copy Delivery List</button>
              </div>
              {copyStatus && <p className="status-line">{copyStatus}</p>}
              <div className="delivery-list">
                {dayOrders.map((order) => (
                  <article className="order-card" key={order.id}>
                    <div>
                      <strong>KOT #{order.kotNumber}</strong>
                      <p>{order.customer_name || "Name missing"} | {order.customer_phone || "Mobile missing"}</p>
                      <p>{order.address || "Address missing"}</p>
                      <small>{order.items.map((item) => `${item.item_name} x ${item.quantity}`).join(", ")}</small>
                    </div>
                    <div className="card-actions">
                      <strong>{money(order.order_total)}</strong>
                      <button onClick={() => printKot(order)}>Reprint KOT</button>
                    </div>
                  </article>
                ))}
              </div>
            </section>
          </main>
        )}
        <AppFooter />
      </div>

      <section className="print-ticket">
        <pre>{kotText}</pre>
      </section>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);