import React, { useState } from 'react';
import type { CaseData } from '../types';
import { StepIndicator } from './StepIndicator';

interface CaseIntakeFormProps {
    onSubmit: (data: CaseData) => void;
}

const steps = ["About You", "Medical", "Work History", "Limitations"];

export const CaseIntakeForm: React.FC<CaseIntakeFormProps> = ({ onSubmit }) => {
    const [currentStep, setCurrentStep] = useState(0);
    const [formData, setFormData] = useState<CaseData>({
        age: '',
        medicalConditions: '',
        workHistory: '',
        limitations: '',
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const nextStep = () => {
        if (currentStep < steps.length - 1) {
            setCurrentStep(currentStep + 1);
        }
    };

    const prevStep = () => {
        if (currentStep > 0) {
            setCurrentStep(currentStep - 1);
        }
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit(formData);
    };
    
    const isNextDisabled = () => {
        switch(currentStep) {
            case 0: return !formData.age;
            case 1: return !formData.medicalConditions;
            case 2: return !formData.workHistory;
            case 3: return !formData.limitations;
            default: return true;
        }
    };

    return (
        <div className="bg-gray-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-2xl">
            <StepIndicator steps={steps} currentStep={currentStep} />
            <form onSubmit={handleSubmit} className="mt-8 space-y-8">
                {currentStep === 0 && (
                    <div className="animate-fade-in">
                        <h2 className="text-2xl font-bold text-white">About You</h2>
                        <p className="text-gray-400 mt-1">This information helps the AI tailor recommendations.</p>
                        <div className="mt-6">
                            <label htmlFor="age" className="block text-sm font-medium text-gray-300">Your Age</label>
                            <input
                                type="number"
                                name="age"
                                id="age"
                                value={formData.age}
                                onChange={handleChange}
                                placeholder="e.g., 54"
                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
                                required
                            />
                        </div>
                    </div>
                )}
                {currentStep === 1 && (
                     <div className="animate-fade-in">
                        <h2 className="text-2xl font-bold text-white">Your Medical Conditions</h2>
                        <p className="text-gray-400 mt-1">List all diagnosed conditions that affect your ability to work.</p>
                        <div className="mt-6">
                            <label htmlFor="medicalConditions" className="block text-sm font-medium text-gray-300">Medical Conditions</label>
                            <textarea
                                name="medicalConditions"
                                id="medicalConditions"
                                value={formData.medicalConditions}
                                onChange={handleChange}
                                rows={5}
                                placeholder="e.g., Degenerative disc disease, severe anxiety, diabetic neuropathy"
                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
                                required
                            />
                        </div>
                    </div>
                )}
                {currentStep === 2 && (
                     <div className="animate-fade-in">
                        <h2 className="text-2xl font-bold text-white">Work History</h2>
                        <p className="text-gray-400 mt-1">Briefly describe your jobs over the last 15 years.</p>
                        <div className="mt-6">
                            <label htmlFor="workHistory" className="block text-sm font-medium text-gray-300">Work History</label>
                            <textarea
                                name="workHistory"
                                id="workHistory"
                                value={formData.workHistory}
                                onChange={handleChange}
                                rows={5}
                                placeholder="e.g., Construction worker (10 years), Warehouse manager (5 years). Both jobs required heavy lifting and long periods of standing."
                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
                                required
                            />
                        </div>
                    </div>
                )}
                {currentStep === 3 && (
                     <div className="animate-fade-in">
                        <h2 className="text-2xl font-bold text-white">Daily Limitations</h2>
                        <p className="text-gray-400 mt-1">Describe how your conditions limit your daily activities and ability to work.</p>
                        <div className="mt-6">
                            <label htmlFor="limitations" className="block text-sm font-medium text-gray-300">Daily Limitations</label>
                            <textarea
                                name="limitations"
                                id="limitations"
                                value={formData.limitations}
                                onChange={handleChange}
                                rows={5}
                                placeholder="e.g., Cannot sit for more than 20 minutes due to back pain. Trouble concentrating due to anxiety. Difficulty lifting anything over 10 pounds."
                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
                                required
                            />
                        </div>
                    </div>
                )}

                <div className="flex justify-between pt-6 border-t border-white/10">
                    <button
                        type="button"
                        onClick={prevStep}
                        className={`inline-flex items-center px-6 py-3 border border-gray-600 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${currentStep === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
                        disabled={currentStep === 0}
                    >
                        Back
                    </button>
                    {currentStep < steps.length - 1 ? (
                        <button
                            type="button"
                            onClick={nextStep}
                            className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
                             disabled={isNextDisabled()}
                        >
                            Next
                        </button>
                    ) : (
                        <button
                            type="submit"
                            className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-secondary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-secondary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
                            disabled={isNextDisabled()}
                        >
                            Generate Plan
                        </button>
                    )}
                </div>
            </form>
        </div>
    );
};