import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useOrg } from '../contexts/OrgContext';
import { EnhancedFigmaQuestion, FigmaQuestionCard, EnhancedFigmaInput } from '../components/figma/EnhancedFigmaQuestion';
import { FigmaInput, FigmaSelect } from '../components/figma/FigmaInput';
import { FigmaMultipleChoice } from '../components/figma/FigmaMultipleChoice';

interface OnboardingData {
    // Step 0: Company Details
    companyName: string;
    yourName: string;

    // Step 1: Company Size
    companySize: string;

    // Step 2: Mission
    mission: string;

    // Later steps
    industry: string;
    description: string;
    vision: string;
    values: string[];
    foundingYear: string;
    evolution: string;
    majorMilestones: string;
    advantages: string;
    vulnerabilities: string;
    competitors: string;
    marketPosition: string;
    currentChallenges: string[];
    shortTermGoals: string;
    longTermGoals: string;
    keyMetrics: string;
    cultureDescription: string;
    workEnvironment: string;
    leadershipStyle: string;
    communicationStyle: string;
    additionalContext: string;
}

const Onboarding: React.FC = () => {
    const { org, upsertOrg, generateCompanyWiki } = useOrg();
    const navigate = useNavigate();

    useEffect(() => {
        if (org?.onboardingCompleted) {
            navigate('/reports', { replace: true });
        }
    }, [org, navigate]);

    const [step, setStep] = useState(0);
    const [isGeneratingReport, setIsGeneratingReport] = useState(false);
    const [formData, setFormData] = useState<OnboardingData>({
        companyName: org?.name || '',
        yourName: '',
        companySize: '',
        mission: '',
        industry: '',
        description: '',
        vision: '',
        values: [],
        foundingYear: '',
        evolution: '',
        majorMilestones: '',
        advantages: '',
        vulnerabilities: '',
        competitors: '',
        marketPosition: '',
        currentChallenges: [],
        shortTermGoals: '',
        longTermGoals: '',
        keyMetrics: '',
        cultureDescription: '',
        workEnvironment: '',
        leadershipStyle: '',
        communicationStyle: '',
        additionalContext: ''
    });

    const steps = [
        {
            title: 'Company Details',
            description: 'Basic information about your company'
        },
        {
            title: 'Company Size',
            description: 'How many people work at your company'
        },
        {
            title: 'Mission Statement',
            description: 'What is the mission of your company'
        },
        {
            title: 'Vision & Values',
            description: 'Your company\'s vision and core values'
        },
        {
            title: 'Company History',
            description: 'How your company has evolved'
        },
        {
            title: 'Market Position',
            description: 'Your competitive landscape'
        },
        {
            title: 'Goals & Challenges',
            description: 'Current objectives and obstacles'
        },
        {
            title: 'Team & Culture',
            description: 'Your work environment and culture'
        }
    ];

    const handleNext = async () => {
        if (isGeneratingReport) return;

        if (step < steps.length - 1) {
            setStep(prev => prev + 1);
            return;
        }

        // Final step: persist org & generate report
        setIsGeneratingReport(true);
        try {
            const newOrgData = {
                name: formData.companyName,
                industry: formData.industry,
                size: formData.companySize,
                description: formData.description,
                mission: formData.mission,
                vision: formData.vision,
                values: formData.values.join(','),
                foundingYear: formData.foundingYear,
                evolution: formData.evolution,
                majorMilestones: formData.majorMilestones,
                advantages: formData.advantages,
                vulnerabilities: formData.vulnerabilities,
                competitors: formData.competitors,
                marketPosition: formData.marketPosition,
                currentChallenges: formData.currentChallenges.join(','),
                shortTermGoals: formData.shortTermGoals,
                longTermGoals: formData.longTermGoals,
                keyMetrics: formData.keyMetrics,
                cultureDescription: formData.cultureDescription,
                workEnvironment: formData.workEnvironment,
                leadershipStyle: formData.leadershipStyle,
                communicationStyle: formData.communicationStyle,
                additionalContext: formData.additionalContext,
                onboardingCompleted: true
            };

            await upsertOrg(newOrgData);
            await generateCompanyWiki({ ...newOrgData, orgId: org!.orgId });

            setTimeout(() => {
                navigate('/reports', { replace: true });
            }, 100);
        } catch (error) {
            console.error('Error completing onboarding:', error);
            const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
            alert(`There was an error completing the setup: ${errorMessage}. Please check the console for more details and try again.`);
        } finally {
            setIsGeneratingReport(false);
        }
    };

    const handleBack = () => {
        if (step > 0) setStep(step - 1);
    };

    const updateFormData = (field: keyof OnboardingData, value: string) => {
        setFormData(prev => ({ ...prev, [field]: value }));
    };

    const canProceed = () => {
        switch (step) {
            case 0: // Company Details
                return formData.companyName.trim().length > 0 && formData.yourName.trim().length > 0;
            case 1: // Company Size
                return formData.companySize.length > 0;
            case 2: // Mission
                return formData.mission.trim().length > 0;
            case 3: // Vision & Values
                return formData.vision.trim().length > 0;
            case 4: // History
                return formData.evolution.trim().length > 0;
            case 5: // Market Position
                return formData.advantages.trim().length > 0;
            case 6: // Goals
                return formData.shortTermGoals.trim().length > 0;
            case 7: // Culture
                return formData.cultureDescription.trim().length > 0;
            default:
                return false;
        }
    };

    const renderStepContent = () => {
        switch (step) {
            case 0: // Company Details
                return (
                    <div className="self-stretch flex flex-col justify-start items-start gap-6">
                        <FigmaInput
                            label="Your Name"
                            placeholder="John Doe"
                            value={formData.yourName}
                            onChange={(e) => updateFormData('yourName', e.target.value)}
                            required
                        />
                        <FigmaInput
                            label="Company Name"
                            placeholder="Doe Enterprises"
                            value={formData.companyName}
                            onChange={(e) => updateFormData('companyName', e.target.value)}
                            required
                        />
                    </div>
                );

            case 1: // Company Size
                return (
                    <FigmaMultipleChoice
                        options={['1-10', '10-25', '25-50', '50-100', '100+']}
                        selectedValue={formData.companySize}
                        onSelect={(value) => updateFormData('companySize', value)}
                    />
                );

            case 2: // Mission
                return (
                    <FigmaQuestionCard
                        question="What is the mission of your company?"
                        description="Description about the question"
                    >
                        <EnhancedFigmaInput
                            placeholder="Type your answer...."
                            value={formData.mission}
                            onChange={(value) => updateFormData('mission', value)}
                            multiline
                            rows={6}
                        />
                    </FigmaQuestionCard>
                );

            case 3: // Vision & Values
                return (
                    <div className="space-y-6">
                        <FigmaQuestionCard
                            question="What is your company's vision?"
                            description="Where do you see your company in the future?"
                        >
                            <EnhancedFigmaInput
                                placeholder="Type your answer...."
                                value={formData.vision}
                                onChange={(value) => updateFormData('vision', value)}
                                multiline
                                rows={4}
                            />
                        </FigmaQuestionCard>
                    </div>
                );

            case 4: // History
                return (
                    <FigmaQuestionCard
                        question="How has your company evolved?"
                        description="Tell us about your company's journey and evolution"
                    >
                        <EnhancedFigmaInput
                            placeholder="Type your answer...."
                            value={formData.evolution}
                            onChange={(value) => updateFormData('evolution', value)}
                            multiline
                            rows={6}
                        />
                    </FigmaQuestionCard>
                );

            case 5: // Market Position
                return (
                    <FigmaQuestionCard
                        question="What are your competitive advantages?"
                        description="What gives your company a competitive edge?"
                    >
                        <EnhancedFigmaInput
                            placeholder="Type your answer...."
                            value={formData.advantages}
                            onChange={(value) => updateFormData('advantages', value)}
                            multiline
                            rows={6}
                        />
                    </FigmaQuestionCard>
                );

            case 6: // Goals
                return (
                    <FigmaQuestionCard
                        question="What are your short-term goals?"
                        description="What are your priorities for the next 6-12 months?"
                    >
                        <EnhancedFigmaInput
                            placeholder="Type your answer...."
                            value={formData.shortTermGoals}
                            onChange={(value) => updateFormData('shortTermGoals', value)}
                            multiline
                            rows={6}
                        />
                    </FigmaQuestionCard>
                );

            case 7: // Culture
                return (
                    <FigmaQuestionCard
                        question="Describe your company culture"
                        description="What's it like to work at your company?"
                    >
                        <EnhancedFigmaInput
                            placeholder="Type your answer...."
                            value={formData.cultureDescription}
                            onChange={(value) => updateFormData('cultureDescription', value)}
                            multiline
                            rows={6}
                        />
                    </FigmaQuestionCard>
                );

            default:
                return null;
        }
    };

    // Question text for each step
    const getQuestionText = () => {
        switch (step) {
            case 0: return 'Company Details';
            case 1: return `How many people work at ${formData.companyName || '[Company Name]'}?`;
            case 2: return 'What is the mission of your company?';
            case 3: return 'What is your company\'s vision?';
            case 4: return 'How has your company evolved?';
            case 5: return 'What are your competitive advantages?';
            case 6: return 'What are your short-term goals?';
            case 7: return 'Describe your company culture';
            default: return 'Onboarding';
        }
    };

    return (
        <div className="min-h-screen bg-[--Neutrals-NeutralSlate0] flex items-center justify-center">
            <EnhancedFigmaQuestion
                question={getQuestionText()}
                currentStep={step + 1}
                totalSteps={steps.length}
                stepTitle={steps[step].title}
                onBack={handleBack}
                onNext={handleNext}
                nextDisabled={!canProceed() || isGeneratingReport}
                backDisabled={step === 0}
                showBackButton={step > 0}
                nextText={
                    isGeneratingReport
                        ? 'Generating...'
                        : step === steps.length - 1
                            ? 'Complete Setup'
                            : 'Next'
                }
            >
                {renderStepContent()}
            </EnhancedFigmaQuestion>
        </div>
    );
};

export default Onboarding;