import React from 'react';
import { WizardState, Tone, Goal } from '../types';
import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';

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

const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep }) => {

  const handleToneSelect = (tone: Tone) => {
    updateData({ tone });
  };

  const handleGoalSelect = (goal: Goal) => {
    updateData({ goal });
  };

  const isComplete = data.tone && data.goal;

  const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
    { id: 'funny', label: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
    { id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
    { id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
  ];

  const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
    { id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
    { id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
    { id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', icon: <ShoppingBag size={32} /> },
  ];

  return (
    <div className="space-y-12 animate-fade-in">
      
      {/* Sekcja 1: TON */}
      <div>
        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Ton (Vibe)</h2>
        <p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</p>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {tones.map((t) => (
            <button
              key={t.id}
              onClick={() => handleToneSelect(t.id)}
              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
                data.tone === t.id
                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
              }`}
            >
              <div className={`mb-4 transition-colors ${data.tone === t.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
                {t.icon}
              </div>
              <span className="text-xl font-bold tracking-tight mb-2">{t.label}</span>
              <span className="text-sm opacity-75 font-medium">{t.desc}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Sekcja 2: CEL */}
      <div>
        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Cel</h2>
        <p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</p>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {goals.map((g) => (
            <button
              key={g.id}
              onClick={() => handleGoalSelect(g.id)}
              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
                data.goal === g.id
                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
              }`}
            >
              <div className={`mb-4 transition-colors ${data.goal === g.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
                {g.icon}
              </div>
              <span className="text-xl font-bold tracking-tight mb-2">{g.label}</span>
              <span className="text-sm opacity-75 font-medium">{g.desc}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Next Button */}
      <div className="flex justify-end pt-4">
        <button
          onClick={nextStep}
          disabled={!isComplete}
          className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
        >
          Przejdź do szczegółów
        </button>
      </div>

    </div>
  );
};

export default StepToneGoal;