'use client';

import { useState, useEffect } from 'react';
import { registerPage } from '../registry.js';
import AdminHeader from '../components/AdminHeader.js';
import { Card, Input, Select, TabNav } from '@zen/core/shared/components';
import { applyTheme, getStoredTheme } from '@zen/core/themes';

const TABS = [
    { id: 'general', label: 'Général' },
    { id: 'appearance', label: 'Apparence' },
];

const THEME_OPTIONS = [
    { value: 'light', label: 'Mode clair' },
    { value: 'dark', label: 'Mode sombre' },
    { value: 'auto', label: 'Thème système' },
];

const SettingsPage = ({ appConfig = {} }) => {
    const [activeTab, setActiveTab] = useState('general');
    const [theme, setTheme] = useState('auto');

    useEffect(() => {
        setTheme(getStoredTheme());
    }, []);

    const handleThemeChange = (value) => {
        setTheme(value);
        applyTheme(value);
    };

    return (
        <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
            <AdminHeader title="Paramètres" description="Configuration de votre espace ZEN" />

            <div className="flex flex-col gap-6 items-start">
                <TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />

                {activeTab === 'general' && (
                    <Card title="Informations générales" className='min-w-1/2'>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <Input
                                label="Nom du site"
                                value={appConfig.name || ''}
                                readOnly
                                disabled
                            />
                            <Input
                                label="URL du site"
                                value={appConfig.siteUrl || ''}
                                readOnly
                                disabled
                                description="URL publique de votre site"
                            />
                            <Input
                                label="Fuseau horaire"
                                value={appConfig.timezone || ''}
                                readOnly
                                disabled
                            />
                            <Input
                                label="Format de date"
                                value={appConfig.dateFormat || ''}
                                readOnly
                                disabled
                            />
                        </div>
                    </Card>
                )}

                {activeTab === 'appearance' && (
                    <Card title="Thème" className='min-w-1/2'>
                        <div className="max-w-xs">
                            <Select
                                label="Thème de l'interface"
                                value={theme}
                                onChange={handleThemeChange}
                                options={THEME_OPTIONS}
                                description="S'applique immédiatement et persiste entre les sessions"
                            />
                        </div>
                    </Card>
                )}
            </div>
        </div>
    );
};

export default SettingsPage;

registerPage({ slug: 'settings', title: 'Paramètres', Component: SettingsPage });