'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../../components/Navigation';
import { Footer } from '../../../components/Footer';
import { Head } from '../../../components/Head';
import { Database, Shield, Zap, RotateCcw, BarChart3, Settings, Check, Star } from 'lucide-react';

export default function RDSPage() {
    const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');

    const translations = {
        zh: {
            title: '云数据库 RDS - 关系型数据库服务 | CloudPro',
            description:
                '高可用云数据库RDS，支持MySQL、PostgreSQL、SQL Server等多种数据库引擎，提供自动备份、读写分离、监控告警等企业级功能。',
            keywords: '云数据库,RDS,MySQL,PostgreSQL,SQL Server,数据库服务',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '云数据库 RDS',
                subtitle: '关系型数据库服务',
                description: '企业级云数据库服务，提供高可用、高性能、易管理的数据库解决方案',
            },
            features: [
                {
                    icon: Database,
                    title: '多引擎支持',
                    description: '支持MySQL、PostgreSQL、SQL Server等主流数据库引擎',
                },
                {
                    icon: Shield,
                    title: '高可用架构',
                    description: '主从热备、自动故障切换，保证99.95%的服务可用性',
                },
                {
                    icon: RotateCcw,
                    title: '自动备份',
                    description: '支持自动备份和手动备份，数据安全有保障',
                },
                {
                    icon: Zap,
                    title: '读写分离',
                    description: '支持读写分离，提升数据库性能和并发能力',
                },
                {
                    icon: BarChart3,
                    title: '监控告警',
                    description: '实时监控数据库性能，异常情况及时告警',
                },
                {
                    icon: Settings,
                    title: '参数优化',
                    description: '专业DBA团队优化数据库参数，提升性能',
                },
            ],

            engines: [
                {
                    name: 'MySQL',
                    version: '5.7 / 8.0',
                    description: '最流行的开源关系型数据库',
                    features: ['高性能', '易使用', '社区活跃', '兼容性好'],
                },
                {
                    name: 'PostgreSQL',
                    version: '12 / 13 / 14',
                    description: '功能强大的开源对象关系型数据库',
                    features: ['功能丰富', '标准兼容', '扩展性强', '数据完整性'],
                },
                {
                    name: 'SQL Server',
                    version: '2017 / 2019',
                    description: '微软企业级关系型数据库',
                    features: ['企业级', '集成度高', '商业支持', 'BI功能'],
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基础版',
                    popular: false,
                    price: '¥199',
                    period: '/月',
                    specs: {
                        cpu: '2核',
                        memory: '4GB',
                        storage: '100GB',
                        connections: '1000',
                        backup: '7天',
                    },
                    features: ['适合小型应用', '基础监控', '自动备份', '技术支持'],
                },
                {
                    id: 'standard',
                    name: '标准版',
                    popular: true,
                    price: '¥499',
                    period: '/月',
                    specs: {
                        cpu: '4核',
                        memory: '8GB',
                        storage: '200GB',
                        connections: '2000',
                        backup: '30天',
                    },
                    features: ['适合中型应用', '读写分离', '高级监控', '参数优化', '专属支持'],
                },
                {
                    id: 'premium',
                    name: '企业版',
                    popular: false,
                    price: '¥999',
                    period: '/月',
                    specs: {
                        cpu: '8核',
                        memory: '16GB',
                        storage: '500GB',
                        connections: '5000',
                        backup: '365天',
                    },
                    features: ['适合大型应用', '高可用集群', '实时监控', '性能调优', '7x24支持'],
                },
            ],
        },
        'zh-tw': {
            title: '雲資料庫 RDS - 關聯式資料庫服務 | CloudPro',
            description:
                '高可用雲資料庫RDS，支援MySQL、PostgreSQL、SQL Server等多種資料庫引擎，提供自動備份、讀寫分離、監控告警等企業級功能。',
            keywords: '雲資料庫,RDS,MySQL,PostgreSQL,SQL Server,資料庫服務',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '雲資料庫 RDS',
                subtitle: '關聯式資料庫服務',
                description: '企業級雲資料庫服務，提供高可用、高效能、易管理的資料庫解決方案',
            },
            features: [
                {
                    icon: Database,
                    title: '多引擎支援',
                    description: '支援MySQL、PostgreSQL、SQL Server等主流資料庫引擎',
                },
                {
                    icon: Shield,
                    title: '高可用架構',
                    description: '主從熱備、自動故障切換，保證99.95%的服務可用性',
                },
                {
                    icon: RotateCcw,
                    title: '自動備份',
                    description: '支援自動備份和手動備份，資料安全有保障',
                },
                {
                    icon: Zap,
                    title: '讀寫分離',
                    description: '支援讀寫分離，提升資料庫效能和併發能力',
                },
                {
                    icon: BarChart3,
                    title: '監控告警',
                    description: '即時監控資料庫效能，異常情況及時告警',
                },
                {
                    icon: Settings,
                    title: '參數優化',
                    description: '專業DBA團隊優化資料庫參數，提升效能',
                },
            ],

            engines: [
                {
                    name: 'MySQL',
                    version: '5.7 / 8.0',
                    description: '最流行的開源關聯式資料庫',
                    features: ['高效能', '易使用', '社群活躍', '相容性好'],
                },
                {
                    name: 'PostgreSQL',
                    version: '12 / 13 / 14',
                    description: '功能強大的開源物件關聯式資料庫',
                    features: ['功能豐富', '標準相容', '擴展性強', '資料完整性'],
                },
                {
                    name: 'SQL Server',
                    version: '2017 / 2019',
                    description: '微軟企業級關聯式資料庫',
                    features: ['企業級', '整合度高', '商業支援', 'BI功能'],
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基礎版',
                    popular: false,
                    price: 'NT$5,990',
                    period: '/月',
                    specs: {
                        cpu: '2核',
                        memory: '4GB',
                        storage: '100GB',
                        connections: '1000',
                        backup: '7天',
                    },
                    features: ['適合小型應用', '基礎監控', '自動備份', '技術支援'],
                },
                {
                    id: 'standard',
                    name: '標準版',
                    popular: true,
                    price: 'NT$14,990',
                    period: '/月',
                    specs: {
                        cpu: '4核',
                        memory: '8GB',
                        storage: '200GB',
                        connections: '2000',
                        backup: '30天',
                    },
                    features: ['適合中型應用', '讀寫分離', '高級監控', '參數優化', '專屬支援'],
                },
                {
                    id: 'premium',
                    name: '企業版',
                    popular: false,
                    price: 'NT$29,990',
                    period: '/月',
                    specs: {
                        cpu: '8核',
                        memory: '16GB',
                        storage: '500GB',
                        connections: '5000',
                        backup: '365天',
                    },
                    features: ['適合大型應用', '高可用叢集', '即時監控', '效能調優', '7x24支援'],
                },
            ],
        },
        en: {
            title: 'Cloud Database RDS - Relational Database Service | CloudPro',
            description:
                'High-availability Cloud Database RDS supporting MySQL, PostgreSQL, SQL Server and more database engines with enterprise features like auto backup, read-write splitting, monitoring and alerts.',
            keywords: 'cloud database,RDS,MySQL,PostgreSQL,SQL Server,database service',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Cloud Database RDS',
                subtitle: 'Relational Database Service',
                description:
                    'Enterprise-grade cloud database service providing high availability, high performance, and easy-to-manage database solutions',
            },
            features: [
                {
                    icon: Database,
                    title: 'Multi-Engine Support',
                    description:
                        'Support mainstream database engines like MySQL, PostgreSQL, SQL Server',
                },
                {
                    icon: Shield,
                    title: 'High Availability',
                    description:
                        'Master-slave hot backup, automatic failover, ensuring 99.95% service availability',
                },
                {
                    icon: RotateCcw,
                    title: 'Auto Backup',
                    description: 'Support automatic and manual backup, ensuring data security',
                },
                {
                    icon: Zap,
                    title: 'Read-Write Splitting',
                    description:
                        'Support read-write splitting to improve database performance and concurrency',
                },
                {
                    icon: BarChart3,
                    title: 'Monitoring & Alerts',
                    description:
                        'Real-time database performance monitoring with timely alerts for anomalies',
                },
                {
                    icon: Settings,
                    title: 'Parameter Optimization',
                    description:
                        'Professional DBA team optimizes database parameters for better performance',
                },
            ],

            engines: [
                {
                    name: 'MySQL',
                    version: '5.7 / 8.0',
                    description: 'Most popular open-source relational database',
                    features: [
                        'High Performance',
                        'Easy to Use',
                        'Active Community',
                        'Good Compatibility',
                    ],
                },
                {
                    name: 'PostgreSQL',
                    version: '12 / 13 / 14',
                    description: 'Powerful open-source object-relational database',
                    features: [
                        'Feature Rich',
                        'Standards Compliant',
                        'Highly Extensible',
                        'Data Integrity',
                    ],
                },
                {
                    name: 'SQL Server',
                    version: '2017 / 2019',
                    description: 'Microsoft enterprise-grade relational database',
                    features: [
                        'Enterprise Grade',
                        'High Integration',
                        'Commercial Support',
                        'BI Features',
                    ],
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: 'Basic',
                    popular: false,
                    price: '$29',
                    period: '/month',
                    specs: {
                        cpu: '2 Core',
                        memory: '4GB',
                        storage: '100GB',
                        connections: '1000',
                        backup: '7 days',
                    },
                    features: [
                        'Small applications',
                        'Basic monitoring',
                        'Auto backup',
                        'Technical support',
                    ],
                },
                {
                    id: 'standard',
                    name: 'Standard',
                    popular: true,
                    price: '$75',
                    period: '/month',
                    specs: {
                        cpu: '4 Core',
                        memory: '8GB',
                        storage: '200GB',
                        connections: '2000',
                        backup: '30 days',
                    },
                    features: [
                        'Medium applications',
                        'Read-write splitting',
                        'Advanced monitoring',
                        'Parameter optimization',
                        'Dedicated support',
                    ],
                },
                {
                    id: 'premium',
                    name: 'Enterprise',
                    popular: false,
                    price: '$149',
                    period: '/month',
                    specs: {
                        cpu: '8 Core',
                        memory: '16GB',
                        storage: '500GB',
                        connections: '5000',
                        backup: '365 days',
                    },
                    features: [
                        'Large applications',
                        'High availability cluster',
                        'Real-time monitoring',
                        'Performance tuning',
                        '7x24 support',
                    ],
                },
            ],
        },
    };

    const t = translations[currentLang];

    useEffect(() => {
        const browserLang = navigator.language.toLowerCase();
        if (browserLang.includes('en')) {
            setCurrentLang('en');
        } else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
            setCurrentLang('zh-tw');
        }
    }, []);

    return (
        <div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
            <Head
                title={t.title}
                description={t.description}
                keywords={t.keywords}
                currentLang={currentLang}
            />

            <Navigation
                currentLang={currentLang}
                onLanguageChange={setCurrentLang}
                translations={translations}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-5xl font-bold mb-6">{t.hero.title}</h1>
                        <p className="text-xl md:text-2xl text-yellow-100 mb-8">
                            {t.hero.subtitle}
                        </p>
                        <p className="text-lg text-yellow-200 max-w-3xl mx-auto">
                            {t.hero.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Features Section */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {t.features.map((feature, index) => {
                            const IconComponent = feature.icon;
                            return (
                                <div
                                    key={index}
                                    className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
                                >
                                    <div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6">
                                        <IconComponent className="w-6 h-6 text-white" />
                                    </div>
                                    <h3 className="text-xl font-semibold text-amber-900 mb-4">
                                        {feature.title}
                                    </h3>
                                    <p className="text-amber-700 leading-relaxed">
                                        {feature.description}
                                    </p>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* Database Engines */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
                            {currentLang === 'zh'
                                ? '支持的数据库引擎'
                                : currentLang === 'zh-tw'
                                  ? '支援的資料庫引擎'
                                  : 'Supported Database Engines'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '选择最适合您业务的数据库引擎'
                                : currentLang === 'zh-tw'
                                  ? '選擇最適合您業務的資料庫引擎'
                                  : 'Choose the database engine that best fits your business'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {t.engines.map((engine, index) => (
                            <div
                                key={index}
                                className="bg-gradient-to-br from-amber-50 to-yellow-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
                            >
                                <div className="text-center mb-6">
                                    <h3 className="text-2xl font-bold text-amber-900 mb-2">
                                        {engine.name}
                                    </h3>
                                    <p className="text-amber-600 font-medium">
                                        {currentLang === 'zh'
                                            ? '版本: '
                                            : currentLang === 'zh-tw'
                                              ? '版本: '
                                              : 'Version: '}
                                        {engine.version}
                                    </p>
                                </div>

                                <p className="text-amber-700 mb-6 text-center">
                                    {engine.description}
                                </p>

                                <div className="space-y-2">
                                    {engine.features.map((feature, featureIndex) => (
                                        <div key={featureIndex} className="flex items-center">
                                            <Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />

                                            <span className="text-amber-700">{feature}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Pricing Plans */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
                            {currentLang === 'zh'
                                ? '选择适合的版本'
                                : currentLang === 'zh-tw'
                                  ? '選擇適合的版本'
                                  : 'Choose Your Plan'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '根据业务规模选择合适的数据库配置'
                                : currentLang === 'zh-tw'
                                  ? '根據業務規模選擇合適的資料庫配置'
                                  : 'Select the right database configuration based on your business scale'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {t.plans.map((plan) => (
                            <div
                                key={plan.id}
                                className={`relative bg-white rounded-xl shadow-lg border-2 transition-all duration-300 hover:shadow-xl ${
                                    plan.popular
                                        ? 'border-amber-500 transform scale-105'
                                        : 'border-amber-200 hover:border-amber-300'
                                }`}
                            >
                                {plan.popular && (
                                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                                        <div className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center space-x-1">
                                            <Star className="w-4 h-4" />
                                            <span>
                                                {currentLang === 'zh'
                                                    ? '推荐'
                                                    : currentLang === 'zh-tw'
                                                      ? '推薦'
                                                      : 'Popular'}
                                            </span>
                                        </div>
                                    </div>
                                )}

                                <div className="p-8">
                                    <h3 className="text-2xl font-bold text-amber-900 mb-4">
                                        {plan.name}
                                    </h3>

                                    <div className="mb-6">
                                        <span className="text-4xl font-bold text-amber-600">
                                            {plan.price}
                                        </span>
                                        <span className="text-amber-700 ml-2">{plan.period}</span>
                                    </div>

                                    <div className="mb-6 space-y-3">
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">CPU:</span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.cpu}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '内存:'
                                                    : currentLang === 'zh-tw'
                                                      ? '記憶體:'
                                                      : 'Memory:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.memory}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '存储:'
                                                    : currentLang === 'zh-tw'
                                                      ? '儲存:'
                                                      : 'Storage:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.storage}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '连接数:'
                                                    : currentLang === 'zh-tw'
                                                      ? '連接數:'
                                                      : 'Connections:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.connections}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '备份:'
                                                    : currentLang === 'zh-tw'
                                                      ? '備份:'
                                                      : 'Backup:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.backup}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="mb-8">
                                        <ul className="space-y-2">
                                            {plan.features.map((feature, index) => (
                                                <li
                                                    key={index}
                                                    className="flex items-center text-amber-700"
                                                >
                                                    <Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />

                                                    {feature}
                                                </li>
                                            ))}
                                        </ul>
                                    </div>

                                    <button
                                        className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-200 ${
                                            plan.popular
                                                ? 'bg-gradient-to-r from-amber-500 to-yellow-500 text-white hover:from-amber-600 hover:to-yellow-600'
                                                : 'border-2 border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white'
                                        }`}
                                    >
                                        {currentLang === 'zh'
                                            ? '立即购买'
                                            : currentLang === 'zh-tw'
                                              ? '立即購買'
                                              : 'Buy Now'}
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <Footer currentLang={currentLang} translations={translations} />
        </div>
    );
}