import React, { useState } from 'react';

interface ProductDetail {
  id: number;
  name: string;
  sku: string;
  type: string;
  price: number;
  cost_price: number;
  retail_price: number;
  weight: number;
  inventory_level: number;
  is_visible: boolean;
  is_featured: boolean;
  description: string;
  categories: string[];
  brand: string;
}

export default function ProductDetail() {
  const [product] = useState<ProductDetail>({
    id: 123,
    name: 'Premium Widget Pro',
    sku: 'WIDGET-PRO-001',
    type: 'physical',
    price: 79.99,
    cost_price: 45.00,
    retail_price: 99.99,
    weight: 2.5,
    inventory_level: 156,
    is_visible: true,
    is_featured: true,
    description: 'High-quality premium widget with advanced features and durable construction.',
    categories: ['Electronics', 'Widgets', 'Premium'],
    brand: 'WidgetCo',
  });

  const margin = ((product.price - product.cost_price) / product.price * 100).toFixed(1);

  return (
    <div style={styles.container}>
      <div style={styles.header}>
        <h1 style={styles.title}>{product.name}</h1>
        <div style={styles.badges}>
          {product.is_featured && (
            <span style={{ ...styles.badge, backgroundColor: '#3b82f633', color: '#3b82f6' }}>
              Featured
            </span>
          )}
          {product.is_visible && (
            <span style={{ ...styles.badge, backgroundColor: '#10b98133', color: '#10b981' }}>
              Visible
            </span>
          )}
        </div>
      </div>

      <div style={styles.grid}>
        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Basic Information</h2>
          <div style={styles.infoGrid}>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Product ID</div>
              <div style={styles.infoValue}>{product.id}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>SKU</div>
              <div style={styles.infoValue}>{product.sku}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Type</div>
              <div style={styles.infoValue}>{product.type}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Brand</div>
              <div style={styles.infoValue}>{product.brand}</div>
            </div>
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Pricing</h2>
          <div style={styles.infoGrid}>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Sale Price</div>
              <div style={styles.infoValue}>${product.price.toFixed(2)}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Cost Price</div>
              <div style={styles.infoValue}>${product.cost_price.toFixed(2)}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Retail Price (MSRP)</div>
              <div style={styles.infoValue}>${product.retail_price.toFixed(2)}</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Profit Margin</div>
              <div style={{ ...styles.infoValue, color: '#10b981' }}>{margin}%</div>
            </div>
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Inventory & Shipping</h2>
          <div style={styles.infoGrid}>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Stock Level</div>
              <div style={styles.infoValue}>{product.inventory_level} units</div>
            </div>
            <div style={styles.infoItem}>
              <div style={styles.infoLabel}>Weight</div>
              <div style={styles.infoValue}>{product.weight} lbs</div>
            </div>
          </div>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Description</h2>
          <p style={styles.description}>{product.description}</p>
        </div>

        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>Categories</h2>
          <div style={styles.tagContainer}>
            {product.categories.map((cat, i) => (
              <span key={i} style={styles.tag}>{cat}</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',
  },
  badges: {
    display: 'flex',
    gap: '0.5rem',
  },
  badge: {
    padding: '0.5rem 1rem',
    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',
  },
  infoGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '1rem',
  },
  infoItem: {
    display: 'flex',
    flexDirection: 'column',
    gap: '0.25rem',
  },
  infoLabel: {
    fontSize: '0.875rem',
    color: '#9ca3af',
  },
  infoValue: {
    fontSize: '1.125rem',
    fontWeight: '500',
    color: '#f9fafb',
  },
  description: {
    color: '#d1d5db',
    lineHeight: '1.6',
  },
  tagContainer: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '0.5rem',
  },
  tag: {
    padding: '0.375rem 0.75rem',
    backgroundColor: '#374151',
    color: '#d1d5db',
    borderRadius: '0.25rem',
    fontSize: '0.875rem',
  },
};
