import React, { useState } from 'react';
import { Card } from '../components/UiKit';
import { QuestionInput } from '../components/ui/QuestionInput';
import { Question } from '../components/ui/Question';
import { FigmaQuestion } from '../components/figma/FigmaQuestion';
import { EmployeeQuestion } from '../employeeQuestions';

const QuestionTypesDemo: React.FC = () => {
    const [answers, setAnswers] = useState<Record<string, string>>({});

    const demoQuestions: EmployeeQuestion[] = [
        {
            id: 'text_demo',
            prompt: 'What is your full name?',
            category: 'personal',
            type: 'text',
            placeholder: 'Enter your full name',
            required: true,
        },
        {
            id: 'scale_demo',
            prompt: 'How satisfied are you with your role?',
            category: 'role',
            type: 'scale',
            scaleMin: 1,
            scaleMax: 10,
            scaleLabels: { min: 'Very dissatisfied', max: 'Very satisfied' },
            required: true,
        },
        {
            id: 'yesno_demo',
            prompt: 'Do you have regular one-on-ones with your manager?',
            category: 'collaboration',
            type: 'yesno',
            required: false,
        },
        {
            id: 'textarea_demo',
            prompt: 'Describe your main responsibilities',
            category: 'role',
            type: 'textarea',
            placeholder: 'List your key daily tasks and responsibilities...',
            required: true,
        },
        {
            id: 'select_demo',
            prompt: 'What is your department?',
            category: 'role',
            type: 'select',
            options: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'],
            required: false,
        }
    ];

    const [currentDemoQuestion, setCurrentDemoQuestion] = useState(0);

    const handleAnswerChange = (questionId: string, value: string) => {
        setAnswers(prev => ({ ...prev, [questionId]: value }));
    };

    return (
        <div className="min-h-screen bg-[--background-primary] py-8 px-4">
            <div className="max-w-6xl mx-auto">
                <div className="text-center mb-8">
                    <h1 className="text-3xl font-bold text-[--text-primary] mb-2">
                        Question Types Demo
                    </h1>
                    <p className="text-[--text-secondary]">
                        Showcase of different question input types for the employee questionnaire
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    {/* Traditional Question Layout */}
                    <div>
                        <h2 className="text-xl font-semibold text-[--text-primary] mb-4">
                            Traditional Layout
                        </h2>
                        <div className="space-y-6">
                            {demoQuestions.map((question, index) => (
                                <Card key={question.id} className="p-6">
                                    <Question
                                        label={`${index + 1}. ${question.prompt}`}
                                        required={question.required}
                                        description={`Type: ${question.type} | Category: ${question.category}`}
                                    >
                                        <QuestionInput
                                            question={question}
                                            value={answers[question.id] || ''}
                                            onChange={(value) => handleAnswerChange(question.id, value)}
                                        />
                                    </Question>
                                </Card>
                            ))}
                        </div>
                    </div>

                    {/* Figma Question Layout */}
                    <div>
                        <h2 className="text-xl font-semibold text-[--text-primary] mb-4">
                            Figma Design Layout
                        </h2>

                        <div className="mb-4">
                            <div className="flex gap-2 mb-4">
                                {demoQuestions.map((_, index) => (
                                    <button
                                        key={index}
                                        onClick={() => setCurrentDemoQuestion(index)}
                                        className={`px-3 py-1 rounded text-sm ${currentDemoQuestion === index
                                                ? 'bg-blue-500 text-white'
                                                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                                            }`}
                                    >
                                        Q{index + 1}
                                    </button>
                                ))}
                            </div>
                        </div>

                        <div className="flex justify-center">
                            <FigmaQuestion
                                questionNumber={`Q${currentDemoQuestion + 1}`}
                                title={demoQuestions[currentDemoQuestion].prompt}
                                description={
                                    demoQuestions[currentDemoQuestion].required
                                        ? 'Required'
                                        : 'Optional'
                                }
                                answer={answers[demoQuestions[currentDemoQuestion].id] || ''}
                                onAnswerChange={(value) =>
                                    handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
                                }
                                onBack={
                                    currentDemoQuestion > 0
                                        ? () => setCurrentDemoQuestion(prev => prev - 1)
                                        : undefined
                                }
                                onNext={
                                    currentDemoQuestion < demoQuestions.length - 1
                                        ? () => setCurrentDemoQuestion(prev => prev + 1)
                                        : undefined
                                }
                                nextLabel={
                                    currentDemoQuestion < demoQuestions.length - 1
                                        ? 'Next'
                                        : 'Finish'
                                }
                            />
                        </div>

                        {/* Alternative Input Below Figma Question */}
                        <div className="mt-6 max-w-2xl mx-auto">
                            <Card className="p-6">
                                <Question
                                    label={`Alternative Input for Q${currentDemoQuestion + 1}`}
                                    description={`Specialized ${demoQuestions[currentDemoQuestion].type} input`}
                                >
                                    <QuestionInput
                                        question={demoQuestions[currentDemoQuestion]}
                                        value={answers[demoQuestions[currentDemoQuestion].id] || ''}
                                        onChange={(value) =>
                                            handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
                                        }
                                    />
                                </Question>
                            </Card>
                        </div>
                    </div>
                </div>

                {/* Current Answers Display */}
                <div className="mt-8">
                    <Card className="p-6">
                        <h3 className="text-lg font-semibold text-[--text-primary] mb-4">
                            Current Answers
                        </h3>
                        <div className="space-y-2">
                            {demoQuestions.map((question) => (
                                <div key={question.id} className="grid grid-cols-1 md:grid-cols-3 gap-2 py-2 border-b border-[--border-color]">
                                    <div className="font-medium text-[--text-primary]">
                                        {question.prompt}
                                    </div>
                                    <div className="text-[--text-secondary] text-sm">
                                        {question.type}
                                    </div>
                                    <div className="text-[--text-primary]">
                                        {answers[question.id] || <span className="text-[--text-secondary] italic">No answer</span>}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </Card>
                </div>

                {/* Navigation Links */}
                <div className="mt-8 text-center">
                    <div className="space-x-4">
                        <a
                            href="#/employee-questionnaire"
                            className="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
                        >
                            Traditional Questionnaire
                        </a>
                        <a
                            href="#/employee-questionnaire-steps"
                            className="inline-block px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
                        >
                            Stepped Questionnaire
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default QuestionTypesDemo;