import React, { useState } from 'react';

interface OrderDetail {
  id: number;
  customer: { name: string; email: string; };
  date: string;
  status: string;
  items: { name: string; quantity: number; price: number; }[];
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;
  shipping_address: string;
  payment_method: string;
}

export default function OrderDetail() {
  const [order] = useState<OrderDetail>({
    id: 1001,
    customer: { name: 'John Doe', email: 'john@example.com' },
    date: '2024-01-15 10:30 AM',
    status: 'Completed',
    items: [
      { name: 'Widget Pro', quantity: 2, price: 49.99 },
      { name: 'Gadget Plus', quantity: 1, price: 79.99 },
    ],
    subtotal: 179.97,
    tax: 14.40,
    shipping: 9.99,
    total: 204.36,
    shipping_address: '123 Main St, City, ST 12345',
    payment_method: 'Visa ****1234',
  });

  return (
    <div style={styles.container}>
      <div style={styles.header}>
        <h1 style={styles.title}>Order #{order.id}</h1>
        <span style={styles.status}>{order.status}</span>
      </div>

      <div style={styles.grid}>
        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Customer Information</h2>
          <div style={styles.infoItem}>
            <span style={styles.label}>Name:</span> {order.customer.name}
          </div>
          <div style={styles.infoItem}>
            <span style={styles.label}>Email:</span> {order.customer.email}
          </div>
          <div style={styles.infoItem}>
            <span style={styles.label}>Order Date:</span> {order.date}
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Shipping & Payment</h2>
          <div style={styles.infoItem}>
            <span style={styles.label}>Address:</span> {order.shipping_address}
          </div>
          <div style={styles.infoItem}>
            <span style={styles.label}>Payment:</span> {order.payment_method}
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Order Items</h2>
          {order.items.map((item, i) => (
            <div key={i} style={styles.itemRow}>
              <span>{item.name} × {item.quantity}</span>
              <span>${(item.price * item.quantity).toFixed(2)}</span>
            </div>
          ))}
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Order Total</h2>
          <div style={styles.totalRow}>
            <span>Subtotal:</span>
            <span>${order.subtotal.toFixed(2)}</span>
          </div>
          <div style={styles.totalRow}>
            <span>Tax:</span>
            <span>${order.tax.toFixed(2)}</span>
          </div>
          <div style={styles.totalRow}>
            <span>Shipping:</span>
            <span>${order.shipping.toFixed(2)}</span>
          </div>
          <div style={{ ...styles.totalRow, ...styles.grandTotal }}>
            <span>Total:</span>
            <span>${order.total.toFixed(2)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: '2rem',
    backgroundColor: '#111827',
    minHeight: '100vh',
    color: '#f9fafb',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '2rem',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    color: '#f9fafb',
  },
  status: {
    padding: '0.5rem 1rem',
    backgroundColor: '#10b98133',
    color: '#10b981',
    borderRadius: '0.375rem',
    fontSize: '0.875rem',
    fontWeight: '500',
  },
  grid: {
    display: 'grid',
    gap: '1.5rem',
  },
  section: {
    backgroundColor: '#1f2937',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid #374151',
  },
  sectionTitle: {
    fontSize: '1.25rem',
    fontWeight: '600',
    marginBottom: '1rem',
    color: '#f9fafb',
  },
  infoItem: {
    marginBottom: '0.75rem',
    color: '#d1d5db',
  },
  label: {
    color: '#9ca3af',
    fontWeight: '500',
  },
  itemRow: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '0.75rem 0',
    borderBottom: '1px solid #374151',
    color: '#d1d5db',
  },
  totalRow: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '0.5rem 0',
    color: '#d1d5db',
  },
  grandTotal: {
    fontSize: '1.25rem',
    fontWeight: 'bold',
    color: '#3b82f6',
    borderTop: '2px solid #374151',
    paddingTop: '1rem',
    marginTop: '0.5rem',
  },
};
