import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Save, CheckSquare, Search } from 'lucide-react';
import { useBlogContext } from '../context/BlogContext';
import KeywordInput from '../components/Keywords/KeywordInput';
import KeywordsList from '../components/Keywords/KeywordsList';
import TopicSuggestions from '../components/Suggestions/TopicSuggestions';
import CompetitorInsights from '../components/Research/CompetitorInsights';
import KeywordTrends from '../components/Research/KeywordTrends';
import Button from '../components/UI/Button';
import '../styles/pages/topicSelection.css';

const TopicSelectionPage = () => {
  const navigate = useNavigate();
  const [showSuccessMsg, setShowSuccessMsg] = useState(false);
  
  const { 
    blogTopic, 
    targetAudience, 
    keywords,
    keywordResearchShown,
    competitorInsights,
    topicSuggestions,
    exampleTopics,
    setBlogTopic, 
    setTargetAudience,
    toggleKeywordResearch,
    saveTopic,
    generateBlogPlan
  } = useBlogContext();

  const handleSaveTopic = () => {
    if (saveTopic()) {
      setShowSuccessMsg(true);
      setTimeout(() => setShowSuccessMsg(false), 3000);
    } else {
      alert('Proszę wprowadzić temat bloga!');
    }
  };

  const handleGeneratePlan = () => {
    if (generateBlogPlan()) {
      navigate('/plan');
    } else {
      alert('Proszę wprowadzić temat bloga!');
    }
  };

  return (
    <div className="topic-selection-page">
      <h2 className="page-title">Wybór tematu bloga</h2>
      
      {showSuccessMsg && (
        <div className="success-message">
          Temat został zapisany!
        </div>
      )}
      
      <div className="form-group">
        <label htmlFor="blog-topic" className="form-label">
          Temat bloga
        </label>
        <input
          type="text"
          id="blog-topic"
          className="form-input"
          placeholder="Np. Jak Wybrać Wyróżniający Się Temat dla Twojego Bloga"
          value={blogTopic}
          onChange={(e) => setBlogTopic(e.target.value)}
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="target-audience" className="form-label">
          Grupa docelowa
        </label>
        <input
          type="text"
          id="target-audience"
          className="form-input"
          placeholder="Np. początkujący blogerzy, specjaliści marketingu"
          value={targetAudience}
          onChange={(e) => setTargetAudience(e.target.value)}
        />
      </div>
      
      <KeywordInput />
      
      {keywords.length > 0 && (
        <KeywordsList keywords={keywords} />
      )}
      
      <div className="form-group">
        <Button 
          icon={<Search size={18} />}
          onClick={toggleKeywordResearch}
          variant="secondary"
        >
          {keywordResearchShown ? 'Ukryj badanie' : 'Przeprowadź badanie'}
        </Button>
        
        {keywordResearchShown && (
          <div className="research-section">
            <CompetitorInsights insights={competitorInsights} />
            <KeywordTrends keywords={keywords} />
          </div>
        )}
      </div>
      
      <TopicSuggestions 
        suggestions={topicSuggestions.length > 0 ? topicSuggestions : exampleTopics} 
      />
      
      <div className="actions-group">
        <Button 
          icon={<Save size={18} />}
          onClick={handleSaveTopic}
          variant="success"
        >
          Zapisz temat
        </Button>
        
        <Button 
          icon={<CheckSquare size={18} />}
          onClick={handleGeneratePlan}
        >
          Generuj plan bloga
        </Button>
      </div>
    </div>
  );
};

export default TopicSelectionPage;