"use client";

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

interface ChargerStatus {
    token: string;
    charger_id: string;
    name: string;
    location: string;
    status: string;
    nozzle: number;
    heart_beat: string;
    firmaware: string;
}

interface ChargerTableWidgetProps {
    charger: ChargerStatus[];
    tenant_id: string
}

interface DataTableInstance {
    destroy: () => void;
}

export default function ChargerTable({
    charger, tenant_id
}: ChargerTableWidgetProps) {
    const tableRef = useRef<HTMLTableElement>(null);
    const dataTableRef = useRef<DataTableInstance | null>(null);

    useEffect(() => {
        let cancelled = false;

        const initDataTable = async () => {
            // Tunggu sampai React selesai commit DOM
            await new Promise<void>((resolve) => {
                requestAnimationFrame(() => resolve());
            });

            if (cancelled || !tableRef.current) {
                return;
            }

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

            if (cancelled || !tableRef.current) {
                return;
            }

            // Pastikan instance sebelumnya sudah dihancurkan
            if (dataTableRef.current) {
                try {
                    dataTableRef.current.destroy();
                } catch (error) {
                    console.warn(
                        "Failed to destroy DataTable:",
                        error
                    );
                }

                dataTableRef.current = null;
            }

            if (cancelled || !tableRef.current) {
                return;
            }

            dataTableRef.current = new DataTable(
                tableRef.current,
                {
                    searchable: true,
                    fixedHeight: false,
                    perPage: 20,
                    perPageSelect: [10, 20, 50],
                }
            );
        };

        initDataTable();

        return () => {
            cancelled = true;
            if (dataTableRef.current) {
                try {
                    dataTableRef.current.destroy();
                } catch (error) {
                    console.log("Failed to destroy DataTable:",error);
                }

                dataTableRef.current = null;
            }
        };
    }, []);

    const getStatusBadge = (status: string) => {
        switch (status.toLowerCase()) {
            case "available":
                return "bg-success-lt";
            case "charging":
                return "bg-primary-lt";
            case "preparing":
                return "bg-warning-lt";
            case "finishing":
                return "bg-info-lt";
            case "fault":
                return "bg-danger-lt";
            case "offline":
                return "bg-secondary-lt";
            default:
                return "bg-secondary-lt";
        }
    };

    return (
        <div className="card">
            <div className="card-header">
                <h3 className="card-title">
                    Charger Status
                </h3>
                <Link href={`/monitoring/charger/${tenant_id}/dlm`} className="btn btn-outline btn-primary ms-auto">Dynamic Load Management</Link>
            </div>

            <div className="table-responsive">
                <table ref={tableRef} className="table table-selectable card-table table-vcenter text-nowrap">
                    <thead>
                        <tr>
                            <th>Charger ID</th>
                            <th>Name</th>
                            <th>Location</th>
                            <th>Status</th>
                            <th>Nozzle</th>
                            <th>Firmware</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        {charger.length === 0 ? (
                            <tr>
                                <td className="text-center">
                                    No charger found
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        ) : (
                            charger.map((item) => (
                                <tr key={item.charger_id}>
                                    <td>{item.charger_id}</td>
                                    <td>{item.name}</td>
                                    <td>{item.location || "-"}</td>
                                    <td>
                                        <span className={`badge ${getStatusBadge(item.status)}`}>{item.status}</span>
                                    </td>
                                    <td>{item.nozzle}</td>
                                    <td>{item.firmaware || "-"}</td>
                                    <td>
                                        <Link href={`/monitoring/charger/${item.token}`} className="btn btn-sm btn-outline-primary">
                                            Detail
                                        </Link>
                                    </td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}