import React, { useState, useEffect } from 'react';
import { DollarSign, Package, Settings, TrendingUp, Zap, AlertCircle, CheckCircle, RefreshCw, Database, Calculator, Activity, BarChart3, FileText } from 'lucide-react';

// Mock data for demonstration
const mockPartNumbers = [
  { 
    id: 'PN-001', 
    name: 'Brass Valve 1/2"', 
    family: 'Valves', 
    type: 'Brass Fitting',
    bom: [
      { id: 'RM-001', material: 'Brass Bar', qty: 1.8, unit: 'kg', stdCost: 6.80, lmeLinked: true },
      { id: 'RM-002', material: 'Rubber Gasket', qty: 2, unit: 'pcs', stdCost: 0.35, lmeLinked: false },
      { id: 'RM-003', material: 'Steel Spring', qty: 0.2, unit: 'kg', stdCost: 3.20, lmeLinked: true },
    ],
    routing: [
      { id: 'OP-010', operation: 'Cutting', workCenter: 'WC-CUT-01', cycleTime: 3.0, rate: 45.00, enabled: true },
      { id: 'OP-020', operation: 'Machining', workCenter: 'WC-MCH-02', cycleTime: 12.0, rate: 65.00, enabled: true },
      { id: 'OP-030', operation: 'Assembly', workCenter: 'WC-ASM-01', cycleTime: 8.5, rate: 38.00, enabled: true },
      { id: 'OP-040', operation: 'Painting', workCenter: 'WC-PNT-01', cycleTime: 0, rate: 42.00, enabled: false },
      { id: 'OP-050', operation: 'Packaging', workCenter: 'WC-PKG-01', cycleTime: 2.0, rate: 28.00, enabled: true },
    ]
  },
  { 
    id: 'PN-002', 
    name: 'Steel Coupling 3/4"', 
    family: 'Couplings', 
    type: 'Steel Component',
    bom: [
      { id: 'RM-001', material: 'Steel Grade 304', qty: 2.5, unit: 'kg', stdCost: 3.20, lmeLinked: true },
      { id: 'RM-002', material: 'Zinc Coating Material', qty: 0.1, unit: 'kg', stdCost: 4.50, lmeLinked: false },
    ],
    routing: [
      { id: 'OP-010', operation: 'Cutting', workCenter: 'WC-CUT-01', cycleTime: 2.5, rate: 45.00, enabled: true },
      { id: 'OP-020', operation: 'Machining', workCenter: 'WC-MCH-02', cycleTime: 15.0, rate: 65.00, enabled: true },
      { id: 'OP-030', operation: 'Assembly', workCenter: 'WC-ASM-01', cycleTime: 0, rate: 38.00, enabled: false },
      { id: 'OP-040', operation: 'Painting', workCenter: 'WC-PNT-01', cycleTime: 5.0, rate: 42.00, enabled: true },
      { id: 'OP-050', operation: 'Packaging', workCenter: 'WC-PKG-01', cycleTime: 1.5, rate: 28.00, enabled: true },
    ]
  },
  { 
    id: 'PN-003', 
    name: 'Copper Elbow 1"', 
    family: 'Elbows', 
    type: 'Copper Fitting',
    bom: [
      { id: 'RM-001', material: 'Copper Sheet', qty: 1.2, unit: 'kg', stdCost: 8.50, lmeLinked: true },
      { id: 'RM-002', material: 'Solder Wire', qty: 0.05, unit: 'kg', stdCost: 12.00, lmeLinked: false },
    ],
    routing: [
      { id: 'OP-010', operation: 'Cutting', workCenter: 'WC-CUT-01', cycleTime: 4.0, rate: 45.00, enabled: true },
      { id: 'OP-020', operation: 'Machining', workCenter: 'WC-MCH-02', cycleTime: 10.0, rate: 65.00, enabled: true },
      { id: 'OP-030', operation: 'Assembly', workCenter: 'WC-ASM-01', cycleTime: 6.0, rate: 38.00, enabled: true },
      { id: 'OP-040', operation: 'Painting', workCenter: 'WC-PNT-01', cycleTime: 0, rate: 42.00, enabled: false },
      { id: 'OP-050', operation: 'Packaging', workCenter: 'WC-PKG-01', cycleTime: 1.8, rate: 28.00, enabled: true },
    ]
  },
  { 
    id: 'PN-004', 
    name: 'Plastic Adapter 1/2"', 
    family: 'Adapters', 
    type: 'Plastic Component',
    bom: [
      { id: 'RM-001', material: 'Plastic PVC', qty: 0.8, unit: 'kg', stdCost: 2.10, lmeLinked: false },
      { id: 'RM-002', material: 'Rubber O-Ring', qty: 1, unit: 'pcs', stdCost: 0.25, lmeLinked: false },
    ],
    routing: [
      { id: 'OP-010', operation: 'Cutting', workCenter: 'WC-CUT-01', cycleTime: 1.5, rate: 45.00, enabled: true },
      { id: 'OP-020', operation: 'Machining', workCenter: 'WC-MCH-02', cycleTime: 5.0, rate: 65.00, enabled: true },
      { id: 'OP-030', operation: 'Assembly', workCenter: 'WC-ASM-01', cycleTime: 3.5, rate: 38.00, enabled: true },
      { id: 'OP-040', operation: 'Painting', workCenter: 'WC-PNT-01', cycleTime: 3.0, rate: 42.00, enabled: true },
      { id: 'OP-050', operation: 'Packaging', workCenter: 'WC-PKG-01', cycleTime: 1.2, rate: 28.00, enabled: true },
    ]
  },
  { 
    id: 'PN-005', 
    name: 'Aluminum Housing Assembly', 
    family: 'Housing', 
    type: 'Aluminum Component',
    bom: [
      { id: 'RM-001', material: 'Aluminum Alloy 6061', qty: 3.2, unit: 'kg', stdCost: 2.45, lmeLinked: true },
      { id: 'RM-002', material: 'Steel Fasteners', qty: 8, unit: 'pcs', stdCost: 0.15, lmeLinked: false },
      { id: 'RM-003', material: 'Rubber Seal', qty: 1, unit: 'pcs', stdCost: 0.45, lmeLinked: false },
    ],
    routing: [
      { id: 'OP-010', operation: 'Cutting', workCenter: 'WC-CUT-01', cycleTime: 5.5, rate: 45.00, enabled: true },
      { id: 'OP-020', operation: 'Machining', workCenter: 'WC-MCH-02', cycleTime: 20.0, rate: 65.00, enabled: true },
      { id: 'OP-030', operation: 'Assembly', workCenter: 'WC-ASM-01', cycleTime: 12.0, rate: 38.00, enabled: true },
      { id: 'OP-040', operation: 'Painting', workCenter: 'WC-PNT-01', cycleTime: 8.0, rate: 42.00, enabled: true },
      { id: 'OP-050', operation: 'Packaging', workCenter: 'WC-PKG-01', cycleTime: 3.5, rate: 28.00, enabled: true },
    ]
  },
];

