import { SignIn } from '@clerk/clerk-react';
import { useAuth } from '@/contexts/AuthContext';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router-dom';
import { useClerkAvailability } from '@/contexts/ClerkAvailabilityContext';
import { Loader2 } from 'lucide-react';

export default function SignInPage() {
  const { isClerkAvailable, loading: configLoading } = useClerkAvailability();
  const { mockLogin } = useAuth() as any;
  const navigate = useNavigate();

  const handleMockLogin = async () => {
    // Muhammet admin ID'si
    const muhammetId = '213866b7-63b5-44e9-8d9b-358d8b08539d';
    await mockLogin(muhammetId);
    navigate('/');
  };

  if (configLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <p className="text-sm text-muted-foreground">Yapılandırma yükleniyor...</p>
      </div>
    );
  }

  if (!isClerkAvailable) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] p-4 text-center">
        <h1 className="text-2xl font-bold mb-4">Kimlik Doğrulama Yapılandırılmamış</h1>
        <p className="text-muted-foreground max-w-md mx-auto mb-8">
          Uygulama kimlik doğrulama anahtarları (VITE_CLERK_PUBLISHABLE_KEY) eksik. 
          Geliştirme için aşağıdaki demo girişini kullanabilirsiniz.
        </p>
        <Button onClick={handleMockLogin} size="lg" className="w-full max-w-xs">
          Muhammet (Admin) Olarak Giriş Yap
        </Button>
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-primary/10 to-secondary/10 p-4">
      <SignIn 
        routing="path"
        path="/sign-in"
        signUpUrl="/sign-up"
        afterSignInUrl="/"
        appearance={{
          elements: {
            rootBox: 'mx-auto',
            card: 'shadow-2xl border-border bg-card'
          }
        }}
      />
    </div>
  );
}
