import React, { useState, useCallback } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, Area, AreaChart } from 'recharts';
import { Upload, Music, TrendingUp, Users, Heart, Calendar, PlayCircle, FileText, Download, AlertCircle } from 'lucide-react';

const CSVAnalyticsDashboard = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [fileName, setFileName] = useState('');
  const [showDashboard, setShowDashboard] = useState(false);

  const handleFileUpload = useCallback((event) => {
    const file = event.target.files[0];
    if (!file) return;

    if (!file.name.endsWith('.csv')) {
      setError('Please upload a CSV file');
      return;
    }

    setLoading(true);
    setError('');
    setFileName(file.name);

    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const csvContent = e.target.result;
        const Papa = await import('papaparse');
        const parsedData = Papa.parse(csvContent, {
          header: true,
          dynamicTyping: true,
          skipEmptyLines: true
        });

        if (parsedData.errors.length > 0) {
          setError('Error parsing CSV file');
          setLoading(false);
          return;
        }

        // Validate required columns for music data
        const requiredColumns = ['song', 'streams'];
        const columns = parsedData.meta.fields;
        const hasRequiredColumns = requiredColumns.every(col => columns.includes(col));

        if (!hasRequiredColumns) {
          setError('CSV must contain at least "song" and "streams" columns');
          setLoading(false);
          return;
        }

        setData(parsedData.data.filter(row => row.song && row.streams));
        setShowDashboard(true);
      } catch (err) {
        setError('Failed to process file');
      } finally {
        setLoading(false);
      }
    };

    reader.readAsText(file);
  }, []);

  const resetUpload = () => {
    setData([]);
    setShowDashboard(false);
    setFileName('');
    setError('');
  };

  if (showDashboard && data.length > 0) {
    return <Dashboard data={data} fileName={fileName} onReset={resetUpload} />;
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-purple-800 to-black flex items-center justify-center p-6">
      <div className="max-w-2xl w-full">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-6xl font-bold text-white mb-4 bg-gradient-to-r from-purple-400 to-white bg-clip-text text-transparent">
            CSV Analytics
          </h1>
          <p className="text-xl text-purple-200">Upload your CSV file and get instant music statistics</p>
        </div>

        {/* Upload Area */}
        <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-purple-500/30 shadow-2xl">
          <div className="text-center">
            <div className="mb-8">
              <FileText className="w-16 h-16 text-purple-400 mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-white mb-2">Upload Your CSV File</h2>
              <p className="text-purple-200">
                Your CSV should contain columns: <strong>song</strong>, <strong>streams</strong>, and optionally 
                <strong> listeners</strong>, <strong>saves</strong>, <strong>release_date</strong>
              </p>
            </div>

            <div className="relative">
              <input
                type="file"
                accept=".csv"
                onChange={handleFileUpload}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                disabled={loading}
              />
              <div className={`border-2 border-dashed border-purple-500/50 rounded-2xl p-12 transition-all duration-300 hover:border-purple-400 hover:bg-purple-500/10 ${loading ? 'opacity-50' : ''}`}>
                <Upload className="w-12 h-12 text-purple-400 mx-auto mb-4" />
                <p className="text-white text-lg font-medium">
                  {loading ? 'Processing...' : 'Click to upload or drag and drop'}
                </p>
                <p className="text-purple-300 text-sm mt-2">CSV files only</p>
              </div>
            </div>

            {error && (
              <div className="mt-6 p-4 bg-red-500/20 border border-red-500/50 rounded-xl flex items-center">
                <AlertCircle className="w-5 h-5 text-red-400 mr-2" />
                <span className="text-red-200">{error}</span>
              </div>
            )}

            {fileName && !error && (
              <div className="mt-6 p-4 bg-green-500/20 border border-green-500/50 rounded-xl">
                <span className="text-green-200">File uploaded: {fileName}</span>
              </div>
            )}
          </div>
        </div>

        {/* Sample CSV Format */}
        <div className="mt-8 bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-purple-500/20">
          <h3 className="text-lg font-semibold text-white mb-4">Sample CSV Format:</h3>
          <div className="bg-black/50 rounded-lg p-4 font-mono text-sm text-purple-200 overflow-x-auto">
            <div>song,listeners,streams,saves,release_date</div>
            <div>"Song Title 1",1000,500000,250,2023-08-02</div>
            <div>"Song Title 2",800,300000,180,2024-01-15</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Dashboard = ({ data, fileName, onReset }) => {
  const totalStreams = data.reduce((sum, song) => sum + (song.streams || 0), 0);
  const totalListeners = data.reduce((sum, song) => sum + (song.listeners || 0), 0);
  const totalSaves = data.reduce((sum, song) => sum + (song.saves || 0), 0);
  const avgStreams = totalStreams / data.length;

  const chartData = data.map(song => ({
    name: song.song.length > 15 ? song.song.substring(0, 15) + '...' : song.song,
    fullName: song.song,
    streams: song.streams || 0,
    listeners: song.listeners || 0,
    saves: song.saves || 0,
    releaseDate: song.release_date || 'Unknown'
  }));

  const timelineData = data
    .filter(song => song.release_date)
    .map(song => ({
      date: song.release_date,
      streams: song.streams || 0,
      name: song.song
    }))
    .sort((a, b) => new Date(a.date) - new Date(b.date));

  const COLORS = ['#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe', '#ede9fe', '#f3f4f6'];

  const formatNumber = (num) => {
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-purple-800 to-black p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2 bg-gradient-to-r from-purple-400 to-white bg-clip-text text-transparent">
              Analytics Dashboard
            </h1>
            <p className="text-purple-200">Data from: {fileName}</p>
          </div>
          <button
            onClick={onReset}
            className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-xl font-medium transition-all duration-200"
          >
            Upload New File
          </button>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <StatsCard 
            title="Total Streams" 
            value={formatNumber(totalStreams)} 
            icon={<PlayCircle className="w-8 h-8 text-purple-400" />}
          />
          <StatsCard 
            title="Total Listeners" 
            value={formatNumber(totalListeners)} 
            icon={<Users className="w-8 h-8 text-purple-400" />}
          />
          <StatsCard 
            title="Total Saves" 
            value={formatNumber(totalSaves)} 
            icon={<Heart className="w-8 h-8 text-purple-400" />}
          />
          <StatsCard 
            title="Average Streams" 
            value={formatNumber(Math.round(avgStreams))} 
            icon={<TrendingUp className="w-8 h-8 text-purple-400" />}
          />
        </div>

        {/* Charts Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          {/* Bar Chart */}
          <ChartCard title="Streams by Song" icon={<Music className="w-6 h-6 text-purple-400" />}>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#ffffff20" />
                <XAxis 
                  dataKey="name" 
                  stroke="#ffffff80"
                  fontSize={12}
                  angle={-45}
                  textAnchor="end"
                  height={80}
                />
                <YAxis stroke="#ffffff80" tickFormatter={formatNumber} />
                <Tooltip 
                  contentStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    border: '1px solid rgba(139, 92, 246, 0.5)',
                    borderRadius: '12px',
                    color: 'white'
                  }}
                  formatter={(value) => [formatNumber(value), 'Streams']}
                />
                <Bar dataKey="streams" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </ChartCard>

          {/* Pie Chart */}
          <ChartCard title="Stream Distribution" icon={<TrendingUp className="w-6 h-6 text-purple-400" />}>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={chartData}
                  cx="50%"
                  cy="50%"
                  outerRadius={100}
                  dataKey="streams"
                  nameKey="name"
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                >
                  {chartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip 
                  contentStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    border: '1px solid rgba(139, 92, 246, 0.5)',
                    borderRadius: '12px',
                    color: 'white'
                  }}
                  formatter={(value) => [formatNumber(value), 'Streams']}
                />
              </PieChart>
            </ResponsiveContainer>
          </ChartCard>
        </div>

        {/* Timeline Chart */}
        {timelineData.length > 0 && (
          <ChartCard title="Release Timeline" icon={<Calendar className="w-6 h-6 text-purple-400" />}>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={timelineData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#ffffff20" />
                <XAxis 
                  dataKey="date" 
                  stroke="#ffffff80"
                  tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', year: '2-digit' })}
                />
                <YAxis stroke="#ffffff80" tickFormatter={formatNumber} />
                <Tooltip 
                  contentStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    border: '1px solid rgba(139, 92, 246, 0.5)',
                    borderRadius: '12px',
                    color: 'white'
                  }}
                  formatter={(value) => [formatNumber(value), 'Streams']}
                />
                <Area 
                  type="monotone" 
                  dataKey="streams" 
                  stroke="#8b5cf6" 
                  fill="url(#colorStreams)" 
                  strokeWidth={3}
                />
                <defs>
                  <linearGradient id="colorStreams" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8}/>
                    <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.1}/>
                  </linearGradient>
                </defs>
              </AreaChart>
            </ResponsiveContainer>
          </ChartCard>
        )}

        {/* Data Table */}
        <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-purple-500/30">
          <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
            <FileText className="w-6 h-6 mr-2 text-purple-400" />
            Detailed Data
          </h3>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-purple-500/30">
                  <th className="text-left py-3 px-4 text-white font-semibold">Song</th>
                  <th className="text-right py-3 px-4 text-white font-semibold">Streams</th>
                  {data.some(song => song.listeners) && (
                    <th className="text-right py-3 px-4 text-white font-semibold">Listeners</th>
                  )}
                  {data.some(song => song.saves) && (
                    <th className="text-right py-3 px-4 text-white font-semibold">Saves</th>
                  )}
                  {data.some(song => song.release_date) && (
                    <th className="text-right py-3 px-4 text-white font-semibold">Release Date</th>
                  )}
                </tr>
              </thead>
              <tbody>
                {data.map((song, index) => (
                  <tr key={index} className="border-b border-purple-500/20 hover:bg-purple-500/10 transition-colors">
                    <td className="py-3 px-4 text-white font-medium">{song.song}</td>
                    <td className="py-3 px-4 text-right text-purple-300 font-bold">{formatNumber(song.streams || 0)}</td>
                    {data.some(s => s.listeners) && (
                      <td className="py-3 px-4 text-right text-purple-300">{formatNumber(song.listeners || 0)}</td>
                    )}
                    {data.some(s => s.saves) && (
                      <td className="py-3 px-4 text-right text-purple-300">{formatNumber(song.saves || 0)}</td>
                    )}
                    {data.some(s => s.release_date) && (
                      <td className="py-3 px-4 text-right text-purple-300">
                        {song.release_date ? new Date(song.release_date).toLocaleDateString('en-US') : 'Unknown'}
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

const StatsCard = ({ title, value, icon }) => (
  <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-purple-500/30">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-purple-200 text-sm">{title}</p>
        <p className="text-3xl font-bold text-white">{value}</p>
      </div>
      {icon}
    </div>
  </div>
);

const ChartCard = ({ title, icon, children }) => (
  <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-purple-500/30">
    <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
      {icon}
      <span className="ml-2">{title}</span>
    </h3>
    {children}
  </div>
);

export default CSVAnalyticsDashboard;