import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import Layout from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Calculator as CalculatorIcon, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';

const KreditVergleichsrechner = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');

  return (
    <Layout>
      <HeroSlider
        slides={[
          {
            id: 'kreditvergleich-1',
            kicker: 'Kredit Vergleichsrechner',
            title: 'Den besten Kredit finden.',
            subtitle: 'Vergleichen Sie Konditionen von über 50 Banken und finden Sie den günstigsten Kredit für Ihre Bedürfnisse.',
            imageUrl: assetUrl('Finanzen/Fotolia_60240828_S.jpg'),
            imagePosition: 'center 30%',
            ctas: [
              { label: 'Jetzt vergleichen', href: '/contact' },
              { label: 'Zur Übersicht', href: '/finanzen' },
            ],
          },
        ]}
      />

      <div className="container mx-auto px-4 py-8">
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
            <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
              <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                <TabsTrigger 
                  value="overview" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <Home className="w-4 h-4 mr-1.5" />
                  Übersicht
                </TabsTrigger>
                <TabsTrigger 
                  value="rechner" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <CalculatorIcon className="w-4 h-4 mr-1.5" />
                  Rechner
                </TabsTrigger>
                <TabsTrigger 
                  value="vergleich" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <BarChart3 className="w-4 h-4 mr-1.5" />
                  Vergleich
                </TabsTrigger>
                <TabsTrigger 
                  value="details" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <FileText className="w-4 h-4 mr-1.5" />
                  Details
                </TabsTrigger>
                <TabsTrigger 
                  value="form" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <Phone className="w-4 h-4 mr-1.5" />
                  Anfrage
                </TabsTrigger>
                <TabsTrigger 
                  value="brochure" 
                  className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                >
                  <Download className="w-4 h-4 mr-1.5" />
                  PDF
                </TabsTrigger>
              </TabsList>
            </div>

            <div className="p-4 md:p-6">
              <TabsContent value="overview" className="mt-0">
                <TwoColumnTab
                  left={
                    <>
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Kreditvergleichsrechner im Überblick</h3>
                      <p className="text-gray-600 mb-6">
                        Mit unserem Kreditvergleichsrechner finden Sie schnell und einfach den günstigsten Kredit. 
                        Vergleichen Sie Zinsen, Gebühren und Konditionen von über 50 Banken und Sparkassen.
                      </p>

                      <Card className="border-green-200 bg-green-50">
                        <CardHeader>
                          <CardTitle className="text-lg text-green-900">Hauptvorteile</CardTitle>
                          <CardDescription>Warum unser Vergleichsrechner?</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {[
                              { title: 'Unabhängiger Vergleich', desc: 'Über 50 Banken und Finanzierer' },
                              { title: 'Tagesaktuelle Zinsen', desc: 'Immer aktuelle Konditionen' },
                              { title: 'Transparente Kosten', desc: 'Keine versteckten Gebühren' },
                              { title: 'Schnelle Ergebnisse', desc: 'Vergleich in wenigen Minuten' },
                            ].map((item) => (
                              <div key={item.title} className="flex items-start gap-3">
                                <CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                                <div>
                                  <div className="font-medium text-green-900">{item.title}</div>
                                  <div className="text-sm text-green-700">{item.desc}</div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>
                    </>
                  }
                  right={
                    <RightImageCard src={assetUrl('Finanzen/Fotolia_60240828_S.jpg')} alt="Kreditvergleichsrechner">
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Ihre Vorteile</CardTitle>
                          <CardDescription>Warum wir der richtige Partner sind</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {[
                              'Kostenloser Kreditvergleich',
                              'Persönliche Beratung',
                              'Optimale Kreditstruktur',
                              'Unterstützung bei Antragstellung',
                              'Schnelle Auszahlung',
                            ].map((benefit) => (
                              <div key={benefit} className="flex items-start gap-2">
                                <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-700">{benefit}</span>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>
                    </RightImageCard>
                  }
                />
              </TabsContent>

              <TabsContent value="rechner" className="mt-0">
                <div className="text-center py-12">
                  <CalculatorIcon className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Kreditrechner</h3>
                  <p className="text-gray-600 mb-8">
                    Berechnen Sie Ihre monatlichen Raten und Gesamtkosten für verschiedene Kreditbeträge und Laufzeiten.
                  </p>
                  <div className="max-w-md mx-auto space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Kreditbetrag</label>
                        <input type="number" className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="10.000 €" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Laufzeit</label>
                        <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
                          <option>12 Monate</option>
                          <option>24 Monate</option>
                          <option>36 Monate</option>
                          <option>48 Monate</option>
                          <option>60 Monate</option>
                          <option>84 Monate</option>
                          <option>120 Monate</option>
                        </select>
                      </div>
                    </div>
                    <Button size="lg" className="w-full" onClick={() => navigate('/contact')}>
                      <CalculatorIcon className="mr-2 h-5 w-5" />
                      Jetzt berechnen
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="vergleich" className="mt-0">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Kreditvergleich</CardTitle>
                      <CardDescription>Die besten Angebote finden</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div className="p-4 border rounded-lg bg-green-50">
                          <div className="font-medium text-green-900 mb-2">Vergleichskriterien</div>
                          <ul className="text-sm text-green-700 space-y-1">
                            <li>• Effektiver Jahreszins (eff. Zins)</li>
                            <li>• Monatliche Rate</li>
                            <li>• Gesamtkosten (Zins und Tilgung)</li>
                            <li>• Bearbeitungsgebühren</li>
                            <li>• Sondertilgungsmöglichkeiten</li>
                          </ul>
                        </div>
                        <div className="text-sm text-gray-600">
                          <strong>Wichtig:</strong> Achten Sie nicht nur auf den Nominalzins, sondern auf den effektiven Jahreszins!
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Aktuelle Zinsentwicklung</CardTitle>
                      <CardDescription>Markt-Übersicht</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Durchschnittlicher Zins</span>
                          <span className="text-sm font-bold text-blue-600">4,5%</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Günstigster Anbieter</span>
                          <span className="text-sm font-bold text-green-600">3,2%</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Teuerster Anbieter</span>
                          <span className="text-sm font-bold text-red-600">8,9%</span>
                        </div>
                        <div className="text-xs text-gray-500 mt-2">
                          * Durchschnittliche Werte für 10.000€ Kredit, 60 Monate Laufzeit
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

              <TabsContent value="arten" className="mt-0">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Kredit-Arten</CardTitle>
                      <CardDescription>Verschiedene Kreditformen</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        {[
                          'Ratenkredit (Konsumentenkredit)',
                          'Autokredit und Fahrzeugfinanzierung',
                          'Wohnungsbaudarlehen',
                          'Kredit ohne SCHUFA',
                          'Kredit mit negativer SCHUFA',
                          'Umschuldungskredit',
                        ].map((type) => (
                          <div key={type} className="flex items-start gap-2">
                            <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                            <span className="text-gray-700">{type}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Besondere Kreditformen</CardTitle>
                      <CardDescription>Spezialisierte Finanzierungen</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        {[
                          'Studentenkredite',
                          'Selbstständigenkredite',
                          'Freiberuflerkredite',
                          'Beamtenkredite',
                          'Auswandererkredite',
                          'Sanierungskredite',
                        ].map((type) => (
                          <div key={type} className="flex items-start gap-2">
                            <CheckCircle className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
                            <span className="text-gray-700">{type}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

              <TabsContent value="details" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Wichtige Kriterien</CardTitle>
                      <CardDescription>Was Sie beachten sollten</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Kreditwürdigkeit</h4>
                          <p className="text-sm text-gray-600">SCHUFA-Score, Einkommen, Beschäftigungsdauer</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Kreditbetrag</h4>
                          <p className="text-sm text-gray-600">Realistische Einschätzung der Rückzahlungsfähigkeit</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Laufzeit</h4>
                          <p className="text-sm text-gray-600">Kürzere Laufzeiten = günstigere Zinsen</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Zusatzkosten</CardTitle>
                      <CardDescription>Was den Kredit verteuert</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Bearbeitungsgebühren</h4>
                          <p className="text-sm text-gray-600">0% - 3% des Kreditbetrags</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Bereitstellungszinsen</h4>
                          <p className="text-sm text-gray-600">Vollständige oder teilweise Auszahlung</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Restschuldversicherung</h4>
                          <p className="text-sm text-gray-600">Optional, aber oft empfohlen</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

              <TabsContent value="form" className="mt-0">
                <div className="text-center py-12">
                  <FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Anfrageformular</h3>
                  <p className="text-gray-600 mb-8">
                    Füllen Sie unser einfaches Formular aus und erhalten Sie persönliche Kreditangebote von Top-Banken.
                  </p>
                  <Button size="lg" onClick={() => navigate('/contact')}>
                    <FileText className="mr-2 h-5 w-5" />
                    Zum Formular
                  </Button>
                </div>
              </TabsContent>

              <TabsContent value="brochure" className="mt-0">
                <div className="text-center py-12">
                  <FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Kundenbroschüre</h3>
                  <p className="text-gray-600 mb-8">
                    Laden Sie unsere kostenlose Broschüre herunter und informieren Sie sich ausführlich über Kreditvergleich.
                  </p>
                  <Button size="lg" variant="outline">
                    <Download className="mr-2 h-5 w-5" />
                    Broschüre herunterladen
                  </Button>
                </div>
              </TabsContent>

              <GeneralNotice />
            </div>
          </Tabs>
        </div>
      </div>

    </Layout>
  );
};

export default KreditVergleichsrechner;