import { Building2 } from "lucide-react";
import { useState, useEffect } from "react";
import { EditWorkExperienceModal } from "./EditWorkExperienceModal";
import { api } from "@/services/api";

export function WorkExperienceCard({ user }: { user: any }) {
  const experiences = user?.experiences || [];
  
  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingExp, setEditingExp] = useState<any>(null);
  
  // Skills state
  const [allSkills, setAllSkills] = useState<any[]>([]);

  useEffect(() => {
    api.get('/skills')
      .then(res => setAllSkills(res.data || []))
      .catch(console.error);
  }, []);

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

  const handleEdit = (exp: any) => {
    setEditingExp(exp);
    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">Work Experience</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-6 bottom-6 w-0.5 bg-gray-200"></div>

        <div className="flex flex-col gap-10">
          {experiences.length > 0 ? experiences.map((exp: any, index: number) => (
            <div key={exp.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 items-start justify-between">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-[#fff2ed] rounded-xl flex items-center justify-center shrink-0 mt-1">
                    <Building2 className="w-6 h-6 text-[#ff6b00]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-gray-900 text-[17px]">{exp.job_title || exp.designation}</h4>
                    <div className="text-[#ff6b00] font-medium text-sm mt-0.5">{exp.company_name || exp.company}</div>
                    
                    {/* Job Role */}
                    {(exp.job_role || exp.department) && (
                      <div className="mt-4">
                        <div className="text-gray-400 text-xs font-medium uppercase tracking-wider mb-1">Job role</div>
                        <div className="text-gray-800 text-sm font-medium">{exp.job_role || exp.department}</div>
                      </div>
                    )}

                    {/* Skill */}
                    {exp.skills && (
                      <div className="mt-4">
                        <div className="text-gray-400 text-xs font-medium uppercase tracking-wider mb-1">Skill</div>
                        <div className="text-gray-800 text-sm font-medium">
                          {Array.isArray(exp.skills) 
                            ? exp.skills.map((skillItem: any) => {
                                // If it's a number (ID), look it up. Otherwise (if it's already an object or string), use it.
                                const isId = typeof skillItem === 'number' || (typeof skillItem === 'string' && !isNaN(Number(skillItem)));
                                if (isId && allSkills.length > 0) {
                                  const found = allSkills.find(s => s.id === Number(skillItem));
                                  return found ? found.skill_name : skillItem;
                                }
                                return typeof skillItem === 'object' ? (skillItem.skill_name || skillItem.name) : skillItem;
                              }).join(', ') 
                            : exp.skills}
                        </div>
                      </div>
                    )}
                    
                    <div className="mt-4 flex flex-col gap-2">
                      <div className="flex items-center gap-1.5 flex-wrap">
                        <span className="text-[#ff6b00] text-sm font-medium">{exp.employment_type || exp.job_type || 'Full Time'}</span>
                        <span className="text-[#ff6b00] text-sm font-medium px-1">|</span>
                        <span className="text-[#ff6b00] text-sm font-medium">
                          {new Date(exp.start_date).toLocaleDateString(undefined, {month:'short', year:'numeric'})} - 
                          {exp.current ? ' Present' : exp.end_date ? ` ${new Date(exp.end_date).toLocaleDateString(undefined, {month:'short', year:'numeric'})}` : ''}
                        </span>
                      </div>
                      
                      {/* Notice Period */}
                      {exp.notice_period && (
                        <div>
                          <span className="px-3 py-1 bg-gray-200 text-gray-700 rounded-md text-xs font-medium inline-block">
                            {exp.notice_period}
                          </span>
                        </div>
                      )}
                    </div>
                    
                    <p className="mt-4 text-sm text-gray-500 leading-relaxed max-w-2xl whitespace-pre-line">
                      {exp.description || exp.responsibilities || 'No description provided.'}
                    </p>
                  </div>
                </div>

                <button onClick={() => handleEdit(exp)} className="text-sm font-medium text-[#ff6b00] hover:underline pt-1 px-2">
                  Edit
                </button>
              </div>
            </div>
          )) : (
            <div className="text-gray-500 text-sm">No work experience added yet.</div>
          )}
        </div>
      </div>

      {isModalOpen && (
        <EditWorkExperienceModal 
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          experience={editingExp}
        />
      )}
    </div>
  );
}