const WelspringCostSimulator = () => {
  const [selectedPart, setSelectedPart] = useState(null);
  const [bom, setBom] = useState([]);
  const [routing, setRouting] = useState([]);
  const [lmePrices, setLmePrices] = useState({
    copper: 8.45,
    brass: 6.75,
    steel: 3.18,
    aluminum: 2.45,
  });
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [costBreakdown, setCostBreakdown] = useState(null);
  const [activeTab, setActiveTab] = useState('selection');

  // Simulate LME API refresh
  const refreshLMEPrices = () => {
    setIsRefreshing(true);
    setTimeout(() => {
      setLmePrices({
        copper: (8.45 + (Math.random() - 0.5) * 0.5).toFixed(2),
        brass: (6.75 + (Math.random() - 0.5) * 0.4).toFixed(2),
        steel: (3.18 + (Math.random() - 0.5) * 0.2).toFixed(2),
        aluminum: (2.45 + (Math.random() - 0.5) * 0.3).toFixed(2),
      });
      setIsRefreshing(false);
    }, 1200);
  };

  // Calculate costs when part, BOM, or routing changes
  useEffect(() => {
    if (selectedPart && bom.length > 0 && routing.length > 0) {
      calculateCosts();
    }
  }, [selectedPart, bom, routing, lmePrices]);

  const calculateCosts = () => {
    // Raw Material Cost
    const rmCost = bom.reduce((sum, item) => {
      let itemCost = item.stdCost;
      if (item.lmeLinked) {
        const materialType = item.material.toLowerCase();
        if (materialType.includes('copper')) itemCost = parseFloat(lmePrices.copper);
        if (materialType.includes('brass')) itemCost = parseFloat(lmePrices.brass);
        if (materialType.includes('steel')) itemCost = parseFloat(lmePrices.steel);
        if (materialType.includes('aluminum') || materialType.includes('aluminium')) itemCost = parseFloat(lmePrices.aluminum);
      }
      return sum + (item.qty * itemCost);
    }, 0);

    // Processing Cost - only count enabled operations
    const processingCost = routing.reduce((sum, op) => {
      if (op.enabled) {
        return sum + ((op.cycleTime / 60) * op.rate);
      }
      return sum;
    }, 0);

    const grossProductCost = rmCost + processingCost;
    const laborCost = grossProductCost * 0.10;
    const consumables = grossProductCost * 0.05;
    const powerCost = grossProductCost * 0.05;
    const maintenance = grossProductCost * 0.05;
    const grossMargin = grossProductCost * 0.15;
    const costOfProduction = grossProductCost + grossMargin;

    setCostBreakdown({
      rmCost: rmCost.toFixed(2),
      processingCost: processingCost.toFixed(2),
      grossProductCost: grossProductCost.toFixed(2),
      laborCost: laborCost.toFixed(2),
      consumables: consumables.toFixed(2),
      powerCost: powerCost.toFixed(2),
      maintenance: maintenance.toFixed(2),
      grossMargin: grossMargin.toFixed(2),
      costOfProduction: costOfProduction.toFixed(2),
      rmPercentage: ((rmCost / costOfProduction) * 100).toFixed(1),
      processingPercentage: ((processingCost / costOfProduction) * 100).toFixed(1),
    });
  };

  const selectPart = (part) => {
    setSelectedPart(part);
    setBom(part.bom);
    setRouting(part.routing);
    setActiveTab('bom');
  };

  const updateBOMItem = (index, field, value) => {
    const newBom = [...bom];
    newBom[index][field] = field === 'qty' || field === 'stdCost' ? parseFloat(value) : value;
    setBom(newBom);
  };

  const updateRoutingItem = (index, field, value) => {
    const newRouting = [...routing];
    if (field === 'enabled') {
      newRouting[index][field] = value;
    } else {
      newRouting[index][field] = field === 'cycleTime' || field === 'rate' ? parseFloat(value) : value;
    }
    setRouting(newRouting);
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, #f0f4f8 0%, #e1e8ed 100%)',
      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      color: '#1e293b',
      padding: '0',
      position: 'relative'
    }}>
      {/* Subtle grid pattern */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(51, 153, 204, 0.05) 1px, transparent 0)',
        backgroundSize: '40px 40px',
        pointerEvents: 'none'
      }}></div>

      {/* Header */}
      <header style={{
        background: 'linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)',
        borderBottom: '3px solid #60a5fa',
        padding: '1.25rem 2rem',
        position: 'sticky',
        top: 0,
        zIndex: 100,
        boxShadow: '0 4px 20px rgba(30, 64, 175, 0.15)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: '1400px', margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <div style={{
              background: 'rgba(255, 255, 255, 0.95)',
              padding: '0.65rem',
              borderRadius: '12px',
              display: 'flex',
              alignItems: 'center',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
            }}>
              <Calculator size={26} color="#1e40af" strokeWidth={2.5} />
            </div>
            <div>
              <h1 style={{
                margin: 0,
                fontSize: '1.75rem',
                fontWeight: 700,
                color: '#ffffff',
                letterSpacing: '-0.02em'
              }}>
                WELSPRING
              </h1>
              <p style={{ margin: '0.2rem 0 0 0', fontSize: '0.875rem', color: 'rgba(255, 255, 255, 0.85)', fontWeight: 500 }}>
                Cost Simulator & Strategic Pricing
              </p>
            </div>
          </div>
          
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <div style={{
              background: 'rgba(255, 255, 255, 0.15)',
              backdropFilter: 'blur(10px)',
              padding: '0.65rem 1rem',
              borderRadius: '10px',
              border: '1px solid rgba(255, 255, 255, 0.25)',
              display: 'flex',
              alignItems: 'center',
              gap: '0.65rem'
            }}>
              <Activity size={18} color="#10b981" />
              <div>
                <div style={{ fontSize: '0.7rem', color: 'rgba(255, 255, 255, 0.75)', marginBottom: '0.1rem', textTransform: 'uppercase', letterSpacing: '0.5px' }}>LME Status</div>
                <div style={{ fontSize: '0.875rem', fontWeight: 700, color: '#ffffff' }}>● LIVE</div>
              </div>
            </div>
            <button
              onClick={refreshLMEPrices}
              disabled={isRefreshing}
              style={{
                background: isRefreshing ? 'rgba(255, 255, 255, 0.25)' : 'rgba(255, 255, 255, 0.95)',
                color: '#1e40af',
                border: 'none',
                padding: '0.65rem 1.25rem',
                borderRadius: '10px',
                display: 'flex',
                alignItems: 'center',
                gap: '0.5rem',
                cursor: isRefreshing ? 'not-allowed' : 'pointer',
                fontSize: '0.875rem',
                fontWeight: 700,
                transition: 'all 0.3s ease',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                transform: isRefreshing ? 'scale(0.98)' : 'scale(1)'
              }}
              onMouseEnter={(e) => !isRefreshing && (e.currentTarget.style.transform = 'scale(1.05)')}
              onMouseLeave={(e) => !isRefreshing && (e.currentTarget.style.transform = 'scale(1)')}
            >
              <RefreshCw size={16} style={{ animation: isRefreshing ? 'spin 1s linear infinite' : 'none' }} />
              {isRefreshing ? 'Updating...' : 'Refresh LME'}
            </button>
          </div>
        </div>
      </header>

      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
          
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(20px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          @keyframes slideIn {
            from {
              opacity: 0;
              transform: translateX(-10px);
            }
            to {
              opacity: 1;
              transform: translateX(0);
            }
          }
          .cost-card {
            animation: fadeInUp 0.6s ease-out forwards;
          }
          .tab-content {
            animation: slideIn 0.4s ease-out;
          }
          input:focus {
            outline: none;
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
          }
        `}
      </style>

      {/* Main Content */}
      <main style={{ maxWidth: '1400px', margin: '0 auto', padding: '2rem' }}>
        
        {/* LME Price Ticker */}
        <div style={{
          background: 'linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%)',
          border: '2px solid #dbeafe',
          borderRadius: '16px',
          padding: '1.5rem',
          marginBottom: '2rem',
          boxShadow: '0 4px 16px rgba(30, 64, 175, 0.08)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1.25rem' }}>
            <TrendingUp size={22} color="#1e40af" strokeWidth={2.5} />
            <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 700, color: '#1e40af' }}>
              London Metal Exchange - Live Commodity Prices
            </h3>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem' }}>
            {Object.entries(lmePrices).map(([metal, price]) => (
              <div key={metal} style={{
                background: '#ffffff',
                padding: '1.25rem',
                borderRadius: '12px',
                border: '2px solid #e0e7ff',
                transition: 'all 0.3s ease',
                boxShadow: '0 2px 8px rgba(30, 64, 175, 0.06)'
              }}>
                <div style={{ fontSize: '0.75rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '0.6rem', fontWeight: 600 }}>
                  {metal}
                </div>
                <div style={{ fontSize: '1.9rem', fontWeight: 800, color: '#1e40af' }}>
                  ${price}
                  <span style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 500 }}>/kg</span>
                </div>
                <div style={{ marginTop: '0.5rem', fontSize: '0.75rem', color: '#10b981', fontWeight: 600 }}>
                  ● Live Feed
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Navigation Tabs */}
        <div style={{
          display: 'flex',
          gap: '0.5rem',
          marginBottom: '1.5rem',
          background: '#ffffff',
          padding: '0.5rem',
          borderRadius: '14px',
          border: '2px solid #e0e7ff',
          boxShadow: '0 2px 12px rgba(30, 64, 175, 0.06)'
        }}>
          {[
            { id: 'selection', label: 'Part Selection', icon: Package },
            { id: 'bom', label: 'Bill of Materials', icon: Database },
            { id: 'routing', label: 'Routing & Operations', icon: Settings },
            { id: 'results', label: 'Cost Analysis', icon: BarChart3 }
          ].map(tab => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                style={{
                  background: activeTab === tab.id ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
                  color: activeTab === tab.id ? '#ffffff' : '#64748b',
                  border: 'none',
                  padding: '0.9rem 1.5rem',
                  borderRadius: '10px',
                  cursor: 'pointer',
                  fontSize: '0.875rem',
                  fontWeight: 700,
                  display: 'flex',
                  alignItems: 'center',
                  gap: '0.6rem',
                  transition: 'all 0.3s ease',
                  flex: 1,
                  justifyContent: 'center',
                  boxShadow: activeTab === tab.id ? '0 4px 12px rgba(59, 130, 246, 0.3)' : 'none'
                }}
                onMouseEnter={(e) => {
                  if (activeTab !== tab.id) {
                    e.currentTarget.style.background = '#f1f5f9';
                    e.currentTarget.style.color = '#3b82f6';
                  }
                }}
                onMouseLeave={(e) => {
                  if (activeTab !== tab.id) {
                    e.currentTarget.style.background = 'transparent';
                    e.currentTarget.style.color = '#64748b';
                  }
                }}
              >
                <Icon size={18} strokeWidth={2.5} />
                {tab.label}
              </button>
            );
          })}
        </div>

        {/* Tab Content */}
        <div className="tab-content" style={{
          background: '#ffffff',
          border: '2px solid #e0e7ff',
          borderRadius: '16px',
          padding: '2rem',
          boxShadow: '0 4px 20px rgba(30, 64, 175, 0.08)',
          minHeight: '500px'
        }}>
          
          {/* Part Selection Tab */}
          {activeTab === 'selection' && (
            <div>
              <h2 style={{ margin: '0 0 1.75rem 0', fontSize: '1.6rem', fontWeight: 800, color: '#0f172a' }}>
                Select Part Number
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1.25rem' }}>
                {mockPartNumbers.map(part => (
                  <div
                    key={part.id}
                    onClick={() => selectPart(part)}
                    style={{
                      background: selectedPart?.id === part.id 
                        ? 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)'
                        : '#f8fafc',
                      border: selectedPart?.id === part.id 
                        ? '3px solid #3b82f6'
                        : '2px solid #e2e8f0',
                      borderRadius: '14px',
                      padding: '1.5rem',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                      position: 'relative'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.transform = 'translateY(-4px)';
                      e.currentTarget.style.boxShadow = '0 12px 28px rgba(59, 130, 246, 0.15)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.transform = 'translateY(0)';
                      e.currentTarget.style.boxShadow = 'none';
                    }}
                  >
                    {selectedPart?.id === part.id && (
                      <div style={{
                        position: 'absolute',
                        top: '1rem',
                        right: '1rem',
                        background: '#10b981',
                        borderRadius: '50%',
                        padding: '0.35rem',
                        display: 'flex',
                        alignItems: 'center',
                        boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)'
                      }}>
                        <CheckCircle size={18} color="#ffffff" strokeWidth={3} />
                      </div>
                    )}
                    <div style={{ fontSize: '1.35rem', fontWeight: 800, color: '#1e40af', marginBottom: '0.5rem' }}>
                      {part.id}
                    </div>
                    <div style={{ fontSize: '1rem', color: '#334155', marginBottom: '0.9rem', fontWeight: 500 }}>
                      {part.name}
                    </div>
                    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
                      <span style={{
                        background: '#dbeafe',
                        color: '#1e40af',
                        padding: '0.35rem 0.85rem',
                        borderRadius: '7px',
                        fontSize: '0.75rem',
                        fontWeight: 700
                      }}>
                        {part.type}
                      </span>
                      <span style={{
                        background: '#d1fae5',
                        color: '#059669',
                        padding: '0.35rem 0.85rem',
                        borderRadius: '7px',
                        fontSize: '0.75rem',
                        fontWeight: 700
                      }}>
                        {part.family}
                      </span>
                    </div>
                    {/* Process Steps Preview */}
                    <div style={{
                      borderTop: '1px solid #cbd5e1',
                      paddingTop: '0.75rem',
                      marginTop: '0.75rem'
                    }}>
                      <div style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 600, marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                        Process Steps
                      </div>
                      <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
                        {part.routing.filter(r => r.enabled).map(r => (
                          <span key={r.id} style={{
                            fontSize: '0.7rem',
                            background: '#f1f5f9',
                            color: '#475569',
                            padding: '0.2rem 0.5rem',
                            borderRadius: '4px',
                            fontWeight: 600
                          }}>
                            {r.operation === 'Cutting' && '✂️'}
                            {r.operation === 'Machining' && '⚙️'}
                            {r.operation === 'Assembly' && '🔧'}
                            {r.operation === 'Painting' && '🎨'}
                            {r.operation === 'Packaging' && '📦'}
                            {' '}{r.cycleTime}m
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              {selectedPart && (
                <div style={{
                  marginTop: '2rem',
                  padding: '1.5rem',
                  background: 'linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)',
                  border: '2px solid #6ee7b7',
                  borderRadius: '14px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '1rem',
                  boxShadow: '0 4px 16px rgba(16, 185, 129, 0.15)'
                }}>
                  <CheckCircle size={28} color="#059669" strokeWidth={2.5} />
                  <div>
                    <div style={{ fontWeight: 700, color: '#047857', marginBottom: '0.3rem', fontSize: '1.05rem' }}>
                      Part Selected: {selectedPart.id}
                    </div>
                    <div style={{ fontSize: '0.875rem', color: '#065f46', fontWeight: 500 }}>
                      Click "Bill of Materials" tab to configure BOM and routing
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* BOM Tab */}
          {activeTab === 'bom' && (
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.75rem' }}>
                <h2 style={{ margin: 0, fontSize: '1.6rem', fontWeight: 800, color: '#0f172a' }}>
                  Bill of Materials
                </h2>
                {selectedPart && (
                  <div style={{ fontSize: '0.875rem', color: '#64748b', fontWeight: 600 }}>
                    Part: <span style={{ color: '#3b82f6', fontWeight: 800 }}>{selectedPart.id}</span>
                  </div>
                )}
              </div>
              
              {bom.length > 0 ? (
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0 0.5rem' }}>
                    <thead>
                      <tr>
                        <th style={{ textAlign: 'left', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc', borderRadius: '8px 0 0 8px' }}>Material ID</th>
                        <th style={{ textAlign: 'left', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Description</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Quantity</th>
                        <th style={{ textAlign: 'center', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Unit</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Cost ($/unit)</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Total</th>
                        <th style={{ textAlign: 'center', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc', borderRadius: '0 8px 8px 0' }}>LME</th>
                      </tr>
                    </thead>
                    <tbody>
                      {bom.map((item, index) => {
                        let currentCost = item.stdCost;
                        if (item.lmeLinked) {
                          const materialType = item.material.toLowerCase();
                          if (materialType.includes('copper')) currentCost = parseFloat(lmePrices.copper);
                          if (materialType.includes('brass')) currentCost = parseFloat(lmePrices.brass);
                          if (materialType.includes('steel')) currentCost = parseFloat(lmePrices.steel);
                          if (materialType.includes('aluminum') || materialType.includes('aluminium')) currentCost = parseFloat(lmePrices.aluminum);
                        }
                        const totalCost = (item.qty * currentCost).toFixed(2);

                        return (
                          <tr key={item.id} style={{
                            background: '#f8fafc',
                            border: '2px solid #e2e8f0',
                            transition: 'all 0.2s ease'
                          }}>
                            <td style={{ padding: '1.1rem', color: '#1e40af', fontWeight: 800, borderRadius: '10px 0 0 10px', fontSize: '0.9rem' }}>{item.id}</td>
                            <td style={{ padding: '1.1rem', color: '#0f172a', fontWeight: 600 }}>{item.material}</td>
                            <td style={{ padding: '1.1rem', textAlign: 'right' }}>
                              <input
                                type="number"
                                step="0.1"
                                value={item.qty}
                                onChange={(e) => updateBOMItem(index, 'qty', e.target.value)}
                                style={{
                                  background: '#ffffff',
                                  border: '2px solid #cbd5e1',
                                  color: '#0f172a',
                                  padding: '0.6rem',
                                  borderRadius: '8px',
                                  width: '90px',
                                  textAlign: 'right',
                                  fontSize: '0.9rem',
                                  fontWeight: 600,
                                  transition: 'all 0.2s ease'
                                }}
                              />
                            </td>
                            <td style={{ padding: '1.1rem', textAlign: 'center', color: '#64748b', fontWeight: 600 }}>{item.unit}</td>
                            <td style={{ padding: '1.1rem', textAlign: 'right' }}>
                              <input
                                type="number"
                                step="0.01"
                                value={currentCost}
                                onChange={(e) => updateBOMItem(index, 'stdCost', e.target.value)}
                                disabled={item.lmeLinked}
                                style={{
                                  background: item.lmeLinked ? '#d1fae5' : '#ffffff',
                                  border: item.lmeLinked ? '2px solid #6ee7b7' : '2px solid #cbd5e1',
                                  color: item.lmeLinked ? '#047857' : '#0f172a',
                                  padding: '0.6rem',
                                  borderRadius: '8px',
                                  width: '110px',
                                  textAlign: 'right',
                                  fontSize: '0.9rem',
                                  fontWeight: 700,
                                  cursor: item.lmeLinked ? 'not-allowed' : 'text',
                                  transition: 'all 0.2s ease'
                                }}
                              />
                            </td>
                            <td style={{ padding: '1.1rem', textAlign: 'right', fontWeight: 800, color: '#1e40af', fontSize: '1rem' }}>
                              ${totalCost}
                            </td>
                            <td style={{ padding: '1.1rem', textAlign: 'center', borderRadius: '0 10px 10px 0' }}>
                              {item.lmeLinked && (
                                <span style={{
                                  background: '#d1fae5',
                                  color: '#047857',
                                  padding: '0.35rem 0.7rem',
                                  borderRadius: '7px',
                                  fontSize: '0.75rem',
                                  fontWeight: 800
                                }}>
                                  ✓ LIVE
                                </span>
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div style={{
                  textAlign: 'center',
                  padding: '4rem',
                  color: '#94a3b8'
                }}>
                  <AlertCircle size={56} style={{ marginBottom: '1.25rem', opacity: 0.4 }} />
                  <div style={{ fontSize: '1.1rem', fontWeight: 600 }}>Please select a part number first</div>
                </div>
              )}
            </div>
          )}

          {/* Routing Tab */}
          {activeTab === 'routing' && (
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.75rem' }}>
                <h2 style={{ margin: 0, fontSize: '1.6rem', fontWeight: 800, color: '#0f172a' }}>
                  Routing & Operations
                </h2>
                {selectedPart && (
                  <div style={{ fontSize: '0.875rem', color: '#64748b', fontWeight: 600 }}>
                    Part: <span style={{ color: '#3b82f6', fontWeight: 800 }}>{selectedPart.id}</span>
                  </div>
                )}
              </div>
              
              {routing.length > 0 ? (
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0 0.5rem' }}>
                    <thead>
                      <tr>
                        <th style={{ textAlign: 'center', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc', borderRadius: '8px 0 0 8px' }}>Enable</th>
                        <th style={{ textAlign: 'left', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Operation</th>
                        <th style={{ textAlign: 'left', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Process Step</th>
                        <th style={{ textAlign: 'left', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Work Center</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Cycle Time (min)</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc' }}>Rate ($/hr)</th>
                        <th style={{ textAlign: 'right', padding: '0.85rem 1rem', color: '#475569', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, background: '#f8fafc', borderRadius: '0 8px 8px 0' }}>Cost</th>
                      </tr>
                    </thead>
                    <tbody>
                      {routing.map((op, index) => {
                        const opCost = op.enabled ? ((op.cycleTime / 60) * op.rate).toFixed(2) : '0.00';
                        const isDisabled = !op.enabled;
                        return (
                          <tr key={op.id} style={{
                            background: isDisabled ? '#f1f5f9' : '#f8fafc',
                            border: '2px solid #e2e8f0',
                            transition: 'all 0.2s ease',
                            opacity: isDisabled ? 0.6 : 1
                          }}>
                            <td style={{ padding: '1.1rem', textAlign: 'center', borderRadius: '10px 0 0 10px' }}>
                              <input
                                type="checkbox"
                                checked={op.enabled}
                                onChange={(e) => updateRoutingItem(index, 'enabled', e.target.checked)}
                                style={{
                                  width: '20px',
                                  height: '20px',
                                  cursor: 'pointer',
                                  accentColor: '#3b82f6'
                                }}
                              />
                            </td>
                            <td style={{ padding: '1.1rem', color: '#1e40af', fontWeight: 800, fontSize: '0.9rem' }}>{op.id}</td>
                            <td style={{ padding: '1.1rem', color: '#0f172a', fontWeight: 700 }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                {op.operation === 'Cutting' && <span style={{ fontSize: '1.2rem' }}>✂️</span>}
                                {op.operation === 'Machining' && <span style={{ fontSize: '1.2rem' }}>⚙️</span>}
                                {op.operation === 'Assembly' && <span style={{ fontSize: '1.2rem' }}>🔧</span>}
                                {op.operation === 'Painting' && <span style={{ fontSize: '1.2rem' }}>🎨</span>}
                                {op.operation === 'Packaging' && <span style={{ fontSize: '1.2rem' }}>📦</span>}
                                {op.operation}
                              </div>
                            </td>
                            <td style={{ padding: '1.1rem', color: '#64748b', fontWeight: 600 }}>{op.workCenter}</td>
                            <td style={{ padding: '1.1rem', textAlign: 'right' }}>
                              <input
                                type="number"
                                step="0.5"
                                value={op.cycleTime}
                                onChange={(e) => updateRoutingItem(index, 'cycleTime', e.target.value)}
                                disabled={isDisabled}
                                style={{
                                  background: isDisabled ? '#e2e8f0' : '#ffffff',
                                  border: '2px solid #cbd5e1',
                                  color: '#0f172a',
                                  padding: '0.6rem',
                                  borderRadius: '8px',
                                  width: '90px',
                                  textAlign: 'right',
                                  fontSize: '0.9rem',
                                  fontWeight: 600,
                                  transition: 'all 0.2s ease',
                                  cursor: isDisabled ? 'not-allowed' : 'text'
                                }}
                              />
                            </td>
                            <td style={{ padding: '1.1rem', textAlign: 'right' }}>
                              <input
                                type="number"
                                step="1"
                                value={op.rate}
                                onChange={(e) => updateRoutingItem(index, 'rate', e.target.value)}
                                disabled={isDisabled}
                                style={{
                                  background: isDisabled ? '#e2e8f0' : '#ffffff',
                                  border: '2px solid #cbd5e1',
                                  color: '#0f172a',
                                  padding: '0.6rem',
                                  borderRadius: '8px',
                                  width: '110px',
                                  textAlign: 'right',
                                  fontSize: '0.9rem',
                                  fontWeight: 600,
                                  transition: 'all 0.2s ease',
                                  cursor: isDisabled ? 'not-allowed' : 'text'
                                }}
                              />
                            </td>
                            <td style={{ padding: '1.1rem', textAlign: 'right', fontWeight: 800, color: isDisabled ? '#94a3b8' : '#1e40af', borderRadius: '0 10px 10px 0', fontSize: '1rem' }}>
                              ${opCost}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                  
                  {/* Total Processing Time Summary */}
                  <div style={{
                    marginTop: '1.5rem',
                    padding: '1.25rem',
                    background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
                    border: '2px solid #3b82f6',
                    borderRadius: '12px',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                      <Settings size={24} color="#1e40af" strokeWidth={2.5} />
                      <div>
                        <div style={{ fontSize: '0.75rem', color: '#475569', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                          Total Processing Time (Enabled Operations)
                        </div>
                        <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#1e40af', marginTop: '0.25rem' }}>
                          {routing.reduce((sum, op) => op.enabled ? sum + op.cycleTime : sum, 0).toFixed(1)} minutes
                        </div>
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: '0.75rem', color: '#475569', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                        Total Processing Cost
                      </div>
                      <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#10b981', marginTop: '0.25rem' }}>
                        ${routing.reduce((sum, op) => op.enabled ? sum + ((op.cycleTime / 60) * op.rate) : sum, 0).toFixed(2)}
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div style={{
                  textAlign: 'center',
                  padding: '4rem',
                  color: '#94a3b8'
                }}>
                  <AlertCircle size={56} style={{ marginBottom: '1.25rem', opacity: 0.4 }} />
                  <div style={{ fontSize: '1.1rem', fontWeight: 600 }}>Please select a part number first</div>
                </div>
              )}
            </div>
          )}

          {/* Results Tab */}
          {activeTab === 'results' && (
            <div>
              <h2 style={{ margin: '0 0 1.75rem 0', fontSize: '1.6rem', fontWeight: 800, color: '#0f172a' }}>
                Cost Analysis & Breakdown
              </h2>
              
              {costBreakdown ? (
                <div style={{ display: 'grid', gap: '1.5rem' }}>
                  {/* Cost Summary Cards */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1.25rem' }}>
                    {[
                      { label: 'Raw Material Cost', value: costBreakdown.rmCost, color: '#3b82f6', gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', icon: Package },
                      { label: 'Processing Cost', value: costBreakdown.processingCost, color: '#8b5cf6', gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)', icon: Settings },
                      { label: 'Gross Product Cost', value: costBreakdown.grossProductCost, color: '#06b6d4', gradient: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)', icon: Calculator },
                      { label: 'Cost of Production', value: costBreakdown.costOfProduction, color: '#10b981', gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', icon: DollarSign }
                    ].map((item, index) => {
                      const Icon = item.icon;
                      return (
                        <div key={index} className="cost-card" style={{
                          background: item.gradient,
                          borderRadius: '14px',
                          padding: '1.75rem',
                          animationDelay: `${index * 0.1}s`,
                          boxShadow: `0 8px 24px ${item.color}25`,
                          border: '2px solid rgba(255, 255, 255, 0.2)'
                        }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
                            <div style={{
                              background: 'rgba(255, 255, 255, 0.25)',
                              padding: '0.6rem',
                              borderRadius: '10px',
                              display: 'flex'
                            }}>
                              <Icon size={22} color="#ffffff" strokeWidth={2.5} />
                            </div>
                            <div style={{ fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.9)', fontWeight: 600 }}>{item.label}</div>
                          </div>
                          <div style={{ fontSize: '2.2rem', fontWeight: 900, color: '#ffffff' }}>
                            ${item.value}
                          </div>
                        </div>
                      );
                    })}
                  </div>

                  {/* Detailed Breakdown */}
                  <div style={{
                    background: '#f8fafc',
                    border: '2px solid #e2e8f0',
                    borderRadius: '14px',
                    padding: '2rem',
                    boxShadow: '0 4px 16px rgba(30, 64, 175, 0.06)'
                  }}>
                    <h3 style={{ margin: '0 0 1.5rem 0', fontSize: '1.3rem', fontWeight: 800, color: '#0f172a' }}>
                      Detailed Cost Structure (per Welspring Model)
                    </h3>
                    <div style={{ display: 'grid', gap: '1rem' }}>
                      {[
                        { label: 'Raw Material Consumption', value: costBreakdown.rmCost, percentage: costBreakdown.rmPercentage, standard: '60%', color: '#3b82f6' },
                        { label: 'Labour Bills', value: costBreakdown.laborCost, percentage: '10', standard: '10%', color: '#8b5cf6' },
                        { label: 'Process Consumables', value: costBreakdown.consumables, percentage: '5', standard: '5%', color: '#06b6d4' },
                        { label: 'Power Bill', value: costBreakdown.powerCost, percentage: '5', standard: '5%', color: '#f59e0b' },
                        { label: 'Repair & Maintenance', value: costBreakdown.maintenance, percentage: '5', standard: '5%', color: '#ef4444' },
                        { label: 'Overheads (Gross Margin)', value: costBreakdown.grossMargin, percentage: '15', standard: '15%', color: '#10b981' }
                      ].map((item, index) => (
                        <div key={index} style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          padding: '1.25rem',
                          background: '#ffffff',
                          borderRadius: '12px',
                          border: '2px solid #e2e8f0',
                          transition: 'all 0.2s ease'
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.borderColor = item.color;
                          e.currentTarget.style.boxShadow = `0 4px 16px ${item.color}20`;
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.borderColor = '#e2e8f0';
                          e.currentTarget.style.boxShadow = 'none';
                        }}
                        >
                          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1 }}>
                            <div style={{ 
                              width: '4px', 
                              height: '40px', 
                              background: item.color,
                              borderRadius: '4px'
                            }}></div>
                            <div style={{ color: '#0f172a', fontWeight: 700, fontSize: '0.95rem' }}>{item.label}</div>
                            <div style={{
                              background: `${item.color}20`,
                              color: item.color,
                              padding: '0.3rem 0.7rem',
                              borderRadius: '6px',
                              fontSize: '0.75rem',
                              fontWeight: 800
                            }}>
                              Target: {item.standard}
                            </div>
                          </div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '2.5rem' }}>
                            <div style={{ textAlign: 'right' }}>
                              <div style={{ fontSize: '0.7rem', color: '#64748b', marginBottom: '0.3rem', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600 }}>Actual %</div>
                              <div style={{ fontSize: '1.1rem', fontWeight: 800, color: item.color }}>{item.percentage}%</div>
                            </div>
                            <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#0f172a', minWidth: '110px', textAlign: 'right' }}>
                              ${item.value}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Visual Breakdown */}
                  <div style={{
                    background: '#f8fafc',
                    border: '2px solid #e2e8f0',
                    borderRadius: '14px',
                    padding: '2rem',
                    boxShadow: '0 4px 16px rgba(30, 64, 175, 0.06)'
                  }}>
                    <h3 style={{ margin: '0 0 1.5rem 0', fontSize: '1.3rem', fontWeight: 800, color: '#0f172a' }}>
                      Cost Composition
                    </h3>
                    <div style={{ display: 'flex', height: '70px', borderRadius: '14px', overflow: 'hidden', border: '2px solid #cbd5e1', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)' }}>
                      <div style={{
                        width: `${costBreakdown.rmPercentage}%`,
                        background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#ffffff',
                        fontWeight: 800,
                        fontSize: '0.9rem',
                        transition: 'all 0.5s ease',
                        letterSpacing: '0.5px'
                      }}>
                        RM {costBreakdown.rmPercentage}%
                      </div>
                      <div style={{
                        width: `${costBreakdown.processingPercentage}%`,
                        background: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#ffffff',
                        fontWeight: 800,
                        fontSize: '0.9rem',
                        transition: 'all 0.5s ease',
                        letterSpacing: '0.5px'
                      }}>
                        Process {costBreakdown.processingPercentage}%
                      </div>
                      <div style={{
                        width: '25%',
                        background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#ffffff',
                        fontWeight: 800,
                        fontSize: '0.9rem',
                        transition: 'all 0.5s ease',
                        letterSpacing: '0.5px'
                      }}>
                        Overheads 25%
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div style={{
                  textAlign: 'center',
                  padding: '4rem',
                  color: '#94a3b8'
                }}>
                  <AlertCircle size={56} style={{ marginBottom: '1.25rem', opacity: 0.4 }} />
                  <div style={{ fontSize: '1.1rem', fontWeight: 600 }}>Please configure part, BOM, and routing to see cost analysis</div>
                </div>
              )}
            </div>
          )}
        </div>
      </main>
    </div>
  );
};

export default WelspringCostSimulator;