import React, { useState, useMemo } from 'react';
import { mockProducts } from './data';
import { Product } from './types';
import { KPICards } from './KPICards';
import { MasterTable } from './MasterTable';
import { WaterfallModal } from './WaterfallModal';
import { Filter, Settings2 } from 'lucide-react';

export default function MktDataView() {
  const [includeCOGS, setIncludeCOGS] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

  const categories = ['All', ...Array.from(new Set(mockProducts.map(p => p.category)))];

  const filteredProducts = useMemo(() => {
    if (selectedCategory === 'All') return mockProducts;
    return mockProducts.filter(p => p.category === selectedCategory);
  }, [selectedCategory]);

  return (
    <div className="font-sans text-slate-200">
      {/* Header Controls */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h2 className="text-2xl font-bold text-white">Profitability Dashboard</h2>
          <p className="text-slate-400">Overview of product performance and margins.</p>
        </div>
        
        <div className="flex items-center gap-4">
          {/* Category Filter */}
          <div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
            <Filter className="w-4 h-4 text-slate-400" />
            <select 
              className="bg-transparent text-sm font-medium text-slate-300 outline-none cursor-pointer"
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
            >
              {categories.map(cat => (
                <option key={cat} value={cat} className="bg-[#13161F]">{cat === 'All' ? 'All Categories' : cat}</option>
              ))}
            </select>
          </div>

          {/* COGS Toggle */}
          <div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
            <Settings2 className="w-4 h-4 text-slate-400" />
            <label className="flex items-center gap-2 cursor-pointer">
              <div className="relative">
                <input 
                  type="checkbox" 
                  className="sr-only" 
                  checked={includeCOGS}
                  onChange={() => setIncludeCOGS(!includeCOGS)}
                />
                <div className={`block w-10 h-6 rounded-full transition-colors ${includeCOGS ? 'bg-indigo-600' : 'bg-[#1F2433]'}`}></div>
                <div className={`absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform ${includeCOGS ? 'transform translate-x-4' : ''}`}></div>
              </div>
              <span className="text-sm font-medium text-slate-300">Include COGS</span>
            </label>
          </div>
        </div>
      </div>

      <KPICards products={filteredProducts} includeCOGS={includeCOGS} />

      <div className="mb-8">
        <div className="mb-4 flex items-center justify-between">
          <h3 className="text-lg font-semibold text-white">Product Performance</h3>
          <p className="text-sm text-slate-400">Click on a product to view the waterfall breakdown.</p>
        </div>
        <MasterTable 
          products={filteredProducts} 
          includeCOGS={includeCOGS} 
          onProductClick={setSelectedProduct} 
        />
      </div>

      {/* Modal */}
      <WaterfallModal 
        product={selectedProduct} 
        includeCOGS={includeCOGS} 
        onClose={() => setSelectedProduct(null)} 
      />
    </div>
  );
}