import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { IRootState } from '../store';
import { setPageTitle } from '../store/themeConfigSlice';
import 'mantine-datatable/styles.css';
import ActivityTimeline from './setting/activity/timeline';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { Button } from '@mantine/core';
import RefreshIcon from '@mui/icons-material/Refresh';
import { DataTable } from '@/components/Shared/DataTable';

interface Activities {
    id: string;
    user_id: {
        email: string;
        name: string;
    };
    interaction: [
        {
            location: string;
            access_in: Date;
            description: String;
        }
    ];
    createdAt: string;
}

const Activity = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setPageTitle('Dashboard Admin'));
    }, []);
    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

    const [isMounted, setIsMounted] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [today, setToday] = useState(new Date());
    const [appliedFilter, setAppliedFilter] = useState<Activities>({
        id: '',
        user_id: {
            name: '',
            email: '',
        },
        interaction: [
            {
                location: '',
                access_in: new Date(),
                description: '',
            },
        ],
        createdAt: '',
    });
    const [modalOpen, setModalOpen] = useState(false);
    const [selectedUser, setSelectedUser] = useState<any>(null);
    const [detail, setDetail] = useState<any>(null);

    const [page, setPage] = useState(1);
    const PAGE_SIZES = [5, 10, 20, 30, 50, 100];
    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
    const [records, setRecords] = useState<Activities[]>([]);
    const [totalRecords, setTotalRecords] = useState(0);
    const [search, setSearch] = useState('');
    const [isFiltered, setIsFiltered] = useState(false);
    useEffect(() => {
        if (!isFiltered) {
            generateData({
                id: '',
                user_id: { name: '', email: '' },
                interaction: [{ location: '', access_in: new Date(), description: '' }],
                createdAt: '',
            });
        }
    }, [isFiltered]);

    useEffect(() => {
        if (isMounted && appliedFilter.createdAt) {
            generateData();
        }
    }, [appliedFilter.createdAt]);

    const generateData = async (filterData = appliedFilter) => {
        setIsLoading(true);
        try {
            const filterConditions: string[] = [];

            if (filterData.user_id?.name) {
                filterConditions.push(`name=${encodeURIComponent(filterData.user_id.name)}`);
            }

            if (filterData.createdAt) {
                filterConditions.push(`date=${encodeURIComponent(filterData.createdAt)}`);
            }

            const filter = filterConditions.join('&');
            const api_url = process.env.API_URL;

            const response = await fetch(`${api_url}api/activity?page=${page}&per_page=${pageSize}&q=${search}&${filter}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
            });
            const { data, currentPage, totalData } = await response.json();
            setPage(currentPage);
            setTotalRecords(totalData);
            setRecords(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        setIsMounted(true);
        generateData();
    }, [page, pageSize]);

    const dateFilter = (date: Date) => {
        setIsFiltered(true);
        const formattedDate = date
            .toLocaleDateString('id-ID', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
            })
            .split('/')
            .reverse()
            .join('-');

        setAppliedFilter((prev) => ({
            ...prev,
            createdAt: formattedDate,
        }));
    };

    const handleKeypress = (event: React.KeyboardEvent<HTMLInputElement>) => {
        if (event.keyCode === 13) {
            setIsFiltered(true);
            setAppliedFilter((prev) => ({
                ...prev,
                user_id: {
                    name: search,
                    email: '',
                },
            }));
            if (page !== 1) {
                setPage(1);
            } else {
                generateData();
            }
        }
    };

    const clearFilter = () => {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        setAppliedFilter({
            id: '',
            user_id: { name: '', email: '' },
            interaction: [{ location: '', access_in: new Date(), description: '' }],
            createdAt: '',
        });
        setSearch('');
        setIsFiltered(false);
        setToday(today);
    };

    const refresh = () => {
        generateData();
    };

    return (
        <>
                {isMounted && (
                    <>
                        <div className="mb-3">
                            <ul className="flex space-x-2 rtl:space-x-reverse">
                                <li>
                                    <span>Users</span>
                                </li>
                            </ul>
                        </div>

                        {/* table of users  */}
                        <div className="panel border-white-light px-0 dark:border-[#1b2e4b]">
                            <div className="user-table">
                                <div className="mb-4.5 flex flex-col gap-5 px-5 md:flex-row md:items-center">
                                    <div className=" flex w-full flex-col gap-4 sm:w-auto sm:flex-row sm:items-center sm:gap-3 nb-button">
                                        <Button variant="outline" color="blue" onClick={() => refresh()}>
                                            <RefreshIcon />
                                        </Button>
                                    </div>
                                    <div className="flex gap-2 ltr:ml-auto rtl:mr-auto">
                                        {isFiltered && (
                                            <Button variant="outline" color="red" onClick={() => clearFilter()}>
                                                Clear Filter
                                            </Button>
                                        )}
                                        <Flatpickr
                                            options={{
                                                enableTime: false,
                                                dateFormat: 'Y-m-d',
                                                position: 'auto left',
                                            }}
                                            value={today}
                                            onChange={(selectedDates) => dateFilter(selectedDates[0])}
                                            className="form-input w-2/3 lg:w-[150px]"
                                            placeholder="yyyy-mm-dd"
                                        />

                                        <input
                                            type="text"
                                            className="form-input w-auto"
                                            placeholder="Search User Name"
                                            value={search}
                                            onChange={(e) => setSearch(e.target.value)}
                                            onKeyDown={handleKeypress}
                                        />
                                    </div>
                                </div>
                                <div className="datatables pagination-padding">
                                    {isLoading ? (
                                        <div className="flex justify-center py-4 text-center">
                                            <svg
                                                viewBox="0 0 24 24"
                                                width="24"
                                                height="24"
                                                stroke="currentColor"
                                                strokeWidth="1.5"
                                                fill="none"
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                className="h-5 w-5 animate-spin text-white-dark"
                                            >
                                                <line x1="12" y1="2" x2="12" y2="6"></line>
                                                <line x1="12" y1="18" x2="12" y2="22"></line>
                                                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                                                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                                                <line x1="2" y1="12" x2="6" y2="12"></line>
                                                <line x1="18" y1="12" x2="22" y2="12"></line>
                                                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                                                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                                            </svg>
                                            <span className="ms-3">Please wait, we&apos;re still working to load the data...</span>
                                        </div>
                                    ) : (
                                        <DataTable
                                            className="table-hover whitespace-nowrap"
                                            records={records}
                                            minHeight={250}
                                            noRecordsText="No data found"
                                            columns={[
                                                {
                                                    accessor: 'name',
                                                    render(record) {
                                                        const userName = record.user_id?.name || 'User terhapus';
                                                        return (
                                                            <button
                                                                className="text-left text-xs font-semibold underline hover:no-underline"
                                                                onClick={() => {
                                                                    setSelectedUser(record.user_id || { name: 'User terhapus', email: '' });
                                                                    setModalOpen(true);
                                                                    setDetail(record);
                                                                }}
                                                            >
                                                                {userName}
                                                            </button>
                                                        );
                                                    },
                                                },
                                                {
                                                    accessor: 'activity',
                                                    render(record) {
                                                        return <span>{record.interaction?.length ?? 0} Activity</span>;
                                                    },
                                                },
                                                {
                                                    accessor: 'access at',
                                                    render: (record) => {
                                                        const createdAtDate = new Date(record.createdAt);
                                                        const formattedDate = createdAtDate.toLocaleDateString('id-ID');
                                                        const formattedTime = createdAtDate.toLocaleTimeString('id-ID');
                                                        return (
                                                            <>
                                                                <div className="text-xs">
                                                                    <div>{formattedDate}</div>
                                                                    <div>{formattedTime}</div>
                                                                </div>
                                                            </>
                                                        );
                                                    },
                                                },
                                            ]}
                                            highlightOnHover
                                            totalRecords={totalRecords}
                                            recordsPerPage={pageSize}
                                            page={page}
                                            onPageChange={(p) => setPage(p)}
                                            recordsPerPageOptions={PAGE_SIZES}
                                            onRecordsPerPageChange={setPageSize}
                                            paginationText={({ from, to, totalRecords }) => `Showing  ${from} to ${to} of ${totalRecords} users`}
                                        />
                                    )}
                                </div>
                            </div>
                        </div>

                        {modalOpen && selectedUser && (
                            <>
                                <div
                                    className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                                    onClick={() => setModalOpen(false)}
                                    role="dialog"
                                    aria-modal="true"
                                >
                                    <div
                                        className="flex h-[90vh] w-full max-w-[700px] flex-col rounded-lg bg-white shadow-xl dark:bg-[#1e293b]"
                                        onClick={(e) => e.stopPropagation()}
                                    >
                                        <div className="flex flex-shrink-0 items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-600">
                                            <h2 className="text-lg font-semibold">{selectedUser?.name || 'User terhapus'} Activity Detail</h2>
                                            <button
                                                type="button"
                                                className="text-gray-500 hover:text-gray-800 dark:hover:text-white"
                                                onClick={() => setModalOpen(false)}
                                                aria-label="Tutup"
                                            >
                                                ✕
                                            </button>
                                        </div>
                                        <div className="h-[800px] overflow-y-auto p-6">
                                            <div className="space-y-2 text-sm">{detail !== null ? <ActivityTimeline detail={detail} /> : <div>No data found</div>}</div>
                                        </div>
                                    </div>
                                </div>
                            </>
                        )}
                    </>
                )}
        </>
    );
};

export default Activity;