CrazeAnalytix/components/VendorDataView.tsx

import React, { useState, useMemo } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import MultiSelectDropdown from './MultiSelectDropdown';
import { BSRRecord } from '../types';

const MARKET_COLORS: Record<string, string> = {
  DE: '#3b82f6',
  UK: '#ef4444',
  IT: '#22c55e',
  FR: '#a855f7',
  ES: '#f59e0b',
};

interface VendorDataViewProps {
  bsrData: BSRRecord[];
}

interface ChartPoint {
  label: string;
  sortKey: string;
  [key: string]: number | string | null;
}

const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData }) => {
  // Filters
  const [selectedMarkets, setSelectedMarkets] = useState<string[]>([]);
  const [selectedAsins, setSelectedAsins] = useState<string[]>([]);
  const [selectedTopCats, setSelectedTopCats] = useState<string[]>([]);
  const [selectedDetailCats, setSelectedDetailCats] = useState<string[]>([]);

  // Extract available filter options from the dataset
  const { availableMarkets, availableAsins, availableTopCats, availableDetailCats } = useMemo(() => {
    const markets = new Set<string>();
    const asins = new Set<string>();
    const topCats = new Set<string>();
    const detailCats = new Set<string>();

    bsrData.forEach(r => {
      if (r.market) markets.add(r.market);
      if (r.asin) asins.add(r.asin);
      if (r.topLevelName) topCats.add(r.topLevelName);
      if (r.detailLevelName) detailCats.add(r.detailLevelName);
    });

    return {
      availableMarkets: Array.from(markets).sort(),
      availableAsins: Array.from(asins).sort(),
      availableTopCats: Array.from(topCats).sort(),
      availableDetailCats: Array.from(detailCats).sort()
    };
  }, [bsrData]);

  // Apply filters
  const filteredData = useMemo(() => {
    let result = bsrData;

    if (selectedMarkets.length > 0) {
      result = result.filter(r => selectedMarkets.includes(r.market));
    }
    if (selectedAsins.length > 0) {
      result = result.filter(r => selectedAsins.includes(r.asin));
    }
    if (selectedTopCats.length > 0) {
      result = result.filter(r => r.topLevelName && selectedTopCats.includes(r.topLevelName));
    }
    if (selectedDetailCats.length > 0) {
      result = result.filter(r => r.detailLevelName && selectedDetailCats.includes(r.detailLevelName));
    }

    return result;
  }, [bsrData, selectedMarkets, selectedAsins, selectedTopCats, selectedDetailCats]);

  // Determine active markets in filtered data for series generation
  const activeMarkets = useMemo(() => {
    const m = new Set(filteredData.map(r => r.market));
    return Array.from(m).sort();
  }, [filteredData]);

  // Determine if daily resolution is available (>= half the records have a date)
  const useDailyResolution = useMemo(() => {
    const withDate = filteredData.filter(r => r.date).length;
    return withDate > filteredData.length / 2;
  }, [filteredData]);

  // Aggregate Data for Charts — daily if dates available, else weekly
  const { topBsrChartData, detailBsrChartData, ratingChartData } = useMemo(() => {
    // Group by date string (YYYY-MM-DD) or by week number
    const byBucket = new Map<string, BSRRecord[]>();

    filteredData.forEach(r => {
      const key = useDailyResolution && r.date ? r.date : `W${String(r.week).padStart(2, '0')}`;
      if (!byBucket.has(key)) byBucket.set(key, []);
      byBucket.get(key)!.push(r);
    });

    const sortedKeys = Array.from(byBucket.keys()).sort();

    const topBsrChartData: ChartPoint[] = [];
    const detailBsrChartData: ChartPoint[] = [];
    const ratingChartData: ChartPoint[] = [];

    sortedKeys.forEach(key => {
      const rows = byBucket.get(key)!;

      // Human-readable label
      let label: string;
      if (useDailyResolution && key.includes('-')) {
        // YYYY-MM-DD → "DD MMM"
        const d = new Date(key + 'T12:00:00Z');
        label = d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
      } else {
        label = key; // e.g. "W08"
      }

      const topPoint: ChartPoint = { label, sortKey: key };
      const detailPoint: ChartPoint = { label, sortKey: key };
      const ratingPoint: ChartPoint = { label, sortKey: key };

      activeMarkets.forEach(m => {
        const marketRows = rows.filter(r => r.market === m);

        // Top BSR
        const topBsrRows = marketRows.filter(r => r.topLevelBSR != null);
        topPoint[`${m}_bsr`] = topBsrRows.length > 0
          ? Math.round(topBsrRows.reduce((sum, r) => sum + r.topLevelBSR!, 0) / topBsrRows.length)
          : null;

        // Detail BSR
        const detailBsrRows = marketRows.filter(r => r.detailLevelBSR != null);
        detailPoint[`${m}_bsr`] = detailBsrRows.length > 0
          ? Math.round(detailBsrRows.reduce((sum, r) => sum + r.detailLevelBSR!, 0) / detailBsrRows.length)
          : null;

        // Rating
        const ratingRows = marketRows.filter(r => r.avgRating != null);
        ratingPoint[`${m}_rating`] = ratingRows.length > 0
          ? Math.round((ratingRows.reduce((sum, r) => sum + r.avgRating!, 0) / ratingRows.length) * 10) / 10
          : null;
      });

      topBsrChartData.push(topPoint);
      detailBsrChartData.push(detailPoint);
      ratingChartData.push(ratingPoint);
    });

    return { topBsrChartData, detailBsrChartData, ratingChartData };
  }, [filteredData, activeMarkets, useDailyResolution]);

  if (bsrData.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-[60vh] gap-4 text-center px-4">
        <div className="p-4 bg-emerald-500/10 rounded-full text-emerald-400">
          <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
          </svg>
        </div>
        <h2 className="text-xl font-bold text-slate-200">No BSR Data Yet</h2>
        <p className="text-sm text-slate-400 max-w-md">
          Ensure BSR.xlsx is present and loading to see Top Level BSR, Detail Level BSR, and Average Rating trends.
        </p>
      </div>
    );
  }

  const resolutionLabel = useDailyResolution ? 'Daily Avg' : 'Weekly Avg';

  return (
    <div className="space-y-6 p-4 pb-24 md:pb-4">
      {/* Filters */}
      <div className="flex flex-wrap gap-3 items-center">
        <MultiSelectDropdown
          label="Market"
          options={availableMarkets}
          selected={selectedMarkets}
          onChange={setSelectedMarkets}
        />
        <MultiSelectDropdown
          label="ASIN"
          options={availableAsins}
          selected={selectedAsins}
          onChange={setSelectedAsins}
        />
        <MultiSelectDropdown
          label="Top Level Category"
          options={availableTopCats}
          selected={selectedTopCats}
          onChange={setSelectedTopCats}
        />
        <MultiSelectDropdown
          label="Detail Level Category"
          options={availableDetailCats}
          selected={selectedDetailCats}
          onChange={setSelectedDetailCats}
        />
        {(selectedMarkets.length > 0 || selectedAsins.length > 0 || selectedTopCats.length > 0 || selectedDetailCats.length > 0) && (
          <button
            onClick={() => {
              setSelectedMarkets([]);
              setSelectedAsins([]);
              setSelectedTopCats([]);
              setSelectedDetailCats([]);
            }}
            className="text-xs text-slate-400 hover:text-white underline"
          >
            Clear filters
          </button>
        )}
        <span className="text-slate-500 text-xs ml-auto">{filteredData.length.toLocaleString()} records filtered</span>
      </div>

      {/* Top Level BSR Trend Chart */}
      <div className="bg-slate-900/50 border border-slate-800 rounded-xl p-4">
        <h3 className="text-lg font-bold text-slate-200 mb-4">Top Level BSR Trend ({resolutionLabel})</h3>
        <p className="text-xs text-slate-500 mb-3">Lower rank = better position. Averaged across filtered ASINs per market.</p>
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={topBsrChartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
            <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
            <Tooltip
              contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
              labelStyle={{ color: '#e2e8f0' }}
            />
            <Legend />
            {activeMarkets.map(m => (
              <Line
                key={m}
                type="monotone"
                dataKey={`${m}_bsr`}
                name={`${m} BSR`}
                stroke={MARKET_COLORS[m] || '#6b7280'}
                strokeWidth={2}
                dot={false}
                connectNulls
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* Detail Level BSR Trend Chart */}
      <div className="bg-slate-900/50 border border-slate-800 rounded-xl p-4">
        <h3 className="text-lg font-bold text-slate-200 mb-4">Detail Level BSR Trend ({resolutionLabel})</h3>
        <p className="text-xs text-slate-500 mb-3">Lower rank = better position. Averaged across filtered ASINs per market.</p>
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={detailBsrChartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
            <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
            <Tooltip
              contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
              labelStyle={{ color: '#e2e8f0' }}
            />
            <Legend />
            {activeMarkets.map(m => (
              <Line
                key={m}
                type="monotone"
                dataKey={`${m}_bsr`}
                name={`${m} BSR`}
                stroke={MARKET_COLORS[m] || '#6b7280'}
                strokeWidth={2}
                dot={false}
                connectNulls
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* Average Rating Chart */}
      <div className="bg-slate-900/50 border border-slate-800 rounded-xl p-4">
        <h3 className="text-lg font-bold text-slate-200 mb-4">Average Rating ({resolutionLabel})</h3>
        <p className="text-xs text-slate-500 mb-3">Averaged across filtered ASINs per market.</p>
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={ratingChartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
            <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
            <YAxis domain={[0, 5]} tick={{ fill: '#94a3b8', fontSize: 11 }} />
            <Tooltip
              contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
              labelStyle={{ color: '#e2e8f0' }}
            />
            <Legend />
            {activeMarkets.map(m => (
              <Line
                key={m}
                type="monotone"
                dataKey={`${m}_rating`}
                name={`${m} Rating`}
                stroke={MARKET_COLORS[m] || '#6b7280'}
                strokeWidth={2}
                dot={false}
                connectNulls
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default VendorDataView;