'use client';

import React from 'react';
import { Settings, Cookie, Shield, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { useI18n } from '@/i18n/I18nContext';
import LanguageSwitcher from './LanguageSwitcher';
import ProfileForm from './ProfileForm';
import PasswordChangeForm from './PasswordChangeForm';

interface SettingsHubProps {
    profile: {
        email?: string;
        username?: string | null;
        created_at?: string;
    };
}

export default function SettingsHub({ profile }: SettingsHubProps) {
    const { t, locale } = useI18n();

    return (
        <div className="min-h-screen bg-zinc-950">
            {/* Header */}
            <header className="sticky top-0 z-40 bg-zinc-950/80 backdrop-blur-lg border-b border-zinc-800">
                <div className="max-w-2xl mx-auto px-4 py-4 flex items-center gap-4">
                    <Link
                        href="/"
                        className="p-2 -ml-2 text-zinc-400 hover:text-white transition-colors"
                    >
                        <ArrowLeft size={20} />
                    </Link>
                    <div className="flex items-center gap-2">
                        <Settings size={20} className="text-orange-500" />
                        <h1 className="text-lg font-bold text-white">{t('settings.title')}</h1>
                    </div>
                </div>
            </header>

            {/* Content */}
            <main className="max-w-2xl mx-auto px-4 py-6 space-y-6">
                {/* Language Switcher */}
                <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                    <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                        <Settings size={20} className="text-orange-500" />
                        {t('settings.language')}
                    </h2>
                    <LanguageSwitcher />
                </div>

                {/* Profile Form */}
                <ProfileForm
                    initialData={{
                        email: profile.email,
                        username: profile.username,
                    }}
                />

                {/* Password Change Form */}
                <PasswordChangeForm />

                {/* Cookie Settings */}
                <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                    <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                        <Cookie size={20} className="text-orange-500" />
                        {t('settings.cookieSettings')}
                    </h2>
                    <p className="text-sm text-zinc-400 mb-4">
                        {t('settings.cookieDesc')}
                    </p>
                    <div className="space-y-2 text-sm">
                        <div className="flex items-center gap-2 text-zinc-300">
                            <Shield size={14} className="text-green-500" />
                            <span>{t('settings.cookieNecessary')}</span>
                        </div>
                        <div className="flex items-center gap-2 text-zinc-300">
                            <Shield size={14} className="text-blue-500" />
                            <span>{t('settings.cookieFunctional')}</span>
                        </div>
                    </div>
                </div>

                {/* Data & Privacy */}
                <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                    <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                        <Shield size={20} className="text-orange-500" />
                        {t('settings.privacy')}
                    </h2>
                    <div className="space-y-4">
                        <p className="text-sm text-zinc-400">
                            {t('settings.privacyDesc')}
                        </p>
                        <Link
                            href="/privacy"
                            className="inline-block text-sm text-orange-500 hover:text-orange-400 underline"
                        >
                            {t('settings.privacyLink')}
                        </Link>
                    </div>
                </div>

                {/* Account info */}
                <div className="bg-zinc-800/50 border border-zinc-700 rounded-2xl p-4 text-center">
                    <p className="text-xs text-zinc-500">
                        {t('settings.memberSince')}: {new Date(profile.created_at || '').toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US', {
                            day: '2-digit',
                            month: 'long',
                            year: 'numeric'
                        })}
                    </p>
                </div>
            </main>
        </div>
    );
}
