import React from 'react';
import { EmployeeQuestion } from '../../employeeQuestions';
import { QuestionInput } from '../ui/QuestionInput';

interface EnhancedFigmaQuestionProps {
    questionNumber?: string | number;
    question: EmployeeQuestion;
    answer?: string;
    onAnswerChange?: (value: string) => void;
    onBack?: () => void;
    onNext?: () => void;
    showNavigation?: boolean;
    nextLabel?: string;
    backLabel?: string;
    className?: string;
}

export const EnhancedFigmaQuestion: React.FC<EnhancedFigmaQuestionProps> = ({
    questionNumber = 'Q',
    question,
    answer = '',
    onAnswerChange,
    onBack,
    onNext,
    showNavigation = true,
    nextLabel = 'Next',
    backLabel = 'Back',
    className = ''
}) => {
    return (
        <div className={`w-full max-w-[600px] px-5 pt-5 pb-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 inline-flex flex-col justify-end items-end gap-4 ${className}`}>
            {/* Question Header */}
            <div className="self-stretch inline-flex justify-start items-start gap-3">
                <div className="justify-start text-gray-400 text-xl font-medium font-['Inter'] leading-loose">
                    {questionNumber}
                </div>
                <div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
                    <div className="self-stretch justify-start text-[--text-primary] text-xl font-semibold font-['Inter'] leading-loose">
                        {question.prompt}
                    </div>
                    <div className="self-stretch justify-start text-[--text-secondary] text-sm font-normal font-['Inter'] leading-tight">
                        {question.required ? 'Required' : 'Optional'} • {question.category}
                        {question.type && ` • ${question.type}`}
                    </div>
                </div>
            </div>

            {/* Separator */}
            <div className="self-stretch h-px bg-gray-200 dark:bg-gray-700"></div>

            {/* Answer Section */}
            <div className="self-stretch inline-flex justify-start items-start gap-3">
                <div className="justify-start text-gray-400 text-xl font-medium font-['Inter'] leading-loose">A</div>
                <div className="flex-1">
                    <QuestionInput
                        question={question}
                        value={answer}
                        onChange={onAnswerChange || (() => { })}
                        className="border-0 bg-transparent focus:ring-0 p-0"
                    />
                </div>
            </div>

            {/* Navigation */}
            {showNavigation && (
                <div className="inline-flex justify-start items-center gap-3">
                    {onBack && (
                        <button
                            onClick={onBack}
                            className="px-4 py-3.5 bg-gray-100 dark:bg-gray-700 rounded-full flex justify-center items-center gap-1 overflow-hidden hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                        >
                            <div className="relative">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13 15L8 10L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                            <div className="px-1 flex justify-center items-center">
                                <div className="justify-center text-[--text-primary] text-sm font-medium font-['Inter'] leading-tight">
                                    {backLabel}
                                </div>
                            </div>
                        </button>
                    )}

                    {onNext && (
                        <button
                            onClick={onNext}
                            className="px-4 py-3.5 bg-blue-500 rounded-full border-2 border-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-blue-600 transition-colors"
                        >
                            <div className="px-1 flex justify-center items-center">
                                <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">
                                    {nextLabel}
                                </div>
                            </div>
                            <div className="relative">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 15L13 10L8 5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                        </button>
                    )}
                </div>
            )}
        </div>
    );
};

export default EnhancedFigmaQuestion;