import { useState, useEffect } from 'react';
import './styles.css';

interface MenuItem {
  id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  available: boolean;
  modifiers: number;
}

interface Category {
  id: string;
  name: string;
  itemCount: number;
}

export default function MenuManager() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [items, setItems] = useState<MenuItem[]>([]);
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    // Mock data
    setCategories([
      { id: 'appetizers', name: 'Appetizers', itemCount: 8 },
      { id: 'entrees', name: 'Entrees', itemCount: 12 },
      { id: 'burgers', name: 'Burgers & Sandwiches', itemCount: 9 },
      { id: 'salads', name: 'Salads', itemCount: 6 },
      { id: 'desserts', name: 'Desserts', itemCount: 7 },
      { id: 'beverages', name: 'Beverages', itemCount: 15 },
    ]);

    setItems([
      { id: '1', name: 'Classic Burger', description: 'Beef patty, lettuce, tomato, onion, pickles', price: 14.99, category: 'burgers', available: true, modifiers: 8 },
      { id: '2', name: 'Caesar Salad', description: 'Romaine, parmesan, croutons, Caesar dressing', price: 9.99, category: 'salads', available: true, modifiers: 4 },
      { id: '3', name: 'Chicken Wings', description: '8 pieces with choice of sauce', price: 12.99, category: 'appetizers', available: true, modifiers: 6 },
      { id: '4', name: 'Grilled Salmon', description: 'Atlantic salmon with vegetables and rice', price: 24.99, category: 'entrees', available: true, modifiers: 3 },
      { id: '5', name: 'Chocolate Cake', description: 'Rich chocolate layer cake with ganache', price: 7.99, category: 'desserts', available: true, modifiers: 2 },
      { id: '6', name: 'Craft Beer', description: 'Rotating selection of local craft beers', price: 6.99, category: 'beverages', available: true, modifiers: 0 },
      { id: '7', name: 'Margherita Pizza', description: 'Fresh mozzarella, basil, tomato sauce', price: 16.99, category: 'entrees', available: false, modifiers: 5 },
      { id: '8', name: 'French Fries', description: 'Crispy golden fries with sea salt', price: 4.99, category: 'appetizers', available: true, modifiers: 4 },
    ]);
  }, []);

  const filteredItems = items.filter((item) => {
    const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
    const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  return (
    <div className="app">
      <header className="app-header">
        <h1>📖 Menu Manager</h1>
        <p>Browse and edit menu items</p>
      </header>

      <div className="toolbar">
        <input
          type="text"
          className="search-input"
          placeholder="Search menu items..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <button className="btn-primary">+ Add Item</button>
      </div>

      <div className="content-grid">
        <div className="categories-panel">
          <h2>Categories</h2>
          <div className="category-list">
            <button
              className={`category-btn ${selectedCategory === 'all' ? 'active' : ''}`}
              onClick={() => setSelectedCategory('all')}
            >
              All Items
              <span className="count">{items.length}</span>
            </button>
            {categories.map((cat) => (
              <button
                key={cat.id}
                className={`category-btn ${selectedCategory === cat.id ? 'active' : ''}`}
                onClick={() => setSelectedCategory(cat.id)}
              >
                {cat.name}
                <span className="count">{cat.itemCount}</span>
              </button>
            ))}
          </div>
          <button className="btn-secondary">+ Add Category</button>
        </div>

        <div className="items-panel">
          <div className="panel-header">
            <h2>
              {selectedCategory === 'all'
                ? 'All Items'
                : categories.find((c) => c.id === selectedCategory)?.name}
            </h2>
            <span className="results-count">
              {filteredItems.length} {filteredItems.length === 1 ? 'item' : 'items'}
            </span>
          </div>

          <div className="items-grid">
            {filteredItems.map((item) => (
              <div key={item.id} className="item-card">
                <div className="item-header">
                  <h3>{item.name}</h3>
                  <span className={`availability ${item.available ? 'available' : 'unavailable'}`}>
                    {item.available ? '✓ Available' : '✗ Unavailable'}
                  </span>
                </div>
                <p className="item-description">{item.description}</p>
                <div className="item-meta">
                  <span className="price">${item.price.toFixed(2)}</span>
                  <span className="modifiers">{item.modifiers} modifiers</span>
                </div>
                <div className="item-actions">
                  <button className="action-btn">Edit</button>
                  <button className="action-btn">Duplicate</button>
                  <button className="action-btn delete">Delete</button>
                </div>
              </div>
            ))}
          </div>

          {filteredItems.length === 0 && (
            <div className="no-results">No items found</div>
          )}
        </div>
      </div>
    </div>
  );
}
