'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Play, Pause, RotateCcw, Volume2 } from 'lucide-react';

interface Message {
  id: string;
  speaker: 'host1' | 'host2';
  text: string;
  timestamp: string;
}

export default function Home() {
  const [url, setUrl] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [progressInterval, setProgressInterval] = useState<NodeJS.Timeout | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // Simulate API call
    setTimeout(() => {
      setMessages(mockMessages);
      setIsLoading(false);
      setDuration(320); // 5 minutes 20 seconds
    }, 2000);
  };

  const togglePlay = () => {
    if (isPlaying) {
      setIsPlaying(false);
      if (progressInterval) {
        clearInterval(progressInterval);
        setProgressInterval(null);
      }
    } else {
      setIsPlaying(true);
      const interval = setInterval(() => {
        setCurrentTime(prev => {
          if (prev >= duration) {
            setIsPlaying(false);
            clearInterval(interval);
            setProgressInterval(null);
            return duration;
          }
          return prev + 1;
        });
      }, 1000);
      setProgressInterval(interval);
    }
  };

  const restartAudio = () => {
    setCurrentTime(0);
    setIsPlaying(false);
    if (progressInterval) {
      clearInterval(progressInterval);
      setProgressInterval(null);
    }
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-gray-200 dark:border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <h1 className="text-2xl font-bold text-foreground">AI Podcast Generator</h1>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 lg:gap-6 h-[calc(100vh-10rem)] sm:h-[calc(100vh-12rem)]">
          {/* Left Column - URL Input */}
          <div className="xl:col-span-1">
            <Card className="h-full">
              <CardHeader>
                <CardTitle>Generate Podcast</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label htmlFor="url" className="block text-sm font-medium mb-2">
                      Enter Website URL
                    </label>
                    <Input
                      type="url"
                      id="url"
                      value={url}
                      onChange={(e) => setUrl(e.target.value)}
                      placeholder="https://example.com"
                      required
                    />
                  </div>
                  <Button 
                    type="submit" 
                    className="w-full" 
                    disabled={isLoading || !url}
                  >
                    {isLoading ? 'Generating...' : 'Generate Podcast'}
                  </Button>
                </form>
                
                {messages.length > 0 && (
                  <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-md">
                    <p className="text-sm text-green-800 dark:text-green-200">
                      Podcast generated successfully! Listen to the conversation below.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Middle Column - Conversation */}
          <div className="xl:col-span-1">
            <Card className="h-full flex flex-col">
              <CardHeader>
                <CardTitle>Podcast Conversation</CardTitle>
              </CardHeader>
              <CardContent className="flex-1 overflow-y-auto space-y-4 p-6">
                {messages.length === 0 ? (
                  <div className="text-center text-muted-foreground mt-8">
                    <p>Enter a URL and generate a podcast to see the conversation here.</p>
                  </div>
                ) : (
                  messages.map((message) => (
                    <div
                      key={message.id}
                      className={`flex ${message.speaker === 'host1' ? 'justify-start' : 'justify-end'}`}
                    >
                      <Card 
                        className={`max-w-[80%] transition-all duration-200 hover:scale-[1.02] ${
                          message.speaker === 'host1'
                            ? 'bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50'
                            : 'bg-muted hover:bg-muted/80'
                        }`}
                      >
                        <CardContent className="p-4">
                          <div className="font-medium text-sm mb-1">
                            {message.speaker === 'host1' ? 'Alex' : 'Sarah'}
                          </div>
                          <p className="text-sm">{message.text}</p>
                          <div className="text-xs text-muted-foreground mt-1">{message.timestamp}</div>
                        </CardContent>
                      </Card>
                    </div>
                  ))
                )}
              </CardContent>
            </Card>
          </div>

          {/* Right Column - Audio Player */}
          <div className="xl:col-span-1">
            <Card className="h-full">
              <CardHeader>
                <CardTitle>Audio Player</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {messages.length === 0 ? (
                  <div className="text-center text-muted-foreground mt-8">
                    <p>Generate a podcast to enable audio playback.</p>
                  </div>
                ) : (
                  <div className="space-y-6">
                    {/* Audio Controls */}
                    <div className="flex justify-center items-center space-x-4">
                      <Button
                        onClick={restartAudio}
                        variant="outline"
                        size="icon"
                        className="rounded-full transition-all duration-200 hover:scale-110"
                        title="Restart"
                      >
                        <RotateCcw className="w-4 h-4" />
                      </Button>
                      <Button
                        onClick={togglePlay}
                        size="icon"
                        className="rounded-full transition-all duration-200 hover:scale-110 shadow-lg hover:shadow-xl"
                        title={isPlaying ? 'Pause' : 'Play'}
                      >
                        {isPlaying ? (
                          <Pause className="w-5 h-5" />
                        ) : (
                          <Play className="w-5 h-5" />
                        )}
                      </Button>
                    </div>

                    {/* Progress Bar */}
                    <div className="space-y-2">
                      <Progress 
                        value={(currentTime / duration) * 100} 
                        className="w-full" 
                      />
                      <div className="flex justify-between text-sm text-muted-foreground">
                        <span>{formatTime(currentTime)}</span>
                        <span>{formatTime(duration)}</span>
                      </div>
                    </div>

                    {/* Volume Control */}
                    <div className="flex items-center space-x-2">
                      <Volume2 className="w-5 h-5 text-muted-foreground" />
                      <input
                        type="range"
                        min="0"
                        max="100"
                        defaultValue="70"
                        className="flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
                      />
                    </div>

                    {/* Episode Info */}
                    <Card>
                      <CardContent className="p-4">
                        <h3 className="font-medium mb-2">Episode Details</h3>
                        <p className="text-sm text-muted-foreground">
                          Duration: {formatTime(duration)}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          Speakers: Alex & Sarah
                        </p>
                      </CardContent>
                    </Card>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  );
}

// Helper function to format time
function formatTime(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// Mock conversation data
const mockMessages: Message[] = [
  {
    id: '1',
    speaker: 'host1',
    text: "Hey Sarah! Today we're discussing this fascinating article about artificial intelligence and its impact on creative industries.",
    timestamp: '0:15'
  },
  {
    id: '2',
    speaker: 'host2',
    text: "That's really interesting, Alex! I've been following this topic closely. The article mentions some really compelling points about AI-generated art and music.",
    timestamp: '0:45'
  },
  {
    id: '3',
    speaker: 'host1',
    text: "Exactly! What I found most surprising was the section about how AI is actually helping human creators become more productive rather than replacing them entirely.",
    timestamp: '1:20'
  },
  {
    id: '4',
    speaker: 'host2',
    text: "That's a crucial distinction. The article highlights several case studies where artists are using AI as a collaborative tool to enhance their creative process.",
    timestamp: '1:55'
  },
  {
    id: '5',
    speaker: 'host1',
    text: "I particularly loved the example about the musician who used AI to generate backing tracks and then added their own creative twist on top.",
    timestamp: '2:30'
  },
  {
    id: '6',
    speaker: 'host2',
    text: "And what about the ethical considerations? The article raises some important questions about copyright and attribution when AI is involved in the creative process.",
    timestamp: '3:05'
  },
  {
    id: '7',
    speaker: 'host1',
    text: "That's definitely something we need to think about. The author suggests that we might need new frameworks for understanding creativity in the age of AI.",
    timestamp: '3:40'
  },
  {
    id: '8',
    speaker: 'host2',
    text: "I agree. It's not about rejecting AI, but finding ways to integrate it responsibly into our creative workflows while maintaining human oversight and artistic vision.",
    timestamp: '4:15'
  },
  {
    id: '9',
    speaker: 'host1',
    text: "The future looks really exciting! Imagine what we'll be able to create when we embrace these technologies as tools rather than threats.",
    timestamp: '4:50'
  },
  {
    id: '10',
    speaker: 'host2',
    text: "Absolutely! Thanks for sharing this article with our listeners. It really gives us a lot to think about regarding the future of creativity and AI.",
    timestamp: '5:20'
  }
];