import { GraduationCap, BookOpen } from "lucide-react";
import { useState } from "react";
import { EditEducationModal } from "./EditEducationModal";

export function EducationCard({ user }: { user: any }) {
  const educations = user?.educations || [];
  
  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingEdu, setEditingEdu] = useState<any>(null);

  const handleAdd = () => {
    setEditingEdu(null);
    setIsModalOpen(true);
  };

  const handleEdit = (edu: any) => {
    setEditingEdu(edu);
    setIsModalOpen(true);
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative">
      <div className="flex items-center justify-between mb-6">
        <h3 className="font-semibold text-gray-900 text-lg">Education</h3>
        <button onClick={handleAdd} className="text-sm font-medium text-[#ff6b00] hover:underline flex items-center">
          +Add
        </button>
      </div>

      <div className="relative pl-6 sm:pl-8">
        {/* Continuous vertical timeline line */}
        <div className="absolute left-[19px] sm:left-[27px] top-4 bottom-4 w-0.5 bg-gray-200"></div>

        <div className="flex flex-col gap-8">
          {educations.length > 0 ? educations.map((edu: any) => {
            const isSchoolLevel = edu.level_of_education === "10th" || edu.level_of_education === "12th";

            return (
              <div key={edu.id} className="relative">
                {/* Timeline dot */}
                <div className="absolute -left-[30px] sm:-left-[38px] top-1 w-4 h-4 rounded-full border-4 border-white bg-gray-200 z-10"></div>
                
                <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-2 border border-gray-100 p-4 rounded-xl hover:border-orange-200 transition-colors bg-white">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-[#fff2ed] rounded-full flex items-center justify-center shrink-0 mt-0.5">
                      {isSchoolLevel ? <BookOpen className="w-5 h-5 text-[#ff6b00]" /> : <GraduationCap className="w-5 h-5 text-[#ff6b00]" />}
                    </div>
                    <div>
                      {isSchoolLevel ? (
                        <>
                          <h4 className="font-bold text-gray-900 text-[16px]">
                            {edu.level_of_education}
                          </h4>
                          <div className="text-gray-800 text-sm mt-1 font-medium">
                            {edu.institute_name}
                          </div>
                          <div className="text-gray-600 text-[13px] mt-1">
                            {edu.examination_board} {edu.examination_board && edu.medium_of_study && <span className="text-gray-300 mx-1">•</span>} {edu.medium_of_study && `${edu.medium_of_study} Medium`}
                          </div>
                          <div className="mt-3 flex items-center gap-1.5 flex-wrap">
                            <span className="text-[#ff6b00] text-[13px] font-semibold">
                              {edu.marks ? `${edu.marks}%` : 'No Marks'}
                            </span>
                            <span className="text-gray-400 text-[13px]">|</span>
                            <span className="text-gray-500 text-[13px] font-medium">Class of {edu.end_year || 'Unknown'}</span>
                          </div>
                        </>
                      ) : (
                        <>
                          <h4 className="font-bold text-gray-900 text-[16px]">
                            {edu.level_of_education} {edu.degree ? ` | ${edu.degree}` : ''} {edu.specialization ? ` (${edu.specialization})` : ''}
                          </h4>
                          <div className="text-gray-800 text-sm mt-1 font-medium">
                            {edu.institute_name}
                          </div>
                          {edu.grading_system && (
                            <div className="text-gray-600 text-[13px] mt-1">
                              {edu.grading_system}: <span className="font-medium text-gray-800">{edu.marks}</span>
                            </div>
                          )}
                          <div className="mt-3 flex items-center gap-1.5 flex-wrap">
                            <span className="text-[#ff6b00] text-[13px] font-semibold">
                              {edu.start_year || ''} - {edu.end_year || 'Present'}
                            </span>
                            <span className="text-gray-400 text-[13px]">|</span>
                            <span className="text-gray-500 text-[13px] font-medium">{edu.education_type || 'Full-time'}</span>
                          </div>
                        </>
                      )}
                    </div>
                  </div>

                  <button onClick={() => handleEdit(edu)} className="text-sm font-medium text-[#ff6b00] hover:underline sm:pt-1 px-2 self-start sm:self-auto ml-[56px] sm:ml-0">
                    Edit
                  </button>
                </div>
              </div>
            );
          }) : (
            <div className="text-gray-500 text-sm">No education history added yet.</div>
          )}
        </div>
      </div>

      {isModalOpen && (
        <EditEducationModal 
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          education={editingEdu}
          existingEducations={educations}
        />
      )}
    </div>
  );
}