import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis';
import { TextInput } from '@/components/tts/TextInput';
import { VoiceSelector } from '@/components/tts/VoiceSelector';
import { SpeechControls } from '@/components/tts/SpeechControls';
import { PlaybackControls } from '@/components/tts/PlaybackControls';
import { StatusIndicator } from '@/components/tts/StatusIndicator';
import { ThemeToggle } from '@/components/ThemeToggle';
import { AudioExport } from '@/components/tts/AudioExport';
import { ReadingMode } from '@/components/tts/ReadingMode';
import { Volume2, Sparkles, Zap, Shield, RotateCcw, Play, BookOpen, Wand2, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { toast } from 'sonner';
import { processTextForSpeech } from '@/utils/textProcessor';

const Index = () => {
  const {
    voices,
    languages,
    selectedVoice,
    selectedLanguage,
    settings,
    isSupported,
    isSpeaking,
    isPaused,
    currentPosition,
    currentWordStart,
    currentWordEnd,
    setSelectedVoice,
    setSelectedLanguage,
    setSettings,
    speak,
    pause,
    resume,
    stop,
    storedText,
    setStoredText,
    storedPosition,
  } = useSpeechSynthesis();

  const [readingModeOpen, setReadingModeOpen] = useState(false);

  const text = storedText;
  const setText = setStoredText;

  const handleSpeak = () => {
    if (text.trim()) {
      const processedText = processTextForSpeech(text);
      speak(processedText);
    }
  };

  const handleResumeFromPosition = () => {
    if (text.trim() && storedPosition > 0) {
      const processedText = processTextForSpeech(text);
      speak(processedText, storedPosition);
      toast.success('Resuming from where you left off');
    }
  };

  const canResume = storedPosition > 0 && storedPosition < text.length && !isSpeaking;

  return (
    <div className="min-h-screen flex flex-col">
      <Helmet>
        <title>LabFlick - Free Online Text to Speech Converter | 100+ Voices, No Sign-Up</title>
        <meta name="description" content="Convert any text to natural speech with LabFlick. Free, online, no signup required. 100+ AI voices, 50+ languages, works offline. Perfect for content creators, students, accessibility." />
        <meta name="keywords" content="text to speech, TTS, AI voice generator, speech synthesis, voice converter, text-to-speech online, accessibility, voice narrator, free TTS tool" />
        <meta name="author" content="LabFlick Team" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
        <meta name="language" content="English" />
        <meta name="revisit-after" content="1 days" />
        <meta name="distribution" content="global" />
        <meta name="rating" content="general" />
        <meta name="color-scheme" content="light dark" />
        <link rel="canonical" href="https://labflick.com/" />
        
        {/* Open Graph - Facebook & LinkedIn */}
        <meta property="og:title" content="LabFlick - Free Text-to-Speech with 100+ Natural Voices" />
        <meta property="og:description" content="Convert text to speech instantly. Free, no signup needed, 100+ voices, 50+ languages. Try LabFlick now!" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://labflick.com/" />
        <meta property="og:site_name" content="LabFlick" />
        <meta property="og:image" content="https://labflick.com/og-image.png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:locale" content="en_US" />
        
        {/* Twitter Card */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="LabFlick - Free Text-to-Speech Converter" />
        <meta name="twitter:description" content="Convert text to natural speech. 100+ voices, 50+ languages. No signup, no ads, completely free." />
        <meta name="twitter:image" content="https://labflick.com/og-image.png" />
        <meta name="twitter:site" content="@LabFlick" />
        <meta name="twitter:creator" content="@LabFlick" />
        
        {/* Apple & Microsoft */}
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="apple-mobile-web-app-title" content="LabFlick" />
        <meta name="msapplication-TileColor" content="#2563eb" />
        <meta name="theme-color" content="#2563eb" />
        
        {/* JSON-LD Structured Data - WebApplication */}
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "WebApplication",
            "name": "LabFlick - Text to Speech",
            "url": "https://labflick.com",
            "description": "Free online text-to-speech converter with 100+ natural voices and 50+ language support",
            "applicationCategory": "UtilityApplication",
            "aggregateRating": {
              "@type": "AggregateRating",
              "ratingValue": "4.9",
              "ratingCount": "10000",
              "bestRating": "5"
            },
            "offers": {
              "@type": "Offer",
              "price": "0",
              "priceCurrency": "USD"
            },
            "featureList": [
              "100+ AI voices across 50+ languages",
              "Convert unlimited text to speech",
              "Works offline with Web Speech API",
              "No sign-up required",
              "No advertisements",
              "Completely free to use",
              "Support for multiple voices and accents",
              "Adjustable speech rate and pitch",
              "Export audio in multiple formats"
            ],
            "screenshot": "https://labflick.com/screenshot.png",
            "operatingSystem": "Web-based, works on all platforms"
          })}
        </script>
        
        {/* Organization Schema */}
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Organization",
            "name": "LabFlick",
            "url": "https://labflick.com",
            "logo": "https://labflick.com/logo.png",
            "description": "Free online text-to-speech converter",
            "sameAs": [
              "https://www.facebook.com/labflick",
              "https://www.twitter.com/labflick",
              "https://www.linkedin.com/company/labflick"
            ]
          })}
        </script>
        
        {/* Breadcrumb Schema */}
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "https://labflick.com"
              }
            ]
          })}
        </script>
      </Helmet>
      <header className="bg-gradient-to-r from-primary/5 via-primary/3 to-transparent border-b border-primary/20 backdrop-blur-md sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4 group">
              <div className="w-12 h-12 bg-gradient-to-br from-primary via-primary/80 to-primary/60 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow">
                <Volume2 className="w-6 h-6 text-primary-foreground" />
              </div>
              <div className="flex flex-col">
                <div className="text-2xl font-black bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
                  LabFlick
                </div>
                <div className="text-xs font-semibold text-primary uppercase tracking-widest">Text to Speech</div>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <StatusIndicator
                isSupported={isSupported}
                isSpeaking={isSpeaking}
                isPaused={isPaused}
                voiceCount={voices.length}
              />
              <ThemeToggle />
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 py-8 max-w-6xl flex-1">
        {/* Hero Section */}
        <section className="text-center mb-12 animate-fade-in-up">
          <h2 className="text-4xl md:text-5xl font-bold font-display mb-4">
            Convert Text to{' '}
            <span className="text-gradient-primary">Natural Speech</span>
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Free, unlimited text-to-speech powered by your browser. No API keys, no limits, works offline.
          </p>
        </section>

        {/* Features Pills */}
        <nav className="flex flex-wrap items-center justify-center gap-3 mb-10" aria-label="Features">
          <div className="flex items-center gap-2 bg-secondary/50 border border-border px-4 py-2 rounded-full text-sm">
            <Zap className="w-4 h-4 text-warning" aria-hidden="true" />
            <span>No Word Limit</span>
          </div>
          <div className="flex items-center gap-2 bg-secondary/50 border border-border px-4 py-2 rounded-full text-sm">
            <Sparkles className="w-4 h-4 text-accent" aria-hidden="true" />
            <span>{languages.length}+ Languages</span>
          </div>
          <div className="flex items-center gap-2 bg-secondary/50 border border-border px-4 py-2 rounded-full text-sm">
            <Volume2 className="w-4 h-4 text-primary" aria-hidden="true" />
            <span>{voices.length}+ Voices</span>
          </div>
          <div className="flex items-center gap-2 bg-secondary/50 border border-border px-4 py-2 rounded-full text-sm">
            <Shield className="w-4 h-4 text-success" aria-hidden="true" />
            <span>100% Free & Private</span>
          </div>
        </nav>

        {/* Resume Banner */}
        {canResume && (
          <aside className="mb-6 p-4 bg-primary/10 border border-primary/20 rounded-lg flex items-center justify-between animate-fade-in-up" aria-label="Resume reading">
            <div className="flex items-center gap-3">
              <RotateCcw className="w-5 h-5 text-primary" aria-hidden="true" />
              <div>
                <p className="text-sm font-medium">Continue where you left off</p>
                <p className="text-xs text-muted-foreground">
                  Position: {storedPosition} / {text.length} characters
                </p>
              </div>
            </div>
            <Button 
              onClick={handleResumeFromPosition}
              size="sm"
              className="gap-2"
            >
              <Play className="w-4 h-4" aria-hidden="true" />
              Resume
            </Button>
          </aside>
        )}

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Text Input Section */}
          <article className="lg:col-span-2 space-y-6 animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
            <TextInput
              value={text}
              onChange={setText}
              disabled={isSpeaking && !isPaused}
              currentPosition={currentPosition}
              currentWordStart={currentWordStart}
              currentWordEnd={currentWordEnd}
              isSpeaking={isSpeaking}
              speechRate={settings.rate}
            />

            {/* Playback Controls */}
            <section className="bg-gradient-card border border-border rounded-lg p-8" aria-label="Playback controls">
              <div className="flex items-center justify-between mb-4">
                <AudioExport
                  text={text}
                  voice={selectedVoice?.nativeVoice || null}
                  rate={settings.rate}
                  pitch={settings.pitch}
                  disabled={isSpeaking}
                />
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setReadingModeOpen(true)}
                  className="gap-2"
                  aria-label="Open reading mode"
                >
                  <BookOpen className="w-4 h-4" aria-hidden="true" />
                  Reading Mode
                </Button>
              </div>
              <PlaybackControls
                isSpeaking={isSpeaking}
                isPaused={isPaused}
                hasText={text.trim().length > 0}
                onPlay={handleSpeak}
                onPause={pause}
                onResume={resume}
                onStop={stop}
              />
            </section>

            {/* Featured Tools Section - Compact Desktop Version (now visible on all sizes) */}
            <section className="bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20 rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-9 h-9 bg-primary/20 rounded-lg flex items-center justify-center">
                  <Wand2 className="w-5 h-5 text-primary" />
                </div>
                <h3 className="text-lg font-bold">Explore All Our Tools</h3>
              </div>
              <p className="text-muted-foreground text-sm mb-3">
                Discover our complete suite of productivity tools and features designed to help you work smarter.
              </p>
              <p className="text-muted-foreground text-xs mb-4">
                Visit our tools hub for more innovative solutions and take your productivity to the next level.
              </p>
              <a href="https://tools.labflick.com" target="_blank" rel="noopener noreferrer">
                <Button size="sm" className="gap-2 font-semibold w-full">
                  Visit Tools Hub
                  <ArrowRight className="w-4 h-4" />
                </Button>
              </a>
            </section>
          </article>

          {/* Settings Sidebar - Now visible on all screen sizes */}
          <aside className="space-y-6 animate-fade-in-up" style={{ animationDelay: '0.2s' }} aria-label="Voice settings">
            {/* Voice Selection */}
            <section className="bg-card border border-border rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                <Volume2 className="w-5 h-5 text-primary" aria-hidden="true" />
                Voice Settings
              </h3>
              <VoiceSelector
                voices={voices}
                languages={languages}
                selectedVoice={selectedVoice}
                selectedLanguage={selectedLanguage}
                onVoiceChange={setSelectedVoice}
                onLanguageChange={setSelectedLanguage}
                disabled={isSpeaking && !isPaused}
              />
            </section>

            {/* Speech Controls */}
            <section className="bg-card border border-border rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                <Sparkles className="w-5 h-5 text-accent" aria-hidden="true" />
                Audio Controls
              </h3>
              <SpeechControls
                settings={settings}
                onSettingsChange={setSettings}
                disabled={isSpeaking && !isPaused}
              />
            </section>

            {/* Tips Card */}
            <section className="bg-gradient-card border border-border rounded-lg p-6">
              <h4 className="font-semibold mb-3 text-sm">Tips</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>• Your text and settings auto-save locally</li>
                <li>• Resume from where you left off after refresh</li>
                <li>• Switch to Preview mode to see word highlighting</li>
                <li>• Use Reading Mode for distraction-free listening</li>
              </ul>
            </section>
          </aside>
        </div>
      </main>



      {/* Footer */}
      <footer className="border-t border-border/50 mt-16">
        <div className="container mx-auto px-4 py-8">
          <div className="flex flex-col items-center gap-6">
            {/* Navigation Links */}
            <nav className="flex flex-wrap justify-center gap-4" aria-label="Footer navigation">
              <a href="/about" className="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a>
              <a href="/contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Contact</a>
              <a href="/privacy" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Privacy Policy</a>
              <a href="/terms" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Terms of Service</a>
            </nav>
            
            {/* Blog Button */}
            <a href="/blog" className="inline-flex items-center gap-2 text-sm bg-primary/10 text-primary px-4 py-2 rounded-full hover:bg-primary/20 transition-colors">
              <BookOpen className="w-4 h-4" />
              Visit Our Blog
            </a>
            
            {/* Copyright */}
            <p className="text-xs text-muted-foreground pt-4">
              © 2025 LabFlick. All Rights Reserved
            </p>
          </div>
        </div>
      </footer>

      {/* Reading Mode Overlay */}
      <ReadingMode
        text={text}
        currentWordStart={currentWordStart}
        currentWordEnd={currentWordEnd}
        isSpeaking={isSpeaking}
        isOpen={readingModeOpen}
        onClose={() => setReadingModeOpen(false)}
      />
    </div>
  );
};

export default Index;