import React, { useState, useEffect } from 'react';
import Papa from 'papaparse';
import _ from 'lodash';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

const KeywordAnalysis = () => {
  const [data, setData] = useState([]);
  const [topUrls, setTopUrls] = useState([]);
  const [topThemes, setTopThemes] = useState([]);
  const [activeTab, setActiveTab] = useState('top-urls');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await window.fs.readFile('Untitled spreadsheet  Sheet1 6.csv', { encoding: 'utf8' });
        
        Papa.parse(response, {
          header: true,
          dynamicTyping: true,
          skipEmptyLines: true,
          complete: (results) => {
            // Filter out rows with missing URLs or keywords
            const validData = results.data.filter(row => row.URL && row.Keyword);
            setData(validData);
            
            // Process the data
            processData(validData);
            setIsLoading(false);
          },
          error: (error) => {
            console.error('Error parsing CSV:', error);
            setIsLoading(false);
          }
        });
      } catch (error) {
        console.error('Error reading file:', error);
        setIsLoading(false);
      }
    };
    
    fetchData();
  }, []);

  const processData = (validData) => {
    // Group by URL
    const keywordsByURL = _.groupBy(validData, 'URL');
    
    // Extract topics from URLs
    const urlTopicsAndKeywords = Object.keys(keywordsByURL).map(url => {
      const keywords = keywordsByURL[url];
      const topic = extractTopicFromURL(url);
      
      // Sort keywords by search volume
      const sortedKeywords = _.sortBy(keywords, k => -(k['Search Volume'] || 0));
      
      // Calculate total traffic for this URL
      const totalTraffic = _.sumBy(keywords, 'Traffic') || 0;
      
      // Calculate average position
      const avgPosition = _.meanBy(keywords, 'Position') || 0;
      
      return {
        url,
        topic,
        totalTraffic,
        avgPosition: avgPosition.toFixed(1),
        keywordCount: keywords.length,
        topKeywords: sortedKeywords.slice(0, 5).map(k => ({
          keyword: k.Keyword,
          volume: k['Search Volume'] || 0,
          position: k.Position || 0,
          traffic: k.Traffic || 0
        }))
      };
    });
    
    // Sort by total traffic
    const sortedURLsAndTopics = _.sortBy(urlTopicsAndKeywords, item => -item.totalTraffic);
    setTopUrls(sortedURLsAndTopics.slice(0, 15));
    
    // Extract common themes
    const topicWords = {};
    sortedURLsAndTopics.slice(0, 30).forEach(item => {
      const words = item.topic.toLowerCase().split(' ');
      words.forEach(word => {
        if (word.length > 3 && !['with', 'your', 'what', 'from', 'have', 'this', 'that', 'does'].includes(word)) {
          if (!topicWords[word]) {
            topicWords[word] = {
              count: 0,
              totalTraffic: 0,
              urls: []
            };
          }
          topicWords[word].count++;
          topicWords[word].totalTraffic += item.totalTraffic;
          if (!topicWords[word].urls.includes(item.url)) {
            topicWords[word].urls.push(item.url);
          }
        }
      });
    });
    
    // Sort themes by traffic
    const sortedThemes = Object.entries(topicWords)
      .filter(([_, data]) => data.count >= 2)
      .sort((a, b) => b[1].totalTraffic - a[1].totalTraffic)
      .map(([theme, data]) => ({
        theme,
        count: data.count,
        traffic: data.totalTraffic,
        urlCount: data.urls.length
      }));
    
    setTopThemes(sortedThemes.slice(0, 15));
  };
  
  const extractTopicFromURL = (url) => {
    try {
      const urlObj = new URL(url);
      const pathSegments = urlObj.pathname.split('/').filter(Boolean);
      const lastSegment = pathSegments[pathSegments.length - 1];
      
      const cleanTitle = lastSegment
        .replace(/^\d+-/, '')
        .replace(/-/g, ' ');
      
      return cleanTitle;
    } catch (e) {
      return "Unknown topic";
    }
  };
  
  // Colors for charts
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82ca9d', '#ffc658', '#8dd1e1'];

  if (isLoading) {
    return (
      <div className="w-full p-6 bg-white rounded shadow">
        <h2 className="text-xl font-bold">Loading data...</h2>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="w-full p-6 bg-white rounded shadow">
        <div className="mb-4">
          <h2 className="text-2xl font-bold">Keyword and Content Topic Analysis</h2>
          <p className="text-gray-600">
            Analysis of 832 keywords across {_.uniqBy(data, 'URL').length} unique URLs to identify content patterns
          </p>
        </div>
        
        <div className="mb-6">
          <div className="flex space-x-4 mb-4">
            <button 
              className={`px-4 py-2 rounded ${activeTab === 'top-urls' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
              onClick={() => setActiveTab('top-urls')}
            >
              Top Performing URLs
            </button>
            <button 
              className={`px-4 py-2 rounded ${activeTab === 'top-themes' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
              onClick={() => setActiveTab('top-themes')}
            >
              Content Themes
            </button>
          </div>
          
          {activeTab === 'top-urls' && (
            <div>
              <h3 className="text-lg font-medium mb-2">Top 15 URLs by Traffic</h3>
              
              {/* Chart for Top 10 URLs */}
              <div className="h-96 mb-8">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={topUrls.slice(0, 10)}
                    margin={{ top: 20, right: 30, left: 20, bottom: 120 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis 
                      dataKey="topic" 
                      angle={-45} 
                      textAnchor="end"
                      height={120}
                      interval={0}
                    />
                    <YAxis />
                    <Tooltip formatter={(value, name) => [value, name === 'totalTraffic' ? 'Traffic' : name]} />
                    <Legend />
                    <Bar dataKey="totalTraffic" fill="#0088FE" name="Traffic" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
              
              <h3 className="text-lg font-medium my-4">URL Details with Top Keywords</h3>
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white">
                  <thead>
                    <tr className="bg-gray-100 border-b">
                      <th className="text-left p-2">Topic</th>
                      <th className="text-left p-2">Traffic</th>
                      <th className="text-left p-2">Avg. Position</th>
                      <th className="text-left p-2">Top Keywords</th>
                    </tr>
                  </thead>
                  <tbody>
                    {topUrls.map((item, index) => (
                      <tr key={index} className="border-b">
                        <td className="p-2 font-medium">{item.topic}</td>
                        <td className="p-2">{item.totalTraffic}</td>
                        <td className="p-2">{item.avgPosition}</td>
                        <td className="p-2">
                          {item.topKeywords.map((kw, i) => (
                            <div key={i} className={i < 3 ? "font-medium" : ""}>
                              {kw.keyword} <span className="text-gray-500">(vol: {kw.volume}, pos: {kw.position})</span>
                            </div>
                          ))}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
          
          {activeTab === 'top-themes' && (
            <div>
              <h3 className="text-lg font-medium mb-2">Top Content Themes by Traffic</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                {/* Pie Chart for Theme Distribution */}
                <div className="h-96">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={topThemes.slice(0, 8)}
                        cx="50%"
                        cy="50%"
                        labelLine={true}
                        outerRadius={120}
                        fill="#8884d8"
                        dataKey="traffic"
                        nameKey="theme"
                        label={({name, percent}) => `${name} (${(percent * 100).toFixed(0)}%)`}
                      >
                        {topThemes.slice(0, 8).map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value, name, props) => [value, props.payload.theme]} />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                
                {/* Bar Chart for Theme Count */}
                <div className="h-96">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={topThemes}
                      margin={{ top: 20, right: 30, left: 20, bottom: 80 }}
                      layout="vertical"
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis type="number" />
                      <YAxis 
                        dataKey="theme" 
                        type="category" 
                        width={100}
                        tick={{ fontSize: 12 }}
                      />
                      <Tooltip />
                      <Legend />
                      <Bar dataKey="count" fill="#00C49F" name="Occurrence Count" />
                      <Bar dataKey="urlCount" fill="#FFBB28" name="URL Count" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
              
              <h3 className="text-lg font-medium my-4">Content Theme Details</h3>
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white">
                  <thead>
                    <tr className="bg-gray-100 border-b">
                      <th className="text-left p-2">Theme</th>
                      <th className="text-left p-2">Traffic</th>
                      <th className="text-left p-2">Occurrence Count</th>
                      <th className="text-left p-2">URL Count</th>
                    </tr>
                  </thead>
                  <tbody>
                    {topThemes.map((theme, index) => (
                      <tr key={index} className="border-b">
                        <td className="p-2 font-medium">{theme.theme}</td>
                        <td className="p-2">{theme.traffic}</td>
                        <td className="p-2">{theme.count}</td>
                        <td className="p-2">{theme.urlCount}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
        
        <div className="border-t pt-4">
          <p className="text-sm text-gray-500">
            Use these insights to guide content creation for klodubean.com by focusing on high-traffic themes and keyword patterns.
          </p>
        </div>
      </div>
    </div>
  );
};

export default KeywordAnalysis;
        <!-- Kloudbean Edge-Pages Vists tracking snippet -->
        <script>
        var _paq = window._paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            var u='//visits.kloudbean.com/';
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '84']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
        </script>
        <!-- End Edge-Pages Snippet -->