import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { AlertCircle, Mail, RefreshCw, Clock, Shield } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';

export function EmailVerificationHelp() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Mail className="h-5 w-5 text-primary" />
          <CardTitle>E-posta Doğrulama Yardımı</CardTitle>
        </div>
        <CardDescription>
          Doğrulama kodu ile ilgili sorun mu yaşıyorsunuz?
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            <strong>Kod gelmedi mi?</strong> Spam klasörünüzü kontrol edin veya "Kodu tekrar gönder" butonuna tıklayın.
          </AlertDescription>
        </Alert>

        <div className="space-y-3">
          <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>

        <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>
  );
}
