import { SignUp } from '@clerk/clerk-react';
import { Button } from '@/components/ui/button';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useClerkAvailability } from '@/contexts/ClerkAvailabilityContext';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Shield, Check, Mail, RefreshCw, Clock } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

export default function SignUpPage() {
  const { isClerkAvailable } = useClerkAvailability();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const role = searchParams.get('role');

  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 giriş sayfasındaki demo girişini kullanabilirsiniz.
        </p>
        <Button onClick={() => navigate('/sign-in')} size="lg" variant="outline" className="w-full max-w-xs">
          Giriş Sayfasına Git
        </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 gap-6">
      <div className="hidden lg:block max-w-md">
        <Tabs defaultValue="password" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="password">Şifre</TabsTrigger>
            <TabsTrigger value="verification">Doğrulama</TabsTrigger>
          </TabsList>
          
          <TabsContent value="password">
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2 mb-2">
                  <Shield className="h-5 w-5 text-primary" />
                  <CardTitle>Güvenli Şifre Oluşturun</CardTitle>
                </div>
                <CardDescription>
                  Hesabınızın güvenliği için güçlü bir şifre kullanın
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-start gap-2">
                  <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                  <p className="text-sm text-muted-foreground">
                    En az 8 karakter uzunluğunda
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                  <p className="text-sm text-muted-foreground">
                    Büyük ve küçük harf içermeli
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                  <p className="text-sm text-muted-foreground">
                    Rakam ve özel karakter içermeli
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                  <p className="text-sm text-muted-foreground">
                    Daha önce başka sitelerde kullanmadığınız bir şifre seçin
                  </p>
                </div>
                <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 rounded-lg">
                  <p className="text-xs text-amber-800 dark:text-amber-200">
                    <strong>Güvenlik Notu:</strong> Şifreniz bilinen veri ihlallerine karşı kontrol edilir. 
                    Eğer şifreniz daha önce bir veri ihlalinde tespit edildiyse, güvenliğiniz için 
                    farklı bir şifre kullanmanız gerekecektir.
                  </p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="verification">
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2 mb-2">
                  <Mail className="h-5 w-5 text-primary" />
                  <CardTitle>E-posta Doğrulama</CardTitle>
                </div>
                <CardDescription>
                  Doğrulama kodu ile ilgili yardım
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-start gap-3">
                  <RefreshCw className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Kodu Tekrar Gönderin</p>
                    <p className="text-xs text-muted-foreground">
                      Doğrulama ekranındaki "Kodu tekrar gönder" linkine tıklayın
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <Mail className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Spam Klasörünü Kontrol Edin</p>
                    <p className="text-xs text-muted-foreground">
                      E-posta spam veya promosyonlar klasöründe olabilir
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <Clock className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Zaman Sınırı</p>
                    <p className="text-xs text-muted-foreground">
                      Doğrulama kodu 10 dakika sonra geçersiz olur
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <Shield className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Doğru Format</p>
                    <p className="text-xs text-muted-foreground">
                      Kodu manuel olarak girin, kopyala-yapıştır yapmayın
                    </p>
                  </div>
                </div>

                <div className="p-3 bg-muted rounded-lg">
                  <p className="text-xs text-muted-foreground">
                    <strong>İpucu:</strong> Gmail kullanıyorsanız, e-posta genellikle 1-2 dakika içinde gelir. 
                    Eğer 5 dakika içinde gelmediyse, yeni kod isteyin.
                  </p>
                </div>

                <div className="p-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 rounded-lg">
                  <p className="text-xs text-amber-800 dark:text-amber-200">
                    <strong>Sorun devam ediyor mu?</strong> Farklı bir e-posta adresi deneyin veya 
                    tarayıcı önbelleğinizi temizleyip tekrar deneyin.
                  </p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <SignUp 
        routing="path"
        path="/sign-up"
        signInUrl="/sign-in"
        afterSignUpUrl="/"
        unsafeMetadata={{
          role: role || 'user'
        }}
        appearance={{
          elements: {
            rootBox: 'mx-auto',
            card: 'shadow-2xl border-border bg-card'
          }
        }}
      />
    </div>
  );
}
