import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar } from 'recharts';
import MultiSelectDropdown from './MultiSelectDropdown';
import { fetchVendorData, fetchVendorFilterOptions, VendorDailyRow } from '../services/supabase';

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

interface WeeklyBSR {
  weekLabel: string;
  [key: string]: number | string | null; // e.g. DE_bsr, UK_bsr
}

interface WeeklyRating {
  weekLabel: string;
  avg_rating: number | null;
  num_reviews: number | null;
}

interface WeeklyBuyBox {
  weekLabel: string;
  [key: string]: number | string | null; // e.g. DE_amazon_pct
}

// Get ISO week from date string
function getISOWeek(dateStr: string): string {
  const d = new Date(dateStr);
  d.setHours(0, 0, 0, 0);
  d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
  const week1 = new Date(d.getFullYear(), 0, 4);
  const weekNum = 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7);
  return `${d.getFullYear()}-W${String(weekNum).padStart(2, '0')}`;
}

function aggregateToWeekly(rows: VendorDailyRow[], markets: string[]) {
  // Group by week
  const byWeek = new Map<string, VendorDailyRow[]>();
  for (const row of rows) {
    const wk = getISOWeek(row.date);
    if (!byWeek.has(wk)) byWeek.set(wk, []);
    byWeek.get(wk)!.push(row);
  }

  const sortedWeeks = [...byWeek.keys()].sort();

  // BSR: min rank per week per market (best rank)
  const bsrData: WeeklyBSR[] = sortedWeeks.map(wk => {
    const weekRows = byWeek.get(wk)!;
    const point: WeeklyBSR = { weekLabel: wk.replace(/^\d{4}-/, '') };
    for (const m of markets) {
      const marketRows = weekRows.filter(r => r.market === m && r.bsr_detail_rank != null);
      if (marketRows.length > 0) {
        // Average BSR across ASINs for that market+week
        const avg = marketRows.reduce((s, r) => s + r.bsr_detail_rank!, 0) / marketRows.length;
        point[`${m}_bsr`] = Math.round(avg);
      } else {
        point[`${m}_bsr`] = null;
      }
    }
    return point;
  });

  // Ratings: average across all markets/ASINs per week
  const ratingData: WeeklyRating[] = sortedWeeks.map(wk => {
    const weekRows = byWeek.get(wk)!;
    const withRating = weekRows.filter(r => r.avg_rating != null);
    const withReviews = weekRows.filter(r => r.num_reviews != null);
    return {
      weekLabel: wk.replace(/^\d{4}-/, ''),
      avg_rating: withRating.length > 0
        ? Math.round((withRating.reduce((s, r) => s + r.avg_rating!, 0) / withRating.length) * 10) / 10
        : null,
      num_reviews: withReviews.length > 0
        ? Math.round(withReviews.reduce((s, r) => s + r.num_reviews!, 0) / withReviews.length)
        : null,
    };
  });

  // Buy Box: % of rows where Amazon has buybox, per market per week
  const buyBoxData: WeeklyBuyBox[] = sortedWeeks.map(wk => {
    const weekRows = byWeek.get(wk)!;
    const point: WeeklyBuyBox = { weekLabel: wk.replace(/^\d{4}-/, '') };
    for (const m of markets) {
      const marketRows = weekRows.filter(r => r.market === m && r.amazon_has_buybox != null);
      if (marketRows.length > 0) {
        const amazonCount = marketRows.filter(r => r.amazon_has_buybox === true).length;
        point[`${m}_pct`] = Math.round((amazonCount / marketRows.length) * 100);
      } else {
        point[`${m}_pct`] = null;
      }
    }
    return point;
  });

  return { bsrData, ratingData, buyBoxData };
}

