export interface ProfileCompletionProps {
  percentage?: number;
  name?: string;
  title?: string;
  avatarUrl?: string;
  missingFields?: string[];
}

const formatMissingField = (field: string) => {
  const map: Record<string, string> = {
    date_of_birth: 'Date of Birth',
    profile_picture: 'Profile Picture',
    marital_status: 'Marital Status',
    experience: 'Experience',
    skills: 'Skills',
    languages: 'Languages',
    resume: 'Resume',
    education: 'Education',
    address: 'Address',
    gender: 'Gender',
    expected_salary: 'Expected Salary',
  };
  return map[field] || field.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
};

export function ProfileCompletionCard({ 
  percentage = 0, 
  name = "Seeker", 
  title,
  avatarUrl,
  missingFields = []
}: ProfileCompletionProps) {
  const isComplete = percentage === 100 || missingFields.length === 0;
  const displayTitle = title || (isComplete ? "Profile Complete!" : "Update your profile");
  const radius = 42;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (percentage / 100) * circumference;

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col items-center text-center h-auto">
      {/* Circular Progress Avatar */}
      <div className="relative mb-8 mt-2">
        <svg className="w-28 h-28 transform -rotate-90">
          <circle
            cx="56"
            cy="56"
            r={radius}
            stroke="#f1f3f5"
            strokeWidth="8"
            fill="transparent"
          />
          <circle
            cx="56"
            cy="56"
            r={radius}
            stroke="#ff6b00"
            strokeWidth="8"
            fill="transparent"
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            className="transition-all duration-1000 ease-in-out"
          />
        </svg>

        {/* Avatar Image Placeholder */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-[84px] h-[84px] bg-[#f0f2f5] rounded-full overflow-hidden border-2 border-white flex items-center justify-center text-gray-400">
            {avatarUrl ? (
               <img src={avatarUrl} alt="Avatar" className="w-full h-full object-cover" />
            ) : (
              <svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            )}
          </div>
        </div>

        {/* Percentage Badge */}
        <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-white px-4 py-0.5 rounded-full text-xs font-bold text-[#ff6b00] border border-gray-200 z-10">
          {percentage}%
        </div>
      </div>

      <h3 className="font-semibold text-gray-900 text-[19px] mb-1">{name}</h3>
      <p className="text-[15px] text-gray-400 font-medium mb-5">{displayTitle}</p>

      {/* Missing Details Box */}
      {missingFields.length > 0 && (
        <div className="w-full bg-[#fff6f0] border border-[#ffedde] rounded-xl p-4 mb-5 text-left">
          <p className="text-[13px] text-[#ff8c42] font-medium mb-3 text-center sm:text-left">
            Add {missingFields.length} missing details to complete your profile
          </p>
          <div className="flex overflow-x-auto gap-2 pb-1 scrollbar-hide snap-x">
            {missingFields.map((field, idx) => (
              <button 
                key={field} 
                className="flex-shrink-0 flex items-center gap-1.5 bg-white border border-[#ffe0c7] px-3 py-1.5 rounded-md text-[11px] font-bold text-[#ff6b00] hover:bg-[#fff9f5] transition-colors snap-start"
              >
                <span>+</span> Add {formatMissingField(field)}
              </button>
            ))}
          </div>
        </div>
      )}

      {!isComplete ? (
        <button className="w-full py-3 mt-auto bg-[#ff6b00] hover:bg-[#e66000] text-white rounded-xl text-sm font-bold transition-colors shadow-sm">
          Complete Profile
        </button>
      ) : (
        <button className="w-full py-3 mt-auto bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-sm font-bold transition-colors shadow-sm">
          View Profile
        </button>
      )}
    </div>
  );
}