import React, { useState, useEffect } from 'react';
import { Save, Search, CheckSquare, PlusCircle, Trash2, Edit3 } from 'lucide-react';

const BlogApp = () => {
  const [activeTab, setActiveTab] = useState('temat');
  const [blogTopic, setBlogTopic] = useState('');
  const [targetAudience, setTargetAudience] = useState('');
  const [keywords, setKeywords] = useState([]);
  const [currentKeyword, setCurrentKeyword] = useState('');
  const [blogPlan, setBlogPlan] = useState('');
  const [blogContent, setBlogContent] = useState('');
  const [savedTopics, setSavedTopics] = useState([]);
  const [topicSuggestions, setTopicSuggestions] = useState([]);
  const [keywordResearchShown, setKeywordResearchShown] = useState(false);
  const [competitorInsights, setCompetitorInsights] = useState([]);
  
  // Przykładowe sugestie tematów
  const exampleTopics = [
    "Jak znaleźć niszę blogową z niewielką konkurencją",
    "7 strategii promocji bloga w mediach społecznościowych",
    "Jak przekształcić swoją pasję w dochodowego bloga",
    "Najlepsze darmowe narzędzia SEO dla blogerów",
    "Jak budować lojalną społeczność wokół swojego bloga"
  ];
  
  // Przykładowe insighty o konkurencji
  const exampleCompetitorInsights = [
    "Konkurencja rzadko porusza tematy praktycznych kroków wdrożeniowych",
    "Większość blogów w Twojej niszy nie zawiera case studies",
    "Treści konkurencji często brakuje aktualnych danych statystycznych",
    "Niewiele blogów oferuje materiały do pobrania",
    "Konkurencja nie tworzy multimediów (wideo, infografiki)"
  ];

  // Generowanie sugestii tematów na podstawie słów kluczowych
  useEffect(() => {
    if (keywords.length > 0 && targetAudience) {
      // Symulacja generowania sugestii na podstawie słów kluczowych i grupy docelowej
      setTopicSuggestions([
        `Jak ${keywords[0]} może pomóc ${targetAudience} osiągnąć lepsze wyniki`,
        `Przewodnik po ${keywords[0]} dla początkujących ${targetAudience}`,
        `${keywords.length > 1 ? keywords[1] : keywords[0]} vs. tradycyjne metody: Co wybierają ${targetAudience}?`,
        `5 sposobów wykorzystania ${keywords[0]} w codziennej pracy ${targetAudience}`,
        `Jak ${targetAudience} może zaoszczędzić czas dzięki ${keywords[0]}`
      ]);
    }
  }, [keywords, targetAudience]);

  // Dodawanie słowa kluczowego
  const addKeyword = () => {
    if (currentKeyword && !keywords.includes(currentKeyword)) {
      setKeywords([...keywords, currentKeyword]);
      setCurrentKeyword('');
    }
  };

  // Usuwanie słowa kluczowego
  const removeKeyword = (keywordToRemove) => {
    setKeywords(keywords.filter(keyword => keyword !== keywordToRemove));
  };

  // Zapisywanie tematu
  const saveTopic = () => {
    if (blogTopic) {
      const updatedTopics = [...savedTopics, {
        topic: blogTopic,
        audience: targetAudience,
        keywords: [...keywords],
        date: new Date().toLocaleDateString()
      }];
      setSavedTopics(updatedTopics);
      
      // Zapisz w localStorage
      try {
        localStorage.setItem('savedTopics', JSON.stringify(updatedTopics));
      } catch (error) {
        console.error("Nie można zapisać do localStorage:", error);
      }
      
      // Pokaż komunikat o zapisaniu
      alert("Temat został zapisany!");
    }
  };

  // Ładowanie zapisanych tematów
  useEffect(() => {
    try {
      const savedTopicsFromStorage = localStorage.getItem('savedTopics');
      if (savedTopicsFromStorage) {
        setSavedTopics(JSON.parse(savedTopicsFromStorage));
      }
    } catch (error) {
      console.error("Nie można odczytać z localStorage:", error);
    }
  }, []);

  // Generowanie planu bloga
  const generateBlogPlan = () => {
    if (blogTopic) {
      setBlogPlan(`
# Plan dla tematu: ${blogTopic}

## 1. Wprowadzenie
- Zarysowanie problemu, który rozwiązuje artykuł
- Korzyści dla czytelnika z przeczytania artykułu
- Krótkie przedstawienie zawartości

## 2. Kontekst i znaczenie tematu
- Dlaczego ten temat jest ważny
- Kto może skorzystać z tych informacji
- Aktualne trendy związane z tematem

## 3. Główne punkty (3-5 sekcji)
- Punkt 1: Wyzwanie/problem
- Punkt 2: Metody/rozwiązania
- Punkt 3: Wdrożenie
- Punkt 4: Przykłady/case studies
- Punkt 5: Wskazówki eksperckie

## 4. Praktyczne zastosowania
- Konkretne kroki do wdrożenia
- Narzędzia pomocne w implementacji
- Potencjalne przeszkody i jak je pokonać

## 5. Podsumowanie
- Streszczenie kluczowych punktów
- Call to action
- Zachęta do dyskusji w komentarzach

## Słowa kluczowe do uwzględnienia:
${keywords.join(', ')}

## Docelowi odbiorcy:
${targetAudience}
      `);
      
      setActiveTab('plan');
    } else {
      alert("Najpierw wprowadź temat bloga!");
    }
  };

  // Generowanie treści bloga
  const generateBlogContent = () => {
    if (blogTopic && blogPlan) {
      setBlogContent(`
# ${blogTopic}

## Wprowadzenie

W dzisiejszym dynamicznym świecie blogosfery, wybór odpowiedniego tematu może zdecydować o sukcesie lub porażce Twojego bloga. Dla ${targetAudience}, znalezienie tematów, które rezonują z odbiorcami i jednocześnie wyróżniają się na tle konkurencji, stanowi prawdziwe wyzwanie. W tym artykule przyjrzymy się sprawdzonym metodom odkrywania angażujących tematów, które przyciągną uwagę Twoich czytelników i wzmocnią Twoją pozycję w branży.

## Dlaczego wybór tematu ma kluczowe znaczenie?

Wybór odpowiedniego tematu to fundament skutecznego blogowania. Dobrze dobrany temat:
- Przyciąga dokładnie tę grupę odbiorców, którą chcesz zainteresować
- Zwiększa szanse na wyższe pozycje w wynikach wyszukiwania
- Buduje Twoją pozycję jako eksperta w danej dziedzinie
- Naturalnie generuje zaangażowanie czytelników

Według najnowszych badań, blogi z precyzyjnie określoną tematyką mają o 73% wyższy współczynnik konwersji niż te o ogólnej tematyce. To pokazuje, jak istotne jest strategiczne podejście do wyboru tematu.

## Skuteczne metody odkrywania wyróżniających się tematów

### 1. Badanie słów kluczowych jako podstawa

Rozpocznij od zbadania, czego Twoi potencjalni czytelnicy szukają w internecie. Narzędzia takie jak Keywordtool.io, Ubersuggest, Semrush czy Ahrefs pozwalają odkryć nie tylko popularne frazy w Twojej niszy, ale również tzw. "long-tail keywords" - dłuższe, bardziej specyficzne frazy, które mają mniejszą konkurencję.

**Wskazówka ekspercka:** Szukaj słów kluczowych z miesięczną liczbą wyszukiwań między 100 a 1000 - to często idealna nisza z wystarczającym zainteresowaniem, ale umiarkowaną konkurencją.

### 2. Analiza aktualnych trendów branżowych

${keywords[0] ? `Szczególnie w tematach związanych z "${keywords[0]}"` : 'W każdej branży'}, trendy mogą szybko się zmieniać. Monitoruj:
- Popularne hashtagi na Twitterze i LinkedIn
- Gorące tematy na forach branżowych
- Nagłówki w specjalistycznych newsletterach
- Tematy poruszane na konferencjach branżowych

### 3. Strategiczna analiza konkurencji

Nie chodzi o kopiowanie tego, co robią inni, ale o znalezienie luk tematycznych, które możesz wypełnić. Przeanalizuj 5-10 najpopularniejszych blogów w Twojej niszy i zadaj sobie pytania:
- Jakich tematów unikają?
- Gdzie ich treści są powierzchowne?
- Jakie pytania pozostawiają bez odpowiedzi?

### 4. Inspiracja z własnych doświadczeń

Twoje unikalne doświadczenia są skarbnicą tematów blogowych. Zastanów się:
- Jakie wyzwania pokonałeś w swojej branży?
- Jakie nieoczywiste rozwiązania znalazłeś dla typowych problemów?
- Jakie błędy popełniłeś, których inni mogliby uniknąć?

### 5. Wsłuchiwanie się w głos społeczności

Platformy takie jak Reddit, Quora czy grupy na Facebooku to kopalnie pomysłów na tematy. Szukaj pytań, które są często zadawane, ale rzadko otrzymują wyczerpujące odpowiedzi.

## Jak nadać tematowi unikalną perspektywę

Wybranie popularnego tematu to dopiero początek. Aby naprawdę się wyróżnić:

1. **Dodaj dane i badania** - Wprowadź statystyki, których konkurencja nie prezentuje
2. **Podziel się osobistą historią** - Ludzki element czyni treść bardziej autentyczną
3. **Oferuj narzędzia i szablony** - Praktyczne zasoby zwiększają wartość Twojego artykułu
4. **Przedstaw przeciwstawne opinie** - Odważ się kwestionować powszechnie przyjęte "prawdy" w Twojej branży
5. **Zaktualizuj przestarzałe informacje** - Odśwież klasyczne tematy najnowszymi trendami i danymi

## Podsumowanie

Wybór wyróżniającego się tematu dla Twojego bloga to proces, który łączy badania, strategiczne myślenie i kreatywność. Pamiętaj, że najlepsze tematy to te, które znajdują się na przecięciu trzech elementów: tego, co interesuje Twoich czytelników, tego, na czym się znasz, i tego, co wyróżnia Cię na tle konkurencji.

Które z przedstawionych metod odkrywania tematów planujesz wypróbować jako pierwsze? Podziel się swoimi przemyśleniami w komentarzach poniżej!

---

*Ten artykuł został przygotowany dla ${targetAudience} poszukujących inspiracji do tworzenia angażujących treści blogowych.*
      `);
      
      setActiveTab('content');
    } else {
      alert("Najpierw stwórz plan bloga!");
    }
  };

  // Włączanie/wyłączanie sekcji badania słów kluczowych
  const toggleKeywordResearch = () => {
    setKeywordResearchShown(!keywordResearchShown);
    
    // Symulacja losowego wyboru insightów o konkurencji
    if (!keywordResearchShown) {
      const randomInsights = [];
      const shuffled = [...exampleCompetitorInsights].sort(() => 0.5 - Math.random());
      
      for (let i = 0; i < 3; i++) {
        if (shuffled[i]) {
          randomInsights.push(shuffled[i]);
        }
      }
      
      setCompetitorInsights(randomInsights);
    }
  };

  const renderKeywordResearch = () => {
    if (!keywordResearchShown) return null;
    
    return (
      <div className="p-4 bg-blue-50 rounded-lg mt-4">
        <h3 className="font-bold text-lg mb-3">Insighty z badania konkurencji:</h3>
        <ul className="space-y-2">
          {competitorInsights.map((insight, index) => (
            <li key={index} className="flex items-start">
              <CheckSquare className="text-blue-600 mr-2 h-5 w-5 mt-1" />
              <span>{insight}</span>
            </li>
          ))}
        </ul>
        
        <h3 className="font-bold text-lg mt-6 mb-3">Trendy związane z Twoimi słowami kluczowymi:</h3>
        <div className="grid grid-cols-2 gap-3">
          {keywords.map((keyword, index) => (
            <div key={index} className="bg-white p-3 rounded border border-gray-200">
              <div className="font-medium">{keyword}</div>
              <div className="text-sm text-gray-500 mt-1">
                Trend: {Math.random() > 0.5 ? 'rosnący ↗' : 'stabilny →'}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  return (
    <div className="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-center mb-6">BlogMaster - Kreator treści blogowych</h1>
      
      {/* Główne menu */}
      <div className="flex border-b mb-6">
        <button 
          className={`px-4 py-2 ${activeTab === 'temat' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('temat')}
        >
          1. Wybór tematu
        </button>
        <button 
          className={`px-4 py-2 ${activeTab === 'plan' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('plan')}
        >
          2. Plan bloga
        </button>
        <button 
          className={`px-4 py-2 ${activeTab === 'content' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('content')}
        >
          3. Treść bloga
        </button>
        <button 
          className={`px-4 py-2 ${activeTab === 'saved' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('saved')}
        >
          Zapisane tematy
        </button>
      </div>
      
      {/* Sekcja wyboru tematu */}
      {activeTab === 'temat' && (
        <div>
          <div className="mb-6">
            <label htmlFor="blog-topic" className="block text-sm font-medium text-gray-700 mb-1">
              Temat bloga
            </label>
            <input
              type="text"
              id="blog-topic"
              className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Np. Jak Wybrać Wyróżniający Się Temat dla Twojego Bloga"
              value={blogTopic}
              onChange={(e) => setBlogTopic(e.target.value)}
            />
          </div>
          
          <div className="mb-6">
            <label htmlFor="target-audience" className="block text-sm font-medium text-gray-700 mb-1">
              Grupa docelowa
            </label>
            <input
              type="text"
              id="target-audience"
              className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Np. początkujący blogerzy, specjaliści marketingu"
              value={targetAudience}
              onChange={(e) => setTargetAudience(e.target.value)}
            />
          </div>
          
          <div className="mb-6">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Słowa kluczowe
            </label>
            <div className="flex">
              <input
                type="text"
                className="flex-1 p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Wpisz słowo kluczowe"
                value={currentKeyword}
                onChange={(e) => setCurrentKeyword(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && addKeyword()}
              />
              <button
                className="bg-blue-500 text-white px-3 py-2 rounded-r hover:bg-blue-600 flex items-center"
                onClick={addKeyword}
              >
                <PlusCircle className="h-5 w-5 mr-1" /> Dodaj
              </button>
            </div>
            
            <div className="flex flex-wrap mt-3 gap-2">
              {keywords.map((keyword, index) => (
                <div key={index} className="bg-blue-100 px-3 py-1 rounded-full flex items-center">
                  <span>{keyword}</span>
                  <button
                    className="ml-2 text-red-500 hover:text-red-700"
                    onClick={() => removeKeyword(keyword)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              ))}
            </div>
          </div>
          
          <div className="mb-6">
            <button 
              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center mr-2 inline-flex"
              onClick={toggleKeywordResearch}
            >
              <Search className="h-5 w-5 mr-2" />
              {keywordResearchShown ? 'Ukryj badanie' : 'Przeprowadź badanie'}
            </button>
            
            {renderKeywordResearch()}
          </div>
          
          {/* Sugestie tematów */}
          <div className="mb-6">
            <h3 className="font-bold text-lg mb-3">Sugerowane tematy:</h3>
            <div className="space-y-2">
              {topicSuggestions.length > 0 ? (
                topicSuggestions.map((suggestion, index) => (
                  <div key={index} className="p-3 border border-gray-200 rounded flex justify-between items-center">
                    <div>{suggestion}</div>
                    <button 
                      className="text-blue-500 hover:text-blue-700"
                      onClick={() => setBlogTopic(suggestion)}
                    >
                      <Edit3 className="h-5 w-5" />
                    </button>
                  </div>
                ))
              ) : (
                exampleTopics.map((topic, index) => (
                  <div key={index} className="p-3 border border-gray-200 rounded flex justify-between items-center">
                    <div>{topic}</div>
                    <button 
                      className="text-blue-500 hover:text-blue-700"
                      onClick={() => setBlogTopic(topic)}
                    >
                      <Edit3 className="h-5 w-5" />
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>
          
          <div className="mt-6 flex space-x-4">
            <button
              className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center"
              onClick={saveTopic}
            >
              <Save className="h-5 w-5 mr-2" /> Zapisz temat
            </button>
            <button
              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center"
              onClick={generateBlogPlan}
            >
              <CheckSquare className="h-5 w-5 mr-2" /> Generuj plan bloga
            </button>
          </div>
        </div>
      )}
      
      {/* Sekcja planu bloga */}
      {activeTab === 'plan' && (
        <div>
          <h2 className="text-xl font-bold mb-4">Plan Twojego bloga</h2>
          <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4 whitespace-pre-line">
            {blogPlan || "Najpierw wygeneruj plan bloga z sekcji 'Wybór tematu'"}
          </div>
          
          <button
            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center"
            onClick={generateBlogContent}
          >
            <CheckSquare className="h-5 w-5 mr-2" /> Generuj treść bloga
          </button>
        </div>
      )}
      
      {/* Sekcja treści bloga */}
      {activeTab === 'content' && (
        <div>
          <h2 className="text-xl font-bold mb-4">Treść Twojego bloga</h2>
          <div className="bg-white p-4 rounded-lg border border-gray-200 mb-4 whitespace-pre-line">
            {blogContent || "Najpierw wygeneruj treść bloga z sekcji 'Plan bloga'"}
          </div>
          
          <div className="flex space-x-4">
            <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center">
              <Save className="h-5 w-5 mr-2" /> Zapisz treść
            </button>
            <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center">
              <Edit3 className="h-5 w-5 mr-2" /> Edytuj treść
            </button>
          </div>
        </div>
      )}
      
      {/* Sekcja zapisanych tematów */}
      {activeTab === 'saved' && (
        <div>
          <h2 className="text-xl font-bold mb-4">Zapisane tematy</h2>
          
          {savedTopics.length > 0 ? (
            <div className="space-y-4">
              {savedTopics.map((item, index) => (
                <div key={index} className="p-4 border border-gray-200 rounded-lg">
                  <div className="flex justify-between items-start">
                    <h3 className="font-bold">{item.topic}</h3>
                    <span className="text-sm text-gray-500">{item.date}</span>
                  </div>
                  <div className="text-sm text-gray-600 mt-1">Grupa docelowa: {item.audience}</div>
                  <div className="mt-2 flex flex-wrap gap-2">
                    {item.keywords.map((kw, idx) => (
                      <span key={idx} className="bg-blue-100 px-2 py-1 text-xs rounded-full">
                        {kw}
                      </span>
                    ))}
                  </div>
                  <div className="mt-3 flex space-x-2">
                    <button className="text-blue-500 hover:text-blue-700 flex items-center text-sm">
                      <Edit3 className="h-4 w-4 mr-1" /> Edytuj
                    </button>
                    <button className="text-red-500 hover:text-red-700 flex items-center text-sm">
                      <Trash2 className="h-4 w-4 mr-1" /> Usuń
                    </button>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-gray-500">Nie masz jeszcze zapisanych tematów. Przejdź do sekcji "Wybór tematu", aby stworzyć i zapisać nowy temat.</p>
          )}
        </div>
      )}
    </div>
  );
};

export default BlogApp;