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, BarChart3, Briefcase, ArrowUpRight, Home, AlertCircle } 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 Depots = () => {
  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: 'depots-1',
            kicker: 'Wertpapierdepots',
            title: 'Professionelle Vermögensverwaltung.',
            subtitle: 'Das richtige Depot für Ihre Anlageziele – von Einsteiger-Depots bis professionellen Trading-Konten.',
            imageUrl: assetUrl('Finanzen/Fotolia_3486018_XS.jpg'),
            imagePosition: 'center 30%',
            ctas: [
              { label: 'Jetzt beraten lassen', 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="depotarten" 
                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"
              >
                <Briefcase className="w-4 h-4 mr-1.5" />
                Arten
              </TabsTrigger>
              <TabsTrigger 
                value="kosten" 
                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"
              >
                <Calculator className="w-4 h-4 mr-1.5" />
                Kosten
              </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="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"
              >
                <BarChart3 className="w-4 h-4 mr-1.5" />
                Rechner
              </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="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" />
                Konditionen
              </TabsTrigger>
              <TabsTrigger 
                value="calculator" 
                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" />
                Depot-Rechner
              </TabsTrigger>
              <TabsTrigger 
                value="formular" 
                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" />
                Formular
              </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">Wertpapierdepots im Überblick</h3>
                      <p className="text-gray-600 mb-6">
                        Ein Wertpapierdepot ist Ihr Konto für den Kauf und Verkauf von Wertpapieren. 
                        Wir helfen Ihnen das passende Depot zu finden – von kostengünstigen Einsteiger-Depots 
                        bis hin zu professionellen Trading-Konten.
                      </p>

                      <Card className="border-green-200 bg-green-50">
                        <CardHeader>
                          <CardTitle className="text-lg text-green-900">Hauptvorteile</CardTitle>
                          <CardDescription>Warum ein Wertpapierdepot?</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {[
                              { title: 'Breite Anlagemöglichkeiten', desc: 'Aktien, ETFs, Fonds, Anleihen und mehr' },
                              { title: 'Transparente Kostenstruktur', desc: 'Keine versteckten Gebühren' },
                              { title: 'Professionelle Beratung', desc: 'Wir finden das passende Depot' },
                              { title: 'Sichere Verwahrung', desc: 'Einlagensicherung bis 100.000€' },
                            ].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_3486018_XS.jpg')} alt="Wertpapierdepots">
                      <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">
                            {[
                              'Vergleich von 50+ Depot-Anbietern',
                              'Unabhängige Beratung ohne Verkaufsdruck',
                              'Transparente Kostenanalyse',
                              'Schnelle Depot-Eröffnung',
                              'Langfristige Betreuung',
                            ].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="depotarten" 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">Einsteiger-Depots</CardTitle>
                      <CardDescription>Perfekt für Anfänger</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div className="flex items-start gap-3">
                          <Target className="w-6 h-6 text-green-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Kostengünstig</div>
                            <div className="text-sm text-gray-600">Niedrige Ordergebühren, oft kostenlose Depotführung</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3">
                          <BarChart3 className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Einfach verständlich</div>
                            <div className="text-sm text-gray-600">Klare Oberfläche, einfache Handhabung</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3">
                          <Shield className="w-6 h-6 text-purple-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Sichere Startanlage</div>
                            <div className="text-sm text-gray-600">ETF-Sparpläne und Fondsanlagen</div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Aktiv-Depots</CardTitle>
                      <CardDescription>Für erfahrene Anleger</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div className="flex items-start gap-3">
                          <TrendingUp className="w-6 h-6 text-green-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Trading-Funktionen</div>
                            <div className="text-sm text-gray-600">Leverage, Derivate, Short-Selling</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3">
                          <ArrowUpRight className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Schnelle Ausführung</div>
                            <div className="text-sm text-gray-600">Realtime-Kurse, direkter Marktzugang</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3">
                          <Briefcase className="w-6 h-6 text-purple-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-gray-900">Professionelle Tools</div>
                            <div className="text-sm text-gray-600">Chart-Analyse, Trading-Desk, API</div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

              <TabsContent value="kosten" 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">Depot-Kosten</CardTitle>
                      <CardDescription>Was kostet ein Depot?</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Depotführung</h4>
                          <p className="text-sm text-gray-600">0€ - 5€ monatlich (oft kostenlos bei Sparplänen)</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Ordergebühren</h4>
                          <p className="text-sm text-gray-600">0,99% - 4,90€ pro Trade (abhängig vom Volumen)</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Spread-Kosten</h4>
                          <p className="text-sm text-gray-600">0,1% - 0,5% bei Kauf/Verkauf</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Kosten-Spartipps</CardTitle>
                      <CardDescription>Wie Sie sparen können</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        {[
                          'ETF-Sparpläne statt Einzelkäufe',
                          'Kostenfreie Depotführung nutzen',
                          'Günstige Ordergebühren vergleichen',
                          'Sparplan-Rabatte von Brokern',
                          'Kostenoptimierte Handelsstrategien',
                        ].map((tip) => (
                          <div key={tip} 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">{tip}</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 Konditionen</CardTitle>
                      <CardDescription>Was Sie beachten sollten</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Mindestanlage</h4>
                          <p className="text-sm text-gray-600">Meist ab 1€ bei Sparplänen, ab 50€ bei Einzelkäufen</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Handelszeiten</h4>
                          <p className="text-sm text-gray-600">Börsenzeiten: 9:00-17:30 Uhr (deutsche Zeit)</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Verfügbarkeit</h4>
                          <p className="text-sm text-gray-600">24/7 Trading bei bestimmten Brokern möglich</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Sicherheit & Schutz</CardTitle>
                      <CardDescription>Wichtige Sicherheitsaspekte</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Einlagensicherung</h4>
                          <p className="text-sm text-gray-600">Bis 100.000€ pro Kunde und Institut</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Regulierung</h4>
                          <p className="text-sm text-gray-600">BaFin-Überwachung, EU-Richtlinien</p>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900 mb-2">Investorenschutz</h4>
                          <p className="text-sm text-gray-600">Entschädigungseinrichtung der Wertpapierhäuser</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

              <TabsContent value="calculator" className="mt-0">
                <div className="text-center py-12">
                  <Calculator className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Depot-Kostenrechner</h3>
                  <p className="text-gray-600 mb-8">
                    Berechnen Sie Ihre potenziellen Depot-Kosten und finden Sie den kostengünstigsten Anbieter.
                  </p>
                  <Button size="lg" onClick={() => navigate('/contact')}>
                    <Calculator className="mr-2 h-5 w-5" />
                    Jetzt berechnen
                  </Button>
                </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 ein individuelles Depot-Angebot.
                  </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 Wertpapierdepots.
                  </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 Depots;