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

interface Modifier {
  id: string;
  name: string;
  price: number;
}

interface ModifierGroup {
  id: string;
  name: string;
  required: boolean;
  modifiers: Modifier[];
}

interface MenuItem {
  id: string;
  name: string;
  description: string;
  price: number;
  cost: number;
  category: string;
  available: boolean;
  prepTime: number;
  allergens: string[];
  modifierGroups: ModifierGroup[];
}

export default function MenuItemDetail() {
  const [item, setItem] = useState<MenuItem | null>(null);

  useEffect(() => {
    // Mock data
    setItem({
      id: '1',
      name: 'Classic Burger',
      description: 'Half-pound beef patty with fresh lettuce, tomato, red onion, pickles, and our signature sauce on a toasted brioche bun',
      price: 14.99,
      cost: 4.25,
      category: 'Burgers & Sandwiches',
      available: true,
      prepTime: 12,
      allergens: ['Gluten', 'Dairy', 'Soy'],
      modifierGroups: [
        {
          id: '1',
          name: 'Cheese Options',
          required: false,
          modifiers: [
            { id: '1', name: 'Cheddar', price: 1.50 },
            { id: '2', name: 'Swiss', price: 1.50 },
            { id: '3', name: 'Blue Cheese', price: 2.00 },
            { id: '4', name: 'Pepper Jack', price: 1.50 },
          ],
        },
        {
          id: '2',
          name: 'Toppings',
          required: false,
          modifiers: [
            { id: '5', name: 'Bacon', price: 2.50 },
            { id: '6', name: 'Avocado', price: 2.00 },
            { id: '7', name: 'Fried Egg', price: 2.00 },
            { id: '8', name: 'Mushrooms', price: 1.50 },
          ],
        },
        {
          id: '3',
          name: 'Doneness',
          required: true,
          modifiers: [
            { id: '9', name: 'Rare', price: 0 },
            { id: '10', name: 'Medium Rare', price: 0 },
            { id: '11', name: 'Medium', price: 0 },
            { id: '12', name: 'Medium Well', price: 0 },
            { id: '13', name: 'Well Done', price: 0 },
          ],
        },
      ],
    });
  }, []);

  if (!item) {
    return <div className="loading">Loading item...</div>;
  }

  const margin = ((item.price - item.cost) / item.price) * 100;

  return (
    <div className="app">
      <header className="app-header">
        <div>
          <h1>🍔 {item.name}</h1>
          <p className="category">{item.category}</p>
        </div>
        <div className="header-actions">
          <span className={`availability ${item.available ? 'available' : 'unavailable'}`}>
            {item.available ? '✓ Available' : '✗ Unavailable'}
          </span>
          <button className="btn-primary">Edit Item</button>
        </div>
      </header>

      <div className="content-grid">
        <div className="main-info">
          <div className="info-card">
            <h2>Description</h2>
            <p className="description">{item.description}</p>
          </div>

          <div className="info-card">
            <h2>Pricing & Cost</h2>
            <div className="pricing-grid">
              <div className="pricing-item">
                <span className="pricing-label">Menu Price</span>
                <span className="pricing-value price">${item.price.toFixed(2)}</span>
              </div>
              <div className="pricing-item">
                <span className="pricing-label">Food Cost</span>
                <span className="pricing-value cost">${item.cost.toFixed(2)}</span>
              </div>
              <div className="pricing-item">
                <span className="pricing-label">Margin</span>
                <span className="pricing-value margin">{margin.toFixed(1)}%</span>
              </div>
              <div className="pricing-item">
                <span className="pricing-label">Prep Time</span>
                <span className="pricing-value">{item.prepTime} min</span>
              </div>
            </div>
          </div>

          <div className="info-card">
            <h2>Allergens</h2>
            <div className="allergens">
              {item.allergens.map((allergen) => (
                <span key={allergen} className="allergen-badge">
                  ⚠️ {allergen}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div className="modifiers-panel">
          <h2>Modifier Groups</h2>
          {item.modifierGroups.map((group) => (
            <div key={group.id} className="modifier-group">
              <div className="group-header">
                <h3>{group.name}</h3>
                {group.required && <span className="required-badge">Required</span>}
              </div>
              <div className="modifiers-list">
                {group.modifiers.map((mod) => (
                  <div key={mod.id} className="modifier-row">
                    <span className="modifier-name">{mod.name}</span>
                    <span className="modifier-price">
                      {mod.price === 0 ? 'Free' : `+$${mod.price.toFixed(2)}`}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
