import React from 'react';

interface QAItem {
    question: string;
    answer: string;
}

interface CompanyWikiCompletedStateProps {
    qaItems?: QAItem[];
    activeSection?: number;
    onSectionClick?: (section: number) => void;
    onInviteEmployees?: () => void;
    onCopyLink?: () => void;
}

const defaultQAItems: QAItem[] = [
    {
        question: "What is the mission of your company?",
        answer: "To empower small businesses with AI-driven automation tools that increase efficiency and reduce operational overhead."
    },
    {
        question: "How has your mission evolved in the last 1–3 years?",
        answer: "We shifted from general SaaS tools to vertical-specific solutions, with deeper integrations and onboarding support."
    },
    {
        question: "What is your 5-year vision for the company?",
        answer: "To become the leading AI operations platform for SMBs in North America, serving over 100,000 customers."
    },
    {
        question: "What are your company's top 3 strategic advantages?",
        answer: "Fast product iteration enabled by in-house AI capabilities\nDeep customer understanding from vertical specialization\nHigh customer retention due to integrated onboarding"
    },
    {
        question: "What are your biggest vulnerabilities or threats?",
        answer: "Dependence on a single marketing channel, weak middle management, and rising customer acquisition costs."
    }
];

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 CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps> = ({
    qaItems = defaultQAItems,
    activeSection = 1,
    onSectionClick,
    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-NeutralSlate950] 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 === activeSection;

                        return (
                            <div
                                key={index}
                                onClick={() => onSectionClick?.(sectionNumber)}
                                className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate700] ${isActive ? 'bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate700] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : ''}`}
                            >
                                <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-[--Neutrals-NeutralSlate100] 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-NeutralSlate0]'}`}>
                                        {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-NeutralSlate100]'}`}>
                                    {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-NeutralSlate800] text-xl font-medium font-['Neue_Montreal'] leading-normal">
                        {sections[activeSection - 1]}
                    </div>
                </div>
                <div className="self-stretch px-5 flex flex-col justify-start items-start gap-4">
                    {qaItems.map((item, index) => (
                        <div key={index} className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
                            <div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
                                <div className="flex-1 flex justify-center items-center gap-3">
                                    <div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
                                    <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] dark:text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">
                                        {item.question}
                                    </div>
                                </div>
                            </div>
                            <div className="self-stretch px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-[10px] inline-flex justify-between items-center">
                                <div className="flex-1 flex justify-start items-start gap-3">
                                    <div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
                                    <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal whitespace-pre-line">
                                        {item.answer}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}

                    {/* Additional Questions */}
                    <div className="self-stretch pl-3 pr-6 pt-3 pb-6 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
                        <div className="self-stretch inline-flex justify-center items-center gap-3">
                            <div className="flex-1 justify-start text-Text-Gray-600 text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
                        </div>
                        <div className="self-stretch px-3 py-2 bg-Light-Grays-l-gray08 rounded-[10px] outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 inline-flex justify-between items-center">
                            <div className="flex-1 flex justify-start items-start gap-3">
                                <div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
                                    Our mission is to not only create value but also to foster a collaborative environment where innovation thrives. We aim to empower our team members to contribute their unique skills and perspectives, ensuring that every project we undertake is a reflection of our collective creativity and dedication. By prioritizing both individual growth and teamwork, we strive to build a company culture that values excellence and continuous improvement. Together, we can achieve remarkable results that benefit not just our organization, but also our clients and the community at...
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
                        <div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
                            <div className="flex-1 flex justify-center items-center gap-3">
                                <div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
                                <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
                            </div>
                        </div>
                        <div className="self-stretch px-3 py-2 bg-Light-Grays-l-gray08 rounded-[10px] inline-flex justify-between items-center">
                            <div className="flex-1 flex justify-start items-start gap-3">
                                <div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
                                <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">The mission is to create value as well as working</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};