import React, { useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  BadgeCheck,
  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_CALCULATOR = 'calculator';
const TAB_FORM = 'form';
const TAB_CATALOG = 'catalog';
const TAB_BROCHURE = 'brochure';

const Berufsunfaehigkeitsversicherung = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('berufsunfaehigkeit');

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

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

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

    if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
    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: 'bu-1',
              kicker: t('hero.kicker', 'Risikoschutz'),
              title: t('hero.title', 'Berufsunfähigkeitsversicherung'),
              subtitle: t(
                'hero.subtitle',
                'Sichern Sie Ihr Einkommen ab – falls Sie Ihren Beruf aus gesundheitlichen Gründen nicht mehr ausüben können.'
              ),
              highlights: [
                t('hero.highlights.0', 'Einkommen absichern'),
                t('hero.highlights.1', 'Frühzeitig vorsorgen'),
                t('hero.highlights.2', 'Tarife vergleichen'),
              ],
              imageUrl: assetUrl('iStock-1065789424.jpg'),
              imagePosition: 'center 35%',
              ctas: [
                { label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
                { label: t('hero.cta2', 'Zur Übersicht'), href: '/risikoschutz' },
              ],
            },
          ]}
        />

        <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-6 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_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', 'BU – Einkommensschutz')}</span>
                          </div>
                          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                            {t('overview.title', 'Wenn Arbeit nicht mehr geht')}
                            <span className="block text-blue-700">
                              {t('overview.subtitle', 'Schützen Sie Ihr Einkommen langfristig.')}
                            </span>
                          </h1>
                          <p className="mt-4 text-gray-600 text-lg">
                            {t(
                              'overview.description',
                              'Die Berufsunfähigkeitsversicherung zählt zu den wichtigsten Absicherungen. Wir helfen Ihnen dabei, Leistungen, Bedingungen und Beiträge verständlich zu vergleichen.'
                            )}
                          </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', 'Leistung')}
                                </div>
                                <div className="text-gray-600">
                                  {t('overview.feature1Desc', 'Monatliche BU-Rente')}
                                </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', 'Schutz')}
                                </div>
                                <div className="text-gray-600">
                                  {t('overview.feature2Desc', 'Individuelle Bedingungen')}
                                </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('iStock-1065789424.jpg')}
                              alt={t('overview.imageAlt', 'Berufsunfähigkeitsversicherung')}
                              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', 'Absicherung prüfen')}</span>
                              </div>
                              <div className="mt-2 text-sm text-gray-600">
                                {t(
                                  'overview.imageSubtext',
                                  'Wir unterstützen Sie bei der Auswahl der passenden BU-Lösung.'
                                )}
                              </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',
                            'Worauf es bei der BU ankommt: Bedingungen, Gesundheitsfragen, Laufzeit und passende Rentenhöhe.'
                          )}
                        </p>
                      </div>

                      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {[
                          {
                            icon: TrendingUp,
                            title: t('details.cards.0.title', 'Höhe der BU-Rente'),
                            desc: t('details.cards.0.desc', 'Passend zum Einkommen und Lebensstandard'),
                          },
                          {
                            icon: ShieldCheck,
                            title: t('details.cards.1.title', 'Bedingungen'),
                            desc: t('details.cards.1.desc', 'Wichtige Klauseln und Leistungsdefinitionen'),
                          },
                          {
                            icon: BadgeCheck,
                            title: t('details.cards.2.title', 'Gesundheitsprüfung'),
                            desc: t('details.cards.2.desc', 'Risikovoranfrage & transparente Angaben'),
                          },
                        ].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_CALCULATOR} className="mt-0">
                    <div className="max-w-2xl mx-auto">
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-2xl">{t('calculator.title', 'Bedarfs-Check')}</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 folgt – wir beraten Sie gern zur passenden BU-Rentenhöhe und Laufzeit.'
                            )}
                          </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('iStock-1065789424.jpg')}
                        alt={t('form.imageAlt', 'BU Beratung')}
                      >
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
                            <CardDescription>
                              {t(
                                'form.tipDescription',
                                'Je früher der Abschluss, desto besser sind häufig Beiträge und Annahmemöglichkeiten.'
                              )}
                            </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',
                                  'Definition Berufsunfähigkeit, Verweisbarkeit, Nachversicherung, Laufzeit, Dynamik.'
                                )}
                              </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('iStock-1065789424.jpg')}
                          alt={t('catalog.imageAlt', 'Ratgeber BU')}
                        >
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
                              <CardDescription>
                                {t(
                                  'catalog.boxDescription',
                                  'Nicht nur der Beitrag zählt – Bedingungen und Leistungsfall-Regelungen sind entscheidend.'
                                )}
                              </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('iStock-1065789424.jpg')}
                          alt={t('brochure.imageAlt', 'PDF BU')}
                        >
                          <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 Berufsunfaehigkeitsversicherung;