import React from 'react';

interface CompanyWikiEmptyStateProps {
    progress?: number;
    onCompleteOnboarding?: () => void;
    onInviteEmployees?: () => void;
    onCopyLink?: () => void;
}

const sections = [
    "Company Overview & Vision",
    "Leadership & Organizational Structure",
    "Operations & Execution",
    "Culture & Team Health",
    "Sales, Marketing & Growth",
    "Financial Health & Metrics",
    "Innovation & Product/Service Strategy",
    "Personal Leadership & Risk"
];

export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
    progress = 60,
    onCompleteOnboarding,
    onInviteEmployees,
    onCopyLink
}) => {
    return (
        <div className="flex-1 self-stretch inline-flex justify-start items-center">
            {/* Table of Contents */}
            <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
                <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
                    <div className="flex-1 justify-start text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
                </div>
                <div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
                    {sections.map((section, index) => {
                        const sectionNumber = index + 1;
                        const isActive = sectionNumber === 1; // First section is always active in empty state

                        return (
                            <div
                                key={index}
                                className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-Neutrals-NeutralSlate800 shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700'}`}
                            >
                                <div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
                                    <div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
                                        {sectionNumber}
                                    </div>
                                </div>
                                <div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
                                    {section}
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
                <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
                    <div className="flex-1 justify-start text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-xl font-medium font-['Neue_Montreal'] leading-normal">
                        Company Overview & Vision
                    </div>
                </div>
                <div className="self-stretch flex-1 p-5 flex justify-center items-center">
                    <div className="w-[440px] flex flex-col justify-center items-center gap-8">
                        {/* Progress Illustration Placeholder */}
                        <div className="w-[280px] h-[200px] bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-2xl flex items-center justify-center">
                            <div className="text-center">
                                <div className="w-16 h-16 mx-auto mb-4 bg-Brand-Orange rounded-full flex items-center justify-center">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="text-white">
                                        <path d="M16 8v8l4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                        <circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="2" />
                                    </svg>
                                </div>
                                <div className="text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-sm">Progress Illustration</div>
                            </div>
                        </div>

                        {/* Progress Content */}
                        <div className="self-stretch flex flex-col justify-center items-center gap-4 text-center">
                            <div className="text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-2xl font-semibold font-['Neue_Montreal'] leading-8">
                                You're {progress}% Done
                            </div>
                            <div className="self-stretch text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-base font-normal font-['Inter'] leading-normal">
                                Complete your company onboarding to unlock your company wiki and comprehensive insights about your organization.
                            </div>

                            {/* Progress Bar */}
                            <div className="self-stretch h-2 bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-full overflow-hidden">
                                <div
                                    className="h-full bg-Brand-Orange rounded-full transition-all duration-300"
                                    style={{ width: `${progress}%` }}
                                />
                            </div>

                            {/* Action Button */}
                            <button
                                onClick={onCompleteOnboarding}
                                className="w-full px-6 py-3 bg-Brand-Orange hover:bg-orange-600 text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
                            >
                                Complete Onboarding
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};