import React, { useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  BadgeCheck,
  BarChart3,
  Calculator,
  Download,
  FileCheck,
  FileText,
  LineChart,
  Mail,
  Phone,
  ShieldCheck,
  TrendingUp,
} from 'lucide-react';
import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice';
import HeroSlider from '@/components/HeroSlider';
import { Button } from '@/components/ui/button';
import Disclaimer from '@/components/Disclaimer';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';

const TAB_OVERVIEW = 'overview';
const TAB_DETAILS = 'details';
const TAB_STATISTICS = 'statistics';
const TAB_CALCULATOR = 'calculator';
const TAB_FORM = 'form';
const TAB_CATALOG = 'catalog';
const TAB_BROCHURE = 'brochure';

const RiesterRenteFinal = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('riester_rente');

  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;

  const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);

  const statistics = [
    { label: t('stats.s1.label', 'Verträge'), value: t('stats.s1.value', '16,5 Mio') },
    { label: t('stats.s2.label', 'Förderung/Jahr'), value: t('stats.s2.value', '10 Mrd €') },
    { label: t('stats.s3.label', 'Zulagen'), value: t('stats.s3.value', '175 €/Kind') },
    { label: t('stats.s4.label', 'Zufriedenheit'), value: t('stats.s4.value', '89%') },
  ];

  useEffect(() => {
    const hash = (location.hash || '').replace('#', '').toLowerCase();

    if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
    else if (hash === TAB_STATISTICS) setActiveTab(TAB_STATISTICS);
    else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
    else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
    else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
    else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
    else setActiveTab(TAB_OVERVIEW);

    if (!hash) return;

    window.setTimeout(() => {
      const tabSection = document.getElementById('tab-section');
      if (tabSection) tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
  }, [location.hash]);

  const onTabChange = (tab: string) => {
    setActiveTab(tab);
    if (tab === TAB_OVERVIEW) {
      navigate(location.pathname, { replace: true });
      return;
    }
    navigate(`${location.pathname}#${tab}`, { replace: true });
  };

  const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
  const EMAIL = 'info@finanzen-mizera.de';

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        <HeroSlider
          slides={[
            {
              id: 'riester-1',
              kicker: t('hero.kicker', 'Altersvorsorge'),
              title: t('hero.title', 'Riester-Rente'),
              subtitle: t('hero.subtitle', 'Staatliche Förderung für Ihre Rente.'),
              highlights: [
                t('hero.highlights.0', 'Zulagen & Steuervorteile'),
                t('hero.highlights.1', 'Familienfreundlich (Kinderzulage)'),
                t('hero.highlights.2', 'Langfristige Planung'),
              ],
              imageUrl: assetUrl('Chatgpt_bilder/Riester-Rente.png'),
              imagePosition: 'center 30%',
              ctas: [
                { label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
                { label: t('hero.cta2', 'Zur Übersicht'), href: '/altersvorsorge' },
              ],
            },
          ]}
        />

        <div className="container mx-auto px-4 md:px-6 py-8">
          <div className="max-w-screen-2xl mx-auto">
            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs value={activeTab} onValueChange={onTabChange} 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-3 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                    <TabsTrigger
                      value={TAB_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"
                    >
                      <TrendingUp className="w-4 h-4 mr-1.5" />
                      {t('tabs.overview', 'Übersicht')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_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" />
                      {t('tabs.details', 'Details')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_STATISTICS}
                      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" />
                      {t('tabs.statistics', 'Statistik')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_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"
                    >
                      <Calculator className="w-4 h-4 mr-1.5" />
                      {t('tabs.calculator', 'Rechner')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_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" />
                      {t('tabs.form', 'Anfrage')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_CATALOG}
                      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"
                    >
                      <FileCheck className="w-4 h-4 mr-1.5" />
                      {t('tabs.catalog', 'Ratgeber')}
                    </TabsTrigger>

                    <TabsTrigger
                      value={TAB_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" />
                      {t('tabs.brochure', 'PDF')}
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 md:p-6">
                  <TabsContent value={TAB_OVERVIEW} className="mt-0">
                    <TwoColumnTab
                      className="gap-8 items-center"
                      left={
                        <>
                          <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
                            <LineChart className="w-4 h-4" />
                            <span>{t('overview.badge', 'Riester – staatlich gefördert')}</span>
                          </div>
                          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                            {t('overview.title', 'Mehr Förderung für Ihre Rente')}
                            <span className="block text-blue-700">{t('overview.subtitle', 'Wir prüfen, ob sich Riester für Sie lohnt.')}</span>
                          </h1>
                          <p className="mt-4 text-gray-600 text-lg">{t('overview.description')}</p>

                          <div className="mt-6 flex flex-col sm:flex-row gap-3">
                            <Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700">
                              {t('overview.cta1', 'Angebot anfordern')}
                            </Button>
                            <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
                              {t('overview.cta2', 'Beratung')}
                            </Button>
                          </div>

                          <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <ShieldCheck className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('overview.feature1Title', 'Förderung')}</div>
                                <div className="text-gray-600">{t('overview.feature1Desc', 'Zulagen & Steuervorteile')}</div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <BadgeCheck className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('overview.feature2Title', 'Planbar')}</div>
                                <div className="text-gray-600">{t('overview.feature2Desc', 'Langfristige Vorsorge')}</div>
                              </div>
                            </div>
                          </div>
                        </>
                      }
                      right={
                        <div className="relative">
                          <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
                          <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                            <img
                              src={assetUrl('Chatgpt_bilder/Riester-Rente.png')}
                              alt={t('overview.imageAlt', 'Riester-Rente')}
                              className="w-full h-[240px] object-cover"
                              onError={(e) => {
                                (e.currentTarget as HTMLImageElement).style.display = 'none';
                              }}
                            />
                            <div className="p-5">
                              <div className="flex items-center gap-2 text-sm text-gray-600">
                                <BadgeCheck className="w-4 h-4" />
                                <span>{t('overview.imageCaption', 'Zulagen prüfen')}</span>
                              </div>
                              <div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</div>
                            </div>
                          </div>
                        </div>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_DETAILS} className="mt-0">
                    <div className="space-y-8">
                      <div className="text-center mb-8">
                        <h2 className="text-3xl font-bold text-gray-900 mb-4">{t('details.title', 'Details')}</h2>
                        <p className="text-lg text-gray-600 max-w-3xl mx-auto">{t('details.subtitle')}</p>
                      </div>

                      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {[
                          { icon: TrendingUp, title: t('details.cards.0.title'), desc: t('details.cards.0.desc') },
                          { icon: ShieldCheck, title: t('details.cards.1.title'), desc: t('details.cards.1.desc') },
                          { icon: BadgeCheck, title: t('details.cards.2.title'), desc: t('details.cards.2.desc') },
                        ].map((item, idx) => (
                          <Card key={idx} className="h-full">
                            <CardHeader>
                              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                                <item.icon className="w-6 h-6 text-blue-600" />
                              </div>
                              <CardTitle className="text-xl">{item.title}</CardTitle>
                              <CardDescription>{item.desc}</CardDescription>
                            </CardHeader>
                          </Card>
                        ))}
                      </div>

                      <GeneralNotice />
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_STATISTICS} className="mt-0">
                    <div className="space-y-8">
                      <div className="text-center mb-8">
                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
                          {t('statistics.title', 'Riester-Rente in Zahlen')}
                        </h2>
                        <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                          {t('statistics.subtitle', 'Fakten und Daten zur staatlichen Förderung')}
                        </p>
                      </div>

                      <div className="grid md:grid-cols-4 gap-6">
                        {statistics.map((stat, index) => (
                          <Card key={index}>
                            <CardContent className="text-center p-6">
                              <div className="text-3xl font-bold text-blue-600 mb-2">{stat.value}</div>
                              <div className="text-gray-600">{stat.label}</div>
                            </CardContent>
                          </Card>
                        ))}
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_CALCULATOR} className="mt-0">
                    <div className="max-w-2xl mx-auto">
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-2xl">{t('calculator.title', 'Fördercheck')}</CardTitle>
                          <CardDescription>{t('calculator.subtitle', 'Schnelle Orientierung – unverbindlich.')}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="text-sm text-gray-700">{t('calculator.placeholder', 'Rechner kommt als nächstes – wir beraten Sie gern persönlich.')}</div>
                          <Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700 w-full">
                            {t('calculator.cta', 'Beratung anfordern')}
                          </Button>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_FORM} className="mt-0">
                    <div className="grid lg:grid-cols-2 gap-6">
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-2xl">{t('form.title', 'Anfrage')}</CardTitle>
                          <CardDescription>{t('form.subtitle', 'Wir melden uns kurzfristig bei Ihnen.')}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <Phone className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('form.phone', 'Telefon')}</div>
                                <div className="text-gray-600">{phoneLabel}</div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <Mail className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('form.email', 'E-Mail')}</div>
                                <div className="text-gray-600">{EMAIL}</div>
                              </div>
                            </div>
                          </div>

                          <Link to="/contact" className="inline-flex w-full">
                            <Button className="w-full bg-blue-600 hover:bg-blue-700">{t('form.cta', 'Zum Kontaktformular')}</Button>
                          </Link>
                        </CardContent>
                      </Card>

                      <RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('form.imageAlt', 'Riester Beratung')}>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
                            <CardDescription>{t('form.tipDescription', 'Wir prüfen Zulagen, Kosten und passende Tarife – transparent & verständlich.')}</CardDescription>
                          </CardHeader>
                        </Card>
                      </RightImageCard>
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_CATALOG} className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Ratgeber')}</h3>
                          <p className="mt-2 text-gray-600">{t('catalog.subtitle', 'Kurz & verständlich – die wichtigsten Punkte auf einen Blick.')}</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('catalog.cardTitle', 'Was ist wichtig?')}</CardTitle>
                              <CardDescription>{t('catalog.cardDescription', 'Förderung, Kosten, Zulagenberechtigung, passende Produktart.')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <Link to="/contact" className="inline-flex w-full">
                                <Button className="w-full bg-blue-600 hover:bg-blue-700">{t('catalog.cta', 'Beratung anfordern')}</Button>
                              </Link>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('catalog.imageAlt', 'Ratgeber Riester')}>
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
                              <CardDescription>{t('catalog.boxDescription', 'Nicht für jeden sinnvoll – wir machen den Fördercheck mit Ihnen.')}</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_BROCHURE} className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Informationen (PDF)')}</h3>
                          <p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('brochure.cardTitle', 'PDF')}</CardTitle>
                              <CardDescription>{t('brochure.cardDescription', 'Gerne senden wir Ihnen die passende Broschüre zu.')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <Link to="/contact" className="inline-flex w-full">
                                <Button className="w-full bg-blue-600 hover:bg-blue-700">{t('brochure.cta', 'PDF anfragen')}</Button>
                              </Link>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('brochure.imageAlt', 'PDF Riester')}>
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
                              <CardDescription>{t('brochure.tipDescription', 'Wir erklären verständlich – ohne Fachchinesisch.')}</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>
                </div>
              </Tabs>
            </div>
          </div>
        </div>
      </div>

      <Disclaimer />
    </Layout>
  );
};

export default RiesterRenteFinal;