import { useState } from "react";
import { EditCareerPreferenceModal } from "./EditCareerPreferenceModal";

export function CareerPreferenceCard({ user }: { user: any }) {
  const profile = user?.seekerProfile;

  // Mock data to match screenshot if empty
  const prefLocation = profile?.preferred_location || "Odisha, Cuttack, Bhu...";
  const prefRole = profile?.preferred_role || "Flutter Developer, An...";
  const prefSalary = profile?.expected_salary ? `₹${profile.expected_salary}` : "₹4,50,000";
  const prefShift = profile?.preferred_shift || "Day";
  const jobType = profile?.preferred_job_type || "Permanent";
  const employmentType = profile?.preferred_employment_type || "Full Time";

  const [isEditModalOpen, setIsEditModalOpen] = useState(false);

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative mb-8">
      <button onClick={() => setIsEditModalOpen(true)} className="absolute top-4 right-4 text-sm font-medium text-[#ff6b00] hover:underline">
        Edit
      </button>

      <h3 className="font-semibold text-gray-900 text-lg mb-6">Career Preference</h3>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-4">
        <div>
          <div className="text-xs text-gray-500 mb-1">Preferred Location</div>
          <div className="font-medium text-gray-900 truncate" title={prefLocation}>{prefLocation}</div>
        </div>
        
        <div>
          <div className="text-xs text-gray-500 mb-1">Preferred Role</div>
          <div className="font-medium text-gray-900 truncate" title={prefRole}>{prefRole}</div>
        </div>
        
        <div>
          <div className="text-xs text-gray-500 mb-1">Preferred Salary</div>
          <div className="font-medium text-gray-900 truncate" title={prefSalary}>{prefSalary}</div>
        </div>
        
        <div>
          <div className="text-xs text-gray-500 mb-1">Preferred Shift</div>
          <div className="font-medium text-gray-900 truncate" title={prefShift}>{prefShift}</div>
        </div>
        
        <div>
          <div className="text-xs text-gray-500 mb-1">Job Type</div>
          <div className="font-medium text-gray-900 truncate" title={jobType}>{jobType}</div>
        </div>
        
        <div>
          <div className="text-xs text-gray-500 mb-1">Employment Type</div>
          <div className="font-medium text-gray-900 truncate" title={employmentType}>{employmentType}</div>
        </div>
      </div>

      <EditCareerPreferenceModal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        user={user}
      />
    </div>
  );
}