import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, PiggyBank, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, TrendingUp } from 'lucide-react';
import Layout from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';

const RiesterRente = () => {
  const { t } = useTranslation('riesterRente');
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    age: '',
    income: '',
    familyStatus: '',
    children: '',
    message: ''
  });

  const handleFormChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert('Vielen Dank! Wir melden uns kurzfristig bei dir.');
  };

  const benefits = [
    {
      icon: TrendingUp,
      title: t('details.benefits.b1.title', 'Staatliche Zulagen'),
      description: t('details.benefits.b1.description', 'Großzügige Förderung durch den Staat'),
    },
    {
      icon: Shield,
      title: t('details.benefits.b2.title', 'Steuerliche Vorteile'),
      description: t('details.benefits.b2.description', 'Steuerfreie Beiträge im Ansparphase'),
    },
    {
      icon: PiggyBank,
      title: t('details.benefits.b3.title', 'Sichere Rente'),
      description: t('details.benefits.b3.description', 'Garantierte Leistungen im Alter'),
    },
    {
      icon: Users,
      title: t('details.benefits.b4.title', 'Kindersicherung'),
      description: t('details.benefits.b4.description', 'Zusätzliche Zulagen für Kinder'),
    },
    {
      icon: CheckCircle,
      title: t('details.benefits.b5.title', 'Flexibel'),
      description: t('details.benefits.b5.description', 'An Ihre Lebenssituation anpassbar'),
    },
    {
      icon: Star,
      title: t('details.benefits.b6.title', 'Widerrufsmöglichkeit'),
      description: t('details.benefits.b6.description', 'Spezielles Kündigungsrecht'),
    }
  ];

  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%') }
  ];

  return (
    <Layout>
      <div className="min-h-screen bg-white">
        {/* Hero Section */}
        <div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h1 className="text-4xl font-bold text-gray-900 mb-6">
                {t('hero.title', 'Riester-Rente')}
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                {t('hero.subtitle', 'Staatlich geförderte Altersvorsorge mit attraktiven Zulagen')}
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button 
                  size="lg" 
                  onClick={() => setActiveTab('form')}
                  className="bg-blue-600 hover:bg-blue-700"
                >
                  {t('hero.cta1', 'Jetzt beraten lassen')}
                </Button>
                <Button 
                  size="lg" 
                  variant="outline"
                  onClick={() => setActiveTab('calculator')}
                >
                  {t('hero.cta2', 'Förderung berechnen')}
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="container mx-auto px-4 py-8">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-7 mb-8">
              <TabsTrigger value="overview">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
              <TabsTrigger value="details">{t('tabs.details', 'Details')}</TabsTrigger>
              <TabsTrigger value="statistics">{t('tabs.statistics', 'Statistik')}</TabsTrigger>
              <TabsTrigger value="calculator">{t('tabs.calculator', 'Rechner')}</TabsTrigger>
              <TabsTrigger value="form">{t('tabs.form', 'Anfrage')}</TabsTrigger>
              <TabsTrigger value="claims">{t('tabs.claims', 'Leistung')}</TabsTrigger>
              <TabsTrigger value="brochure">{t('tabs.brochure', 'Broschüre')}</TabsTrigger>
            </TabsList>

            {/* Übersicht Tab */}
            <TabsContent value="overview">
              <TwoColumnTab
                title={t('overview.title', 'Riester-Rente - Ihre staatlich geförderte Rente')}
                description={t('overview.description', 'Mit der Riester-Rente sichern Sie sich staatliche Zulagen und steuerliche Vorteile für Ihre Altersvorsorge. Wir finden den passenden Tarif für Ihre Bedürfnisse.')}
                image={assetUrl('iStock-957363908.jpg')}
                imageAlt={t('overview.imageAlt', 'Riester-Rente')}
                features={benefits}
              />
            </TabsContent>

            {/* Details Tab */}
            <TabsContent value="details">
              <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', 'Leistungen im Detail')}
                  </h2>
                  <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                    {t('details.subtitle', 'Entdecken Sie die Vorteile der Riester-Rente')}
                  </p>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {benefits.map((benefit, index) => (
                    <Card key={index} className="h-full">
                      <CardHeader>
                        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                          <benefit.icon className="w-6 h-6 text-blue-600" />
                        </div>
                        <CardTitle className="text-xl">{benefit.title}</CardTitle>
                        <CardDescription>{benefit.description}</CardDescription>
                      </CardHeader>
                    </Card>
                  ))}
                </div>
              </div>
            </TabsContent>

            {/* Statistik Tab */}
            <TabsContent value="statistics">
              <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>

                <RightImageCard
                  title={t('statistics.comparison.title', 'Fördervergleich')}
                  description={t('statistics.comparison.description', 'Wie viel Förderung erhalten Sie?')}
                  image={assetUrl('iStock-957363908.jpg')}
                  imageAlt={t('statistics.comparison.imageAlt', 'Riester Förderung')}
                />
              </div>
            </TabsContent>

            {/* Rechner Tab */}
            <TabsContent value="calculator">
              <div className="max-w-2xl mx-auto">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      {t('calculator.title', 'Förderrechner')}
                    </CardTitle>
                    <CardDescription>
                      {t('calculator.subtitle', 'Berechnen Sie Ihre staatliche Förderung')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        {t('calculator.income', 'Jahreseinkommen')}
                      </label>
                      <input
                        type="number"
                        className="w-full p-2 border rounded"
                        placeholder="50.000"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        {t('calculator.children', 'Anzahl Kinder')}
                      </label>
                      <input
                        type="number"
                        className="w-full p-2 border rounded"
                        placeholder="2"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        {t('calculator.status', 'Veranlagungsstatus')}
                      </label>
                      <select className="w-full p-2 border rounded">
                        <option>{t('calculator.single', 'Ledig')}</option>
                        <option>{t('calculator.married', 'Verheiratet')}</option>
                      </select>
                    </div>
                    <Button className="w-full">
                      {t('calculator.calculate', 'Förderung berechnen')}
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            {/* Formular Tab */}
            <TabsContent value="form">
              <div className="max-w-2xl mx-auto">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      {t('form.title', 'Beratungsanfrage')}
                    </CardTitle>
                    <CardDescription>
                      {t('form.subtitle', 'Wir finden den optimalen Riester-Vertrag für Sie')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-6">
                      <div className="grid md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium mb-2">
                            {t('form.name', 'Name')}
                          </label>
                          <input
                            type="text"
                            name="name"
                            value={formData.name}
                            onChange={handleFormChange}
                            className="w-full p-2 border rounded"
                            required
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-2">
                            {t('form.phone', 'Telefon')}
                          </label>
                          <input
                            type="tel"
                            name="phone"
                            value={formData.phone}
                            onChange={handleFormChange}
                            className="w-full p-2 border rounded"
                            required
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-2">
                          {t('form.email', 'E-Mail')}
                        </label>
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleFormChange}
                          className="w-full p-2 border rounded"
                          required
                        />
                      </div>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium mb-2">
                            {t('form.age', 'Alter')}
                          </label>
                          <input
                            type="number"
                            name="age"
                            value={formData.age}
                            onChange={handleFormChange}
                            className="w-full p-2 border rounded"
                            required
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-2">
                            {t('form.income', 'Einkommen')}
                          </label>
                          <input
                            type="number"
                            name="income"
                            value={formData.income}
                            onChange={handleFormChange}
                            className="w-full p-2 border rounded"
                            required
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-2">
                          {t('form.message', 'Nachricht')}
                        </label>
                        <textarea
                          name="message"
                          value={formData.message}
                          onChange={handleFormChange}
                          rows={4}
                          className="w-full p-2 border rounded"
                        />
                      </div>
                      <Button type="submit" className="w-full">
                        {t('form.submit', 'Anfrage senden')}
                      </Button>
                    </form>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            {/* Leistung Tab */}
            <TabsContent value="claims">
              <div className="max-w-2xl mx-auto">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      {t('claims.title', 'Leistungen im Alter')}
                    </CardTitle>
                    <CardDescription>
                      {t('claims.subtitle', 'So erhalten Sie Ihre Rente')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="space-y-4">
                      <div className="flex items-start space-x-3">
                        <AlertCircle className="w-5 h-5 text-blue-600 mt-1" />
                        <div>
                          <h3 className="font-semibold">{t('claims.step1', 'Rentenbeginn')}</h3>
                          <p className="text-sm text-gray-600">{t('claims.step1desc', 'Auszahlung ab dem regulären Rentenalter')}</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-3">
                        <FileCheck className="w-5 h-5 text-blue-600 mt-1" />
                        <div>
                          <h3 className="font-semibold">{t('claims.step2', 'Leistungsformen')}</h3>
                          <p className="text-sm text-gray-600">{t('claims.step2desc', 'Rente oder Kapitalauswahl möglich')}</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-3">
                        <Clock className="w-5 h-5 text-blue-600 mt-1" />
                        <div>
                          <h3 className="font-semibold">{t('claims.step3', 'Lebenslange Rente')}</h3>
                          <p className="text-sm text-gray-600">{t('claims.step3desc', 'Garantierte Zahlung lebenslang')}</p>
                        </div>
                      </div>
                    </div>
                    <Button className="w-full">
                      {t('claims.button', 'Leistungen prüfen')}
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            {/* Broschüre Tab */}
            <TabsContent value="brochure">
              <div className="max-w-2xl mx-auto">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      {t('brochure.title', 'Informationsmaterial')}
                    </CardTitle>
                    <CardDescription>
                      {t('brochure.subtitle', 'Downloaden Sie unsere Broschüren und Ratgeber')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-4 border rounded">
                        <div className="flex items-center space-x-3">
                          <FileText className="w-5 h-5 text-blue-600" />
                          <div>
                            <h3 className="font-semibold">{t('brochure.guide1', 'Riester-Rente Ratgeber')}</h3>
                            <p className="text-sm text-gray-600">{t('brochure.guide1desc', 'Alles Wichtige zur staatlichen Förderung')}</p>
                          </div>
                        </div>
                        <Button variant="outline" size="sm">
                          <Download className="w-4 h-4 mr-2" />
                          {t('brochure.download', 'Download')}
                        </Button>
                      </div>
                      <div className="flex items-center justify-between p-4 border rounded">
                        <div className="flex items-center space-x-3">
                          <FileText className="w-5 h-5 text-blue-600" />
                          <div>
                            <h3 className="font-semibold">{t('brochure.guide2', 'Förderrechner')}</h3>
                            <p className="text-sm text-gray-600">{t('brochure.guide2desc', 'Ihre persönliche Förderung berechnen')}</p>
                          </div>
                        </div>
                        <Button variant="outline" size="sm">
                          <Download className="w-4 h-4 mr-2" />
                          {t('brochure.download', 'Download')}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>

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

export default RiesterRente;