App.tsx

import React, { useState, useCallback } from 'react';
import Sidebar from './components/Sidebar';
import MainContent from './components/MainContent';
import RightPanel from './components/RightPanel';
import { Dish, CartItem } from './types';
import { Menu, ShoppingCart, X } from 'lucide-react';

const App: React.FC = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [cart, setCart] = useState<CartItem[]>([]);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);

  const handleAddToCart = useCallback((dish: Dish) => {
    setCart(prev => {
      const existing = prev.find(item => item.id === dish.id);
      if (existing) {
        return prev.map(item => 
          item.id === dish.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prev, { ...dish, quantity: 1 }];
    });
  }, []);

  const handleUpdateQuantity = useCallback((id: string, delta: number) => {
    setCart(prev => {
      return prev.map(item => {
        if (item.id === id) {
          const newQty = Math.max(0, item.quantity + delta);
          return { ...item, quantity: newQty };
        }
        return item;
      }).filter(item => item.quantity > 0);
    });
  }, []);

  const handleRemoveItem = useCallback((id: string) => {
    setCart(prev => prev.filter(item => item.id !== id));
  }, []);

  return (
    <div className="flex bg-[#fdfdfd] min-h-screen text-right" dir="rtl">
      {/* Mobile Top Bar */}
      <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-100 flex items-center justify-between px-4 z-[60] flex-row-reverse">
        <button 
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="p-2 bg-slate-50 rounded-xl"
        >
          {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
        <div className="flex items-center gap-1 flex-row-reverse">
          <div className="w-6 h-6 bg-amber-500 rounded flex items-center justify-center">
            <ShoppingCart className="text-white w-4 h-4" />
          </div>
          <span className="font-extrabold text-slate-800">گو-میل.</span>
        </div>
        <button 
           onClick={() => setIsCartOpen(!isCartOpen)}
           className="p-2 bg-amber-50 rounded-xl relative"
        >
          <ShoppingCart size={24} className="text-amber-500" />
          {cart.length > 0 && (
            <span className="absolute -top-1 -left-1 bg-red-500 text-white text-[10px] w-5 h-5 rounded-full flex items-center justify-center font-bold">
              {cart.reduce((a, b) => a + b.quantity, 0)}
            </span>
          )}
        </button>
      </div>

      {/* Sidebar Overlay */}
      {isSidebarOpen && (
        <div 
          className="lg:hidden fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 transition-opacity"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Main Sidebar */}
      <Sidebar 
        activeTab={activeTab} 
        setActiveTab={(tab) => {
          setActiveTab(tab);
          setIsSidebarOpen(false);
        }} 
        isOpen={isSidebarOpen}
      />

      {/* Main Area */}
      <main className="flex-1 mt-16 lg:mt-0">
        <MainContent activeTab={activeTab} onAddToCart={handleAddToCart} />
      </main>

      {/* Right Panel (now on the Left in RTL) */}
      <div className={`
        fixed inset-y-0 left-0 z-[70] lg:z-40 transition-transform duration-300 transform lg:translate-x-0
        ${isCartOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
      `}>
        {/* Mobile Cart Overlay */}
        {isCartOpen && (
           <div 
            className="lg:hidden fixed inset-0 bg-slate-900/40 backdrop-blur-sm -z-10 transition-opacity"
            onClick={() => setIsCartOpen(false)}
          />
        )}
        <RightPanel 
          cart={cart} 
          onRemoveItem={handleRemoveItem} 
          onUpdateQuantity={handleUpdateQuantity} 
        />
        {/* Close btn for mobile drawer */}
        {isCartOpen && (
          <button 
            onClick={() => setIsCartOpen(false)}
            className="lg:hidden absolute top-4 right-4 p-2 bg-white rounded-full shadow-lg z-50"
          >
            <X size={20} />
          </button>
        )}
      </div>
    </div>
  );
};

export default App;