import React, { useState } from 'react';
import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Download, RefreshCw, TrendingUp, CheckCircle, Clock, AlertCircle } from 'lucide-react';

const JiraEpicDashboard = () => {
  const [jiraUrl, setJiraUrl] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [epicKey, setEpicKey] = useState('');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState('');

  const fetchEpicData = async () => {
    setLoading(true);
    setError('');
    
    try {
      const baseUrl = jiraUrl.replace(/\/$/, '');
      const auth = btoa(`${username}:${password}`);
      
      // First, get the epic details
      const epicResponse = await fetch(`${baseUrl}/rest/api/3/issue/${epicKey}`, {
        headers: {
          'Authorization': `Basic ${auth}`,
          'Accept': 'application/json'
        }
      });
      
      if (!epicResponse.ok) {
        throw new Error(`Failed to fetch epic: ${epicResponse.status}`);
      }
      
      const epicData = await epicResponse.json();
      
      // Then get all issues in the epic
      const jql = `"Epic Link" = ${epicKey} OR parent = ${epicKey}`;
      const searchResponse = await fetch(
        `${baseUrl}/rest/api/3/search?jql=${encodeURIComponent(jql)}&maxResults=1000&fields=summary,status,assignee,priority,timetracking,customfield_10016,issuetype`,
        {
          headers: {
            'Authorization': `Basic ${auth}`,
            'Accept': 'application/json'
          }
        }
      );
      
      if (!searchResponse.ok) {
        throw new Error(`Failed to fetch issues: ${searchResponse.status}`);
      }
      
      const searchData = await searchResponse.json();
      
      // Process the data
      processData(epicData, searchData.issues);
      
    } catch (err) {
      setError(err.message);
      console.error('Error fetching data:', err);
    } finally {
      setLoading(false);
    }
  };

  const processData = (epic, issues) => {
    const statusCounts = {};
    const typeCounts = {};
    const assigneeCounts = {};
    let totalStoryPoints = 0;
    let completedStoryPoints = 0;
    let totalOriginalEstimate = 0;
    let totalRemainingEstimate = 0;
    let totalTimeSpent = 0;

    issues.forEach(issue => {
      const status = issue.fields.status.name;
      const type = issue.fields.issuetype.name;
      const assignee = issue.fields.assignee?.displayName || 'Unassigned';
      
      // Count by status
      statusCounts[status] = (statusCounts[status] || 0) + 1;
      
      // Count by type
      typeCounts[type] = (typeCounts[type] || 0) + 1;
      
      // Count by assignee
      assigneeCounts[assignee] = (assigneeCounts[assignee] || 0) + 1;
      
      // Story points (customfield_10016 is common for story points, may vary)
      const storyPoints = issue.fields.customfield_10016 || 0;
      totalStoryPoints += storyPoints;
      
      if (status === 'Done' || status === 'Closed') {
        completedStoryPoints += storyPoints;
      }
      
      // Time tracking
      if (issue.fields.timetracking) {
        totalOriginalEstimate += issue.fields.timetracking.originalEstimateSeconds || 0;
        totalRemainingEstimate += issue.fields.timetracking.remainingEstimateSeconds || 0;
        totalTimeSpent += issue.fields.timetracking.timeSpentSeconds || 0;
      }
    });

    const statusData = Object.entries(statusCounts).map(([name, value]) => ({
      name,
      value
    }));

    const typeData = Object.entries(typeCounts).map(([name, value]) => ({
      name,
      value
    }));

    const assigneeData = Object.entries(assigneeCounts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 10)
      .map(([name, value]) => ({
        name,
        value
      }));

    setData({
      epicName: epic.fields.summary,
      epicKey: epic.key,
      totalIssues: issues.length,
      statusData,
      typeData,
      assigneeData,
      storyPoints: {
        total: totalStoryPoints,
        completed: completedStoryPoints,
        remaining: totalStoryPoints - completedStoryPoints
      },
      timeTracking: {
        originalEstimate: totalOriginalEstimate / 3600,
        remaining: totalRemainingEstimate / 3600,
        spent: totalTimeSpent / 3600
      },
      issues: issues.map(i => ({
        key: i.key,
        summary: i.fields.summary,
        status: i.fields.status.name,
        assignee: i.fields.assignee?.displayName || 'Unassigned',
        type: i.fields.issuetype.name
      }))
    });
  };

  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D', '#FFC658', '#FF6B9D'];

  const exportToCSV = () => {
    if (!data) return;
    
    const csv = [
      ['Key', 'Summary', 'Status', 'Assignee', 'Type'],
      ...data.issues.map(i => [i.key, i.summary, i.status, i.assignee, i.type])
    ].map(row => row.join(',')).join('\n');
    
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${data.epicKey}_export.csv`;
    a.click();
  };

  if (!data) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
        <div className="max-w-2xl mx-auto">
          <div className="bg-white rounded-lg shadow-lg p-8">
            <h1 className="text-3xl font-bold text-gray-800 mb-6">Jira Epic Dashboard</h1>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Jira URL (e.g., https://jira.yourcompany.com)
                </label>
                <input
                  type="text"
                  value={jiraUrl}
                  onChange={(e) => setJiraUrl(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="https://jira.yourcompany.com"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Windows Username (e.g., DOMAIN\username)
                </label>
                <input
                  type="text"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="DOMAIN\username"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Password
                </label>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Your Windows password"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Epic Key (e.g., PROJ-123)
                </label>
                <input
                  type="text"
                  value={epicKey}
                  onChange={(e) => setEpicKey(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="PROJ-123"
                />
              </div>
              
              {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
                  {error}
                </div>
              )}
              
              <button
                onClick={fetchEpicData}
                disabled={loading || !jiraUrl || !username || !password || !epicKey}
                className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
              >
                {loading ? (
                  <>
                    <RefreshCw className="animate-spin" size={20} />
                    Loading...
                  </>
                ) : (
                  'Fetch Epic Data'
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const completionPercentage = data.storyPoints.total > 0 
    ? Math.round((data.storyPoints.completed / data.storyPoints.total) * 100)
    : 0;

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-3xl font-bold text-gray-800">{data.epicName}</h1>
              <p className="text-gray-600 mt-1">{data.epicKey}</p>
            </div>
            <div className="flex gap-3">
              <button
                onClick={exportToCSV}
                className="bg-green-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-green-700 transition-colors flex items-center gap-2"
              >
                <Download size={20} />
                Export CSV
              </button>
              <button
                onClick={() => setData(null)}
                className="bg-gray-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-gray-700 transition-colors flex items-center gap-2"
              >
                <RefreshCw size={20} />
                New Query
              </button>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-gray-600 text-sm">Total Issues</p>
                <p className="text-3xl font-bold text-gray-800 mt-1">{data.totalIssues}</p>
              </div>
              <AlertCircle className="text-blue-600" size={40} />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-gray-600 text-sm">Story Points</p>
                <p className="text-3xl font-bold text-gray-800 mt-1">{data.storyPoints.total}</p>
                <p className="text-sm text-gray-500">{data.storyPoints.completed} completed</p>
              </div>
              <TrendingUp className="text-green-600" size={40} />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-gray-600 text-sm">Completion</p>
                <p className="text-3xl font-bold text-gray-800 mt-1">{completionPercentage}%</p>
              </div>
              <CheckCircle className="text-purple-600" size={40} />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-gray-600 text-sm">Time Remaining</p>
                <p className="text-3xl font-bold text-gray-800 mt-1">{data.timeTracking.remaining.toFixed(1)}h</p>
                <p className="text-sm text-gray-500">{data.timeTracking.spent.toFixed(1)}h spent</p>
              </div>
              <Clock className="text-orange-600" size={40} />
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Issues by Status</h2>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={data.statusData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {data.statusData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Issues by Type</h2>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={data.typeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="value" fill="#8884d8" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Top Assignees</h2>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={data.assigneeData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" angle={-45} textAnchor="end" height={100} />
              <YAxis />
              <Tooltip />
              <Bar dataKey="value" fill="#00C49F" />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">All Issues</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b-2 border-gray-200">
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Key</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Summary</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Status</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Assignee</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Type</th>
                </tr>
              </thead>
              <tbody>
                {data.issues.map((issue, index) => (
                  <tr key={issue.key} className={index % 2 === 0 ? 'bg-gray-50' : ''}>
                    <td className="py-3 px-4 font-medium text-blue-600">{issue.key}</td>
                    <td className="py-3 px-4">{issue.summary}</td>
                    <td className="py-3 px-4">
                      <span className="px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                        {issue.status}
                      </span>
                    </td>
                    <td className="py-3 px-4">{issue.assignee}</td>
                    <td className="py-3 px-4">{issue.type}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default JiraEpicDashboard;