"use client";

import { useState, useEffect, useRef } from "react";
import Head from "next/head";
import Link from "next/link";
import { format } from "date-fns";
import { PodcastEpisode, DEFAULT_CONFIG } from "@/lib/podcast";

interface EpisodeWithAudio extends PodcastEpisode {
  audioUrl: string;
  audioDuration: number;
}

function formatDuration(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, "0")}`;
}

export default function PodcastPage() {
  const [episodes, setEpisodes] = useState<EpisodeWithAudio[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentEpisode, setCurrentEpisode] = useState<EpisodeWithAudio | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const audioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    fetchEpisodes();
  }, []);

  useEffect(() => {
    if (currentEpisode && audioRef.current) {
      audioRef.current.play();
      setIsPlaying(true);
    }
  }, [currentEpisode]);

  async function fetchEpisodes() {
    try {
      const res = await fetch("/api/messages");
      const data = await res.json();
      
      // Filter to only episodes with audio
      const episodesWithAudio = (data || [])
        .filter((m: any) => m.audio_url)
        .map((m: any) => ({
          id: m.id,
          title: extractTitle(m.content),
          description: extractExcerpt(m.content),
          content: m.content,
          date: m.date,
          timestamp: m.timestamp,
          audioUrl: m.audio_url,
          audioDuration: m.audio_duration || 300,
          tags: m.tags || [],
        }))
        .sort((a: any, b: any) => b.timestamp - a.timestamp);

      setEpisodes(episodesWithAudio);
    } catch (err) {
      console.error("Failed to fetch episodes:", err);
    } finally {
      setLoading(false);
    }
  }

  function extractTitle(content: string): string {
    const lines = content.split("\n");
    const titleLine = lines.find((l) => l.startsWith("# ") || l.startsWith("## "));
    return titleLine?.replace(/#{1,2}\s/, "").trim() || "Daily Digest";
  }

  function extractExcerpt(content: string, maxLength: number = 150): string {
    const plainText = content
      .replace(/#{1,6}\s/g, "")
      .replace(/(\*\*|__|\*|_)/g, "")
      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
      .replace(/```[\s\S]*?```/g, "")
      .replace(/`([^`]+)`/g, " $1 ")
      .replace(/\n+/g, " ")
      .trim();

    if (plainText.length <= maxLength) return plainText;
    return plainText.substring(0, maxLength).trim() + "...";
  }

  function handlePlay(episode: EpisodeWithAudio) {
    if (currentEpisode?.id === episode.id) {
      togglePlay();
    } else {
      setCurrentEpisode(episode);
      setProgress(0);
    }
  }

  function togglePlay() {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  }

  function handleTimeUpdate() {
    if (audioRef.current) {
      setProgress(audioRef.current.currentTime);
      setDuration(audioRef.current.duration || currentEpisode?.audioDuration || 0);
    }
  }

  function handleSeek(e: React.ChangeEvent<HTMLInputElement>) {
    const newTime = parseFloat(e.target.value);
    if (audioRef.current) {
      audioRef.current.currentTime = newTime;
      setProgress(newTime);
    }
  }

  function handleEnded() {
    setIsPlaying(false);
    setProgress(0);
  }

  const rssUrl = "https://blog-backup-two.vercel.app/api/podcast/rss";

  return (
    <>
      <Head>
        <title>Podcast | OpenClaw Daily Digest</title>
        <meta name="description" content={DEFAULT_CONFIG.description} />
      </Head>

      <div className="min-h-screen bg-white text-gray-900 dark:bg-slate-950 dark:text-slate-100">
        {/* Header */}
        <header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50 dark:border-slate-800 dark:bg-slate-950/95">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <Link href="/" className="flex items-center gap-2">
                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
                  🎧
                </div>
                <span className="font-bold text-xl">Daily Digest Podcast</span>
              </Link>
              
              <nav className="flex items-center gap-4">
                <Link href="/" className="text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
                  Blog
                </Link>
                <Link href="/admin" className="text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
                  Admin
                </Link>
              </nav>
            </div>
          </div>
        </header>

        <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {/* Podcast Header */}
          <div className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-8 text-white mb-8">
            <div className="flex flex-col md:flex-row gap-6">
              <div className="w-32 h-32 bg-white/20 rounded-xl flex items-center justify-center text-5xl">
                🎙️
              </div>
              <div className="flex-1">
                <h1 className="text-3xl font-bold mb-2">{DEFAULT_CONFIG.title}</h1>
                <p className="text-blue-100 mb-4">{DEFAULT_CONFIG.description}</p>
                <div className="flex flex-wrap gap-3">
                  <a 
                    href={rssUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors"
                  >
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M6.503 20.752c0 2.07-1.678 3.748-3.75 3.748S-.997 22.82-.997 20.75c0-2.07 1.68-3.748 3.75-3.748s3.753 1.678 3.753 3.748zm10.5-10.12c0 2.07-1.678 3.75-3.75 3.75s-3.75-1.68-3.75-3.75c0-2.07 1.678-3.75 3.75-3.75s3.75 1.68 3.75 3.75zm-1.5 0c0-1.24-1.01-2.25-2.25-2.25s-2.25 1.01-2.25 2.25 1.01 2.25 2.25 2.25 2.25-1.01 2.25-2.25zm4.5 10.12c0 2.07-1.678 3.748-3.75 3.748s-3.75-1.678-3.75-3.748c0-2.07 1.678-3.748 3.75-3.748s3.75 1.678 3.75 3.748zm1.5 0c0-2.898-2.355-5.25-5.25-5.25S15 17.852 15 20.75c0 2.898 2.355 5.25 5.25 5.25s5.25-2.352 5.25-5.25zm-7.5-10.12c0 2.898-2.355 5.25-5.25 5.25S3 13.61 3 10.713c0-2.9 2.355-5.25 5.25-5.25s5.25 2.35 5.25 5.25zm1.5 0c0-3.73-3.02-6.75-6.75-6.75S-3 6.983-3 10.713c0 3.73 3.02 6.75 6.75 6.75s6.75-3.02 6.75-6.75z"/>
                    </svg>
                    RSS Feed
                  </a>
                  <a 
                    href={`https://podcasts.apple.com/?feedUrl=${encodeURIComponent(rssUrl)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors"
                  >
                    🍎 Apple Podcasts
                  </a>
                  <a 
                    href={`https://open.spotify.com/?feedUrl=${encodeURIComponent(rssUrl)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors"
                  >
                    🎵 Spotify
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Now Playing */}
          {currentEpisode && (
            <div className="bg-gray-50 rounded-xl p-4 mb-8 border border-gray-200 sticky top-20 z-40 dark:bg-slate-900 dark:border-slate-700">
              <div className="flex items-center gap-4">
                <button
                  onClick={togglePlay}
                  className="w-12 h-12 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center text-white transition-colors"
                >
                  {isPlaying ? (
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                    </svg>
                  ) : (
                    <svg className="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                  )}
                </button>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-gray-900 dark:text-slate-100 truncate">
                    {currentEpisode.title}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-slate-400">
                    {format(new Date(currentEpisode.date), "MMMM d, yyyy")}
                  </p>
                </div>
                <div className="hidden sm:block text-sm text-gray-500 dark:text-slate-400">
                  {formatDuration(Math.floor(progress))} / {formatDuration(currentEpisode.audioDuration)}
                </div>
              </div>
              <input
                type="range"
                min={0}
                max={duration || currentEpisode.audioDuration}
                value={progress}
                onChange={handleSeek}
                className="w-full mt-3 accent-blue-600"
              />
              <audio
                ref={audioRef}
                src={currentEpisode.audioUrl}
                onTimeUpdate={handleTimeUpdate}
                onEnded={handleEnded}
              />
            </div>
          )}

          {/* Episode List */}
          <div className="space-y-4">
            <h2 className="text-xl font-semibold mb-4">Episodes</h2>
            
            {loading ? (
              <div className="text-center py-12">
                <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto"/>
              </div>
            ) : episodes.length === 0 ? (
              <div className="text-center py-12 bg-gray-50 rounded-xl dark:bg-slate-900">
                <p className="text-gray-500 dark:text-slate-400">No podcast episodes yet.</p>
                <p className="text-sm text-gray-400 dark:text-slate-500 mt-2">
                  Episodes are generated when new digests are posted with audio enabled.
                </p>
              </div>
            ) : (
              episodes.map((episode) => (
                <div
                  key={episode.id}
                  className={`p-4 rounded-xl border transition-colors ${
                    currentEpisode?.id === episode.id
                      ? "bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800"
                      : "bg-white border-gray-200 hover:border-gray-300 dark:bg-slate-900 dark:border-slate-800 dark:hover:border-slate-700"
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <button
                      onClick={() => handlePlay(episode)}
                      className="w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full flex items-center justify-center text-gray-700 transition-colors flex-shrink-0 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300"
                    >
                      {currentEpisode?.id === episode.id && isPlaying ? (
                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                        </svg>
                      ) : (
                        <svg className="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M8 5v14l11-7z"/>
                        </svg>
                      )}
                    </button>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-1">
                        <Link href={`/?post=${episode.id}`} className="hover:text-blue-600 dark:hover:text-blue-400">
                          {episode.title}
                        </Link>
                      </h3>
                      <p className="text-sm text-gray-600 dark:text-slate-400 line-clamp-2 mb-2">
                        {episode.description}
                      </p>
                      <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-slate-500">
                        <span>{format(new Date(episode.date), "MMMM d, yyyy")}</span>
                        <span>·</span>
                        <span>{formatDuration(episode.audioDuration)}</span>
                        {episode.tags && episode.tags.length > 0 && (
                          <>
                            <span>·</span>
                            <span className="text-blue-600 dark:text-blue-400">
                              {episode.tags.slice(0, 2).join(", ")}
                            </span>
                          </>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>

          {/* Subscribe Section */}
          <div className="mt-12 p-6 bg-gray-50 rounded-xl border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
            <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2">Subscribe to the Podcast</h3>
            <p className="text-sm text-gray-600 dark:text-slate-400 mb-4">
              Get the latest tech digest delivered to your favorite podcast app.
            </p>
            <div className="flex flex-wrap gap-2">
              <code className="px-3 py-1.5 bg-white border border-gray-300 rounded text-sm font-mono text-gray-700 dark:bg-slate-950 dark:border-slate-700 dark:text-slate-300">
                {rssUrl}
              </code>
              <button
                onClick={() => navigator.clipboard.writeText(rssUrl)}
                className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition-colors"
              >
                Copy RSS URL
              </button>
            </div>
          </div>
        </main>

        {/* Footer */}
        <footer className="border-t border-gray-200 mt-16 dark:border-slate-800">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <p className="text-center text-gray-500 dark:text-slate-400 text-sm">
              © {new Date().getFullYear()} {DEFAULT_CONFIG.author}
            </p>
          </div>
        </footer>
      </div>
    </>
  );
}
