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

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

import { coloredToast } from '@/lib/toast';

import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import NumberFormatter from '@/lib/ribuan';
import { logActivity } from '@/utils/activityLogger';
import Switch from '@mui/material/Switch';
import Swal from 'sweetalert2';

interface BuybackPrice {
    harga_emas: number;
    buyback: number;
}

interface BuybackLino {
    harga_emas: number;
    buyback_1: number;
    buyback_2: number;
}

interface BuybackLotus {
    buyback: number;
}
interface PriceOnly {
    harga: number;
}

interface BuybackSnapshot {
    tanggal?: string | Date | null;
    buyback_6k?: BuybackPrice;
    buyback_6k_sni?: BuybackPrice;
    buyback_16k?: BuybackPrice;
    buyback_16k_lino?: BuybackLino;
    buyback_18k_lino?: BuybackLino;
    buyback_lotus?: BuybackLotus;
    resell_9k?: PriceOnly;
    tradein_9k?: PriceOnly;
    resell_tradein_9k_khusus?: PriceOnly;
}

interface BuybackHistoryChange {
    field: string;
    label: string;
    from: number | string | null;
    to: number | string | null;
}

interface BuybackHistoryItem {
    _id?: string;
    changed_at: string;
    effective_tanggal?: string | null;
    changed_by?: {
        user_id?: string;
        name?: string;
    };
    snapshot: BuybackSnapshot;
    changes: BuybackHistoryChange[];
    categories_touched?: string[];
}

type ViewTab = 'settings' | 'history';

const HISTORY_CATEGORIES = [
    { value: 'all', label: 'Semua Kategori' },
    { value: '6k', label: 'Trade In 6K' },
    { value: '6k_sni', label: '6K SNI' },
    { value: '16k', label: '16K' },
    { value: '16k_lino', label: '16K Lino' },
    { value: '18k_lino', label: '18K Lino' },
    { value: 'lotus', label: 'Buyback Lotus' },
    { value: '9k', label: 'Resell / Trade In 9K' },
    { value: 'tanggal', label: 'Tanggal Update' },
];

const formatCurrency = (value: number | string | null | undefined) => {
    const n = Number(value);
    if (!Number.isFinite(n)) return '-';
    return n.toLocaleString('id-ID');
};

