import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

import { setPageTitle } from '../../../store/themeConfigSlice';

import ProtectedRoute from '@/components/ProtectedRoute';
import CheckSwitch from '@/components/Switch';
import { coloredToast } from '@/lib/toast';
import { logActivity } from '@/utils/activityLogger';

interface TimeSlot {
    name: string;
    start_date: string;
    end_date: string;
    start: string;
    end: string;
}

interface FloatingButtonSetting {
    name: string;
    enabled: boolean;
    show_countdown: boolean;
    link: string;
    default_image: string;
    event_image: string;
    times: TimeSlot[];
    event_days: number[];
}

const DAY_LABELS: { value: number; label: string }[] = [
    { value: 0, label: 'Minggu' },
    { value: 1, label: 'Senin' },
    { value: 2, label: 'Selasa' },
    { value: 3, label: 'Rabu' },
    { value: 4, label: 'Kamis' },
    { value: 5, label: 'Jumat' },
    { value: 6, label: 'Sabtu' },
];

const defaultSetting: FloatingButtonSetting = {
    name: '',
    enabled: true,
    show_countdown: false,
    link: '',
    default_image: '',
    event_image: '',
    times: [],
    event_days: [],
};

const FloatingButtonSettings = () => {
    const dispatch = useDispatch();
    const [isMounted, setIsMounted] = useState(false);
    const [config, setConfig] = useState<FloatingButtonSetting>(defaultSetting);
    const [isLoading, setIsLoading] = useState(false);
    const [fetchLoading, setFetchLoading] = useState(true);

    useEffect(() => {
        setIsMounted(true);
        dispatch(setPageTitle('Floating Button Setting'));
    }, []);

    const fetchConfig = async () => {
        setFetchLoading(true);
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/setting/floating-button`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
            });
            if (response.ok) {
                const { floating_button } = await response.json();
                setConfig({
                    name: floating_button?.name ?? '',
                    enabled: floating_button?.enabled ?? true,
                    show_countdown: floating_button?.show_countdown ?? true,
                    link: floating_button?.link ?? defaultSetting.link,
                    default_image: floating_button?.default_image ?? '',
                    event_image: floating_button?.event_image ?? '',
                    times: Array.isArray(floating_button?.times)
                        ? floating_button.times.map((t: TimeSlot) => ({
                            name: t.name ?? '',
                            start_date: t.start_date ?? '',
                            end_date: t.end_date ?? '',
                            start: t.start ?? '00:00',
                            end: t.end ?? '23:59',
                        }))
                        : [],
                    event_days: Array.isArray(floating_button?.event_days) ? floating_button.event_days : [],
                });
            }
        } catch (e) {
            coloredToast('warning', 'Gagal memuat pengaturan floating button');
        }
        setFetchLoading(false);
    };

    useEffect(() => {
        if (isMounted) fetchConfig();
    }, [isMounted]);

    const updateField = <K extends keyof FloatingButtonSetting>(
        key: K,
        value: FloatingButtonSetting[K]
    ) => {
        setConfig((prev) => ({ ...prev, [key]: value }));
    };

    const updateTimeSlot = (index: number, field: keyof TimeSlot, value: string) => {
        setConfig((prev) => {
            const times = [...(prev.times || [])];
            if (!times[index]) times[index] = { name: '', start_date: '', end_date: '', start: '00:00', end: '23:59' };
            times[index] = { ...times[index], [field]: value };
            return { ...prev, times };
        });
    };

    const addTimeSlot = () => {
        setConfig((prev) => ({
            ...prev,
            times: [...(prev.times || []), { name: '', start_date: '', end_date: '', start: '00:00', end: '23:59' }],
        }));
    };

    const removeTimeSlot = (index: number) => {
        setConfig((prev) => ({
            ...prev,
            times: prev.times.filter((_, i) => i !== index),
        }));
    };

    const toggleEventDay = (day: number) => {
        setConfig((prev) => {
            const event_days = prev.event_days?.includes(day)
                ? prev.event_days.filter((d) => d !== day)
                : [...(prev.event_days || []), day].sort((a, b) => a - b);
            return { ...prev, event_days };
        });
    };

    const saveSetting = async () => {
        setIsLoading(true);
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/setting/floating-button/update`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({
                    name: config.name || '',
                    enabled: config.enabled,
                    show_countdown: config.show_countdown,
                    link: config.link || defaultSetting.link,
                    default_image: config.default_image || '',
                    event_image: config.event_image || '',
                    times: config.times || [],
                    event_days: config.event_days || [],
                }),
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data.message || 'Gagal menyimpan');
            coloredToast('success', 'Pengaturan floating button berhasil disimpan');
            await logActivity({
                location: 'Floating Button Setting',
                description: 'Floating button setting updated',
            });
        } catch (err: any) {
            coloredToast('warning', err.message || 'Gagal menyimpan pengaturan');
            await logActivity({
                location: 'Floating Button Setting',
                description: `Error: ${err.message}`,
            });
        }
        setIsLoading(false);
    };

    if (!isMounted) return null;

    return (
        <>
            {fetchLoading ? (
                <div className="flex items-center justify-center p-12">
                    <span className="inline-block h-8 w-8 animate-spin rounded-full border-2 border-primary border-r-transparent" />
                </div>
            ) : (
                <>
                <div className="space-y-6 flex flex-row gap-4">
                    <div className="panel w-1/2">
                        <div className="mb-6 text-lg font-semibold">Floating Button Setting</div>
                        <div className="space-y-4">
                            <div>
                                <label className="mb-1 block text-base">Floating Button Name</label>
                                <p className="mb-1 text-xs text-gray-500 dark:text-white-dark">
                                </p>
                                <input
                                    type="text"
                                    className="form-input w-full"
                                    placeholder="Contoh: Gift to Give Campaign"
                                    value={config.name}
                                    onChange={(e) => updateField('name', e.target.value)}
                                />
                            </div>
                            <div className="flex flex-wrap items-center justify-between gap-4">
                                <label className="text-base">Activate</label>
                                <CheckSwitch
                                    checked={config.enabled}
                                    onChange={(_, checked) => updateField('enabled', checked)}
                                />
                            </div>
                            <div className="flex flex-wrap items-center justify-between gap-4">
                                <label className="text-base">Tampilkan Countdown</label>
                                <CheckSwitch
                                    checked={config.show_countdown}
                                    onChange={(_, checked) => updateField('show_countdown', checked)}
                                />
                            </div>
                            <div>
                                <label className="mb-1 block text-base">Link</label>
                                <input
                                    type="text"
                                    className="form-input w-full"
                                    placeholder="https://"
                                    value={config.link}
                                    onChange={(e) => updateField('link', e.target.value)}
                                />
                            </div>
                            <div>
                                <label className="mb-1 block text-base">Default image (URL)</label>
                                <input
                                    type="text"
                                    className="form-input w-full"
                                    placeholder="https://..."
                                    value={config.default_image}
                                    onChange={(e) => updateField('default_image', e.target.value)}
                                />
                            </div>
                            <div>
                                <label className="mb-1 block text-base">Event image (opsional)</label>
                                <p className="mb-1 text-xs text-gray-500 dark:text-white-dark">
                                    Kosongkan = pakai Default image saat event aktif.
                                </p>
                                <input
                                    type="text"
                                    className="form-input w-full"
                                    placeholder="https://... (kosongkan = pakai default)"
                                    value={config.event_image}
                                    onChange={(e) => updateField('event_image', e.target.value)}
                                />
                            </div>
                        </div>
                    </div>

                    <div className="panel w-1/2">
                        <div className="mb-2 text-base font-semibold">Hari</div>
                        <div className="mb-4 flex items-center gap-2">
                            <span className="text-sm text-gray-500 dark:text-white-dark">Event Days</span>
                            <span className="relative group cursor-pointer">
                                <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                    className="text-gray-400 hover:text-primary"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M18 10c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zm-7-2a1 1 0 10-2 0 1 1 0 002 0zm-2 3a1 1 0 012 0v3a1 1 0 11-2 0v-3z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                                <div className="absolute z-10 hidden group-hover:block bg-white dark:bg-[#1a222c] text-xs text-gray-700 dark:text-gray-200 rounded shadow-lg p-3 w-64 left-0 top-5">
                                    Kosongkan = aktif semua hari sampai jadwal end. Centang hari tertentu untuk membatasi event hanya di hari tersebut.<br /><br />Matikan lewat "Aktifkan floating button" di atas.
                                </div>
                            </span>
                        </div>
                        <div className="flex flex-wrap gap-3">
                            {DAY_LABELS.map(({ value, label }) => (
                                <label key={value} className="flex cursor-pointer items-center gap-2">
                                    <input
                                        type="checkbox"
                                        className="form-checkbox"
                                        checked={config.event_days?.includes(value) ?? false}
                                        onChange={() => toggleEventDay(value)}
                                    />
                                    <span>{label}</span>
                                </label>
                            ))}
                        </div>

                        <div className="panel mt-4">
                        <div className="mb-4 flex items-center justify-between">
                            <span className="text-base font-semibold">Jadwal Event (nama, tanggal, jam)</span>
                            <button
                                type="button"
                                className="btn btn-outline-primary btn-sm"
                                onClick={addTimeSlot}
                            >
                                Tambah slot
                            </button>
                        </div>
                        <div className="overflow-x-auto">
                            <table className="table w-full">
                                <thead>
                                    <tr>
                                        <th>Nama</th>
                                        <th>Tanggal Mulai</th>
                                        <th>Tanggal Selesai</th>
                                        <th>Jam Mulai</th>
                                        <th>Jam Selesai</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {(!config.times || config.times.length === 0) && (
                                        <tr>
                                            <td colSpan={6} className="text-center text-gray-500">
                                                Belum ada slot. Klik &quot;Tambah slot&quot;.
                                            </td>
                                        </tr>
                                    )}
                                    {config.times?.map((slot, index) => (
                                        <tr key={index}>
                                            <td>
                                                <input
                                                    type="text"
                                                    className="form-input w-full min-w-[120px]"
                                                    placeholder="8 - 10 Aug"
                                                    value={slot.name}
                                                    onChange={(e) => updateTimeSlot(index, 'name', e.target.value)}
                                                />
                                            </td>
                                            <td>
                                                <input
                                                    type="date"
                                                    className="form-input min-w-[140px]"
                                                    value={slot.start_date || ''}
                                                    onChange={(e) => updateTimeSlot(index, 'start_date', e.target.value)}
                                                />
                                            </td>
                                            <td>
                                                <input
                                                    type="date"
                                                    className="form-input min-w-[140px]"
                                                    value={slot.end_date || ''}
                                                    onChange={(e) => updateTimeSlot(index, 'end_date', e.target.value)}
                                                />
                                            </td>
                                            <td>
                                                <input
                                                    type="time"
                                                    className="form-input w-28"
                                                    value={slot.start || '00:00'}
                                                    onChange={(e) => updateTimeSlot(index, 'start', e.target.value)}
                                                />
                                            </td>
                                            <td>
                                                <input
                                                    type="time"
                                                    className="form-input w-28"
                                                    value={slot.end || '23:59'}
                                                    onChange={(e) => updateTimeSlot(index, 'end', e.target.value)}
                                                />
                                            </td>
                                            <td>
                                                <button
                                                    type="button"
                                                    className="btn btn-outline-danger btn-sm"
                                                    onClick={() => removeTimeSlot(index)}
                                                >
                                                    Hapus
                                                </button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    </div>
                </div>

                
                <div className="mt-6 flex justify-end w-full">
                    <button
                        type="button"
                        disabled={isLoading}
                        onClick={saveSetting}
                        className="btn btn-success gap-2"
                    >
                        {isLoading ? (
                            <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-r-transparent" />
                        ) : (
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-5 w-5 shrink-0"
                            >
                                <path
                                    d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 11.6585 22 11.4878 21.9848 11.3142C21.9142 10.5049 21.586 9.71257 21.0637 9.09034C20.9516 8.95687 20.828 8.83317 20.5806 8.58578L15.4142 3.41944C15.1668 3.17206 15.0431 3.04835 14.9097 2.93631C14.2874 2.414 13.4951 2.08581 12.6858 2.01515C12.5122 2 12.3415 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355Z"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                />
                                <path
                                    d="M17 22V21C17 19.1144 17 18.1716 16.4142 17.5858C15.8284 17 14.8856 17 13 17H11C9.11438 17 8.17157 17 7.58579 17.5858C7 18.1716 7 19.1144 7 21V22"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                />
                                <path
                                    opacity="0.5"
                                    d="M7 8H13"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                />
                            </svg>
                        )}
                        Simpan
                    </button>
                </div>
                </>

            )}
        </>
    );
};

export default FloatingButtonSettings;