import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { Settings as SettingsIcon, Save, Globe, Mail } from 'lucide-react';
import { Input } from '../components/ui/Input';
import { Button } from '../components/ui/Button';
import { PageHeader } from '../components/layout/PageHeader';
import { settingsSchema, SettingsFormData } from '../utils/validationSchemas';

export const Settings = () => {
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);

    const {
        register,
        handleSubmit,
        formState: { errors, isValid, isDirty },
    } = useForm<SettingsFormData>({
        resolver: yupResolver(settingsSchema),
        mode: 'onChange',
        defaultValues: {
            siteName: 'پنل مدیریت',
            siteDescription: 'سیستم مدیریت محتوا پیشرفته',
            adminEmail: 'admin@example.com',
            language: 'fa',
        },
    });

    const onSubmit = async (data: SettingsFormData) => {
        setLoading(true);
        setSuccess(false);

        try {
            await new Promise(resolve => setTimeout(resolve, 1000));
            console.log('Settings saved:', data);
            setSuccess(true);
            setTimeout(() => setSuccess(false), 3000);
        } catch (error) {
            console.error('Error saving settings:', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="p-6 max-w-4xl mx-auto">
            <PageHeader
                title="تنظیمات سیستم"
                subtitle="تنظیمات کلی سیستم را اینجا مدیریت کنید"
                icon={SettingsIcon}
            />

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div className="lg:col-span-2">
                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
                        <div className="card p-6">
                            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                اطلاعات اصلی
                            </h2>
                            <div className="space-y-6">
                                <Input
                                    label="نام سایت"
                                    placeholder="پنل مدیریت"
                                    icon={Globe}
                                    error={errors.siteName?.message}
                                    {...register('siteName')}
                                />

                                <div className="space-y-1">
                                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                        توضیحات سایت
                                    </label>
                                    <textarea
                                        placeholder="توضیح کوتاهی درباره سایت..."
                                        rows={4}
                                        className={`input resize-none ${errors.siteDescription ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
                                            }`}
                                        {...register('siteDescription')}
                                    />
                                    {errors.siteDescription && (
                                        <p className="text-sm text-red-600 dark:text-red-400">
                                            {errors.siteDescription.message}
                                        </p>
                                    )}
                                </div>

                                <Input
                                    label="ایمیل مدیر"
                                    type="email"
                                    placeholder="admin@example.com"
                                    icon={Mail}
                                    error={errors.adminEmail?.message}
                                    {...register('adminEmail')}
                                />

                                <div className="space-y-1">
                                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                        زبان پیش‌فرض
                                    </label>
                                    <select
                                        className={`input ${errors.language ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
                                            }`}
                                        {...register('language')}
                                    >
                                        <option value="fa">فارسی</option>
                                        <option value="en">English</option>
                                        <option value="ar">العربية</option>
                                    </select>
                                    {errors.language && (
                                        <p className="text-sm text-red-600 dark:text-red-400">
                                            {errors.language.message}
                                        </p>
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="card p-6">
                            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                تنظیمات امنیتی
                            </h2>
                            <div className="space-y-4">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            احراز هویت دو مرحله‌ای
                                        </h3>
                                        <p className="text-sm text-gray-500 dark:text-gray-400">
                                            افزایش امنیت حساب کاربری
                                        </p>
                                    </div>
                                    <label className="flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            className="sr-only"
                                        />
                                        <div className="relative">
                                            <div className="w-10 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                                        </div>
                                    </label>
                                </div>

                                <div className="flex items-center justify-between">
                                    <div>
                                        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            ثبت لاگ‌ها
                                        </h3>
                                        <p className="text-sm text-gray-500 dark:text-gray-400">
                                            ثبت فعالیت‌های سیستم
                                        </p>
                                    </div>
                                    <label className="flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            className="sr-only"
                                            defaultChecked
                                        />
                                        <div className="relative">
                                            <div className="w-10 h-6 bg-blue-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div className="flex items-center justify-end space-x-4">
                            <Button
                                type="button"
                                variant="secondary"
                                disabled={loading}
                            >
                                بازگردانی
                            </Button>
                            <Button
                                type="submit"
                                loading={loading}
                                disabled={!isValid || !isDirty}
                            >
                                <Save className="h-4 w-4 ml-2" />
                                ذخیره تغییرات
                            </Button>
                        </div>
                    </form>
                </div>

                <div className="space-y-6">
                    <div className="card p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            نکات مهم
                        </h3>
                        <ul className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                            <li className="flex items-start">
                                <span className="w-2 h-2 bg-blue-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
                                تغییرات تنظیمات ممکن است چند دقیقه طول بکشد
                            </li>
                            <li className="flex items-start">
                                <span className="w-2 h-2 bg-green-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
                                پس از تغییر ایمیل مدیر، لینک تأیید ارسال می‌شود
                            </li>
                            <li className="flex items-start">
                                <span className="w-2 h-2 bg-yellow-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
                                تنظیمات امنیتی بر تمام کاربران تأثیر می‌گذارد
                            </li>
                        </ul>
                    </div>

                    {success && (
                        <div className="card p-4 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
                            <div className="flex items-center">
                                <div className="w-4 h-4 bg-green-500 rounded-full ml-2"></div>
                                <p className="text-sm text-green-800 dark:text-green-200">
                                    تنظیمات با موفقیت ذخیره شد
                                </p>
                            </div>
                        </div>
                    )}

                    <div className="card p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            عملیات خطرناک
                        </h3>
                        <div className="space-y-4">
                            <Button variant="danger" size="sm">
                                پاک کردن کش
                            </Button>
                            <Button variant="danger" size="sm">
                                ریست کامل سیستم
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}; 