import React from 'react';
import { router, usePage } from '@inertiajs/react';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';
import Configurations from './partials/Configurations';
import {formatStringWithHyphen} from "@/lib/helpers";
import RolesAndPermissions from "./partials/RolesAndPermissions";
import AppNameAndLogo from "./partials/AppNameAndLogo";
import UserManagement from "./partials/UserManagement";

interface LandingProps {
    type: string;
}

const subMenu = [
    {
        title: 'Configuration',
        url: '/settings/system-configuration',
        icon: 'fas fa-wrench',
    },
    {
        title: 'Roles & Permissions',
        url: '/settings/roles-and-permissions',
        icon: 'fas fa-wrench',
    },
    {
        title: 'User Management',
        url: '/settings/user-management',
        icon: 'fas fa-wrench',
    },
    {
        title: 'App name & Logo',
        url: '/settings/app-name-and-logo',
        icon: 'fas fa-wrench',
    },
];

export default function Landing({ type }: LandingProps) {
    const { url } = usePage();

    const navigate = (targetUrl: string) => {
        router.get(targetUrl);
    };

    const renderActiveComponent = () => {
        if (type === 'system-configuration') return <Configurations />;
        else if (type === 'roles-and-permissions') return <RolesAndPermissions />;
        else if (type === 'user-management') return <UserManagement />;
        else if (type === 'app-name-and-logo') return <AppNameAndLogo />;
        return null;
    };

    return (
        <MainLayout>
            <AppPageHeader title={formatStringWithHyphen(type)} subtitle="Settings" />
            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-3">
                    <div className="bg-white rounded-lg shadow">
                        <ul className="divide-y divide-gray-200">
                            {subMenu.map((item, index) => (
                                <li
                                    key={index}
                                    className={`px-4 py-3 cursor-pointer hover:bg-cyan-50 transition-colors ${
                                        url === item.url ? 'text-cyan-600 font-medium' : 'text-gray-700'
                                    }`}
                                    onClick={() => navigate(item.url)}
                                >
                                    <i className={`${item.icon} mr-2`}></i>
                                    {item.title}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
                <div className="col-span-9">
                    {renderActiveComponent()}
                </div>
            </div>
        </MainLayout>
    );
}