import React, { useState, useMemo, useEffect } from 'react';
import * as XLSX from 'xlsx';
import { SalesRecord, AdsRecord } from '../../types';
import { Product } from './types';
import { KPICards } from './KPICards';
import { MasterTable } from './MasterTable';
import { WaterfallModal } from './WaterfallModal';
import { Filter, Settings2 } from 'lucide-react';

// ---------------------------------------------------------------------------
// Excel parsing helpers (all files use raw: true so numbers come back as JS numbers)
// ---------------------------------------------------------------------------

function parseNumericCell(val: unknown): number {
  if (typeof val === 'number') return isNaN(val) ? 0 : val;
  if (typeof val === 'string') {
    const clean = val.replace(/[€$£\s]/g, '').trim();
    if (!clean) return 0;
    // EU format: "1.234,56" — comma is decimal, dot is thousands
    if (clean.includes(',') && clean.includes('.') && clean.indexOf(',') > clean.indexOf('.')) {
      return parseFloat(clean.replace(/\./g, '').replace(',', '.')) || 0;
    }
    // EU format: "263,83" — only comma, treat as decimal
    if (clean.includes(',') && !clean.includes('.')) {
      return parseFloat(clean.replace(',', '.')) || 0;
    }
    return parseFloat(clean.replace(/,/g, '')) || 0;
  }
  return 0;
}

// Deals file: ASIN = col A (idx 0), total deal cost = col C (idx 2)
function parseDealsExcel(buffer: ArrayBuffer): Map<string, number> {
  const wb = XLSX.read(buffer, { type: 'array' });
  const ws = wb.Sheets[wb.SheetNames[0]];
  const rows = XLSX.utils.sheet_to_json<unknown[]>(ws, { header: 1, raw: true });
  const map = new Map<string, number>();
  for (let i = 1; i < rows.length; i++) {
    const row = rows[i] as unknown[];
    const asin = row[0];
    const cost = row[2];
    if (asin && typeof asin === 'string' && asin.trim()) {
      const key = asin.trim().toUpperCase();
      map.set(key, (map.get(key) || 0) + parseNumericCell(cost));
    }
  }
  return map;
}

// Promos file: ASIN = col E (idx 4), promo cost = col K (idx 10)
function parsePromosExcel(buffer: ArrayBuffer): Map<string, number> {
  const wb = XLSX.read(buffer, { type: 'array' });
  const ws = wb.Sheets[wb.SheetNames[0]];
  const rows = XLSX.utils.sheet_to_json<unknown[]>(ws, { header: 1, raw: true });
  const map = new Map<string, number>();
  for (let i = 1; i < rows.length; i++) {
    const row = rows[i] as unknown[];
    const asin = row[4];
    const cost = row[10];
    if (asin && typeof asin === 'string' && asin.trim()) {
      const key = asin.trim().toUpperCase();
      map.set(key, (map.get(key) || 0) + parseNumericCell(cost));
    }
  }
  return map;
}

