import { 
  ArrowRight,
  Building2, 
  CheckCircle2,
  CreditCard, 
  Eye, 
  MapPin,
  Sparkles,
  Target,
  TrendingUp, 
  Users,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ProviderRegistrationModal } from '@/components/provider/ProviderRegistrationModal';
import { useAuth } from '@/contexts/AuthContext';

const ProviderInfo = () => {
  const { user, profile } = useAuth();
  const navigate = useNavigate();
  const [isRegistrationModalOpen, setIsRegistrationModalOpen] = useState(false);

  useEffect(() => {
    // Eğer kullanıcı zaten provider ise dashboard'a yönlendir
    if (user && profile?.role === 'provider') {
      navigate('/provider/dashboard');
    }
  }, [user, profile, navigate]);

  const handleRegisterClick = () => {
    if (!user) {
      // If not logged in, redirect to sign up
      navigate('/sign-up');
    } else if (profile?.role === 'user') {
      // If logged in as user, show registration modal
      setIsRegistrationModalOpen(true);
    } else if (profile?.role === 'provider') {
      // If already a provider, go to dashboard
      navigate('/provider/dashboard');
    }
  };

  const features = [
    {
      icon: Eye,
      title: 'Nitelikli Müşteri Adayları',
      description: 'Destinasyonunuza özel, gerçek seyahat planları yapan müşterilere ulaşın.',
    },
    {
      icon: Target,
      title: 'Hedefli Erişim',
      description: 'Sadece hizmet verdiğiniz bölge ve aktivitelere ilgi duyan müşterileri görün.',
    },
    {
      icon: CreditCard,
      title: 'Esnek Kredi Sistemi',
      description: 'İhtiyacınız kadar kredi satın alın, sadece ilgilendiğiniz müşteri adayları için harcayın.',
    },
    {
      icon: TrendingUp,
      title: 'İşinizi Büyütün',
      description: 'Yeni müşterilere ulaşarak işinizi büyütün ve gelir akışınızı artırın.',
    },
  ];

  const howItWorks = [
    {
      step: '1',
      title: 'Kayıt Olun',
      description: 'İşletme bilgilerinizi ve hizmet verdiğiniz destinasyonları belirtin.',
    },
    {
      step: '2',
      title: 'Kredi Satın Alın',
      description: 'İhtiyacınıza göre kredi paketi seçin ve hesabınıza yükleyin.',
    },
    {
      step: '3',
      title: 'Müşteri Adaylarını İnceleyin',
      description: 'Size uygun müşteri adaylarını filtreleyin ve detaylarını görüntüleyin.',
    },
    {
      step: '4',
      title: 'İletişime Geçin',
      description: 'Kredi harcayarak iletişim bilgilerine erişin ve teklif sunun.',
    },
  ];

  const pricingInfo = [
    {
      title: 'Standart Müşteri Adayı',
      price: '20',
      description: 'Temel seyahat planları',
      features: ['İletişim bilgileri', 'Seyahat tarihleri', 'Destinasyon bilgisi', 'Yolcu sayısı'],
    },
    {
      title: 'Premium Aktiviteler',
      price: 'Değişken',
      description: 'Özel aktivite içeren planlar',
      features: [
        'Balon Turu: +100% (×2.0)',
        'ATV/At Binme: +50% (×1.5)',
        'Rehberli Tur: +40% (×1.4)',
        'Çoklu aktivite indirimi',
      ],
      badge: 'Popüler',
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-r from-primary/10 via-primary/5 to-background py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-4" variant="outline">
              <Sparkles className="h-3 w-3 mr-1" />
              Turizm Profesyonelleri İçin
            </Badge>
            <h1 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
              İşinizi Büyütmenin Yeni Yolu
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Gerçek seyahat planları yapan müşterilere ulaşın. Sadece ilgilendiğiniz müşteri adayları için ödeme yapın.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              {user ? (
                profile?.role === 'provider' ? (
                  <Button size="lg" onClick={() => navigate('/provider/dashboard')}>
                    <Building2 className="h-5 w-5 mr-2" />
                    Dashboard'a Git
                  </Button>
                ) : (
                  <Button size="lg" onClick={handleRegisterClick}>
                    <Building2 className="h-5 w-5 mr-2" />
                    Provider Olarak Kayıt Ol
                  </Button>
                )
              ) : (
                <>
                  <Button size="lg" asChild>
                    <Link to="/sign-up?role=provider">
                      <Building2 className="h-5 w-5 mr-2" />
                      Hemen Başlayın
                    </Link>
                  </Button>
                  <Button size="lg" variant="outline" asChild>
                    <Link to="/sign-in">
                      Giriş Yap
                    </Link>
                  </Button>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Neden Provider Olmalısınız?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Platformumuz, turizm profesyonellerine nitelikli müşteri adaylarına ulaşma imkanı sunar.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, idx) => (
              <Card key={idx} className="border-2 hover:border-primary/50 transition-colors">
                <CardHeader>
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                    <feature.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Nasıl Çalışır?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              4 basit adımda müşteri adaylarına ulaşmaya başlayın.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
            {howItWorks.map((item, idx) => (
              <div key={idx} className="relative">
                <div className="flex flex-col items-center text-center">
                  <div className="h-16 w-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-2xl font-bold mb-4">
                    {item.step}
                  </div>
                  <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                </div>
                {idx < howItWorks.length - 1 && (
                  <ArrowRight className="hidden lg:block absolute top-8 -right-4 h-6 w-6 text-muted-foreground" />
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Fiyatlandırma</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Aktivite bazlı dinamik fiyatlandırma ile sadece değerli müşteri adayları için ödeme yapın.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {pricingInfo.map((plan, idx) => (
              <Card key={idx} className={`relative ${plan.badge ? 'border-primary shadow-lg' : ''}`}>
                {plan.badge && (
                  <Badge className="absolute -top-3 left-1/2 -translate-x-1/2">
                    {plan.badge}
                  </Badge>
                )}
                <CardHeader>
                  <CardTitle>{plan.title}</CardTitle>
                  <CardDescription>{plan.description}</CardDescription>
                  <div className="mt-4">
                    <span className="text-4xl font-bold">{plan.price}</span>
                    <span className="text-muted-foreground ml-2">Kredi</span>
                  </div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3">
                    {plan.features.map((feature, featureIdx) => (
                      <li key={featureIdx} className="flex items-start gap-2">
                        <CheckCircle2 className="h-5 w-5 text-primary shrink-0 mt-0.5" />
                        <span className="text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="mt-8 text-center">
            <p className="text-sm text-muted-foreground">
              * Fiyatlar müşteri adayının planladığı aktivitelere göre otomatik olarak hesaplanır.
            </p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-primary/10 via-primary/5 to-background">
        <div className="container mx-auto px-4">
          <Card className="max-w-3xl mx-auto text-center border-2">
            <CardHeader>
              <CardTitle className="text-3xl">Hemen Başlayın</CardTitle>
              <CardDescription className="text-lg">
                Bugün kayıt olun ve ilk müşteri adaylarınıza ulaşmaya başlayın.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex flex-wrap justify-center gap-4">
                <div className="flex items-center gap-2">
                  <Users className="h-5 w-5 text-primary" />
                  <span className="text-sm font-medium">Binlerce Müşteri Adayı</span>
                </div>
                <div className="flex items-center gap-2">
                  <MapPin className="h-5 w-5 text-primary" />
                  <span className="text-sm font-medium">Tüm Türkiye</span>
                </div>
                <div className="flex items-center gap-2">
                  <TrendingUp className="h-5 w-5 text-primary" />
                  <span className="text-sm font-medium">Sürekli Büyüyen Platform</span>
                </div>
              </div>
              {!user || profile?.role !== 'provider' ? (
                <Button size="lg" className="text-lg px-8" onClick={handleRegisterClick}>
                  <Building2 className="h-5 w-5 mr-2" />
                  Ücretsiz Kayıt Ol
                </Button>
              ) : (
                <Button size="lg" className="text-lg px-8" onClick={() => navigate('/provider/dashboard')}>
                  <Building2 className="h-5 w-5 mr-2" />
                  Dashboard'a Git
                </Button>
              )}
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Provider Registration Modal */}
      <ProviderRegistrationModal
        isOpen={isRegistrationModalOpen}
        onClose={() => setIsRegistrationModalOpen(false)}
        onSuccess={() => {
          setIsRegistrationModalOpen(false);
          navigate('/provider/dashboard');
        }}
      />
    </div>
  );
};

export default ProviderInfo;
