import React, { useState, useEffect } from 'react';

interface Product {
  id: number;
  name: string;
  sku: string;
  price: number;
  inventory_level: number;
  is_visible: boolean;
}

export default function ProductDashboard() {
  const [products, setProducts] = useState<Product[]>([]);
  const [stats, setStats] = useState({
    total: 0,
    visible: 0,
    lowStock: 0,
    avgPrice: 0,
  });

  useEffect(() => {
    // Client-side state initialization
    // In production, fetch from BigCommerce API
    const mockProducts: Product[] = [
      { id: 1, name: 'Product A', sku: 'SKU-001', price: 29.99, inventory_level: 50, is_visible: true },
      { id: 2, name: 'Product B', sku: 'SKU-002', price: 49.99, inventory_level: 5, is_visible: true },
      { id: 3, name: 'Product C', sku: 'SKU-003', price: 19.99, inventory_level: 100, is_visible: false },
    ];
    
    setProducts(mockProducts);
    
    const total = mockProducts.length;
    const visible = mockProducts.filter(p => p.is_visible).length;
    const lowStock = mockProducts.filter(p => p.inventory_level < 10).length;
    const avgPrice = mockProducts.reduce((sum, p) => sum + p.price, 0) / total;
    
    setStats({ total, visible, lowStock, avgPrice });
  }, []);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Product Dashboard</h1>
      
      <div style={styles.statsGrid}>
        <div style={styles.statCard}>
          <div style={styles.statValue}>{stats.total}</div>
          <div style={styles.statLabel}>Total Products</div>
        </div>
        <div style={styles.statCard}>
          <div style={styles.statValue}>{stats.visible}</div>
          <div style={styles.statLabel}>Visible</div>
        </div>
        <div style={styles.statCard}>
          <div style={{ ...styles.statValue, color: '#ef4444' }}>{stats.lowStock}</div>
          <div style={styles.statLabel}>Low Stock</div>
        </div>
        <div style={styles.statCard}>
          <div style={styles.statValue}>${stats.avgPrice.toFixed(2)}</div>
          <div style={styles.statLabel}>Avg Price</div>
        </div>
      </div>

      <div style={styles.tableContainer}>
        <table style={styles.table}>
          <thead>
            <tr>
              <th style={styles.th}>ID</th>
              <th style={styles.th}>Name</th>
              <th style={styles.th}>SKU</th>
              <th style={styles.th}>Price</th>
              <th style={styles.th}>Stock</th>
              <th style={styles.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {products.map(product => (
              <tr key={product.id} style={styles.tr}>
                <td style={styles.td}>{product.id}</td>
                <td style={styles.td}>{product.name}</td>
                <td style={styles.td}>{product.sku}</td>
                <td style={styles.td}>${product.price.toFixed(2)}</td>
                <td style={{
                  ...styles.td,
                  color: product.inventory_level < 10 ? '#ef4444' : '#10b981'
                }}>
                  {product.inventory_level}
                </td>
                <td style={styles.td}>
                  <span style={{
                    ...styles.badge,
                    backgroundColor: product.is_visible ? '#10b98133' : '#6b728033',
                    color: product.is_visible ? '#10b981' : '#9ca3af'
                  }}>
                    {product.is_visible ? 'Visible' : 'Hidden'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: '2rem',
    backgroundColor: '#111827',
    minHeight: '100vh',
    color: '#f9fafb',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '2rem',
    color: '#f9fafb',
  },
  statsGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '1rem',
    marginBottom: '2rem',
  },
  statCard: {
    backgroundColor: '#1f2937',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid #374151',
  },
  statValue: {
    fontSize: '2rem',
    fontWeight: 'bold',
    color: '#3b82f6',
    marginBottom: '0.5rem',
  },
  statLabel: {
    fontSize: '0.875rem',
    color: '#9ca3af',
  },
  tableContainer: {
    backgroundColor: '#1f2937',
    borderRadius: '0.5rem',
    overflow: 'hidden',
    border: '1px solid #374151',
  },
  table: {
    width: '100%',
    borderCollapse: 'collapse',
  },
  th: {
    padding: '1rem',
    textAlign: 'left',
    backgroundColor: '#374151',
    color: '#f9fafb',
    fontWeight: '600',
    fontSize: '0.875rem',
    textTransform: 'uppercase',
  },
  tr: {
    borderBottom: '1px solid #374151',
  },
  td: {
    padding: '1rem',
    color: '#d1d5db',
  },
  badge: {
    padding: '0.25rem 0.75rem',
    borderRadius: '9999px',
    fontSize: '0.75rem',
    fontWeight: '500',
  },
};
