import React, { useState } from 'react';

interface Customer {
  id: number;
  name: string;
  email: string;
  phone: string;
  company: string;
  group: string;
  totalOrders: number;
  totalSpent: number;
  avgOrderValue: number;
  addresses: { type: string; address: string; }[];
}

export default function CustomerDetail() {
  const [customer] = useState<Customer>({
    id: 501,
    name: 'John Doe',
    email: 'john.doe@example.com',
    phone: '(555) 123-4567',
    company: 'Acme Corp',
    group: 'Wholesale',
    totalOrders: 24,
    totalSpent: 4567.89,
    avgOrderValue: 190.33,
    addresses: [
      { type: 'Billing', address: '123 Main St, City, ST 12345' },
      { type: 'Shipping', address: '456 Oak Ave, Town, ST 67890' },
    ],
  });

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Customer Details</h1>
      
      <div style={styles.grid}>
        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Contact Information</h2>
          <div style={styles.infoGrid}>
            <div style={styles.infoItem}>
              <div style={styles.label}>Name</div>
              <div style={styles.value}>{customer.name}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.label}>Email</div>
              <div style={styles.value}>{customer.email}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.label}>Phone</div>
              <div style={styles.value}>{customer.phone}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.label}>Company</div>
              <div style={styles.value}>{customer.company}</div>
            </div>
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Customer Stats</h2>
          <div style={styles.statsGrid}>
            <div style={styles.stat}>
              <div style={styles.statValue}>{customer.totalOrders}</div>
              <div style={styles.statLabel}>Total Orders</div>
            </div>
            <div style={styles.stat}>
              <div style={styles.statValue}>${customer.totalSpent.toFixed(2)}</div>
              <div style={styles.statLabel}>Total Spent</div>
            </div>
            <div style={styles.stat}>
              <div style={styles.statValue}>${customer.avgOrderValue.toFixed(2)}</div>
              <div style={styles.statLabel}>Avg Order Value</div>
            </div>
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Addresses</h2>
          {customer.addresses.map((addr, i) => (
            <div key={i} style={styles.addressCard}>
              <div style={styles.addressType}>{addr.type}</div>
              <div style={styles.addressText}>{addr.address}</div>
            </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',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '2rem',
    color: '#f9fafb',
  },
  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',
  },
  infoGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '1rem',
  },
  infoItem: {
    display: 'flex',
    flexDirection: 'column',
    gap: '0.25rem',
  },
  label: {
    fontSize: '0.875rem',
    color: '#9ca3af',
  },
  value: {
    fontSize: '1.125rem',
    fontWeight: '500',
    color: '#f9fafb',
  },
  statsGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
    gap: '1rem',
  },
  stat: {
    textAlign: 'center',
  },
  statValue: {
    fontSize: '2rem',
    fontWeight: 'bold',
    color: '#3b82f6',
  },
  statLabel: {
    fontSize: '0.875rem',
    color: '#9ca3af',
    marginTop: '0.5rem',
  },
  addressCard: {
    padding: '1rem',
    backgroundColor: '#374151',
    borderRadius: '0.375rem',
    marginBottom: '1rem',
  },
  addressType: {
    fontSize: '0.875rem',
    fontWeight: '600',
    color: '#3b82f6',
    marginBottom: '0.5rem',
  },
  addressText: {
    color: '#d1d5db',
  },
};
