import { useEffect, useState } from 'react';
import { calculateProfileCompletion, ProfileCompletion } from '../services/profileService';
import { Progress } from '@/components/feedback/Progress';

interface ProfileCompletionProps {
  userId: number;
}

export function ProfileCompletion({ userId }: ProfileCompletionProps) {
  const [completion, setCompletion] = useState<ProfileCompletion>({ percentage: 0, missing: [] });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    calculateProfileCompletion(userId)
      .then(setCompletion)
      .catch((error) => {
        console.error('Failed to load profile completion:', error);
      })
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) {
    return (
      <div className="p-4">
        <p>Loading profile completion...</p>
      </div>
    );
  }

  return (
    <div className="p-4 border rounded-lg">
      <h3 className="text-lg font-semibold mb-2">Profile Completion</h3>
      <Progress value={completion.percentage} className="mb-2" />
      <p className="text-sm text-gray-600 mb-2">{completion.percentage}% complete</p>
      {completion.missing.length > 0 && (
        <div className="mt-2">
          <p className="text-sm font-medium text-gray-700 mb-1">Missing fields:</p>
          <ul className="list-disc list-inside text-sm text-gray-600">
            {completion.missing.map((field) => (
              <li key={field}>{field.replace('_', ' ')}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

