import { useAuthStore } from '../lib/auth';

const ROLE_LABELS: Record<string, string> = {
  admin: 'Admin',
  project_manager: 'Project Manager',
  production: 'Production',
  reviewer: 'Reviewer',
  linguist: 'Linguist',
  client: 'Client',
};

export function Profile() {
  const { user } = useAuthStore();

  if (!user) return null;

  const initials = user.full_name
    ? user.full_name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2)
    : user.email.charAt(0).toUpperCase();

  return (
    <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
      <h1 className="text-2xl font-semibold text-gray-900">Profile</h1>

      {/* Avatar + name */}
      <div className="bg-white rounded-xl border border-gray-200 p-6 flex items-center gap-5">
        <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0">
          <span className="text-white text-xl font-semibold">{initials}</span>
        </div>
        <div>
          <p className="text-lg font-semibold text-gray-900">{user.full_name || user.email}</p>
          <p className="text-sm text-gray-500">{user.email}</p>
          <span className="inline-block mt-1 px-2.5 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-700 rounded-full capitalize">
            {ROLE_LABELS[user.role] ?? user.role}
          </span>
        </div>
      </div>

      {/* Account details */}
      <div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100">
        <div className="px-6 py-4">
          <p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-3">Account details</p>
          <dl className="space-y-3">
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Email</dt>
              <dd className="text-sm text-gray-900">{user.email}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Full name</dt>
              <dd className="text-sm text-gray-900">{user.full_name || '—'}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Role</dt>
              <dd className="text-sm text-gray-900">{ROLE_LABELS[user.role] ?? user.role}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Sign-in method</dt>
              <dd className="text-sm text-gray-900 capitalize">
                {user.auth_provider === 'microsoft' ? 'Microsoft (SSO)' : 'Email / password'}
              </dd>
            </div>
            {user.languages && user.languages.length > 0 && (
              <div className="flex justify-between">
                <dt className="text-sm text-gray-500">Languages</dt>
                <dd className="text-sm text-gray-900">{user.languages.join(', ')}</dd>
              </div>
            )}
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Account status</dt>
              <dd className="text-sm">
                <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${user.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                  {user.is_active ? 'Active' : 'Inactive'}
                </span>
              </dd>
            </div>
          </dl>
        </div>
      </div>

      {user.auth_provider !== 'microsoft' && (
        <p className="text-xs text-gray-400 text-center">
          To change your password, contact your administrator.
        </p>
      )}
    </div>
  );
}
