import React, { useState } from 'react';

interface InventoryItem {
  id: number;
  name: string;
  sku: string;
  stock: number;
  reserved: number;
  available: number;
  threshold: number;
}

export default function InventoryTracker() {
  const [items] = useState<InventoryItem[]>([
    { id: 1, name: 'Widget A', sku: 'WID-001', stock: 50, reserved: 5, available: 45, threshold: 10 },
    { id: 2, name: 'Widget B', sku: 'WID-002', stock: 8, reserved: 2, available: 6, threshold: 10 },
    { id: 3, name: 'Gadget Pro', sku: 'GAD-001', stock: 156, reserved: 12, available: 144, threshold: 20 },
    { id: 4, name: 'Tool Set', sku: 'TOL-001', stock: 5, reserved: 1, available: 4, threshold: 10 },
  ]);

  const lowStock = items.filter(item => item.available < item.threshold);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Inventory Tracker</h1>
      
      {lowStock.length > 0 && (
        <div style={styles.alert}>
          <strong>⚠️ {lowStock.length} items below threshold</strong>
        </div>
      )}

      <div style={styles.tableContainer}>
        <table style={styles.table}>
          <thead>
            <tr>
              <th style={styles.th}>Product</th>
              <th style={styles.th}>SKU</th>
              <th style={styles.th}>Total Stock</th>
              <th style={styles.th}>Reserved</th>
              <th style={styles.th}>Available</th>
              <th style={styles.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {items.map(item => (
              <tr key={item.id} style={styles.tr}>
                <td style={styles.td}>{item.name}</td>
                <td style={styles.td}>{item.sku}</td>
                <td style={styles.td}>{item.stock}</td>
                <td style={styles.td}>{item.reserved}</td>
                <td style={{
                  ...styles.td,
                  color: item.available < item.threshold ? '#ef4444' : '#10b981',
                  fontWeight: 'bold',
                }}>
                  {item.available}
                </td>
                <td style={styles.td}>
                  {item.available < item.threshold ? (
                    <span style={{ ...styles.badge, backgroundColor: '#ef444433', color: '#ef4444' }}>
                      Low Stock
                    </span>
                  ) : (
                    <span style={{ ...styles.badge, backgroundColor: '#10b98133', color: '#10b981' }}>
                      In Stock
                    </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',
  },
  alert: {
    backgroundColor: '#7c2d1233',
    border: '1px solid #ef4444',
    color: '#ef4444',
    padding: '1rem',
    borderRadius: '0.5rem',
    marginBottom: '2rem',
  },
  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',
  },
};
