import { Head, useForm, usePage } from '@inertiajs/react';
import { useEffect } from 'react';
import AdminLayout from '@/components/Layouts/AdminLayout';
import Card from '@/components/Card/Card';
import Button from '@/components/Button/Button';

interface SettingsPageProps {
    settings: {
        topup_enabled: boolean;
        show_purchase_enabled: boolean;
        streaming_maintenance: boolean;
    };
}

export default function Index({ settings }: SettingsPageProps) {
    const { flash } = usePage<{ flash: { success?: string; error?: string } }>().props;
    
    const { data, setData, put, processing } = useForm({
        topup_enabled: settings.topup_enabled ?? true,
        show_purchase_enabled: settings.show_purchase_enabled ?? true,
        streaming_maintenance: settings.streaming_maintenance ?? false,
    });

    // Sync form data with props when settings change (after form submission)
    useEffect(() => {
        // Only update if values actually changed to avoid unnecessary updates
        if (
            data.topup_enabled !== (settings.topup_enabled ?? true) ||
            data.show_purchase_enabled !== (settings.show_purchase_enabled ?? true) ||
            data.streaming_maintenance !== (settings.streaming_maintenance ?? false)
        ) {
            setData({
                topup_enabled: settings.topup_enabled ?? true,
                show_purchase_enabled: settings.show_purchase_enabled ?? true,
                streaming_maintenance: settings.streaming_maintenance ?? false,
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [settings.topup_enabled, settings.show_purchase_enabled, settings.streaming_maintenance]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        put('/admin/settings', {
            preserveScroll: true,
        });
    };

    return (
        <AdminLayout title="Settings">
            <Head title="Settings" />
            <div className="space-y-6">
                {/* Header */}
                <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h2>
                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Kelola pengaturan sistem dan fitur website
                    </p>
                </div>

                {/* Flash Messages */}
                {flash?.success && (
                    <div className="rounded-lg bg-green-50 border border-green-200 p-4 dark:bg-green-900/20 dark:border-green-800">
                        <p className="text-sm font-medium text-green-800 dark:text-green-200">{flash.success}</p>
                    </div>
                )}
                {flash?.error && (
                    <div className="rounded-lg bg-red-50 border border-red-200 p-4 dark:bg-red-900/20 dark:border-red-800">
                        <p className="text-sm font-medium text-red-800 dark:text-red-200">{flash.error}</p>
                    </div>
                )}

                {/* Settings Form */}
                <form onSubmit={handleSubmit}>
                    <Card padding="md">
                        <div className="space-y-6">
                            {/* Topup Settings */}
                            <div className="border-b border-gray-200 pb-6 dark:border-gray-700">
                                <div className="flex items-start justify-between">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/20">
                                                <CurrencyDollarIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                                            </div>
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                                    Topup Coin
                                                </h3>
                                                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                                    Mengaktifkan atau menonaktifkan fitur topup coin untuk semua user
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <label className="relative inline-flex cursor-pointer items-center">
                                        <input
                                            type="checkbox"
                                            checked={data.topup_enabled}
                                            onChange={(e) => setData('topup_enabled', e.target.checked)}
                                            className="peer sr-only"
                                        />
                                        <div className="peer h-6 w-11 rounded-full bg-gray-200 transition-colors after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-[#d4af37] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#d4af37]/20 dark:bg-gray-700 dark:after:border-gray-600 dark:peer-checked:bg-[#b8941f] dark:peer-focus:ring-[#b8941f]/20"></div>
                                    </label>
                                </div>
                                {!data.topup_enabled && (
                                    <div className="mt-4 rounded-lg bg-yellow-50 border border-yellow-200 p-3 dark:bg-yellow-900/20 dark:border-yellow-800">
                                        <p className="text-sm text-yellow-800 dark:text-yellow-200">
                                            <strong>Status:</strong> Fitur topup coin sedang dinonaktifkan. User tidak dapat melakukan topup coin.
                                        </p>
                                    </div>
                                )}
                            </div>

                            {/* Show Purchase Settings */}
                            <div className="border-b border-gray-200 pb-6 dark:border-gray-700">
                                <div className="flex items-start justify-between">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/20">
                                                <TicketIcon className="h-6 w-6 text-purple-600 dark:text-purple-400" />
                                            </div>
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                                    Pembelian Show
                                                </h3>
                                                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                                    Mengaktifkan atau menonaktifkan fitur pembelian show menggunakan coin
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <label className="relative inline-flex cursor-pointer items-center">
                                        <input
                                            type="checkbox"
                                            checked={data.show_purchase_enabled}
                                            onChange={(e) => setData('show_purchase_enabled', e.target.checked)}
                                            className="peer sr-only"
                                        />
                                        <div className="peer h-6 w-11 rounded-full bg-gray-200 transition-colors after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-[#d4af37] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#d4af37]/20 dark:bg-gray-700 dark:after:border-gray-600 dark:peer-checked:bg-[#b8941f] dark:peer-focus:ring-[#b8941f]/20"></div>
                                    </label>
                                </div>
                                {!data.show_purchase_enabled && (
                                    <div className="mt-4 rounded-lg bg-yellow-50 border border-yellow-200 p-3 dark:bg-yellow-900/20 dark:border-yellow-800">
                                        <p className="text-sm text-yellow-800 dark:text-yellow-200">
                                            <strong>Status:</strong> Fitur pembelian show sedang dinonaktifkan. User tidak dapat membeli show menggunakan coin.
                                        </p>
                                    </div>
                                )}
                            </div>

                            {/* Streaming Maintenance Settings */}
                            <div>
                                <div className="flex items-start justify-between">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/20">
                                                <WrenchIcon className="h-6 w-6 text-red-600 dark:text-red-400" />
                                            </div>
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                                    Maintenance Streaming
                                                </h3>
                                                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                                    Aktifkan mode maintenance untuk memblokir akses streaming sementara
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <label className="relative inline-flex cursor-pointer items-center">
                                        <input
                                            type="checkbox"
                                            checked={data.streaming_maintenance}
                                            onChange={(e) => setData('streaming_maintenance', e.target.checked)}
                                            className="peer sr-only"
                                        />
                                        <div className="peer h-6 w-11 rounded-full bg-gray-200 transition-colors after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-red-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-600/20 dark:bg-gray-700 dark:after:border-gray-600 dark:peer-checked:bg-red-700 dark:peer-focus:ring-red-700/20"></div>
                                    </label>
                                </div>
                                {data.streaming_maintenance && (
                                    <div className="mt-4 rounded-lg bg-red-50 border border-red-200 p-3 dark:bg-red-900/20 dark:border-red-800">
                                        <p className="text-sm text-red-800 dark:text-red-200">
                                            <strong>Status:</strong> Mode maintenance aktif. Semua akses streaming sedang diblokir.
                                        </p>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Submit Button */}
                        <div className="mt-6 flex justify-end border-t border-gray-200 pt-6 dark:border-gray-700">
                            <Button type="submit" disabled={processing}>
                                {processing ? 'Menyimpan...' : 'Simpan Perubahan'}
                            </Button>
                        </div>
                    </Card>
                </form>
            </div>
        </AdminLayout>
    );
}

// Icons
function CurrencyDollarIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
        </svg>
    );
}

function TicketIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621.504-1.125 1.125-1.125H3.375z"
            />
        </svg>
    );
}

function WrenchIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.021-3.298.75M21.75 6.75a4.5 4.5 0 00-4.5-4.5h-1.5c-1.076 0-2.264.021-3.298.75m9.072 0a4.5 4.5 0 01-3.298.75m9.072 0a4.5 4.5 0 00-3.298-.75M3.75 6.75a4.5 4.5 0 004.5 4.5h1.5c1.076 0 2.264-.021 3.298-.75M3.75 6.75a4.5 4.5 0 00-4.5-4.5h-1.5c-1.076 0-2.264.021-3.298.75m9.072 0a4.5 4.5 0 01-3.298.75m9.072 0a4.5 4.5 0 00-3.298-.75M3.75 6.75h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
            />
        </svg>
    );
}

