"use client"

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import Swal from "sweetalert2";

interface TenantData {
    id: string;
    name: string;
    tier: string;
    status: string;
    join_date: string
}

export default function GiveItemLogTable() {
    const tableRef = useRef<HTMLTableElement>(null);
    const datatable = useRef<any>(null);
    const [modules, setUsers] = useState<TenantData[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        loadUsers();
        return () => {
            cleanupDataTable();
        };
    }, []);


    useEffect(() => {
        if (loading) return;
        if (!tableRef.current) return;

        async function initDataTable() {
            const { DataTable } = await import(
                "simple-datatables"
            );

            cleanupDataTable();
            datatable.current = new DataTable(
                tableRef.current!,
                {
                    searchable: true,
                    perPage: 20,
                    perPageSelect: [20, 50, 10],
                }
            );
        }
        initDataTable();
    }, [loading]);

    function cleanupDataTable() {
        try {
            datatable.current?.destroy();
            datatable.current = null;

            document
                .querySelectorAll(".dataTable-wrapper")
                .forEach((el) => {
                    el.remove();
                });

        } catch (err) {
            console.error(
                "DATATABLE CLEANUP ERROR",
                err
            );
        }
    }

    async function loadUsers() {
        try {
            const res = await fetch(
                "/api/tenant",
                {
                    cache: "no-store"
                }
            );

            const data = await res.json();
            setUsers(
                data.data ?? []
            );
        } catch(err) {
            console.log(
                "LOAD BANNED ERROR",
                err
            );
        } finally {
            setLoading(false);
        }
    }

    if (loading) {
        return <p>Loading...</p>;
    }

    
    return (
        <>
            <div className="card">
                <div className="card-header align-right">
                    <Link href="/tenants/add" className="btn btn-outline btn-primary ms-auto">Create New Tenant / CPO</Link>
                </div>
                <div className="table-responsive">
                    <table ref={tableRef} className="table table-selectable card-table table-vcenter text-nowrap datatable">
                        <thead>
                            <tr>
                                <th>Tenant Name</th>
                                <th>Tier</th>
                                <th>Status</th>
                                <th>Database</th>
                                <th>Server</th>
                                <th>Join Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {modules.map((data, i) => (
                                <tr key={i}>
                                    <td>{data.name}</td>
                                    <td>{data.tier}</td>
                                    <td>
                                        { data.status == 'active' ? (
                                            <span className="badge bg-green-lt">{data.status}</span>
                                        ) : (
                                            <span className="badge bg-red-lt">{data.status}</span>
                                        )}
                                    </td>
                                    <td>
                                        { data.status == 'active' ? (
                                            <span className="badge bg-green-lt">{data.status}</span>
                                        ) : (
                                            <span className="badge bg-red-lt">{data.status}</span>
                                        )}
                                    </td>
                                    <td>
                                        { data.status == 'active' ? (
                                            <span className="badge bg-green-lt">{data.status}</span>
                                        ) : (
                                            <span className="badge bg-red-lt">{data.status}</span>
                                        )}
                                    </td>
                                    <td>{data.join_date}</td>
                                    <td>
                                        <div className="btn-list flex-nowrap">
                                            <Link href={`/tenants/${data.id}`} className="btn btn-outline btn-primary btn-sm"> Detail </Link>
                                            <Link href={`/tenants/${data.id}/database`} className="btn btn-outline btn-success btn-sm"> Edit Database </Link>
                                            <Link href={`/tenants/${data.id}/server`} className="btn btn-outline btn-danger btn-sm"> Assign Server </Link>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    );
}