import React, { useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  CheckCircle,
  ClipboardList,
  Download,
  HeartPulse,
  Hospital,
  Mail,
  Phone,
  Shield,
  FileText,
  Calculator,
  Users,
  Star,
  Home,
  Activity,
  Baby,
  Heart,
  FileCheck
} 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 { 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 KinderGesundheit = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('kinder_gesundheit');

  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 === 'zahn') {
      navigate('/familien-kinder/gesundheit/zahn', { replace: true });
      return;
    }

    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, navigate]);

  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 WHATSAPP_URL = 'https://wa.me/491719864053';
  const EMAIL = 'info@finanzen-mizera.de';

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        <HeroSlider
          slides={[
            {
              id: 'familien-kinder-gesundheit-1',
              kicker: t('hero.kicker', 'Gesundheit'),
              title: t('hero.title', 'Nur das Beste für Ihr Kind?'),
              subtitle: t('hero.subtitle', 'Eine sehr gesunde Entscheidung.'),
              imageUrl: assetUrl('Fotolia_59162559_S.jpg'),
              imagePosition: 'center',
              ctas: [
                { label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
                { label: t('hero.cta2', 'Zur Übersicht'), href: '/familien-kinder' },
              ],
            },
          ]}
        />

        <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">
                <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"
                  >
                    <HeartPulse 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 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-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
                            <HeartPulse className="w-4 h-4" />
                            <span>{t('overview.badge', 'Nur das Beste für Ihr Kind?')}</span>
                          </div>
                          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                            {t('overview.title', 'Nur das Beste für Ihr Kind?')}
                            <span className="block text-green-700">{t('overview.subtitle', 'Eine sehr gesunde Entscheidung.')}</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-green-700 hover:bg-green-800">
                              {t('overview.cta1', 'Angebot anfordern')}
                            </Button>
                            <Button variant="outline" onClick={() => navigate('/kontakt')} 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">
                              <Shield className="w-5 h-5 text-green-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('overview.feature1Title', 'Planbar')}</div>
                                <div className="text-gray-600">{t('overview.feature1Desc', 'bessere Leistungen')}</div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <ClipboardList className="w-5 h-5 text-green-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">{t('overview.feature2Title', 'Flexibel')}</div>
                                <div className="text-gray-600">{t('overview.feature2Desc', 'Bausteine wählen')}</div>
                              </div>
                            </div>
                          </div>
                        </>
                      }
                      right={
                        <div className="relative">
                          <div className="absolute inset-0 bg-gradient-to-tr from-green-100 to-white rounded-2xl" />
                          <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                            <img
                              src={assetUrl('Fotolia_59162559_S.jpg')}
                              alt="Kinder Gesundheit"
                              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">
                                <HeartPulse className="w-4 h-4" />
                                <span>{t('overview.imageCaption', 'Zahn, Brille, Klinik')}</span>
                              </div>
                              <div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</div>
                            </div>
                          </div>
                        </div>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_BROCHURE} className="mt-0">
                    <div id={TAB_BROCHURE} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Kundenbroschüre (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', 'Broschüre')}</CardTitle>
                              <CardDescription>{t('brochure.cardDescription', 'Gerne senden wir dir die passende Broschüre zu.')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <Link to="/contact" className="inline-flex w-full">
                                <Button className="w-full bg-green-700 hover:bg-green-800">{t('brochure.cta', 'Broschüre anfragen')}</Button>
                              </Link>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('Fotolia_59162559_S.jpg')} alt="Kundenbroschüre">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
                              <CardDescription>{t('brochure.tipDescription', 'Wir helfen bei der Auswahl der richtigen Leistungen.')}</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_DETAILS} className="mt-0">
                    <div id={TAB_DETAILS} />
                    <div className="mb-6">
                      <div className="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
                        <Hospital className="w-4 h-4" />
                        <span>{t('details.kicker')}</span>
                      </div>
                      <h3 className="text-2xl font-bold text-gray-900">{t('details.title')}</h3>
                      <p className="mt-2 text-gray-600">{t('details.description')}</p>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg flex items-center gap-2">
                            <Shield className="w-5 h-5 text-green-700" />
                            {t('details.leistung.title', 'Leistung')}
                          </CardTitle>
                          <CardDescription>{t('details.leistung.badge', 'clinic+')}</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm">
                          <div className="space-y-2">
                            {(t('details.leistung.rows', { returnObjects: true }) as unknown as string[]).map((row) => (
                              <div key={row} className="flex items-start gap-2">
                                <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                <span className="text-gray-900">{row}</span>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>

                      <RightImageCard src={assetUrl('iStock-819100588.jpg')} alt="clinic+">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('details.ueberblick.title')}</CardTitle>
                            <CardDescription>{t('details.ueberblick.badge')}</CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm">
                            <div className="space-y-2">
                              {(t('details.ueberblick.items', { returnObjects: true }) as unknown as string[]).map((row) => (
                                <div key={row} className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                  <span className="text-gray-900">{row}</span>
                                </div>
                              ))}
                            </div>
                            <div className="mt-4 text-xs text-gray-500">{t('details.ueberblick.disclaimer')}</div>
                          </CardContent>
                        </Card>
                      </RightImageCard>

                      <div className="space-y-6">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('details.leistungsfall.title')}</CardTitle>
                            <CardDescription>{t('details.leistungsfall.description')}</CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm">
                            <div className="rounded-lg border border-green-200 bg-green-50 p-4">
                              <div className="text-sm text-green-900 font-semibold">
                                {t('details.leistungsfall.priceSticker.prefix')}
                              </div>
                              <div className="mt-1 text-sm text-green-900">
                                <span className="font-bold">{t('details.leistungsfall.priceSticker.price')}</span>
                                <span className="ml-1">{t('details.leistungsfall.priceSticker.suffix')}</span>
                              </div>
                            </div>

                            <div className="mt-4 space-y-2">
                              {(t('details.leistungsfall.rows', { returnObjects: true }) as unknown as Array<{ label: string; value: string; strong?: boolean }>).map(
                                (row) => (
                                  <div key={`${row.label}-${row.value}`} className="flex items-start justify-between gap-3">
                                    <div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.label}</div>
                                    <div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.value}</div>
                                  </div>
                                ),
                              )}
                            </div>

                            <div className="mt-4 rounded-lg border border-gray-200 bg-white p-4">
                              <div className="text-sm text-gray-900 font-semibold">{t('details.leistungsfall.clinicPlusTitle')}</div>
                              <div className="mt-2 flex items-center justify-between gap-3">
                                <div className="text-sm text-gray-700">{t('details.leistungsfall.clinicPlusLabel')}</div>
                                <div className="text-sm font-bold text-green-800">{t('details.leistungsfall.clinicPlusValue')}</div>
                              </div>
                              <Button
                                onClick={() => onTabChange(TAB_FORM)}
                                className="mt-4 w-full bg-green-700 hover:bg-green-800"
                              >
                                {t('details.leistungsfall.cta')}
                              </Button>
                            </div>
                          </CardContent>
                        </Card>

                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('details.hinweis.title')}</CardTitle>
                            <CardDescription>{t('details.hinweis.subtitle')}</CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm text-gray-700">{t('details.hinweis.text')}</CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_CALCULATOR} className="mt-0">
                    <div id={TAB_CALCULATOR} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('calculator.title')}</h3>
                          <p className="mt-2 text-gray-600">{t('calculator.description')}</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('calculator.example')}</CardTitle>
                              <CardDescription>{t('calculator.exampleDescription')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <div className="rounded-lg border border-green-200 bg-green-50 p-4">
                                <div className="text-sm text-green-900 font-semibold">{t('calculator.exampleValueDescription')}</div>
                                <div className="mt-1 text-sm text-green-900">
                                  <span className="font-bold">{t('calculator.exampleValue')}</span>
                                </div>
                                <div className="text-xs text-green-900/80 mt-2">{t('calculator.exampleDisclaimer')}</div>
                              </div>

                              <Button onClick={() => onTabChange(TAB_FORM)} className="mt-4 w-full bg-green-700 hover:bg-green-800">
                                {t('calculator.cta', 'Poproś o ofertę')}
                              </Button>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('calculator.requirements')}</CardTitle>
                            <CardDescription>{t('calculator.requirementsDescription')}</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                              <span>{t('calculator.requirement1')}</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                              <span>{t('calculator.requirement2')}</span>
                            </div>
                          </CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_FORM} className="mt-0">
                    <div id={TAB_FORM} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('form.title')}</h3>
                          <p className="mt-2 text-gray-600">{t('form.description')}</p>

                          <div className="mt-4 flex flex-col sm:flex-row gap-3">
                            <Link to="/contact" className="inline-flex">
                              <Button className="bg-green-700 hover:bg-green-800">{t('hero.cta1', 'Jetzt beraten lassen')}</Button>
                            </Link>
                            <Button variant="outline" className="gap-2" onClick={() => window.print()}>
                              <Download className="w-4 h-4" />
                              {t('catalog.download', 'Als PDF speichern')}
                            </Button>
                          </div>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">{t('form.directContact')}</CardTitle>
                            <CardDescription>{t('form.directContactDescription')}</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-green-700" />
                              <span>
                                {phoneLabel}{' '}
                                <a
                                  href={WHATSAPP_URL}
                                  target="_blank"
                                  rel="noreferrer"
                                  className="underline text-green-700 hover:text-green-800"
                                >
                                  (auch WhatsApp)
                                </a>
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-green-700" />
                              <a
                                href={`mailto:${EMAIL}`}
                                className="text-gray-700 hover:text-green-800 underline"
                              >
                                {t('form.email', 'E-Mail: info@finanzen-mizera.de')}
                              </a>
                            </div>
                          </CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_CATALOG} className="mt-0">
                    <div id={TAB_CATALOG} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('catalog.title')}</h3>
                          <p className="mt-2 text-gray-600">{t('catalog.description')}</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('catalog.checklist')}</CardTitle>
                              <CardDescription>{t('catalog.checklistDescription')}</CardDescription>
                            </CardHeader>
                            <CardContent className="text-sm">
                              <div className="space-y-2">
                                {[
                                  'Leistungsumfang (KFO, Prophylaxe, Wahlleistungen)',
                                  'Wartezeiten & Summenbegrenzungen',
                                  'Erstattungssätze & Bedingungen',
                                  'Beitragsentwicklung im Blick behalten',
                                ].map((row) => (
                                  <div key={row} className="flex items-start gap-2">
                                    <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                    <span className="text-gray-900">{row}</span>
                                  </div>
                                ))}
                              </div>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('Fotolia_59162559_S.jpg')} alt="Ratgeber">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Frage?</CardTitle>
                              <CardDescription>Wir beraten persönlich.</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <GeneralNotice />
                </div>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default KinderGesundheit;