import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Timeline, LineChart, Line } from 'recharts';
import { Film, User, Calendar, Award, TrendingUp } from 'lucide-react';

const Dashboard = () => {
  const [selectedDirector, setSelectedDirector] = useState(null);

  // Director movie count data
  const directorData = [
    { name: 'Lilly Wachowski', count: 5, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A5#this' },
    { name: 'Lana Wachowski', count: 5, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A6#this' },
    { name: 'Ron Howard', count: 3, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A115#this' },
    { name: 'Rob Reiner', count: 3, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A27#this' },
    { name: 'Robert Zemeckis', count: 2, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A151#this' }
  ];

  // Movie details by director
  const moviesByDirector = {
    'Lana Wachowski': [
      { title: 'The Matrix', year: 1999, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A0#this' },
      { title: 'The Matrix Reloaded', year: 2003, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A9#this' },
      { title: 'The Matrix Revolutions', year: 2003, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A10#this' },
      { title: 'Speed Racer', year: 2008, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A121#this' },
      { title: 'Cloud Atlas', year: 2012, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A105#this' }
    ],
    'Lilly Wachowski': [
      { title: 'The Matrix', year: 1999, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A0#this' },
      { title: 'The Matrix Reloaded', year: 2003, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A9#this' },
      { title: 'The Matrix Revolutions', year: 2003, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A10#this' },
      { title: 'Speed Racer', year: 2008, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A121#this' },
      { title: 'Cloud Atlas', year: 2012, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A105#this' }
    ],
    'Rob Reiner': [
      { title: 'Stand By Me', year: 1986, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A46#this' },
      { title: 'A Few Good Men', year: 1992, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A15#this' },
      { title: 'When Harry Met Sally', year: 1998, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A81#this' }
    ],
    'Robert Zemeckis': [
      { title: 'Cast Away', year: 2000, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A150#this' },
      { title: 'The Polar Express', year: 2004, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A161#this' }
    ],
    'Ron Howard': [
      { title: 'Apollo 13', year: 1995, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A144#this' },
      { title: 'The Da Vinci Code', year: 2006, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A111#this' },
      { title: 'Frost/Nixon', year: 2008, uri: 'http://demo.openlinksw.com/neo4j-demo/4%3Ae59af592-6787-42d0-8f70-6a86711b5241%3A137#this' }
    ]
  };

  // Color palette for charts
  const colors = ['#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444'];

  // Helper function to create describe URL
  const createDescribeUrl = (uri) => {
    return `https://demo.openlinksw.com/describe?url=${encodeURIComponent(uri)}`;
  };

  // Custom tooltip for bar chart
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-white p-3 border border-gray-200 rounded-lg shadow-lg">
          <p className="font-semibold">{label}</p>
          <p className="text-blue-600">
            Movies Directed: <span className="font-bold">{payload[0].value}</span>
          </p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
      <div className="container mx-auto px-6 py-8">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="flex justify-center items-center gap-3 mb-4">
            <Film className="w-12 h-12 text-purple-400" />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
              Most Prolific Directors
            </h1>
          </div>
          <p className="text-gray-300 text-lg">Discover the directors with the most films in our Neo4j movie database</p>
        </div>

        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <div className="flex items-center gap-3">
              <User className="w-8 h-8 text-purple-400" />
              <div>
                <p className="text-2xl font-bold">5</p>
                <p className="text-gray-300 text-sm">Top Directors</p>
              </div>
            </div>
          </div>
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <div className="flex items-center gap-3">
              <Film className="w-8 h-8 text-cyan-400" />
              <div>
                <p className="text-2xl font-bold">18</p>
                <p className="text-gray-300 text-sm">Total Movies</p>
              </div>
            </div>
          </div>
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <div className="flex items-center gap-3">
              <Award className="w-8 h-8 text-green-400" />
              <div>
                <p className="text-2xl font-bold">5</p>
                <p className="text-gray-300 text-sm">Max Films/Director</p>
              </div>
            </div>
          </div>
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <div className="flex items-center gap-3">
              <Calendar className="w-8 h-8 text-yellow-400" />
              <div>
                <p className="text-2xl font-bold">1986-2012</p>
                <p className="text-gray-300 text-sm">Year Range</p>
              </div>
            </div>
          </div>
        </div>

        {/* Main Charts Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          {/* Bar Chart */}
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
              <TrendingUp className="w-6 h-6 text-purple-400" />
              Movies Directed
            </h2>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={directorData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
                <XAxis 
                  dataKey="name" 
                  stroke="#e5e7eb" 
                  angle={-45}
                  textAnchor="end"
                  height={80}
                  fontSize={12}
                />
                <YAxis stroke="#e5e7eb" />
                <Tooltip content={<CustomTooltip />} />
                <Bar dataKey="count" fill="#8B5CF6" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>

          {/* Pie Chart */}
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
              <Film className="w-6 h-6 text-cyan-400" />
              Distribution
            </h2>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={directorData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="count"
                >
                  {directorData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Director Details Table */}
        <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
            <User className="w-6 h-6 text-green-400" />
            Director Filmographies
          </h2>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {Object.entries(moviesByDirector).slice(0, 4).map(([director, movies]) => {
              const directorUri = directorData.find(d => d.name === director)?.uri;
              return (
                <div key={director} className="bg-white/5 rounded-lg p-4 border border-white/10">
                  <h3 className="text-xl font-semibold mb-3">
                    <a 
                      href={createDescribeUrl(directorUri)} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-purple-400 hover:text-purple-300 transition-colors underline decoration-2 underline-offset-2"
                    >
                      {director}
                    </a>
                    <span className="text-sm text-gray-400 ml-2">({movies.length} films)</span>
                  </h3>
                  <div className="space-y-2">
                    {movies.map((movie, idx) => (
                      <div key={idx} className="flex items-center justify-between">
                        <a 
                          href={createDescribeUrl(movie.uri)} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className="text-cyan-300 hover:text-cyan-200 transition-colors underline decoration-1 underline-offset-1"
                        >
                          {movie.title}
                        </a>
                        <span className="text-gray-400 text-sm">{movie.year}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Summary Stats */}
        <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 mt-8">
          <h2 className="text-xl font-bold mb-4">Key Insights</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div className="text-center">
              <p className="text-2xl font-bold text-purple-400">Wachowski Sisters</p>
              <p className="text-gray-300">Lead with 5 films each (The Matrix trilogy + Speed Racer + Cloud Atlas)</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-cyan-400">Collaborative Works</p>
              <p className="text-gray-300">The Wachowski sisters co-directed all their films together</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-green-400">Genre Diversity</p>
              <p className="text-gray-300">From sci-fi (Matrix) to drama (Apollo 13) to romance (When Harry Met Sally)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;