import React, { useState } from "react";
import AdminLayout from "./Layout/AdminLayout";
import { FaPlus, FaTrash } from "react-icons/fa6";
import Pagination from "../../Components/Pagination";
import { FaEdit } from "react-icons/fa";
import { IoBookOutline, IoInformationCircleSharp } from "react-icons/io5";
import { Link } from "@inertiajs/react";
import GenerateUrl from "../../Utils/GenerateUrl";
import { debounce } from "../../Utils/Debounce";
import useSWR, { mutate } from "swr";
import { fetcher } from "../../Utils/Fetcher";
import CustomModal from "../../Components/CustomModal";
import NoDataTable from "../../Components/NoDataTable";
import Swal from "sweetalert2";
import HitApi from "../../Utils/HitApi";
import DeleteData from "../../Utils/DeleteData";
import { PiRankingFill } from "react-icons/pi";

const MateriDetail = (props) => {
    const [page, setPage] = useState(1);
    const [search, setSearch] = useState("");
    const URL = GenerateUrl(
        "/api/v1/materi",
        `id=${props.id}`,
        `page=${page}`,
        `search=${encodeURIComponent(search)}`
    );
    const { data, error, isLoading } = useSWR(URL, fetcher);

    const handleSearch = debounce((term) => {
        setSearch(term);
    }, 500);

    const handleChangeSearch = (e) => {
        const { value } = e.target;
        setPage(1);
        handleSearch(value);
    };

    const [showModal, setShowModal] = useState(false);
    const [showRankModal, setShowRankModal] = useState(false);

    const [form, setForm] = useState({
        name: "",
        category: "materi",
        option: "tambah",
    });

    const clearForm = () => {
        setForm({
            name: "",
            category: "materi",
            option: "tambah",
        });
    };

    const [ranking, setRanking] = useState([]);

    const myState = {
        showModal,
        setShowModal,
        URL,
        form,
        setForm,
        clearForm,
        props,
        ranking,
        setRanking,
        showRankModal,
        setShowRankModal,
    };

    return (
        <AdminLayout title="Materi">
            <Modal state={myState} />
            <RankingModal state={myState} />
            <div className="w-full h-full flex flex-col px-3 py-1">
                <div className="text-xs breadcrumbs mb-2">
                    <ul>
                        <li>
                            <Link href="/admin/materi">SD</Link>
                        </li>
                        <li>
                            <Link href="/admin/materi/detail">Matematika</Link>
                        </li>
                        <li>Module</li>
                    </ul>
                </div>
                <div className="flex items-center w-full gap-4 mb-3">
                    <label className="input input-bordered flex w-full items-center gap-2 max-w-[200px] md:max-w-[400px]">
                        <input
                            type="text"
                            className="w-full"
                            placeholder="Search"
                            onChange={handleChangeSearch}
                        />
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="currentColor"
                            className="w-4 h-4 opacity-70"
                        >
                            <path
                                fillRule="evenodd"
                                d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                                clipRule="evenodd"
                            />
                        </svg>
                    </label>
                    <div className="flex-1 justify-end flex w-full">
                        <button
                            onClick={() => {
                                clearForm();
                                setShowModal(true);
                            }}
                            className="btn btn-primary w-fit"
                        >
                            <FaPlus />
                            <p className="hidden md:flex">Tambah</p>
                        </button>
                    </div>
                </div>

                <NoDataTable
                    isLoading={isLoading}
                    isError={error}
                    message={error ? "Failed get data" : "No data"}
                    isEmpty={
                        data && data.result.data.length == 0 ? true : false
                    }
                >
                    {data && (
                        <>
                            <div className="overflow-x-auto">
                                <table className="table">
                                    {/* head */}
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Name</th>
                                            <th>Kategori</th>
                                            <th>Created At</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {data.result.data.map((item, index) => (
                                            <tr
                                                key={index}
                                                className="hover border-t-2"
                                            >
                                                <th>
                                                    {data.result.from + index}
                                                </th>
                                                <td>{item.name}</td>
                                                <td>{item.kategori}</td>
                                                <td>
                                                    {new Date(
                                                        item.created_at
                                                    ).toLocaleString()}
                                                </td>
                                                <td>
                                                    <div className="flex gap-2 items-center">
                                                        <div
                                                            className="tooltip"
                                                            data-tip="Isi"
                                                        >
                                                            <Link
                                                                href={
                                                                    item.kategori ==
                                                                    "materi"
                                                                        ? `/admin/materi/input/${item.id}`
                                                                        : `/admin/quiz/input/${item.id}`
                                                                }
                                                            >
                                                                <button className="btn btn-sm btn-warning">
                                                                    <IoInformationCircleSharp
                                                                        size={
                                                                            15
                                                                        }
                                                                    />
                                                                </button>
                                                            </Link>
                                                        </div>
                                                        <div
                                                            className="tooltip"
                                                            data-tip="Ubah"
                                                        >
                                                            <button
                                                                onClick={() => {
                                                                    clearForm();
                                                                    setForm({
                                                                        id: item.id,
                                                                        name: item.name,
                                                                        category:
                                                                            item.kategori,
                                                                        option: "edit",
                                                                    });
                                                                    setShowModal(
                                                                        true
                                                                    );
                                                                }}
                                                                className="btn btn-sm btn-accent"
                                                            >
                                                                <FaEdit
                                                                    size={15}
                                                                />
                                                            </button>
                                                        </div>
                                                        <div
                                                            className="tooltip"
                                                            data-tip="Hapus"
                                                        >
                                                            <button
                                                                onClick={() => {
                                                                    DeleteData(
                                                                        `/api/v1/materi?id=${item.id}`,
                                                                        () => {
                                                                            mutate(
                                                                                URL
                                                                            );
                                                                        }
                                                                    );
                                                                }}
                                                                className="btn btn-sm btn-error"
                                                            >
                                                                <FaTrash
                                                                    size={15}
                                                                />
                                                            </button>
                                                        </div>
                                                        {item.kategori ==
                                                            "kuis" && (
                                                            <div
                                                                className="tooltip"
                                                                data-tip="Ranking"
                                                            >
                                                                <button
                                                                    onClick={() => {
                                                                        setRanking(
                                                                            item.riwayat_kuis
                                                                        );
                                                                        setShowRankModal(
                                                                            true
                                                                        );
                                                                    }}
                                                                    className="btn btn-sm bg-gray-700 hover:bg-gray-800 text-white"
                                                                >
                                                                    <PiRankingFill
                                                                        size={
                                                                            15
                                                                        }
                                                                    />
                                                                </button>
                                                            </div>
                                                        )}
                                                    </div>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                            <Pagination
                                total={data.result.total}
                                showItem={data.result.data.length}
                                page={page}
                                setPage={setPage}
                                limit={data.result.per_page}
                            />
                        </>
                    )}
                </NoDataTable>
            </div>
        </AdminLayout>
    );
};

const RankingModal = ({ state }) => {
    const { ranking, setRanking } = state;

    return (
        <CustomModal
            className={"md:w-[700px]"}
            show={state.showRankModal}
            setShow={state.setShowRankModal}
            title={"Ranking"}
        >
            <div className="w-full flex flex-col gap-2">
                {ranking.length == 0 ? (
                    <p>Tidak ada</p>
                ) : (
                    <div className="overflow-x-auto">
                        <table className="table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Score</th>
                                    <th>Tanggal</th>
                                </tr>
                            </thead>
                            <tbody>
                                {ranking.map((item, index) => (
                                    <tr className="hover" key={index}>
                                        <td>{index + 1}</td>
                                        <td>
                                            <div className="flex flex-col">
                                                <p className="font-semibold">
                                                    {item.user.name}
                                                </p>
                                                <p className="text-sm">
                                                    {item.user.email}
                                                </p>
                                            </div>
                                        </td>
                                        <td>{item.skor}</td>
                                        <td>
                                            {new Date(
                                                item.created_at
                                            ).toLocaleString()}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}
            </div>
        </CustomModal>
    );
};

const Modal = ({ state }) => {
    const { form, setForm, clearForm, props } = state;

    // handle change form
    const handleChange = (e) => {
        const { name, value } = e.target;
        setForm((prev) => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        Swal.fire({
            title: "Konfirmasi",
            text:
                form.option == "tambah"
                    ? "Apakah anda yakin ingin menambahkan data?"
                    : "Apakah anda yakin ingin mengubah data?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya",
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: "Loading",
                    html: '<div class="body-loading"><div class="loadingspinner"></div></div>', // add html attribute if you want or remove
                    allowOutsideClick: false,
                    showConfirmButton: false,
                });

                HitApi({
                    url: "/api/v1/materi",
                    method: form.option == "tambah" ? "POST" : "PUT",
                    body: { ...form, id_module: props.id },
                    onSuccess: () => {
                        Swal.fire(
                            "Berhasil",
                            form.option == "tambah"
                                ? "Data berhasil ditambahkan"
                                : "Data berhasil diubah",
                            "success"
                        );

                        clearForm();

                        state.setShowModal(false);
                        mutate(state.URL);
                    },
                    onError: () => {
                        // Swal.fire("Gagal", "Data gagal ditambahkan", "error");
                    },
                });
            }
        });
    };

    return (
        <CustomModal
            show={state.showModal}
            setShow={state.setShowModal}
            title={"Materi"}
        >
            <form
                onSubmit={handleSubmit}
                className="w-full flex flex-col gap-2"
            >
                <label className="form-control w-full">
                    <div className="label">
                        <span className="label-text">Nama</span>
                    </div>
                    <input
                        value={form.name}
                        onChange={handleChange}
                        name="name"
                        type="text"
                        placeholder=""
                        className="input input-bordered w-full"
                    />
                </label>
                {form.option == "tambah" && (
                    <label className="form-control w-full">
                        <div className="label">
                            <span className="label-text">Kategori</span>
                        </div>
                        <select
                            onChange={handleChange}
                            value={form.category}
                            name="category"
                            className="select select-bordered"
                        >
                            <option value="materi">Materi</option>
                            <option value="kuis">Kuis</option>
                        </select>
                    </label>
                )}

                <button className="btn btn-primary mb-2 mt-2">Save</button>
            </form>
        </CustomModal>
    );
};

export default MateriDetail;