const BuybackSettings = () => {
    const dispatch = useDispatch();
    const [isMounted, setIsMounted] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [activeTab, setActiveTab] = useState<ViewTab>('settings');

    const [tanggal, setTanggal] = useState<Date>(new Date());
    const [initialTanggal, setInitialTanggal] = useState<Date | null>(null);
    const [useNow, setUseNow] = useState(false);

    const [buybackSetting, setBuyBackSetting] = useState<BuybackPrice>({
        harga_emas: 0,
        buyback: 0,
    });
    const [buyback6kSNISetting, setBuyback6kSNISetting] = useState<BuybackPrice>({
        harga_emas: 0,
        buyback: 0,
    });
    const [buyback16kSetting, setBuyback16kSetting] = useState<BuybackPrice>({
        harga_emas: 0,
        buyback: 0,
    });
    const [buyback16kLinoSetting, setBuyback16kLinoSetting] = useState<BuybackLino>({
        harga_emas: 0,
        buyback_1: 0,
        buyback_2: 0,
    });
    const [buyback18kLinoSetting, setBuyback18kLinoSetting] = useState<BuybackLino>({
        harga_emas: 0,
        buyback_1: 0,
        buyback_2: 0,
    });

    const [buybackLotusSetting, setBuybackLotusSetting] = useState<BuybackLotus>({
        buyback: 0,
    });

    const [resell9k, setResell9k] = useState<PriceOnly>({ harga: 0 });
    const [tradein9k, setTradein9k] = useState<PriceOnly>({ harga: 0 });
    const [resellTradein9kKhusus, setResellTradein9kKhusus] = useState<PriceOnly>({ harga: 0 });

    const [initialBuyback, setInitialBuyback] = useState<BuybackPrice | null>(null);
    const [initialBuyback6kSNI, setInitialBuyback6kSNI] = useState<BuybackPrice | null>(null);
    const [initialBuyback16k, setInitialBuyback16k] = useState<BuybackPrice | null>(null);
    const [initialBuyback16kLino, setInitialBuyback16kLino] = useState<BuybackLino | null>(null);
    const [initialBuyback18kLino, setInitialBuyback18kLino] = useState<BuybackLino | null>(null);
    const [initialBuybackLotus, setInitialBuybackLotus] = useState<BuybackLotus | null>(null);
    const [initialResell9k, setInitialResell9k] = useState<PriceOnly | null>(null);
    const [initialTradein9k, setInitialTradein9k] = useState<PriceOnly | null>(null);
    const [initialResellTradein9kKhusus, setInitialResellTradein9kKhusus] = useState<PriceOnly | null>(null);

    const [historyItems, setHistoryItems] = useState<BuybackHistoryItem[]>([]);
    const [historyLoading, setHistoryLoading] = useState(false);
    const [historyPage, setHistoryPage] = useState(1);
    const [historyLimit] = useState(20);
    const [historyTotal, setHistoryTotal] = useState(0);
    const [historyTotalPages, setHistoryTotalPages] = useState(1);
    const [historyCategory, setHistoryCategory] = useState('all');
    const [historyUserSearch, setHistoryUserSearch] = useState('');
    const [historyUserQuery, setHistoryUserQuery] = useState('');
    const [historyDateRange, setHistoryDateRange] = useState<Date[]>([]);
    const [historyMarkedDates, setHistoryMarkedDates] = useState<string[]>([]);
    const [expandedHistoryId, setExpandedHistoryId] = useState<string | null>(null);

    useEffect(() => {
        setIsMounted(true);
        dispatch(setPageTitle('Goldprice & Buyback Setting'));
    }, [dispatch]);

    useEffect(() => {
        if (!useNow) return;
        setTanggal(new Date());
        const timer = setInterval(() => setTanggal(new Date()), 1000);
        return () => clearInterval(timer);
    }, [useNow]);

    const formatDate = (date: Date | string) => {
        const d = new Date(date);
        return d.toLocaleString('sv-SE', {
            timeZone: 'Asia/Jakarta',
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
        });
    };

    const toDayKey = (date: Date) => {
        return date.toLocaleDateString('sv-SE', { timeZone: 'Asia/Jakarta' });
    };

    const markedDateSet = useMemo(() => new Set(historyMarkedDates), [historyMarkedDates]);

    const getBuybackChangesDescription = (effectiveDate: Date = tanggal) => {
        const changes: string[] = [];

        if (initialBuyback) {
            if (initialBuyback.harga_emas !== buybackSetting.harga_emas) {
                changes.push(`6K Harga Emas: ${initialBuyback.harga_emas} -> ${buybackSetting.harga_emas}`);
            }
            if (initialBuyback.buyback !== buybackSetting.buyback) {
                changes.push(`6K Buyback: ${initialBuyback.buyback} -> ${buybackSetting.buyback}`);
            }
        }

        if (initialBuyback6kSNI) {
            if (initialBuyback6kSNI.harga_emas !== buyback6kSNISetting.harga_emas) {
                changes.push(`6K SNI Harga Emas: ${initialBuyback6kSNI.harga_emas} -> ${buyback6kSNISetting.harga_emas}`);
            }
            if (initialBuyback6kSNI.buyback !== buyback6kSNISetting.buyback) {
                changes.push(`6K SNI Buyback: ${initialBuyback6kSNI.buyback} -> ${buyback6kSNISetting.buyback}`);
            }
        }

        if (initialBuyback16k) {
            if (initialBuyback16k.harga_emas !== buyback16kSetting.harga_emas) {
                changes.push(`16K Harga Emas: ${initialBuyback16k.harga_emas} -> ${buyback16kSetting.harga_emas}`);
            }
            if (initialBuyback16k.buyback !== buyback16kSetting.buyback) {
                changes.push(`16K Buyback: ${initialBuyback16k.buyback} -> ${buyback16kSetting.buyback}`);
            }
        }

        if (initialBuyback16kLino) {
            if (initialBuyback16kLino.harga_emas !== buyback16kLinoSetting.harga_emas) {
                changes.push(`16K Lino Harga Emas: ${initialBuyback16kLino.harga_emas} -> ${buyback16kLinoSetting.harga_emas}`);
            }
            if (initialBuyback16kLino.buyback_1 !== buyback16kLinoSetting.buyback_1) {
                changes.push(`16K Lino Buyback 1: ${initialBuyback16kLino.buyback_1} -> ${buyback16kLinoSetting.buyback_1}`);
            }
            if (initialBuyback16kLino.buyback_2 !== buyback16kLinoSetting.buyback_2) {
                changes.push(`16K Lino Buyback 2: ${initialBuyback16kLino.buyback_2} -> ${buyback16kLinoSetting.buyback_2}`);
            }
        }

        if (initialBuyback18kLino) {
            if (initialBuyback18kLino.harga_emas !== buyback18kLinoSetting.harga_emas) {
                changes.push(`18K Lino Harga Emas: ${initialBuyback18kLino.harga_emas} -> ${buyback18kLinoSetting.harga_emas}`);
            }
            if (initialBuyback18kLino.buyback_1 !== buyback18kLinoSetting.buyback_1) {
                changes.push(`18K Lino Buyback 1: ${initialBuyback18kLino.buyback_1} -> ${buyback18kLinoSetting.buyback_1}`);
            }
            if (initialBuyback18kLino.buyback_2 !== buyback18kLinoSetting.buyback_2) {
                changes.push(`18K Lino Buyback 2: ${initialBuyback18kLino.buyback_2} -> ${buyback18kLinoSetting.buyback_2}`);
            }
        }

        if (initialBuybackLotus && initialBuybackLotus.buyback !== buybackLotusSetting.buyback) {
            changes.push(`Buyback Lotus: ${initialBuybackLotus.buyback} -> ${buybackLotusSetting.buyback}`);
        }

        if (initialResell9k && initialResell9k.harga !== resell9k.harga) {
            changes.push(`Re-Sell 9K: ${initialResell9k.harga} -> ${resell9k.harga}`);
        }
        if (initialTradein9k && initialTradein9k.harga !== tradein9k.harga) {
            changes.push(`Trade In 9K: ${initialTradein9k.harga} -> ${tradein9k.harga}`);
        }
        if (initialResellTradein9kKhusus && initialResellTradein9kKhusus.harga !== resellTradein9kKhusus.harga) {
            changes.push(`Re-Sell & Trade In 9K khusus: ${initialResellTradein9kKhusus.harga} -> ${resellTradein9kKhusus.harga}`);
        }

        if (initialTanggal && effectiveDate && formatDate(initialTanggal) !== formatDate(effectiveDate)) {
            changes.push(`Tanggal: ${formatDate(initialTanggal)} -> ${formatDate(effectiveDate)}`);
        }

        return changes.length > 0 ? changes.join(' | ') : 'No changes made.';
    };

    const fetchDataPoint = async () => {
        const api_url = process.env.API_URL;
        const response = await fetch(`${api_url}api/setting/buyback`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
            credentials: 'include',
        });
        if (response.ok) {
            const { buyback_or_resell } = await response.json();
            const data = buyback_or_resell || {};

            const next6k = {
                harga_emas: data.buyback_6k?.harga_emas || 0,
                buyback: data.buyback_6k?.buyback || 0,
            };
            const next6kSni = {
                harga_emas: data.buyback_6k_sni?.harga_emas || 0,
                buyback: data.buyback_6k_sni?.buyback || 0,
            };
            const next16k = {
                harga_emas: data.buyback_16k?.harga_emas || 0,
                buyback: data.buyback_16k?.buyback || 0,
            };
            const next16kLino = {
                harga_emas: data.buyback_16k_lino?.harga_emas || 0,
                buyback_1: data.buyback_16k_lino?.buyback_1 || 0,
                buyback_2: data.buyback_16k_lino?.buyback_2 || 0,
            };
            const next18kLino = {
                harga_emas: data.buyback_18k_lino?.harga_emas || 0,
                buyback_1: data.buyback_18k_lino?.buyback_1 || 0,
                buyback_2: data.buyback_18k_lino?.buyback_2 || 0,
            };
            const nextLotus = {
                buyback: data.buyback_lotus?.buyback || 0,
            };
            const nextResell9k = { harga: data.resell_9k?.harga || 0 };
            const nextTradein9k = { harga: data.tradein_9k?.harga || 0 };
            const nextResellTradein9kKhusus = {
                harga: data.resell_tradein_9k_khusus?.harga || 0,
            };
            const nextTanggal = data.tanggal ? new Date(data.tanggal) : new Date();

            setBuyBackSetting(next6k);
            setBuyback6kSNISetting(next6kSni);
            setBuyback16kSetting(next16k);
            setBuyback16kLinoSetting(next16kLino);
            setBuyback18kLinoSetting(next18kLino);
            setBuybackLotusSetting(nextLotus);
            setResell9k(nextResell9k);
            setTradein9k(nextTradein9k);
            setResellTradein9kKhusus(nextResellTradein9kKhusus);
            setTanggal(nextTanggal);

            setInitialBuyback({ ...next6k });
            setInitialBuyback6kSNI({ ...next6kSni });
            setInitialBuyback16k({ ...next16k });
            setInitialBuyback16kLino({ ...next16kLino });
            setInitialBuyback18kLino({ ...next18kLino });
            setInitialBuybackLotus({ ...nextLotus });
            setInitialResell9k({ ...nextResell9k });
            setInitialTradein9k({ ...nextTradein9k });
            setInitialResellTradein9kKhusus({ ...nextResellTradein9kKhusus });
            setInitialTanggal(nextTanggal);
        }
    };

    const buildHistoryQuery = useCallback(
        (page = historyPage) => {
            const params = new URLSearchParams();
            params.set('page', String(page));
            params.set('limit', String(historyLimit));
            if (historyCategory && historyCategory !== 'all') {
                params.set('category', historyCategory);
            }
            if (historyUserQuery.trim()) {
                params.set('user', historyUserQuery.trim());
            }
            if (historyDateRange[0]) {
                params.set('date_from', toDayKey(historyDateRange[0]));
            }
            if (historyDateRange[1]) {
                params.set('date_to', toDayKey(historyDateRange[1]));
            } else if (historyDateRange[0]) {
                params.set('date_to', toDayKey(historyDateRange[0]));
            }
            return params.toString();
        },
        [historyPage, historyLimit, historyCategory, historyUserQuery, historyDateRange]
    );

    const fetchHistoryDates = useCallback(async () => {
        try {
            const api_url = process.env.API_URL;
            const params = new URLSearchParams();
            if (historyCategory && historyCategory !== 'all') {
                params.set('category', historyCategory);
            }
            if (historyUserQuery.trim()) {
                params.set('user', historyUserQuery.trim());
            }
            const qs = params.toString();
            const response = await fetch(`${api_url}api/setting/buyback/history/dates${qs ? `?${qs}` : ''}`, {
                method: 'GET',
                credentials: 'include',
            });
            if (!response.ok) {
                const res = await response.json();
                throw new Error(res.message || 'Gagal memuat tanggal history');
            }
            const data = await response.json();
            setHistoryMarkedDates(Array.isArray(data.dates) ? data.dates : []);
        } catch (error: any) {
            coloredToast('warning', error.message || 'Gagal memuat tanggal history');
        }
    }, [historyCategory, historyUserQuery]);

    const fetchHistory = useCallback(async () => {
        setHistoryLoading(true);
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/setting/buyback/history?${buildHistoryQuery()}`, {
                method: 'GET',
                credentials: 'include',
            });
            if (!response.ok) {
                const res = await response.json();
                throw new Error(res.message || 'Gagal memuat history');
            }
            const data = await response.json();
            setHistoryItems(Array.isArray(data.items) ? data.items : []);
            setHistoryTotal(data.pagination?.total || 0);
            setHistoryTotalPages(data.pagination?.total_pages || 1);
        } catch (error: any) {
            coloredToast('warning', error.message || 'Gagal memuat history');
        } finally {
            setHistoryLoading(false);
        }
    }, [buildHistoryQuery]);

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

    useEffect(() => {
        if (!isMounted || activeTab !== 'history') return;
        fetchHistory();
        fetchHistoryDates();
    }, [isMounted, activeTab, fetchHistory, fetchHistoryDates]);

    const saveBuybackSettings = async () => {
        const priceFields = [
            { label: 'Harga Emas 6K', value: buybackSetting.harga_emas },
            { label: 'Buyback 6K', value: buybackSetting.buyback },
            { label: 'Harga Emas 6K SNI', value: buyback6kSNISetting.harga_emas },
            { label: 'Buyback 6K SNI', value: buyback6kSNISetting.buyback },
            { label: 'Harga Emas 16K', value: buyback16kSetting.harga_emas },
            { label: 'Buyback 16K', value: buyback16kSetting.buyback },
            { label: 'Harga Emas 16K Lino', value: buyback16kLinoSetting.harga_emas },
            { label: 'Buyback 16K Lino 1', value: buyback16kLinoSetting.buyback_1 },
            { label: 'Buyback 16K Lino 2', value: buyback16kLinoSetting.buyback_2 },
            { label: 'Harga Emas 18K Lino', value: buyback18kLinoSetting.harga_emas },
            { label: 'Buyback 18K Lino 1', value: buyback18kLinoSetting.buyback_1 },
            { label: 'Buyback 18K Lino 2', value: buyback18kLinoSetting.buyback_2 },
            { label: 'Trade In 9K', value: tradein9k.harga },
            { label: 'Re-Sell 9K', value: resell9k.harga },
            { label: 'Re-Sell & Trade In 9K kondisi khusus', value: resellTradein9kKhusus.harga },
            { label: 'Buyback Lotus', value: buybackLotusSetting?.buyback || 0 },
        ];

        const negativeFields = priceFields.filter((field) => Number(field.value) < 0).map((field) => field.label);
        if (negativeFields.length > 0) {
            coloredToast('warning', `Nilai tidak boleh negatif: ${negativeFields.join(', ')}`);
            return;
        }

        const zeroFields = priceFields.filter((field) => !Number(field.value)).map((field) => field.label);
        if (zeroFields.length > 0) {
            const result = await Swal.fire({
                title: `${zeroFields} bernilai Rp 0. Tetap simpan?`,
                html: ``,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33333',
                confirmButtonText: 'Ya, simpan',
                cancelButtonText: 'Batal',
            });
            if (!result.isConfirmed) return;
        }

        const effectiveTanggal = useNow ? new Date() : tanggal;
        if (!effectiveTanggal || Number.isNaN(new Date(effectiveTanggal).getTime())) {
            coloredToast('warning', 'Tanggal update wajib di set');
            return;
        }
        if (useNow) setTanggal(effectiveTanggal);

        setIsLoading(true);

        const buybackSettingPayload = {
            _6k: {
                harga_emas: buybackSetting.harga_emas,
                buyback: buybackSetting.buyback,
            },
            _6k_sni: {
                harga_emas: buyback6kSNISetting.harga_emas,
                buyback: buyback6kSNISetting.buyback,
            },
            _16k: {
                harga_emas: buyback16kSetting.harga_emas,
                buyback: buyback16kSetting.buyback,
            },
            _16k_lino: {
                harga_emas: buyback16kLinoSetting.harga_emas,
                buyback_1: buyback16kLinoSetting.buyback_1,
                buyback_2: buyback16kLinoSetting.buyback_2,
            },
            _18k_lino: {
                harga_emas: buyback18kLinoSetting.harga_emas,
                buyback_1: buyback18kLinoSetting.buyback_1,
                buyback_2: buyback18kLinoSetting.buyback_2,
            },
            _buyback_lotus: {
                buyback: buybackLotusSetting.buyback || 0,
            },
            _resell_9k: { harga: resell9k.harga || 0 },
            _tradein_9k: { harga: tradein9k.harga || 0 },
            _resell_tradein_9k_khusus: { harga: resellTradein9kKhusus.harga || 0 },
            tanggal: effectiveTanggal,
        };

        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/setting/buyback/update`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(buybackSettingPayload),
                credentials: 'include',
            });

            const res = await response.json();
            if (!response.ok) {
                throw new Error(res.message);
            }

            coloredToast('success', 'Buyback settings have been saved');
            await logActivity({
                location: 'Setting Buyback',
                description: `Buyback settings have been saved | ${getBuybackChangesDescription(effectiveTanggal)}`,
            });
            await fetchDataPoint();
        } catch (error: any) {
            coloredToast('warning', error.message || 'Something went wrong');
            await logActivity({
                location: 'Setting Buyback',
                description: `Buyback settings Error | ${error.message}`,
            });
        }
        setIsLoading(false);
    };

    const applyHistoryFilters = () => {
        setHistoryPage(1);
        setHistoryUserQuery(historyUserSearch);
        setExpandedHistoryId(null);
    };

    const resetHistoryFilters = () => {
        setHistoryCategory('all');
        setHistoryUserSearch('');
        setHistoryUserQuery('');
        setHistoryDateRange([]);
        setHistoryPage(1);
        setExpandedHistoryId(null);
    };

    const renderChangeValue = (change: BuybackHistoryChange, key: 'from' | 'to') => {
        const value = change[key];
        if (change.field === 'tanggal') return value || '-';
        return formatCurrency(value);
    };

    const renderSnapshotSection = (
        title: string,
        rows: { label: string; value: number | string | null | undefined; field?: string; raw?: boolean }[],
        changedFields: Set<string>
    ) => (
        <div className="rounded border border-[#e0e6ed] p-3 dark:border-[#1b2e4b]">
            <div className="mb-2 font-semibold">{title}</div>
            <div className="space-y-1 text-sm">
                {rows.map((row) => {
                    const isChanged = row.field ? changedFields.has(row.field) : false;
                    const displayValue = row.raw ? row.value || '-' : formatCurrency(row.value);
                    return (
                        <div key={`${title}-${row.label}`} className={`flex justify-between gap-3 ${isChanged ? 'font-semibold text-success' : ''}`}>
                            <span>{row.label}</span>
                            <span>{displayValue}</span>
                        </div>
                    );
                })}
            </div>
        </div>
    );

    return (
        <>
            {isMounted && (
                <>
                    <div className="panel mb-5">
                        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
                            <h5 className="text-lg font-semibold dark:text-white-light">Goldprice & Buyback</h5>
                            <div className="flex flex-wrap gap-2">
                                <button
                                    type="button"
                                    className={`btn btn-sm ${activeTab === 'settings' ? 'btn-primary' : 'btn-outline-primary'}`}
                                    onClick={() => setActiveTab('settings')}
                                >
                                    Pengaturan
                                </button>
                                <button
                                    type="button"
                                    className={`btn btn-sm ${activeTab === 'history' ? 'btn-primary' : 'btn-outline-primary'}`}
                                    onClick={() => setActiveTab('history')}
                                >
                                    Riwayat Pengaturan Harga
                                </button>
                            </div>
                        </div>
                    </div>

                    {activeTab === 'settings' && (
                        <>
                            <div className="flex w-full flex-col gap-4 lg:flex-row">
                                <div className="panel mb-5 w-full lg:basis-1/3">
                                    <h5 className="mb-5 text-lg font-semibold dark:text-white-light">Trade In 6K</h5>
                                    <div className="flex flex-row flex-wrap justify-between gap-4">
                                        <div className="flex min-w-[200px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="buyback_hargaemas6k">Harga Emas 6K</label>
                                                <NumberFormatter
                                                    name="harga_emas6k"
                                                    value={buybackSetting.harga_emas}
                                                    onChange={(value) => setBuyBackSetting({ ...buybackSetting, harga_emas: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback6k">Buyback 6K</label>
                                                <NumberFormatter
                                                    name="buyback6k"
                                                    value={buybackSetting.buyback}
                                                    onChange={(value) => setBuyBackSetting({ ...buybackSetting, buyback: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                        <div className="flex min-w-[200px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="buyback_hargaemas6k_sni">Harga Emas 6K SNI</label>
                                                <NumberFormatter
                                                    name="harga_emas6k_sni"
                                                    value={buyback6kSNISetting.harga_emas}
                                                    onChange={(value) => setBuyback6kSNISetting({ ...buyback6kSNISetting, harga_emas: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback6k_sni">Buyback 6K SNI</label>
                                                <NumberFormatter
                                                    name="buyback6k_sni"
                                                    value={buyback6kSNISetting.buyback}
                                                    onChange={(value) => setBuyback6kSNISetting({ ...buyback6kSNISetting, buyback: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="panel mb-5 w-full lg:basis-1/3">
                                    <h5 className="mb-5 text-lg font-semibold dark:text-white-light">Buyback</h5>
                                    <div className="flex flex-row flex-wrap justify-between gap-4">
                                        <div className="flex min-w-[200px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="buyback_hargaemas16k">Harga Emas 16K</label>
                                                <NumberFormatter
                                                    name="harga_emas16k"
                                                    value={buyback16kSetting.harga_emas}
                                                    onChange={(value) => setBuyback16kSetting({ ...buyback16kSetting, harga_emas: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback16k">Buyback 16K</label>
                                                <NumberFormatter
                                                    name="buyback16k"
                                                    value={buyback16kSetting.buyback}
                                                    onChange={(value) => setBuyback16kSetting({ ...buyback16kSetting, buyback: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                        <div className="flex min-w-[200px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="buyback_hargaemas16k_lino">Harga Emas 16K Lino</label>
                                                <NumberFormatter
                                                    name="harga_emas16k_lino"
                                                    value={buyback16kLinoSetting.harga_emas}
                                                    onChange={(value) => setBuyback16kLinoSetting({ ...buyback16kLinoSetting, harga_emas: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback16k_lino_1">Buyback 16K Lino 1</label>
                                                <NumberFormatter
                                                    name="buyback16k_lino_1"
                                                    value={buyback16kLinoSetting.buyback_1}
                                                    onChange={(value) => setBuyback16kLinoSetting({ ...buyback16kLinoSetting, buyback_1: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback16k_lino_2">Buyback 16K Lino 2</label>
                                                <NumberFormatter
                                                    name="buyback16k_lino_2"
                                                    value={buyback16kLinoSetting.buyback_2}
                                                    onChange={(value) => setBuyback16kLinoSetting({ ...buyback16kLinoSetting, buyback_2: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                        <div className="flex min-w-[200px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="buyback_hargaemas18k_lino">Harga Emas 18K Lino</label>
                                                <NumberFormatter
                                                    name="harga_emas18k_lino"
                                                    value={buyback18kLinoSetting.harga_emas}
                                                    onChange={(value) => setBuyback18kLinoSetting({ ...buyback18kLinoSetting, harga_emas: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback18k_lino_1">Buyback 18K Lino 1</label>
                                                <NumberFormatter
                                                    name="buyback18k_lino_1"
                                                    value={buyback18kLinoSetting.buyback_1}
                                                    onChange={(value) => setBuyback18kLinoSetting({ ...buyback18kLinoSetting, buyback_1: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback18k_lino_2">Buyback 18K Lino 2</label>
                                                <NumberFormatter
                                                    name="buyback18k_lino_2"
                                                    value={buyback18kLinoSetting.buyback_2}
                                                    onChange={(value) => setBuyback18kLinoSetting({ ...buyback18kLinoSetting, buyback_2: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                            <div className="mb-5">
                                                <label htmlFor="buyback_buyback_lotus">Buyback Lotus</label>
                                                <NumberFormatter
                                                    name="buyback_lotus"
                                                    value={buybackLotusSetting.buyback}
                                                    onChange={(value) => setBuybackLotusSetting({ ...buybackLotusSetting, buyback: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="w-full h-1/2 lg:basis-1/3 flex flex-col">
                                    <div className="panel mb-5">
                                        <h5 className="mb-5 text-lg font-semibold dark:text-white-light">Resell / Trade In 9K</h5>
                                        <div className="flex min-w-[220px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="tradein_9k">Trade In 9K</label>
                                                <NumberFormatter
                                                    name="tradein_9k"
                                                    value={tradein9k.harga}
                                                    onChange={(value) => setTradein9k({ harga: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>

                                        <div className="flex min-w-[220px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="resell_9k">Re-Sell 9K</label>
                                                <NumberFormatter
                                                    name="resell_9k"
                                                    value={resell9k.harga}
                                                    onChange={(value) => setResell9k({ harga: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                        <div className="flex min-w-[220px] flex-1 flex-col gap-4">
                                            <div className="mb-5">
                                                <label htmlFor="resell_tradein_9k_khusus">Re-Sell & Trade In 9K kondisi khusus</label>
                                                <NumberFormatter
                                                    name="resell_tradein_9k_khusus"
                                                    value={resellTradein9kKhusus.harga}
                                                    onChange={(value) => setResellTradein9kKhusus({ harga: value })}
                                                    className="form-input"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="panel mb-5 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                                        <div className="flex flex-1 flex-col gap-2">
                                            <h5 className="text-lg font-semibold dark:text-white-light">Tanggal Update</h5>
                                            <div className="flex flex-row items-center gap-2">
                                                <label htmlFor="tanggalUpdate">Gunakan Tanggal, Jam & Menit sekarang?</label>
                                                <Switch
                                                    checked={useNow}
                                                    onChange={(event) => setUseNow(event.target.checked)}
                                                    name="tanggalUpdate"
                                                    color="primary"
                                                />
                                            </div>
                                            {!useNow && (
                                                <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                                                    <label htmlFor="buyback_tanggal">Tanggal & Jam</label>
                                                    <Flatpickr
                                                        data-enable-time
                                                        options={{
                                                            enableTime: true,
                                                            dateFormat: 'Y-m-d H:i',
                                                            time_24hr: true,
                                                            position: 'auto left',
                                                        }}
                                                        value={tanggal}
                                                        className="form-input w-full lg:w-[280px]"
                                                        placeholder="yyyy-mm-dd hh:mm"
                                                        onChange={(selectedDates) => {
                                                            if (selectedDates[0]) setTanggal(selectedDates[0]);
                                                        }}
                                                    />
                                                </div>
                                            )}
                                            <div className="flex flex-row flex-wrap items-center gap-2">
                                                <span className="font-bold dark:text-white-light">Tanggal, Jam & Menit terpilih:</span>
                                                <span className="font-bold dark:text-white-light">
                                                    {tanggal
                                                        ? new Date(tanggal).toLocaleString('id-ID', {
                                                            year: 'numeric',
                                                            month: '2-digit',
                                                            day: '2-digit',
                                                            hour: '2-digit',
                                                            minute: '2-digit',
                                                            second: '2-digit',
                                                            hour12: false,
                                                        })
                                                        : '-'}
                                                </span>
                                            </div>
                                        </div>
                                        <button type="button" disabled={isLoading} onClick={saveBuybackSettings} className="btn btn-success w-full gap-2 lg:w-auto">
                                            {isLoading ? (
                                                <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-l-transparent align-middle ltr:mr-4 rtl:ml-4"></span>
                                            ) : (
                                                <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 ltr:mr-2 rtl:ml-2">
                                                    <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>
                                            )}
                                            Save
                                        </button>
                                    </div>
                                </div>

                            </div>


                        </>
                    )}

                    {activeTab === 'history' && (
                        <div className="panel">
                            <div className="mb-5 flex flex-col gap-4 items-center lg:flex-row lg:items-center lg:justify-between ">
                                <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
                                    <div>
                                        <label>Rentang Tanggal Perubahan</label>
                                        <Flatpickr
                                            key={`history-dates-${historyMarkedDates.join('|')}`}
                                            value={historyDateRange}
                                            options={{
                                                mode: 'range',
                                                dateFormat: 'Y-m-d',
                                                onDayCreate: (_dObj, _dStr, _fp, dayElem) => {
                                                    const dayKey = toDayKey(dayElem.dateObj);
                                                    if (markedDateSet.has(dayKey)) {
                                                        dayElem.classList.add('has-buyback-history');
                                                    }
                                                },
                                            }}
                                            className="form-input"
                                            placeholder="Pilih tanggal / range"
                                            onChange={(selectedDates) => {
                                                setHistoryDateRange(selectedDates);
                                                setHistoryPage(1);
                                            }}
                                        />
                                    </div>
                                    <div>
                                        <label>Kategori</label>
                                        <select className="form-select" value={historyCategory} onChange={(e) => {
                                            setHistoryCategory(e.target.value);
                                            setHistoryPage(1);
                                        }}>
                                            {HISTORY_CATEGORIES.map((item) => (
                                                <option key={item.value} value={item.value}>
                                                    {item.label}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                    <div>
                                        <label>Cari User</label>
                                        <input
                                            type="text"
                                            className="form-input"
                                            placeholder="Nama"
                                            value={historyUserSearch}
                                            onChange={(e) => setHistoryUserSearch(e.target.value)}
                                            onKeyDown={(e) => {
                                                if (e.key === 'Enter') applyHistoryFilters();
                                            }}
                                        />
                                    </div>
                                    <div className="flex flex-wrap items-end gap-2">
                                        <button type="button" className="btn btn-primary" onClick={applyHistoryFilters}>
                                            Terapkan
                                        </button>
                                        <button type="button" className="btn btn-outline-secondary" onClick={resetHistoryFilters}>
                                            Reset
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div className="mb-3 text-sm text-white-dark">
                                Total {historyTotal} riwayat
                            </div>

                            <div className="table-responsive">
                                <table className="table-hover">
                                    <thead>
                                        <tr>
                                            <th>Waktu Update</th>
                                            <th>Tanggal Efektif</th>
                                            <th>Diubah Oleh</th>
                                            <th>Ringkasan Perubahan</th>
                                            <th className="text-center">Detail</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {historyLoading && (
                                            <tr>
                                                <td colSpan={5} className="py-8 text-center">
                                                    Memuat riwayat...
                                                </td>
                                            </tr>
                                        )}
                                        {!historyLoading && historyItems.length === 0 && (
                                            <tr>
                                                <td colSpan={5} className="py-8 text-center">
                                                    Belum ada riwayat perubahan harga.
                                                </td>
                                            </tr>
                                        )}
                                        {!historyLoading &&
                                            historyItems.map((item) => {
                                                const rowId = String(item._id || item.changed_at);
                                                const isExpanded = expandedHistoryId === rowId;
                                                const changedFields = new Set((item.changes || []).map((c) => c.field));
                                                return (
                                                    <Fragment key={rowId}>
                                                        <tr>
                                                            <td>{item.changed_at ? formatDate(item.changed_at) : '-'}</td>
                                                            <td>{item.effective_tanggal ? formatDate(item.effective_tanggal) : '-'}</td>
                                                            <td>{item.changed_by?.name || '-'}</td>
                                                            <td>
                                                                <div className="max-w-xl space-y-1 text-sm">
                                                                    {(item.changes || []).slice(0, 3).map((change) => (
                                                                        <div key={`${rowId}-${change.field}`}>
                                                                            {change.label}: {renderChangeValue(change, 'from')} → {renderChangeValue(change, 'to')}
                                                                        </div>
                                                                    ))}
                                                                    {(item.changes || []).length > 3 && (
                                                                        <div className="text-white-dark">+{(item.changes || []).length - 3} perubahan lain</div>
                                                                    )}
                                                                </div>
                                                            </td>
                                                            <td className="text-center">
                                                                <button
                                                                    type="button"
                                                                    className="btn btn-sm btn-outline-primary"
                                                                    onClick={() => setExpandedHistoryId(isExpanded ? null : rowId)}
                                                                >
                                                                    {isExpanded ? 'Tutup' : 'Lihat'}
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        {isExpanded && (
                                                            <tr >
                                                                <td colSpan={5} className="bg-[#fafafa] dark:bg-[#0e1726] pl-[40px]">
                                                                    <div className="mb-3 font-semibold">Perubahan</div>
                                                                    <div className="mb-4 grid gap-2 md:grid-cols-3 xl:grid-cols-4">
                                                                        {(item.changes || []).map((change) => (
                                                                            <div key={`${rowId}-change-${change.field}`} className="rounded border border-[#e0e6ed] p-3 text-sm dark:border-[#1b2e4b]">
                                                                                <div className="font-semibold">{change.label}</div>
                                                                                <div className="flex items-center gap-2">
                                                                                    {renderChangeValue(change, 'from')} → <div className="text-green-500 font-bold">{renderChangeValue(change, 'to')}</div>
                                                                                </div>
                                                                            </div>
                                                                        ))}
                                                                    </div>

                                                                    <div className="mb-3 font-semibold">Snapshot Lengkap Setelah Update</div>
                                                                    <div className="grid gap-3 md:grid-cols-3 xl:grid-cols-4">
                                                                        {renderSnapshotSection(
                                                                            'Tanggal',
                                                                            [
                                                                                {
                                                                                    label: 'Tanggal Update',
                                                                                    value: item.snapshot?.tanggal ? formatDate(item.snapshot.tanggal) : '-',
                                                                                    field: 'tanggal',
                                                                                    raw: true,
                                                                                },
                                                                            ],
                                                                            changedFields
                                                                        )}
                                                                        {renderSnapshotSection(
                                                                            'Trade In 6K',
                                                                            [
                                                                                { label: 'Harga Emas 6K', value: item.snapshot?.buyback_6k?.harga_emas, field: 'buyback_6k.harga_emas' },
                                                                                { label: 'Buyback 6K', value: item.snapshot?.buyback_6k?.buyback, field: 'buyback_6k.buyback' },
                                                                                { label: 'Harga Emas 6K SNI', value: item.snapshot?.buyback_6k_sni?.harga_emas, field: 'buyback_6k_sni.harga_emas' },
                                                                                { label: 'Buyback 6K SNI', value: item.snapshot?.buyback_6k_sni?.buyback, field: 'buyback_6k_sni.buyback' },
                                                                            ],
                                                                            changedFields
                                                                        )}
                                                                        {renderSnapshotSection(
                                                                            'Buyback 16K / Lino',
                                                                            [
                                                                                { label: 'Harga Emas 16K', value: item.snapshot?.buyback_16k?.harga_emas, field: 'buyback_16k.harga_emas' },
                                                                                { label: 'Buyback 16K', value: item.snapshot?.buyback_16k?.buyback, field: 'buyback_16k.buyback' },
                                                                                { label: 'Harga Emas 16K Lino', value: item.snapshot?.buyback_16k_lino?.harga_emas, field: 'buyback_16k_lino.harga_emas' },
                                                                                { label: 'Buyback 16K Lino 1', value: item.snapshot?.buyback_16k_lino?.buyback_1, field: 'buyback_16k_lino.buyback_1' },
                                                                                { label: 'Buyback 16K Lino 2', value: item.snapshot?.buyback_16k_lino?.buyback_2, field: 'buyback_16k_lino.buyback_2' },
                                                                                { label: 'Harga Emas 18K Lino', value: item.snapshot?.buyback_18k_lino?.harga_emas, field: 'buyback_18k_lino.harga_emas' },
                                                                                { label: 'Buyback 18K Lino 1', value: item.snapshot?.buyback_18k_lino?.buyback_1, field: 'buyback_18k_lino.buyback_1' },
                                                                                { label: 'Buyback 18K Lino 2', value: item.snapshot?.buyback_18k_lino?.buyback_2, field: 'buyback_18k_lino.buyback_2' },
                                                                            ],
                                                                            changedFields
                                                                        )}
                                                                        {renderSnapshotSection(
                                                                            'Buyback Lotus',
                                                                            [
                                                                                { label: 'Buyback Lotus', value: item.snapshot?.buyback_lotus?.buyback, field: 'buyback_lotus.buyback' },
                                                                            ],
                                                                            changedFields
                                                                        )}
                                                                        {renderSnapshotSection(
                                                                            'Resell / Trade In 9K',
                                                                            [
                                                                                { label: 'Re-Sell 9K', value: item.snapshot?.resell_9k?.harga, field: 'resell_9k.harga' },
                                                                                { label: 'Trade In 9K', value: item.snapshot?.tradein_9k?.harga, field: 'tradein_9k.harga' },
                                                                                { label: '9K Khusus', value: item.snapshot?.resell_tradein_9k_khusus?.harga, field: 'resell_tradein_9k_khusus.harga' },
                                                                            ],
                                                                            changedFields
                                                                        )}
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        )}
                                                    </Fragment>
                                                );
                                            })}
                                    </tbody>
                                </table>
                            </div>

                            <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
                                <div className="text-sm text-white-dark">
                                    Halaman {historyPage} dari {historyTotalPages}
                                </div>
                                <div className="flex gap-2">
                                    <button
                                        type="button"
                                        className="btn btn-sm btn-outline-primary"
                                        disabled={historyPage <= 1 || historyLoading}
                                        onClick={() => setHistoryPage((prev) => Math.max(1, prev - 1))}
                                    >
                                        Prev
                                    </button>
                                    <button
                                        type="button"
                                        className="btn btn-sm btn-outline-primary"
                                        disabled={historyPage >= historyTotalPages || historyLoading}
                                        onClick={() => setHistoryPage((prev) => prev + 1)}
                                    >
                                        Next
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </>
            )
            }
        </>
    );
};

export default BuybackSettings;