import { UserProfile } from '@clerk/clerk-react';
import { useClerkAvailability } from '@/contexts/ClerkAvailabilityContext';
import { useAuth } from '@/contexts/AuthContext';
import { Navigate } from 'react-router-dom';

export default function Profile() {
  const { isClerkAvailable } = useClerkAvailability();
  const { profile, loading } = useAuth();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!profile) {
    return <Navigate to="/sign-in" replace />;
  }

  return (
    <div className="container mx-auto py-10 flex justify-center">
      {isClerkAvailable ? (
        <UserProfile />
      ) : (
        <div className="max-w-md w-full p-8 border rounded-2xl bg-card shadow-sm">
          <h1 className="text-2xl font-bold mb-6">Hesap Yönetimi (Demo)</h1>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-muted-foreground">Kullanıcı Adı</p>
              <p className="font-medium">@{profile.username}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">E-posta</p>
              <p className="font-medium">{profile.email || 'Belirtilmedi'}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Ad Soyad</p>
              <p className="font-medium">{profile.full_name || 'Belirtilmedi'}</p>
            </div>
            <div className="pt-4">
              <p className="text-xs text-muted-foreground italic">
                Demo modunda profil bilgileri sınırlıdır. Gerçek bir deneyim için Clerk entegrasyonu gereklidir.
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
