import { useState } from 'react';
import { FileText, Tag, TrendingUp, ChevronDown, ChevronRight, DollarSign } from 'lucide-react';
import { useToast, ToastContainer } from '../../components/UI/Toast';
import DocumentType from '../../components/Settings/HRM/DocumentType';
import SkillTag from '../../components/Settings/HRM/SkillTag';
import SkillLevel from '../../components/Settings/HRM/SkillLevel';
import PerHourCost from '../../components/Settings/HRM/PerHourCost';

type HRMSection = 'document-type' | 'skill-tag' | 'skill-level' | 'per-hour-cost';

const HRMSettings = () => {
    const toast = useToast();
    const [activeSection, setActiveSection] = useState<HRMSection>('document-type');

    // State for collapsed sections
    const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({
        'HRM Settings': false, // Open by default
    });

    // Toggle section collapse
    const toggleSection = (sectionLabel: string) => {
        setCollapsedSections((prev) => ({
            ...prev,
            [sectionLabel]: !prev[sectionLabel],
        }));
    };

    // Menu groups with collapsible functionality
    const menuGroups: { label: string; items: { id: HRMSection; label: string; description: string; icon: typeof FileText }[] }[] = [
        {
            label: 'HRM Settings',
            items: [
                { id: 'document-type', label: 'Document Type', description: 'Manage document types', icon: FileText },
                { id: 'skill-tag', label: 'Skill Tag', description: 'Manage skill tags', icon: Tag },
                { id: 'skill-level', label: 'Skill Level', description: 'Manage skill levels', icon: TrendingUp },
                { id: 'per-hour-cost', label: 'Per Hour Cost', description: 'Manage per hour cost', icon: DollarSign },
            ],
        },
    ];

    const renderContent = () => {
        switch (activeSection) {
            case 'document-type':
                return <DocumentType />;
            case 'skill-tag':
                return <SkillTag />;
            case 'skill-level':
                return <SkillLevel />;
            case 'per-hour-cost':
                return <PerHourCost />;
            default:
                return (
                    <div className="p-6">
                        <div className="border border-dashed border-gray-200 rounded-xl p-10 text-center bg-gray-50">
                            <p className="text-gray-500">Coming soon...</p>
                        </div>
                    </div>
                );
        }
    };

    return (
        <>
            <ToastContainer toasts={toast.toasts} onRemove={toast.removeToast} />
            <div className="flex flex-col lg:flex-row min-h-[600px] bg-white rounded-lg overflow-hidden">
                {/* LEFT CONTENT */}
                <div className="flex-1 min-w-0">{renderContent()}</div>

                {/* RIGHT SIDEBAR */}
                <div className="w-full lg:w-64 border-t lg:border-t-0 lg:border-l border-gray-200 bg-gray-50/60 shrink-0">
                    <div className="px-4 py-4 border-b border-gray-200">
                        <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">HRM Settings</p>
                        <p className="text-xs text-gray-400 mt-0.5">Manage HRM related settings</p>
                    </div>
                    <div className="p-3 space-y-3">
                        {menuGroups.map((group) => {
                            const isCollapsed = collapsedSections[group.label];
                            const isActive = group.items.some((item) => item.id === activeSection);

                            return (
                                <div key={group.label} className="border-b border-gray-200/60 pb-2 last:border-b-0">
                                    {/* Section Header with dropdown icon */}
                                    <button
                                        onClick={() => toggleSection(group.label)}
                                        className={`
                                            w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-left transition-all hover:bg-white/50
                                            ${isActive ? 'text-secondary' : 'text-gray-400'}
                                        `}
                                    >
                                        <span className="text-[10px] font-semibold uppercase tracking-wider">{group.label}</span>
                                        <span className="text-gray-400">{isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}</span>
                                    </button>

                                    {/* Menu Items - Collapsible */}
                                    {!isCollapsed && (
                                        <div className="space-y-1 mt-1">
                                            {group.items.map((item) => {
                                                const Icon = item.icon;
                                                const active = activeSection === item.id;
                                                return (
                                                    <button
                                                        key={item.id}
                                                        onClick={() => setActiveSection(item.id)}
                                                        className={`
                                                            w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left transition-all
                                                            ${active ? 'bg-secondary text-white shadow-sm shadow-secondary/30' : 'text-gray-700 hover:bg-white hover:shadow-sm'}
                                                        `}
                                                    >
                                                        <span
                                                            className={`
                                                                w-8 h-8 rounded-lg flex items-center justify-center shrink-0 transition-colors
                                                                ${active ? 'bg-white/20 text-white' : 'bg-gray-100 text-gray-500'}
                                                            `}
                                                        >
                                                            <Icon className="w-4 h-4" />
                                                        </span>
                                                        <span className="flex-1 min-w-0">
                                                            <span className={`block text-sm font-medium truncate ${active ? 'text-white' : 'text-gray-800'}`}>{item.label}</span>
                                                            <span className={`block text-[10px] truncate ${active ? 'text-white/70' : 'text-gray-400'}`}>{item.description}</span>
                                                        </span>
                                                    </button>
                                                );
                                            })}
                                        </div>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </>
    );
};

export default HRMSettings;