import { Award } from "lucide-react";
import { useState } from "react";
import { EditCertificationModal } from "./EditCertificationModal";

export function CertificationCard({ user }: { user: any }) {
  const certifications = user?.certifications || [];
  
  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingCert, setEditingCert] = useState<any>(null);

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

  const handleEdit = (cert: any) => {
    setEditingCert(cert);
    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">Certifications</h3>
        <button onClick={handleAdd} className="text-sm font-medium text-[#ff6b00] hover:underline flex items-center">
          +Add
        </button>
      </div>

      <div className="border border-gray-200 rounded-xl p-4">
        <div className="flex justify-between items-center mb-4">
          <div className="text-sm text-gray-500 font-medium">
            {certifications.length} certifications are added
          </div>
        </div>

        <div className="flex flex-col gap-4">
          {certifications.map((cert: any) => (
            <div key={cert.id} className="flex justify-between items-center border border-gray-100 p-3 rounded-lg hover:border-orange-100 bg-white group">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-[#fff2ed] rounded-lg flex items-center justify-center shrink-0">
                  <Award className="w-4 h-4 text-[#ff6b00]" />
                </div>
                <div>
                  <div className="font-medium text-gray-900 text-sm">
                    {cert.certification_name}
                  </div>
                  {cert.certification_provider && (
                    <div className="text-gray-500 text-xs mt-0.5">
                      {cert.certification_provider}
                    </div>
                  )}
                  {(cert.issue_date || cert.expiry_date) && (
                    <div className="text-gray-400 text-[11px] mt-0.5 flex gap-2">
                      {cert.issue_date && <span>Issued: {new Date(cert.issue_date).toLocaleDateString(undefined, { year: 'numeric', month: 'short' })}</span>}
                      {cert.expiry_date && <span>Expires: {new Date(cert.expiry_date).toLocaleDateString(undefined, { year: 'numeric', month: 'short' })}</span>}
                    </div>
                  )}
                </div>
              </div>
              <button 
                onClick={() => handleEdit(cert)} 
                className="text-xs font-medium text-[#ff6b00] opacity-0 group-hover:opacity-100 transition-opacity hover:underline px-2"
              >
                Edit
              </button>
            </div>
          ))}
          {certifications.length === 0 && (
            <div className="text-gray-500 text-sm py-2">
              No certifications added yet.
            </div>
          )}
        </div>
      </div>

      <EditCertificationModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        certification={editingCert}
      />
    </div>
  );
}