import React, { useState } from 'react';

interface Order {
  id: number;
  customer: string;
  date: string;
  status: string;
  total: number;
  items: number;
}

export default function OrderDashboard() {
  const [orders] = useState<Order[]>([
    { id: 1001, customer: 'John Doe', date: '2024-01-15', status: 'Completed', total: 159.99, items: 3 },
    { id: 1002, customer: 'Jane Smith', date: '2024-01-16', status: 'Processing', total: 89.50, items: 2 },
    { id: 1003, customer: 'Bob Johnson', date: '2024-01-16', status: 'Shipped', total: 249.99, items: 5 },
    { id: 1004, customer: 'Alice Brown', date: '2024-01-17', status: 'Pending', total: 45.00, items: 1 },
  ]);

  const totalRevenue = orders.reduce((sum, order) => sum + order.total, 0);
  const avgOrderValue = totalRevenue / orders.length;
  const statusCounts = orders.reduce((acc, order) => {
    acc[order.status] = (acc[order.status] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      Completed: '#10b981',
      Processing: '#3b82f6',
      Shipped: '#8b5cf6',
      Pending: '#f59e0b',
      Cancelled: '#ef4444',
    };
    return colors[status] || '#6b7280';
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Order Dashboard</h1>
      
      <div style={styles.statsGrid}>
        <div style={styles.statCard}>
          <div style={styles.statValue}>{orders.length}</div>
          <div style={styles.statLabel}>Total Orders</div>
        </div>
        <div style={styles.statCard}>
          <div style={styles.statValue}>${totalRevenue.toFixed(2)}</div>
          <div style={styles.statLabel}>Total Revenue</div>
        </div>
        <div style={styles.statCard}>
          <div style={styles.statValue}>${avgOrderValue.toFixed(2)}</div>
          <div style={styles.statLabel}>Avg Order Value</div>
        </div>
        <div style={styles.statCard}>
          <div style={styles.statValue}>{statusCounts['Pending'] || 0}</div>
          <div style={styles.statLabel}>Pending Orders</div>
        </div>
      </div>

      <div style={styles.tableContainer}>
        <table style={styles.table}>
          <thead>
            <tr>
              <th style={styles.th}>Order ID</th>
              <th style={styles.th}>Customer</th>
              <th style={styles.th}>Date</th>
              <th style={styles.th}>Items</th>
              <th style={styles.th}>Total</th>
              <th style={styles.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {orders.map(order => (
              <tr key={order.id} style={styles.tr}>
                <td style={styles.td}>#{order.id}</td>
                <td style={styles.td}>{order.customer}</td>
                <td style={styles.td}>{order.date}</td>
                <td style={styles.td}>{order.items}</td>
                <td style={styles.td}>${order.total.toFixed(2)}</td>
                <td style={styles.td}>
                  <span style={{
                    ...styles.badge,
                    backgroundColor: `${getStatusColor(order.status)}33`,
                    color: getStatusColor(order.status)
                  }}>
                    {order.status}
                  </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',
  },
};
