"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import {
  Radio,
  Plus,
  Headphones,
  Trash2,
  Clock,
  Play,
  Pause,
  Maximize2,
  Search,
  RefreshCw,
  Loader2,
  AlertCircle,
  RotateCw,
  Hourglass,
  Sparkles,
} from "lucide-react";
import { useAudio, Episode } from "@/contexts/AudioContext";
import { ThemeToggle } from "@/components/ThemeToggle";

export default function HomePage() {
  const { activeEpisode, isPlaying, playEpisode, togglePlay, openZen } = useAudio();
  const [episodes, setEpisodes] = useState<Episode[]>([]);
  const [workerStatus, setWorkerStatus] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");

  const fetchEpisodes = async () => {
    try {
      const [epRes, workerRes] = await Promise.all([
        fetch("/api/episodes"),
        fetch("/api/worker/status").catch(() => null),
      ]);

      const data = await epRes.json();
      if (data.success && data.episodes) {
        setEpisodes(data.episodes);
      }

      if (workerRes && workerRes.ok) {
        const workerData = await workerRes.json();
        if (workerData.success) {
          setWorkerStatus(workerData.worker);
        }
      }
    } catch (err) {
      console.error("Failed to load episodes:", err);
    } finally {
      setIsLoading(false);
    }
  };

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

  // Real-time polling when any episode is QUEUED or PROCESSING, or worker is active
  useEffect(() => {
    const hasPending = episodes.some(
      (ep) => ep.status === "QUEUED" || ep.status === "PROCESSING"
    );
    const workerActive = workerStatus && (!workerStatus.isIdle || workerStatus.isBackingOff);

    if (!hasPending && !workerActive) return;

    const interval = setInterval(() => {
      fetchEpisodes();
    }, 2500);

    return () => clearInterval(interval);
  }, [episodes, workerStatus]);

  const handleDeleteEpisode = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    if (!confirm("Are you sure you want to delete this episode?")) return;

    try {
      await fetch(`/api/episodes/${id}`, { method: "DELETE" });
      await fetchEpisodes();
    } catch (err) {
      console.error("Failed to delete episode:", err);
    }
  };

  const handleRetryEpisode = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    try {
      await fetch(`/api/episodes/${id}`, { method: "POST" });
      await fetchEpisodes();
    } catch (err) {
      console.error("Failed to retry episode:", err);
    }
  };

  const formatDuration = (secs?: number | null) => {
    if (!secs) return "0:00";
    const m = Math.floor(secs / 60);
    const s = Math.floor(secs % 60);
    return `${m}:${s.toString().padStart(2, "0")}`;
  };

  // Filter episodes purely by search query
  const filteredEpisodes = episodes.filter((ep) => {
    if (!searchQuery.trim()) return true;
    const q = searchQuery.toLowerCase();
    return (
      ep.title.toLowerCase().includes(q) ||
      ep.originalContent.toLowerCase().includes(q)
    );
  });

  return (
    <div className="flex-1 flex flex-col pb-36">
      {/* Top Navbar */}
      <header className="border-b border-slate-200 dark:border-slate-900 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md sticky top-0 z-30 transition-colors">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-blue-500/20">
              <Radio className="w-5 h-5" />
            </div>
            <div>
              <span className="font-bold text-base sm:text-lg text-slate-900 dark:text-slate-100 tracking-tight">
                Be My Anchor
              </span>
              <span className="ml-2 text-[10px] px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 font-mono">
                v2.0
              </span>
            </div>
          </div>

          <div className="flex items-center gap-2.5">
            <ThemeToggle />
            <Link
              href="/new"
              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 active:scale-95 text-white text-xs sm:text-sm font-medium transition shadow-md shadow-blue-600/25"
            >
              <Plus className="w-4 h-4" />
              <span>Add Article</span>
            </Link>
          </div>
        </div>
      </header>

      {/* Main Container */}
      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-6 w-full flex-1 space-y-6">
        {/* Search Bar Header */}
        <div className="flex items-center justify-between gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="w-4 h-4 text-slate-400 dark:text-slate-500 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search your articles..."
              className="w-full pl-9 pr-4 py-2.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl text-xs sm:text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:border-blue-500 transition shadow-sm"
            />
          </div>

          <div className="text-xs text-slate-500 font-mono shrink-0">
            {episodes.length} {episodes.length === 1 ? "article" : "articles"}
          </div>
        </div>

        {/* Worker Cooldown / Rate-limit Alert Banner */}
        {workerStatus?.isBackingOff && (
          <div className="mb-4 p-3.5 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-xl flex items-center gap-3 text-xs text-amber-800 dark:text-amber-300 shadow-sm animate-pulse">
            <Hourglass className="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" />
            <div>
              <span className="font-semibold">Worker Cooldown Active:</span> AI provider is experiencing high demand or rate limits. The queue is automatically paused and will resume shortly.
            </div>
          </div>
        )}

        {/* Episode List */}
        {isLoading ? (
          <div className="flex flex-col items-center justify-center py-24 text-slate-500">
            <RefreshCw className="w-8 h-8 animate-spin mb-3 text-blue-500" />
            <p className="text-sm">Loading articles...</p>
          </div>
        ) : filteredEpisodes.length === 0 ? (
          <div className="p-12 text-center bg-slate-50 dark:bg-slate-900/40 border border-dashed border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm">
            <Headphones className="w-12 h-12 text-slate-400 dark:text-slate-600 mx-auto mb-3" />
            <h3 className="text-slate-800 dark:text-slate-200 font-medium text-base mb-1">
              {searchQuery ? "No matching articles" : "No articles yet"}
            </h3>
            <p className="text-xs sm:text-sm text-slate-500 max-w-sm mx-auto mb-5">
              {searchQuery
                ? "Try a different search keyword."
                : "Add your first article or technical paper to listen to it anytime."}
            </p>
            {!searchQuery && (
              <Link
                href="/new"
                className="inline-flex items-center gap-2 px-4 py-2 text-xs sm:text-sm bg-blue-600 text-white rounded-xl hover:bg-blue-500 transition shadow-md shadow-blue-600/25"
              >
                <Plus className="w-4 h-4" />
                <span>Add Your First Article</span>
              </Link>
            )}
          </div>
        ) : (
          <div className="space-y-3">
            {filteredEpisodes.map((ep) => {
              const isSelected = activeEpisode?.id === ep.id;
              const isEpisodePlaying = isSelected && isPlaying;
              const isReady = ep.status === "READY" && !!ep.audioUrl;
              const isProcessing = ep.status === "PROCESSING";
              const isQueued = ep.status === "QUEUED";
              const isFailed = ep.status === "FAILED";

              return (
                <div
                  key={ep.id}
                  onClick={() => {
                    if (isReady) {
                      if (isSelected) {
                        togglePlay();
                      } else {
                        playEpisode(ep);
                      }
                    }
                  }}
                  className={`p-4 sm:p-5 rounded-2xl transition-all border ${
                    isReady ? "cursor-pointer" : "cursor-default"
                  } ${
                    isSelected
                      ? "bg-blue-50/70 dark:bg-slate-900 border-blue-400 dark:border-blue-500/50 shadow-md shadow-blue-500/5"
                      : "bg-white dark:bg-slate-900/60 border-slate-200 dark:border-slate-850 hover:border-slate-300 dark:hover:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 shadow-sm"
                  }`}
                >
                  <div className="flex items-center justify-between gap-4">
                    {/* Status / Play icon button */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        if (isReady) {
                          if (isSelected) {
                            togglePlay();
                          } else {
                            playEpisode(ep);
                          }
                        }
                      }}
                      disabled={!isReady}
                      className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-transform active:scale-95 ${
                        isSelected
                          ? "bg-blue-600 text-white shadow-md shadow-blue-600/30"
                          : isReady
                          ? "bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
                          : isProcessing
                          ? "bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800/60"
                          : isQueued
                          ? "bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400 border border-amber-200 dark:border-amber-800/60"
                          : "bg-rose-50 dark:bg-rose-950/50 text-rose-600 dark:text-rose-400 border border-rose-200 dark:border-rose-800/60"
                      }`}
                      aria-label={isEpisodePlaying ? "Pause" : "Play"}
                    >
                      {isProcessing ? (
                        <Loader2 className="w-5 h-5 animate-spin" />
                      ) : isQueued ? (
                        <Clock className="w-5 h-5 animate-pulse" />
                      ) : isFailed ? (
                        <AlertCircle className="w-5 h-5" />
                      ) : isEpisodePlaying ? (
                        <Pause className="w-5 h-5 fill-current" />
                      ) : (
                        <Play className="w-5 h-5 fill-current translate-x-0.5" />
                      )}
                    </button>

                    {/* Metadata & Title */}
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2 mb-1.5 flex-wrap">
                        {/* Mode Badge */}
                        <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
                          {ep.mode === "DUAL_HOST"
                            ? "🎙️ 双人播客"
                            : ep.mode === "FEYNMAN"
                            ? "💡 费曼精讲"
                            : "📖 逐句朗读"}
                        </span>

                        {/* Language Badge */}
                        {ep.targetLanguage && ep.targetLanguage !== "auto" && (
                          <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800">
                            {ep.targetLanguage === "zh" ? "🇨🇳 中文输出" : "🇺🇸 English"}
                          </span>
                        )}

                        {/* Status Chip */}
                        {isProcessing ? (
                          <span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-950/80 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
                            <Loader2 className="w-2.5 h-2.5 animate-spin" />
                            {ep.retryCount && ep.retryCount > 0
                              ? `Retrying (${ep.retryCount}/${ep.maxRetries || 3})...`
                              : "Synthesizing audio..."}
                          </span>
                        ) : isQueued ? (
                          <span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-amber-100 dark:bg-amber-950/80 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                            <Clock className="w-2.5 h-2.5 animate-pulse" />
                            In Queue
                          </span>
                        ) : isFailed ? (
                          <span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-rose-100 dark:bg-rose-950/80 text-rose-700 dark:text-rose-300 border border-rose-200 dark:border-rose-800">
                            <AlertCircle className="w-2.5 h-2.5" />
                            Failed
                          </span>
                        ) : (
                          <span className="text-[11px] font-mono text-slate-500 dark:text-slate-400 flex items-center gap-1">
                            <Clock className="w-3 h-3 text-blue-500 dark:text-blue-400" />
                            {formatDuration(ep.durationSeconds)}
                          </span>
                        )}

                        <span className="text-[11px] text-slate-400 dark:text-slate-600">•</span>
                        <span className="text-[11px] text-slate-500">
                          {new Date(ep.createdAt).toLocaleDateString()}
                        </span>
                      </div>

                      <h3
                        className={`text-sm sm:text-base font-medium truncate ${
                          isSelected
                            ? "text-blue-600 dark:text-blue-300"
                            : "text-slate-900 dark:text-slate-100"
                        }`}
                      >
                        {ep.title}
                      </h3>

                      {/* Error snippet if failed */}
                      {isFailed && ep.errorMessage && (
                        <p className="text-[11px] text-rose-500 dark:text-rose-400 mt-1 line-clamp-1">
                          {ep.errorMessage}
                        </p>
                      )}
                    </div>

                    {/* Right side actions */}
                    <div className="flex items-center gap-1.5 shrink-0">
                      {isFailed && (
                        <button
                          onClick={(e) => handleRetryEpisode(ep.id, e)}
                          className="px-2.5 py-1.5 text-xs bg-rose-100 hover:bg-rose-200 dark:bg-rose-950/80 dark:hover:bg-rose-900 text-rose-700 dark:text-rose-300 rounded-lg flex items-center gap-1.5 transition font-medium border border-rose-200 dark:border-rose-800"
                          title="Retry generation"
                        >
                          <RotateCw className="w-3.5 h-3.5" />
                          <span>Retry</span>
                        </button>
                      )}

                      {isReady && isSelected && (
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            openZen();
                          }}
                          className="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-600/10 rounded-lg transition"
                          title="Open Zen Player"
                          aria-label="Open Zen Player"
                        >
                          <Maximize2 className="w-4 h-4" />
                        </button>
                      )}

                      <button
                        onClick={(e) => handleDeleteEpisode(ep.id, e)}
                        className="p-2 text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-lg transition"
                        title="Delete article"
                        aria-label="Delete article"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}