"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

export default function Navbar() {
    const pathname = usePathname();

    const { token } = useAuth();

    const isActive = (prefix: string) => pathname === prefix || pathname.startsWith(`${prefix}/`);

    return (
        <div className="navbar-expand-md">
            <div className="collapse navbar-collapse" id="navbar-menu">
                <div className="navbar">
                    <div className="container-xl">
                        <div className="row flex-column flex-md-row flex-fill align-items-center">
                            {Boolean(token) && (
                                <>
                            <div className="col">
                                <nav aria-label="Primary">
                                    <ul className="navbar-nav">
                                        <li className={`nav-item dropdown ${isActive("/") ? "active" : ""}`}>
                                            <Link className={`nav-link ${isActive("/") ? "active" : ""}`} href="/">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-home"></i> Dashboard
                                                </span>
                                            </Link>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/tenants") ? "active" : ""}`}>
                                            <a className={`nav-link dropdown-toggle ${isActive("/tenants") ? "active" : ""}`} data-bs-toggle="dropdown">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-users"></i> Tenant Management
                                                </span>
                                            </a>

                                            <div className="dropdown-menu">
                                                <Link href="/tenants" className={`dropdown-item ${isActive("/tenants") ? "active" : "" }`}>Tenants / CPO</Link>
                                                <Link href="/tenants/subscription" className={`dropdown-item ${isActive("/tenants/subscription") ? "active" : "" }`}>Subscription</Link>
                                            </div>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/infrastructure") ? "active" : ""}`}>
                                            <Link className={`nav-link ${isActive("/infrastructure") ? "active" : ""}`} href="/infrastructure/server">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-server-2"></i> Server Status
                                                </span>
                                            </Link>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/monitoring") ? "active" : ""}`}>
                                            <a className={`nav-link dropdown-toggle ${isActive("/monitoring") ? "active" : ""}`} data-bs-toggle="dropdown">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-server-2"></i> Monitoring
                                                </span>
                                            </a>

                                            <div className="dropdown-menu">
                                                <Link href="/monitoring/charger" className={`dropdown-item ${isActive("/monitoring/charger") ? "active" : "" }`}>Charger Monitoring</Link>
                                                <Link href="/monitoring/ocpp" className={`dropdown-item ${isActive("/monitoring/ocpp") ? "active" : "" }`}>OCPP Monitor</Link>
                                            </div>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/ticket") ? "active" : ""}`}>
                                            <Link className={`nav-link ${isActive("/ticket") ? "active" : ""}`} href="/ticket">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-ticket"></i> Support Tickets
                                                </span>
                                            </Link>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/logs") ? "active" : ""}`}>
                                            <Link className={`nav-link ${isActive("/logs") ? "active" : ""}`} href="/logs">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-server-2"></i> Audit Trails
                                                </span>
                                            </Link>
                                        </li>
                                        <li className={`nav-item dropdown ${isActive("/admin") ? "active" : ""}`}>
                                            <a className={`nav-link dropdown-toggle ${isActive("/admin") ? "active" : ""}`} data-bs-toggle="dropdown">
                                                <span className="nav-link-title">
                                                    <i className="ti ti-server-2"></i> Administration
                                                </span>
                                            </a>

                                            <div className="dropdown-menu">
                                                <Link href="/admin" className={`dropdown-item ${isActive("/admin") ? "active" : "" }`}>Admin Account</Link>
                                                <Link href="/admin/session" className={`dropdown-item ${isActive("/admin/session") ? "active" : "" }`}>Admin Sessions</Link>
                                                {/* <Link href="/admin/setting" className={`dropdown-item ${isActive("/admin/setting") ? "active" : "" }`}>System Settings</Link> */}
                                            </div>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            {/* <div className="col col-md-auto">
                                <ul className="navbar-nav">
                                    <li className="nav-item">
                                        <Link className="nav-link" href="/subscription">
                                            <span className="badge badge-sm bg-red text-red-fg">New</span>
                                            <span className="nav-link-title"> Subscription </span>
                                        </Link>
                                    </li>
                                </ul>
                            </div> */}
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}