const VendorDataView: React.FC = () => {
  const [vendorRows, setVendorRows] = useState<VendorDailyRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Filter options
  const [availableMarkets, setAvailableMarkets] = useState<string[]>([]);
  const [availableTags, setAvailableTags] = useState<string[]>([]);

  // Selected filters
  const [selectedMarkets, setSelectedMarkets] = useState<string[]>([]);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [asinSearch, setAsinSearch] = useState('');

  // Load filter options on mount
  useEffect(() => {
    const loadFilters = async () => {
      try {
        const opts = await fetchVendorFilterOptions();
        setAvailableMarkets(opts.markets);
        setAvailableTags(opts.tags);
      } catch (e: any) {
        console.error('Failed to load vendor filter options', e);
      }
    };
    loadFilters();
  }, []);

  // Fetch data when filters change
  const loadData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await fetchVendorData({
        markets: selectedMarkets.length > 0 ? selectedMarkets : undefined,
        tags: selectedTags.length > 0 ? selectedTags : undefined,
        asins: asinSearch.trim() ? asinSearch.split(',').map(a => a.trim()).filter(Boolean) : undefined,
      });
      setVendorRows(data);
    } catch (e: any) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }, [selectedMarkets, selectedTags, asinSearch]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // Determine active markets from data
  const activeMarkets = useMemo(() => {
    const markets = [...new Set(vendorRows.map(r => r.market))].sort();
    return markets.length > 0 ? markets : availableMarkets;
  }, [vendorRows, availableMarkets]);

  // Aggregate to weekly
  const { bsrData, ratingData, buyBoxData } = useMemo(
    () => aggregateToWeekly(vendorRows, activeMarkets),
    [vendorRows, activeMarkets]
  );

  // Empty state
  if (!loading && vendorRows.length === 0 && !error) {
    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 Vendor Data Yet</h2>
        <p className="text-sm text-slate-400 max-w-md">
          Upload a Vendor Central daily CSV to see BSR trends, ratings, and Buy Box data.
          Use the data source settings (top-right) to upload.
        </p>
      </div>
    );
  }

  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="Product Line"
          options={availableTags}
          selected={selectedTags}
          onChange={setSelectedTags}
        />
        <input
          type="text"
          placeholder="Search ASINs (comma-separated)"
          value={asinSearch}
          onChange={e => setAsinSearch(e.target.value)}
          className="bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 w-64"
        />
        {loading && (
          <div className="flex items-center gap-2 text-slate-400 text-sm">
            <div className="w-4 h-4 border-2 border-slate-600 border-t-indigo-400 rounded-full animate-spin"></div>
            Loading...
          </div>
        )}
        {error && <span className="text-red-400 text-sm">Error: {error}</span>}
        <span className="text-slate-500 text-xs ml-auto">{vendorRows.length.toLocaleString()} daily records</span>
      </div>

      {/* 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">BSR Detail Category Rank (Weekly Avg)</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={bsrData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
            <XAxis dataKey="weekLabel" 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>

      {/* Ratings & Reviews 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 & Reviews (Weekly)</h3>
        <p className="text-xs text-slate-500 mb-3">Averaged across all filtered ASINs and markets.</p>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={ratingData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
              <XAxis dataKey="weekLabel" 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' }}
              />
              <Line type="monotone" dataKey="avg_rating" name="Avg Rating" stroke="#f59e0b" strokeWidth={2} dot={false} connectNulls />
            </LineChart>
          </ResponsiveContainer>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={ratingData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
              <XAxis dataKey="weekLabel" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
              <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} />
              <Tooltip
                contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                labelStyle={{ color: '#e2e8f0' }}
              />
              <Bar dataKey="num_reviews" name="Avg Reviews" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Buy Box 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">Amazon Buy Box Ownership (Weekly %)</h3>
        <p className="text-xs text-slate-500 mb-3">Percentage of daily records where Amazon holds the Buy Box, per market.</p>
        <ResponsiveContainer width="100%" height={350}>
          <BarChart data={buyBoxData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
            <XAxis dataKey="weekLabel" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
            <YAxis domain={[0, 100]} tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={(v) => `${v}%`} />
            <Tooltip
              contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
              labelStyle={{ color: '#e2e8f0' }}
              formatter={(value: number) => `${value}%`}
            />
            <Legend />
            {activeMarkets.map(m => (
              <Bar
                key={m}
                dataKey={`${m}_pct`}
                name={`${m} Amazon BB %`}
                fill={MARKET_COLORS[m] || '#6b7280'}
                radius={[4, 4, 0, 0]}
              />
            ))}
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default VendorDataView;