import React, { useState } from 'react';
import { useCopilotTrigger } from '../../hooks/useCopilotTrigger';
import BlogWriterPhasesSection from './BlogWriterPhasesSection';

interface BlogWriterLandingProps {
  onStartWriting: () => void;
}

const BlogWriterLanding: React.FC<BlogWriterLandingProps> = ({ onStartWriting }) => {
  const [showSuperPowers, setShowSuperPowers] = useState(false);
  const { triggerResearch } = useCopilotTrigger();

  const handleStartWriting = () => {
    // Open the copilot sidebar (same functionality as LinkedIn writer)
    const copilotButton = document.querySelector('.copilotkit-open-button') ||
                         document.querySelector('[data-copilot-open]') ||
                         document.querySelector('button[aria-label*="Open"]') ||
                         document.querySelector('.alwrity-copilot-sidebar button');
    
    if (copilotButton) {
      (copilotButton as HTMLElement).click();
    } else {
      // Fallback: scroll to bottom right where the button should be
      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    }
    
    // Also call the parent callback
    onStartWriting();
  };

  const superPowers = [
    {
      icon: "🔍",
      title: "AI-Powered Research",
      description: "Comprehensive research with Google Search grounding, competitor analysis, and content gap identification"
    },
    {
      icon: "📝",
      title: "Intelligent Outline Generation",
      description: "AI-generated outlines with source mapping, grounding insights, and optimization recommendations"
    },
    {
      icon: "✨",
      title: "Content Enhancement",
      description: "Section-by-section content generation with SEO optimization and engagement improvements"
    },
    {
      icon: "🎯",
      title: "SEO Intelligence",
      description: "Advanced SEO analysis, metadata generation, and keyword optimization for maximum visibility"
    },
    {
      icon: "🔍",
      title: "Fact-Checking & Quality",
      description: "Hallucination detection, claim verification, and content quality assurance"
    },
    {
      icon: "🚀",
      title: "Multi-Platform Publishing",
      description: "Direct publishing to WordPress, Wix, and other platforms with scheduling capabilities"
    }
  ];

  return (
    <>
      <div style={{
        position: 'relative',
        minHeight: '100vh',
        backgroundImage: 'url(/blog-writer-bg.png)',
        backgroundSize: '56% auto',
        backgroundPosition: 'left center',
        backgroundRepeat: 'no-repeat',
        backgroundColor: 'transparent',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden'
      }}>
        {/* Animated overlay for subtle movement */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%)'
        }} />

        {/* Main content container */}
        <div style={{
          position: 'relative',
          zIndex: 2,
          textAlign: 'center',
          maxWidth: '800px',
          padding: '40px 20px'
        }}>
          {/* Main heading */}
          <div style={{
            marginBottom: '40px'
          }}>
            <h1 style={{
              fontSize: '3.5rem',
              fontWeight: '700',
              background: 'linear-gradient(135deg, #1976d2 0%, #9c27b0 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
              margin: '0 0 20px 0',
              textShadow: '0 4px 8px rgba(0,0,0,0.1)',
              lineHeight: '1.2'
            }}>
              Step1- Research Your Blog Topic
            </h1>
          </div>

          {/* Action buttons */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '24px',
            alignItems: 'center'
          }}>
            {/* Primary CTA Button */}
            <button
              onClick={handleStartWriting}
              style={{
                background: 'linear-gradient(135deg, #1976d2 0%, #1565c0 100%)',
                color: 'white',
                border: 'none',
                padding: '18px 48px',
                borderRadius: '50px',
                fontSize: '1.2rem',
                fontWeight: '600',
                cursor: 'pointer',
                boxShadow: '0 8px 25px rgba(25, 118, 210, 0.3)',
                transition: 'all 0.3s ease',
                position: 'relative',
                overflow: 'hidden',
                minWidth: '280px'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-3px) scale(1.05)';
                e.currentTarget.style.boxShadow = '0 12px 35px rgba(25, 118, 210, 0.4)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0) scale(1)';
                e.currentTarget.style.boxShadow = '0 8px 25px rgba(25, 118, 210, 0.3)';
              }}
            >
              <span style={{ position: 'relative', zIndex: 2 }}>
                ✨ Chat/Write with ALwrity Copilot
              </span>
              <div style={{
                position: 'absolute',
                top: 0,
                left: '-100%',
                width: '100%',
                height: '100%',
                background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)',
                transition: 'left 0.5s ease'
              }} />
            </button>

            {/* Secondary CTA Button */}
            <button
              onClick={() => setShowSuperPowers(true)}
              style={{
                background: 'rgba(255, 255, 255, 0.9)',
                color: '#1976d2',
                border: '2px solid #1976d2',
                padding: '14px 36px',
                borderRadius: '50px',
                fontSize: '1rem',
                fontWeight: '600',
                cursor: 'pointer',
                boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
                transition: 'all 0.3s ease',
                backdropFilter: 'blur(10px)',
                minWidth: '280px'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = '#1976d2';
                e.currentTarget.style.color = 'white';
                e.currentTarget.style.transform = 'translateY(-2px)';
                e.currentTarget.style.boxShadow = '0 6px 20px rgba(25, 118, 210, 0.3)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.9)';
                e.currentTarget.style.color = '#1976d2';
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
              }}
            >
              🚀 ALwrity Blog Writer SuperPowers
            </button>
          </div>


        </div>
      </div>

      {/* SuperPowers Modal with 6 Phases */}
      {showSuperPowers && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.95)',
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'center',
          zIndex: 1000,
          overflowY: 'auto'
        }}>
          <div style={{
            backgroundColor: 'white',
            width: '100%',
            maxWidth: '1400px',
            minHeight: '100%',
            boxShadow: '0 25px 50px rgba(0, 0, 0, 0.3)'
          }}>
            {/* Modal Header */}
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '30px',
              paddingBottom: '20px',
              borderBottom: '2px solid #f0f0f0'
            }}>
              <div>
                <h2 style={{
                  margin: '0 0 8px 0',
                  fontSize: '2rem',
                  background: 'linear-gradient(135deg, #1976d2 0%, #9c27b0 100%)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text'
                }}>
                  🚀 ALwrity Blog Writer SuperPowers
                </h2>
                <p style={{ margin: 0, color: '#666', fontSize: '1.1rem' }}>
                  Discover the powerful features that make ALwrity the ultimate blog writing assistant
                </p>
              </div>
              <button
                onClick={() => setShowSuperPowers(false)}
                style={{
                  background: 'none',
                  border: 'none',
                  fontSize: '2rem',
                  cursor: 'pointer',
                  color: '#999',
                  padding: '8px',
                  borderRadius: '50%',
                  transition: 'all 0.2s ease'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = '#f0f0f0';
                  e.currentTarget.style.color = '#333';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                  e.currentTarget.style.color = '#999';
                }}
              >
                ×
              </button>
            </div>

            {/* 6 Phases Section */}
            <BlogWriterPhasesSection />
            
            {/* Quick SuperPowers Grid */}
            <div style={{ padding: '40px', borderTop: '1px solid #f0f0f0' }}>
              <h2 style={{
                margin: '0 0 20px 0',
                fontSize: '1.5rem',
                textAlign: 'center',
                color: '#333'
              }}>
                Quick Feature Overview
              </h2>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
                gap: '20px'
              }}>
                {superPowers.map((power, index) => (
                  <div
                    key={index}
                    style={{
                      padding: '20px',
                      borderRadius: '12px',
                      border: '1px solid #e0e0e0',
                      transition: 'all 0.3s ease'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.transform = 'translateY(-4px)';
                      e.currentTarget.style.boxShadow = '0 8px 25px rgba(0,0,0,0.1)';
                      e.currentTarget.style.borderColor = '#1976d2';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.transform = 'translateY(0)';
                      e.currentTarget.style.boxShadow = 'none';
                      e.currentTarget.style.borderColor = '#e0e0e0';
                    }}
                  >
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '16px',
                      marginBottom: '12px'
                    }}>
                      <div style={{
                        fontSize: '2rem',
                        width: '60px',
                        height: '60px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
                        borderRadius: '12px'
                      }}>
                        {power.icon}
                      </div>
                      <h3 style={{
                        margin: 0,
                        fontSize: '1.1rem',
                        color: '#333',
                        fontWeight: '600'
                      }}>
                        {power.title}
                      </h3>
                    </div>
                    <p style={{
                      margin: 0,
                      color: '#666',
                      lineHeight: '1.6',
                      fontSize: '0.9rem'
                    }}>
                      {power.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            {/* Modal Footer */}
            <div style={{
              marginTop: '30px',
              paddingTop: '20px',
              borderTop: '1px solid #f0f0f0',
              textAlign: 'center'
            }}>
              <button
                onClick={handleStartWriting}
                style={{
                  background: 'linear-gradient(135deg, #1976d2 0%, #1565c0 100%)',
                  color: 'white',
                  border: 'none',
                  padding: '16px 32px',
                  borderRadius: '50px',
                  fontSize: '1.1rem',
                  fontWeight: '600',
                  cursor: 'pointer',
                  boxShadow: '0 6px 20px rgba(25, 118, 210, 0.3)',
                  transition: 'all 0.3s ease'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = '0 8px 25px rgba(25, 118, 210, 0.4)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 6px 20px rgba(25, 118, 210, 0.3)';
                }}
              >
                ✨ Chat/Write with ALwrity Copilot
              </button>
            </div>
          </div>
        </div>
      )}

    </>
  );
};

export default BlogWriterLanding;