import { useState, useEffect } from 'react';
import { Download, Trash2, RefreshCw, AlertCircle } from 'lucide-react';
import jsPDF from 'jspdf';

export default function ClusterCalculator() {
  const [grades, setGrades] = useState({
    mathematics: '',
    english: '',
    kiswahili: '',
    chemistry: '',
    biology: '',
    physics: '',
    geography: '',
    history: '',
    cre: '',
    ire: '',
    hre: '',
    homeScience: '',
    agriculture: '',
    computerStudies: '',
    aviation: '',
    woodwork: '',
    metalwork: '',
    building: '',
    art: '',
    business: '',
    german: '',
    french: '',
    music: '',
  });

  const [totalPoints, setTotalPoints] = useState('');
  const [clusterPoints, setClusterPoints] = useState(null);
  const [error, setError] = useState('');
  const [isCalculating, setIsCalculating] = useState(false);

  const gradeToPoints = {
    'A': 12,
    'A-': 11,
    'B+': 10,
    'B': 9,
    'B-': 8,
    'C+': 7,
    'C': 6,
    'C-': 5,
    'D+': 4,
    'D': 3,
    'D-': 2,
    'E': 1
  };

  const subjectGroups = {
    compulsory: ['mathematics', 'english', 'kiswahili'],
    sciences: ['chemistry', 'biology', 'physics'],
    humanities: ['geography', 'history', 'cre', 'ire', 'hre'],
    technical: ['homeScience', 'agriculture', 'computerStudies', 'aviation', 'woodwork', 'metalwork', 'building', 'art'],
    others: ['business', 'german', 'french', 'music']
  };

  const handleGradeChange = (subject, value) => {
    setGrades(prev => ({
      ...prev,
      [subject]: value
    }));
    setError('');
  };

  const validateInputs = () => {
    const selectedSubjects = Object.entries(grades).filter(([_, grade]) => grade !== '').length;
    if (selectedSubjects < 7) {
      setError('Please select at least 7 subjects including all compulsory subjects');
      return false;
    }
    if (!totalPoints) {
      setError('Please enter your total points');
      return false;
    }
    return true;
  };

  const getPoints = (subject) => grades[subject] ? gradeToPoints[grades[subject]] || 0 : 0;

  const getMaxPoints = (subjects) => {
    return Math.max(...subjects.map(subject => getPoints(subject)), 0);
  };

  const calculateCluster = (subjectSelections) => {
    const r = subjectSelections.reduce((sum, points) => sum + points, 0);
    const R = 48;
    const t = parseInt(totalPoints);
    const T = 84;

    if (!t || r === 0) return 0;
    return Math.sqrt((r/R) * (t/T)) * 48;
  };

  const calculateAllClusters = () => {
    if (!validateInputs()) return;

    setIsCalculating(true);
    const results = {};

    // Calculate for all 23 clusters
    // Example for a few clusters (you would implement all 23 following similar pattern):

    // Cluster 1
    results['Cluster 1'] = calculateCluster([
      Math.max(getPoints('english'), getPoints('kiswahili')),
      getPoints('mathematics'),
      getMaxPoints(['geography', 'history', 'cre', 'ire', 'hre']),
      getMaxPoints([...subjectGroups.sciences, ...subjectGroups.humanities, ...subjectGroups.technical, ...subjectGroups.others])
    ]);

    // Cluster 2
    results['Cluster 2'] = calculateCluster([
      Math.max(getPoints('english'), getPoints('kiswahili')),
      getPoints('mathematics'),
      getMaxPoints([...subjectGroups.sciences, ...subjectGroups.humanities]),
      getMaxPoints([...subjectGroups.sciences, ...subjectGroups.humanities, ...subjectGroups.technical, ...subjectGroups.others])
    ]);

    // Add calculations for remaining clusters...

    setClusterPoints(results);
    setIsCalculating(false);
  };

  const downloadPDF = () => {
    const doc = new jsPDF();
    doc.setFontSize(16);
    doc.text('KCSE Cluster Points Results', 20, 20);
    
    doc.setFontSize(12);
    let yPos = 40;
    
    Object.entries(clusterPoints).forEach(([cluster, points]) => {
      doc.text(`${cluster}: ${points.toFixed(4)}`, 20, yPos);
      yPos += 10;
    });
    
    doc.save('cluster-points.pdf');
  };

  const clearAll = () => {
    setGrades({});
    setTotalPoints('');
    setClusterPoints(null);
    setError('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-8 px-4 animate-fadeIn">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl">
          <h1 className="text-3xl font-bold text-gray-800 mb-8 text-center">
            KCSE Cluster Points Calculator
          </h1>

          {error && (
            <div className="mb-6 p-4 bg-red-50 rounded-lg flex items-center gap-2 text-red-700">
              <AlertCircle className="w-5 h-5" />
              <p>{error}</p>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Group I: Compulsory Subjects */}
            <div className="space-y-4 p-4 bg-blue-50 rounded-lg transition-all duration-300 hover:bg-blue-100">
              <h2 className="text-xl font-semibold text-gray-700">Group I: Compulsory</h2>
              {subjectGroups.compulsory.map(subject => (
                <div key={subject} className="space-y-2">
                  <label className="block text-sm font-medium text-gray-700 capitalize">
                    {subject.replace(/([A-Z])/g, ' $1').trim()}
                  </label>
                  <select
                    value={grades[subject]}
                    onChange={(e) => handleGradeChange(subject, e.target.value)}
                    className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all duration-300"
                  >
                    <option value="">Select Grade</option>
                    {Object.keys(gradeToPoints).map(grade => (
                      <option key={grade} value={grade}>{grade}</option>
                    ))}
                  </select>
                </div>
              ))}
            </div>

            {/* Group II: Sciences */}
            <div className="space-y-4 p-4 bg-green-50 rounded-lg transition-all duration-300 hover:bg-green-100">
              <h2 className="text-xl font-semibold text-gray-700">Group II: Sciences</h2>
              {subjectGroups.sciences.map(subject => (
                <div key={subject} className="space-y-2">
                  <label className="block text-sm font-medium text-gray-700 capitalize">
                    {subject.replace(/([A-Z])/g, ' $1').trim()}
                  </label>
                  <select
                    value={grades[subject]}
                    onChange={(e) => handleGradeChange(subject, e.target.value)}
                    className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all duration-300"
                  >
                    <option value="">Select Grade</option>
                    {Object.keys(gradeToPoints).map(grade => (
                      <option key={grade} value={grade}>{grade}</option>
                    ))}
                  </select>
                </div>
              ))}
            </div>

            {/* Add remaining subject groups with similar styling */}

            <div className="col-span-full mt-6">
              <label className="block text-sm font-medium text-gray-700">
                Total Points
              </label>
              <input
                type="number"
                value={totalPoints}
                onChange={(e) => setTotalPoints(e.target.value)}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all duration-300"
                placeholder="Enter total points"
              />
            </div>

            <div className="col-span-full mt-6 flex gap-4">
              <button
                onClick={calculateAllClusters}
                disabled={isCalculating}
                className={`flex-1 bg-blue-600 text-white px-6 py-3 rounded-lg transition-all duration-300 
                  ${isCalculating ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700 hover:shadow-lg'}`}
              >
                {isCalculating ? 'Calculating...' : 'Calculate Cluster Points'}
              </button>
              <button
                onClick={clearAll}
                className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-300"
              >
                <RefreshCw className="w-5 h-5" />
              </button>
              {clusterPoints && (
                <button
                  onClick={downloadPDF}
                  className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-300"
                >
                  <Download className="w-5 h-5" />
                </button>
              )}
            </div>

            {clusterPoints && (
              <div className="col-span-full mt-8 animate-fadeIn">
                <h2 className="text-2xl font-semibold text-gray-800 mb-4">Results</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {Object.entries(clusterPoints).map(([cluster, points]) => (
                    <div key={cluster} 
                      className="bg-white p-4 rounded-lg shadow transition-all duration-300 hover:shadow-md hover:transform hover:-translate-y-1">
                      <h3 className="font-medium text-gray-700">{cluster}</h3>
                      <p className="text-2xl font-bold text-blue-600">
                        {points.toFixed(4)}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}