// Chargebacks file: ASIN = col AN (idx 39), chargeback cost = col B (idx 1)
function parseChargebacksExcel(buffer: ArrayBuffer): Map<string, number> {
  const wb = XLSX.read(buffer, { type: 'array' });
  const ws = wb.Sheets[wb.SheetNames[0]];
  const rows = XLSX.utils.sheet_to_json<unknown[]>(ws, { header: 1, raw: true });
  const map = new Map<string, number>();
  for (let i = 1; i < rows.length; i++) {
    const row = rows[i] as unknown[];
    const asin = row[39];
    const cost = row[1];
    if (asin && typeof asin === 'string' && asin.trim()) {
      const key = asin.trim().toUpperCase();
      map.set(key, (map.get(key) || 0) + parseNumericCell(cost));
    }
  }
  return map;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

interface MktDataViewProps {
  rawData: SalesRecord[];
  adsData: AdsRecord[];
}

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

  const [mktLoading, setMktLoading] = useState(true);
  const [dealsMap, setDealsMap] = useState<Map<string, number>>(new Map());
  const [promosMap, setPromosMap] = useState<Map<string, number>>(new Map());
  const [chargebacksMap, setChargebacksMap] = useState<Map<string, number>>(new Map());

  // Fetch the 3 new marketing data files once on mount
  useEffect(() => {
    let cancelled = false;
    const fetchAll = async () => {
      setMktLoading(true);
      try {
        const [dealsRes, promosRes, chargesRes] = await Promise.all([
          fetch('/api/fetch-mkt-data?file=deals'),
          fetch('/api/fetch-mkt-data?file=promos'),
          fetch('/api/fetch-mkt-data?file=chargebacks'),
        ]);

        if (cancelled) return;

        if (dealsRes.ok) {
          const buf = await dealsRes.arrayBuffer();
          if (!cancelled) setDealsMap(parseDealsExcel(buf));
        } else {
          console.warn('[MktDataView] fetch-mkt-data?file=deals failed:', dealsRes.status);
        }

        if (promosRes.ok) {
          const buf = await promosRes.arrayBuffer();
          if (!cancelled) setPromosMap(parsePromosExcel(buf));
        } else {
          console.warn('[MktDataView] fetch-mkt-data?file=promos failed:', promosRes.status);
        }

        if (chargesRes.ok) {
          const buf = await chargesRes.arrayBuffer();
          if (!cancelled) setChargebacksMap(parseChargebacksExcel(buf));
        } else {
          console.warn('[MktDataView] fetch-mkt-data?file=chargebacks failed:', chargesRes.status);
        }
      } catch (e) {
        console.error('[MktDataView] Error fetching marketing data:', e);
      } finally {
        if (!cancelled) setMktLoading(false);
      }
    };
    fetchAll();
    return () => { cancelled = true; };
  }, []);

  // Build Product[] from real data sources
  const allProducts = useMemo((): Product[] => {
    if (rawData.length === 0) return [];

    // ASIN → best metadata (longest title wins)
    const metaMap = new Map<string, { sku: string; title: string; line: string }>();
    rawData.forEach(r => {
      const asin = r.asin.trim().toUpperCase();
      const existing = metaMap.get(asin);
      if (!existing || (r.title && r.title.length > (existing.title?.length || 0))) {
        metaMap.set(asin, { sku: r.sku || '', title: r.title || '', line: r.line || 'Other' });
      }
    });

    // ASIN → global sell-out and units (all marketplaces summed)
    const sellOutMap = new Map<string, number>();
    const unitsMap = new Map<string, number>();
    rawData.forEach(r => {
      const asin = r.asin.trim().toUpperCase();
      sellOutMap.set(asin, (sellOutMap.get(asin) || 0) + r.sellOut);
      unitsMap.set(asin, (unitsMap.get(asin) || 0) + r.units);
    });

    // ASIN → global ad spend (all marketplaces summed)
    const adsSpendMap = new Map<string, number>();
    adsData.forEach(r => {
      const asin = r.asin.trim().toUpperCase();
      adsSpendMap.set(asin, (adsSpendMap.get(asin) || 0) + r.cost);
    });

    return Array.from(metaMap.entries())
      .map(([asin, meta]): Product => ({
        id: asin,
        asin,
        sku: meta.sku,
        name: meta.title || asin,
        image: '',
        category: meta.line,
        brand: '',
        grossSales: sellOutMap.get(asin) || 0,
        unitsSold: unitsMap.get(asin) || 0,
        ppcSpend: adsSpendMap.get(asin) || 0,
        deals: dealsMap.get(asin) || 0,
        promos: promosMap.get(asin) || 0,
        chargebacks: chargebacksMap.get(asin) || 0,
        chargebacksPrevMonth: 0,
        cogs: 0,
      }))
      // Only show products that have actual sales
      .filter(p => p.grossSales > 0);
  }, [rawData, adsData, dealsMap, promosMap, chargebacksMap]);

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

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

  // Reset category filter when product list changes (e.g. rawData load)
  useEffect(() => {
    setSelectedCategory('All');
  }, [rawData]);

  // ---------------------------------------------------------------------------
  // Loading skeleton — shown while MKT files are being fetched or rawData is empty
  // ---------------------------------------------------------------------------
  if (rawData.length === 0 || mktLoading) {
    return (
      <div className="font-sans text-slate-200 px-4 md:px-6 pb-24">
        <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>
        {/* Skeleton KPI cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="bg-[#13161F] rounded-xl border border-[#1F2433] p-6 h-32 animate-pulse" />
          ))}
        </div>
        {/* Skeleton table */}
        <div className="bg-[#13161F] rounded-xl border border-[#1F2433] overflow-hidden">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="px-6 py-4 border-b border-[#1F2433] animate-pulse flex gap-4">
              <div className="h-4 bg-[#1F2433] rounded w-1/3" />
              <div className="h-4 bg-[#1F2433] rounded w-1/6 ml-auto" />
              <div className="h-4 bg-[#1F2433] rounded w-1/6" />
              <div className="h-4 bg-[#1F2433] rounded w-1/6" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="font-sans text-slate-200 px-4 md:px-6 pb-24">
      {/* 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>
  );
}