import React from 'react';
import { WizardState, Step } from '../types';
import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';

interface StepContextProps {
  data: WizardState;
  updateData: (updates: Partial<WizardState>) => void;
  nextStep: () => void;
}

const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep }) => {
  
  const handleContextSelect = (context: WizardState['context']) => {
    // If selecting Relacja, clear storyStyle and move on
    if (context === 'relacja') {
        updateData({ context, storyStyle: null });
        setTimeout(nextStep, 150);
    } else {
        // If selecting Opowiesc, just update context and stay for sub-step
        updateData({ context, storyStyle: null }); // Reset style if switching back to opowiesc
    }
  };

  const handleStyleSelect = (storyStyle: WizardState['storyStyle']) => {
      updateData({ storyStyle });
      setTimeout(nextStep, 150);
  };

  return (
    <div className="space-y-8 animate-fade-in">
      <div>
        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Kontekst</h2>
        <p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
        
        {/* Main Context Selection */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          <button
            onClick={() => handleContextSelect('relacja')}
            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
              data.context === 'relacja'
                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
            }`}
          >
            <Camera size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'relacja' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
            <span className="text-xl font-bold tracking-tight">Relacja (Vlog)</span>
            <span className="text-sm opacity-75 mt-2 font-medium">Tu i teraz, emocje, akcja.</span>
          </button>

          <button
            onClick={() => handleContextSelect('opowiesc')}
            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
              data.context === 'opowiesc'
                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
            }`}
          >
            <BookOpen size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'opowiesc' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
            <span className="text-xl font-bold tracking-tight">Opowieść</span>
            <span className="text-sm opacity-75 mt-2 font-medium">Wspomnienia, refleksja, morał.</span>
          </button>
        </div>

        {/* Sub-step for Opowiesc: Story Style */}
        {data.context === 'opowiesc' && (
            <div className="animate-fade-in border-t border-gray-100 pt-8">
                <h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Styl Opowieści</h3>
                <p className="text-gray-500 mb-6 text-sm">Nadaj historii unikalny klimat.</p>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <button
                        onClick={() => handleStyleSelect('noir')}
                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
                        data.storyStyle === 'noir'
                            ? 'border-gray-800 bg-gray-900 text-white shadow-lg'
                            : 'border-gray-200 hover:border-gray-800 hover:shadow-md text-gray-600 bg-white'
                        }`}
                    >
                        <Ghost size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'noir' ? 'text-white' : 'text-gray-400 group-hover:text-gray-900'}`} />
                        <div>
                            <span className="text-lg font-bold tracking-tight block">Kryminał NOIR</span>
                            <span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>Mrok, deszcz, cyniczny detektyw.</span>
                        </div>
                    </button>

                    <button
                        onClick={() => handleStyleSelect('fantasy')}
                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
                        data.storyStyle === 'fantasy'
                            ? 'border-purple-600 bg-purple-50 text-purple-700'
                            : 'border-gray-200 hover:border-purple-600 hover:shadow-md text-gray-600 bg-white'
                        }`}
                    >
                        <Sword size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'fantasy' ? 'text-purple-600' : 'text-gray-400 group-hover:text-purple-600'}`} />
                        <div>
                            <span className="text-lg font-bold tracking-tight block">Przygoda Fantasy</span>
                            <span className="text-xs text-gray-500 block mt-1">Epicka podróż, magia, artefakty.</span>
                        </div>
                    </button>
                </div>
            </div>
        )}

      </div>
    </div>
  );
};

export default StepContext;