"use client"

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

interface TicketData {
    id: string;
    ticket_number: string;
    tenant: string;
    subject: string;
    category: string
    priority: string
    status: string
    created_at: string
}

export default function TicketTable() {
    const tableRef = useRef<HTMLTableElement>(null);
    const datatable = useRef<any>(null);
    const [modules, setUsers] = useState<TicketData[]>([]);
    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/support",
                {
                    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>;
    }

    const handleResolve = async (ticketId: string) => {
        const result = await Swal.fire({
            title: "Resolve Ticket?",
            text: "Are you sure you want to resolve this ticket?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, resolve it",
            cancelButtonText: "Cancel",
            reverseButtons: true,
        });

        if (!result.isConfirmed) {
            return;
        }

        Swal.fire({
            title: "Resolving Ticket...",
            text: "Please wait",
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.showLoading();
            },
        });

        try {
            const response = await fetch(`/api/support/${ticketId}/resolved`,
                {
                    method: "GET",
                }
            );

            const data = await response.json();
            Swal.close();

            if (!response.ok) {
                await Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: data.msg || "Something went wrong",
                });

                return;
            }

            const success = await Swal.fire({
                icon: "success",
                title: "Success!",
                text: data.msg || "Ticket successfully resolved.",
                confirmButtonText: "OK",
            });

            if (success.isConfirmed) {
                window.location.reload();
            }

        } catch (error) {
            console.log("Resolve ticket error:", error);
            Swal.close();
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Something went wrong",
            });
        }
    };

    const getStatusTicket = (status?: string) => {
        switch (status?.toLowerCase()) {
            case "open":
                return "text-green";
            case "in_progress":
                return "text-blue";
            case "waiting_customer":
                return "text-yellow";
            case "resolved":
                return "text-default";
            case "closed":
                return "text-default";
            default:
                return "text-green";
        }
    };

    const getPriorityTicket = (status?: string) => {
        switch (status?.toLowerCase()) {
            case "low":
                return "text-green";
            case "medium":
                return "text-yellow";
            case "high":
                return "text-orange";
            case "urgent":
                return "text-red";
        }
    };
    return (
        <>
            <div className="card">
                <div className="card-header">
                    <h3>List Support Ticket</h3>
                </div>
                <div className="card-body">
                    <div className="table-responsive">
                        <table ref={tableRef} className="table table-selectable card-table table-vcenter text-nowrap datatable">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Ticket No</th>
                                    <th>Category</th>
                                    <th>Tenant</th>
                                    <th>Subject</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {modules.map((data, i) => (
                                    <tr key={i}>
                                        <td>{data.created_at}</td>
                                        <td>{data.ticket_number}</td>
                                        <td>{data.category}</td>
                                        <td>{data.tenant}</td>
                                        <td>
                                            <span className={`badge badge-outline ${getPriorityTicket(data.priority)}`}>{data.priority}</span> » {data.subject}
                                        </td>
                                        <td>
                                            <span className={`badge badge-outline ${getStatusTicket(data.status)}`}>{data.status}</span>
                                        </td>
                                        <td>
                                            <div className="btn-list flex-nowrap">
                                                <Link href={`/ticket/${data.id}`} className="btn btn-outline btn-primary btn-sm"> Detail </Link>
                                                {data.status === "CLOSED" || data.status === "RESOLVED" ? (
                                                    <button type="button" className="btn btn-outline btn-danger btn-sm" disabled> Resolve </button>
                                                ) : (
                                                    <button onClick={() => handleResolve(data.id)} className="btn btn-outline btn-danger btn-sm"> Resolve </button>
                                                )}
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </>
    );
}