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

interface Product { id: number; name: string; description: string; price: number; category: string; active: boolean; }

export default function ProductCatalog() {
  const [products, setProducts] = useState<Product[]>([]);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    setProducts([
      { id: 1, name: 'Initial Consultation', description: '60-minute first visit', price: 150, category: 'Consultation', active: true },
      { id: 2, name: 'Follow-up Session', description: '30-minute check-in', price: 75, category: 'Session', active: true },
      { id: 3, name: 'Package (5 sessions)', description: 'Save 10% with package', price: 337.50, category: 'Package', active: true },
      { id: 4, name: 'Workshop', description: 'Group workshop session', price: 50, category: 'Workshop', active: false }
    ]);
  }, []);

  const filtered = filter === 'all' ? products : products.filter(p => p.category === filter);

  return (
    <div className="product-catalog">
      <header>
        <h1>🛍️ Product Catalog</h1>
        <button>➕ Add Product</button>
      </header>
      <div className="filter-bar">
        <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>All</button>
        <button className={filter === 'Consultation' ? 'active' : ''} onClick={() => setFilter('Consultation')}>Consultation</button>
        <button className={filter === 'Session' ? 'active' : ''} onClick={() => setFilter('Session')}>Session</button>
        <button className={filter === 'Package' ? 'active' : ''} onClick={() => setFilter('Package')}>Package</button>
        <button className={filter === 'Workshop' ? 'active' : ''} onClick={() => setFilter('Workshop')}>Workshop</button>
      </div>
      <div className="products-grid">
        {filtered.map(product => (
          <div key={product.id} className="product-card">
            <div className="product-header">
              <h3>{product.name}</h3>
              <span className={`status ${product.active ? 'active' : 'inactive'}`}>
                {product.active ? '● Active' : '○ Inactive'}
              </span>
            </div>
            <p className="description">{product.description}</p>
            <div className="product-meta">
              <span className="category">{product.category}</span>
              <span className="price">${product.price.toFixed(2)}</span>
            </div>
            <div className="product-actions">
              <button>✏️ Edit</button>
              <button className="danger">🗑️ Delete</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
