"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Article, Folder } from "@/lib/types";
import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings";
import { useTTS } from "@/hooks/useTTS";
import { ArticleList } from "@/components/ArticleList";
import { Reader } from "@/components/Reader";
import { SettingsPanel } from "@/components/SettingsPanel";
import { TTSControls } from "@/components/TTSControls";
import { AddArticle } from "@/components/AddArticle";
import {
  BookOpen,
  Star,
  Archive,
  Menu,
  Search,
  FolderIcon,
  Settings,
  X,
  CheckSquare,
  ArchiveRestore,
  ArrowUpDown,
} from "lucide-react";
import Link from "next/link";

type FilterType = "all" | "favorites" | "archived" | "folder" | "search";
type SortType = "newest" | "oldest" | "title-asc" | "title-desc";

// Simple client-side cache for instant section switching
const articleCache = new Map<string, { data: Article[]; timestamp: number }>();
const CACHE_TTL = 30000; // 30 seconds

export default function Home() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [folders, setFolders] = useState<Folder[]>([]);
  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
  const [filter, setFilter] = useState<FilterType>("all");
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [isSearching, setIsSearching] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [stats, setStats] = useState<{ streak: number; todayCount: number } | null>(null);
  const [isSelectMode, setIsSelectMode] = useState(false);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [isBulkUpdating, setIsBulkUpdating] = useState(false);
  const [sortBy, setSortBy] = useState<SortType>("newest");
  const [showSortMenu, setShowSortMenu] = useState(false);

  const [readerSettings, setReaderSettings] = useReaderSettings();
  const [ttsSettings, setTTSSettings] = useTTSSettings();

  const tts = useTTS({
    settings: ttsSettings,
    text: selectedArticle?.textContent || "",
  });

  // Apply theme (with auto-scheduling)
  useEffect(() => {
    if (readerSettings.autoTheme) {
      const hour = new Date().getHours();
      const isDaytime = hour >= 6 && hour < 18;
      const theme = isDaytime ? readerSettings.dayTheme : readerSettings.nightTheme;
      document.documentElement.setAttribute("data-theme", theme);
    } else {
      document.documentElement.setAttribute("data-theme", readerSettings.theme);
    }
  }, [readerSettings]);

  // Sort articles client-side
  const sortArticles = useCallback((articles: Article[], sort: SortType): Article[] => {
    const sorted = [...articles];
    switch (sort) {
      case "newest":
        return sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
      case "oldest":
        return sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
      case "title-asc":
        return sorted.sort((a, b) => a.title.localeCompare(b.title));
      case "title-desc":
        return sorted.sort((a, b) => b.title.localeCompare(a.title));
      default:
        return sorted;
    }
  }, []);

  // Fetch articles with caching
  const fetchArticles = useCallback(async (skipCache = false) => {
    const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;

    // Check cache first for instant display
    if (!skipCache) {
      const cached = articleCache.get(cacheKey);
      if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
        setArticles(sortArticles(cached.data, sortBy));
        setIsLoading(false);
        return;
      }
    }

    try {
      let url = `/api/articles?filter=${filter}`;
      if (filter === "folder" && selectedFolderId) {
        url = `/api/articles?folderId=${selectedFolderId}`;
      }
      const response = await fetch(url);
      if (response.ok) {
        const data = await response.json();
        // Cache the raw data
        articleCache.set(cacheKey, { data, timestamp: Date.now() });
        setArticles(sortArticles(data, sortBy));
      }
    } catch (error) {
      console.error("Failed to fetch articles:", error);
    } finally {
      setIsLoading(false);
    }
  }, [filter, selectedFolderId, sortBy, sortArticles]);

  // Fetch folders
  const fetchFolders = useCallback(async () => {
    try {
      const response = await fetch("/api/folders");
      if (response.ok) {
        setFolders(await response.json());
      }
    } catch (error) {
      console.error("Failed to fetch folders:", error);
    }
  }, []);

  // Fetch stats
  const fetchStats = useCallback(async () => {
    try {
      const response = await fetch("/api/stats?days=7");
      if (response.ok) {
        const data = await response.json();
        const today = new Date().toISOString().split("T")[0];
        const todayStats = data.daily.find((d: { date: string }) => d.date === today);
        setStats({
          streak: data.streak,
          todayCount: todayStats?.articlesRead || 0,
        });
      }
    } catch (error) {
      console.error("Failed to fetch stats:", error);
    }
  }, []);

  useEffect(() => {
    fetchArticles();
    fetchFolders();
    fetchStats();
  }, [fetchArticles, fetchFolders, fetchStats]);

  // Re-sort when sort changes (use cached data for instant response)
  useEffect(() => {
    const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;
    const cached = articleCache.get(cacheKey);
    if (cached) {
      setArticles(sortArticles(cached.data, sortBy));
    }
  }, [sortBy, filter, selectedFolderId, sortArticles]);

  // Search
  const handleSearch = async () => {
    if (!searchQuery.trim()) {
      setFilter("all");
      return;
    }

    setIsSearching(true);
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
      if (response.ok) {
        const data = await response.json();
        setArticles(data);
        setFilter("search");
      }
    } catch (error) {
      console.error("Search failed:", error);
    } finally {
      setIsSearching(false);
    }
  };

  // Add article
  const handleAddArticle = async (url: string) => {
    const response = await fetch("/api/articles", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ url }),
    });

    if (!response.ok) {
      const data = await response.json();
      throw new Error(data.error || "Failed to add article");
    }

    articleCache.clear();
    await fetchArticles(true);
    fetchStats();
  };

  // Toggle favorite
  const handleToggleFavorite = async (id: string, isFavorite: boolean) => {
    await fetch(`/api/articles/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ isFavorite }),
    });

    setArticles((prev) =>
      prev.map((a) => (a.id === id ? { ...a, isFavorite } : a))
    );

    if (selectedArticle?.id === id) {
      setSelectedArticle((prev) => (prev ? { ...prev, isFavorite } : null));
    }
  };

  // Toggle archive
  const handleToggleArchive = async (id: string, isArchived: boolean) => {
    await fetch(`/api/articles/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ isArchived }),
    });

    articleCache.clear();
    await fetchArticles(true);
    fetchStats();

    if (selectedArticle?.id === id) {
      setSelectedArticle(null);
    }
  };

  // Delete article
  const handleDelete = async (id: string) => {
    await fetch(`/api/articles/${id}`, { method: "DELETE" });
    articleCache.clear();
    await fetchArticles(true);

    if (selectedArticle?.id === id) {
      setSelectedArticle(null);
    }
  };

  // Fetch full article (with content) when opening for reading
  const handleSelectArticle = async (article: Article) => {
    // If article already has content, use it directly
    if (article.content && article.textContent) {
      setSelectedArticle(article);
      return;
    }
    // Otherwise fetch full article
    try {
      const response = await fetch(`/api/articles/${article.id}`);
      if (response.ok) {
        const fullArticle = await response.json();
        setSelectedArticle(fullArticle);
      }
    } catch (error) {
      console.error("Failed to fetch article:", error);
    }
  };

  // Toggle article selection
  const handleToggleSelect = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  // Select all visible articles
  const handleSelectAll = () => {
    if (selectedIds.size === articles.length) {
      setSelectedIds(new Set());
    } else {
      setSelectedIds(new Set(articles.map((a) => a.id)));
    }
  };

  // Bulk archive/unarchive
  const handleBulkArchive = async (archive: boolean) => {
    if (selectedIds.size === 0) return;
    setIsBulkUpdating(true);
    try {
      await fetch("/api/articles", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ids: Array.from(selectedIds),
          updates: { isArchived: archive },
        }),
      });
      // Clear cache to force refresh
      articleCache.clear();
      await fetchArticles(true);
      setSelectedIds(new Set());
      setIsSelectMode(false);
      fetchStats();
    } catch (error) {
      console.error("Bulk update failed:", error);
    } finally {
      setIsBulkUpdating(false);
    }
  };

  // Exit select mode
  const exitSelectMode = () => {
    setIsSelectMode(false);
    setSelectedIds(new Set());
  };

  // Reading view
  if (selectedArticle) {
    return (
      <>
        <Reader
          article={selectedArticle}
          settings={readerSettings}
          onBack={() => {
            tts.stop();
            setSelectedArticle(null);
          }}
          onToggleFavorite={() =>
            handleToggleFavorite(selectedArticle.id, !selectedArticle.isFavorite)
          }
          onToggleArchive={() => {
            handleToggleArchive(selectedArticle.id, !selectedArticle.isArchived);
          }}
          onDelete={() => {
            handleDelete(selectedArticle.id);
          }}
          onOpenSettings={() => setIsSettingsOpen(true)}
        >
          <TTSControls
            isPlaying={tts.isPlaying}
            isPaused={tts.isPaused}
            isLoading={tts.isLoading}
            currentTime={tts.currentTime}
            duration={tts.duration}
            progress={tts.progress}
            onPlay={tts.play}
            onPause={tts.pause}
            onResume={tts.resume}
            onStop={tts.stop}
            onSeek={tts.seek}
          />
        </Reader>
        <SettingsPanel
          isOpen={isSettingsOpen}
          onClose={() => setIsSettingsOpen(false)}
          readerSettings={readerSettings}
          onReaderSettingsChange={setReaderSettings}
          ttsSettings={ttsSettings}
          onTTSSettingsChange={setTTSSettings}
          availableVoices={tts.voices}
        />
      </>
    );
  }

  // List view
  return (
    <div className="min-h-screen flex">
      {/* Sidebar */}
      <aside
        className={`${
          isSidebarOpen ? "w-64" : "w-0"
        } flex-shrink-0 border-r border-[var(--border)] transition-all duration-200 overflow-hidden`}
      >
        <div className="w-64 h-full flex flex-col">
          <div className="p-4 border-b border-[var(--border)]">
            <h1 className="text-xl font-bold flex items-center gap-2">
              <BookOpen className="w-6 h-6" />
              ReadLater
            </h1>
            {stats && stats.streak > 0 && (
              <p className="text-xs text-[var(--muted)] mt-1">
                🔥 {stats.streak} day streak
              </p>
            )}
          </div>

          <nav className="flex-1 p-2 overflow-y-auto">
            {/* Main filters */}
            {[
              { value: "all", label: "To Read", icon: BookOpen },
              { value: "favorites", label: "Favorites", icon: Star },
              { value: "archived", label: "Archived", icon: Archive },
            ].map(({ value, label, icon: Icon }) => (
              <button
                key={value}
                onClick={() => {
                  setFilter(value as FilterType);
                  setSelectedFolderId(null);
                  setSearchQuery("");
                }}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                  filter === value && !selectedFolderId
                    ? "bg-[var(--accent)] text-white"
                    : "text-[var(--foreground)] hover:bg-[var(--surface)]"
                }`}
              >
                <Icon className="w-5 h-5" />
                {label}
              </button>
            ))}

            {/* Folders */}
            {folders.length > 0 && (
              <div className="mt-4 pt-4 border-t border-[var(--border)]">
                <p className="px-4 py-2 text-xs text-[var(--muted)] uppercase tracking-wide">
                  Folders
                </p>
                {folders.map((folder) => (
                  <button
                    key={folder.id}
                    onClick={() => {
                      setFilter("folder");
                      setSelectedFolderId(folder.id);
                      setSearchQuery("");
                    }}
                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                      selectedFolderId === folder.id
                        ? "bg-[var(--accent)] text-white"
                        : "text-[var(--foreground)] hover:bg-[var(--surface)]"
                    }`}
                  >
                    <FolderIcon
                      className="w-5 h-5"
                      style={{ color: selectedFolderId === folder.id ? "white" : folder.color }}
                    />
                    {folder.name}
                  </button>
                ))}
              </div>
            )}
          </nav>

          <div className="p-2 border-t border-[var(--border)]">
            <Link
              href="/settings"
              className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
            >
              <Settings className="w-5 h-5" />
              Settings
            </Link>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 flex flex-col min-w-0">
        {/* Select mode bar */}
        {isSelectMode ? (
          <header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)] bg-[var(--accent)]/10">
            <button
              onClick={exitSelectMode}
              className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
            <span className="font-medium">
              {selectedIds.size} selected
            </span>
            <button
              onClick={handleSelectAll}
              className="text-sm text-[var(--accent)] hover:underline"
            >
              {selectedIds.size === articles.length ? "Deselect all" : "Select all"}
            </button>
            <div className="flex-1" />
            {filter === "archived" ? (
              <button
                onClick={() => handleBulkArchive(false)}
                disabled={selectedIds.size === 0 || isBulkUpdating}
                className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
              >
                <ArchiveRestore className="w-4 h-4" />
                {isBulkUpdating ? "Moving..." : "Unarchive"}
              </button>
            ) : (
              <button
                onClick={() => handleBulkArchive(true)}
                disabled={selectedIds.size === 0 || isBulkUpdating}
                className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
              >
                <Archive className="w-4 h-4" />
                {isBulkUpdating ? "Archiving..." : "Archive"}
              </button>
            )}
          </header>
        ) : (
          <header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
            <button
              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
              className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
            >
              <Menu className="w-5 h-5" />
            </button>

            {/* Search */}
            <div className="flex-1 flex items-center gap-2 max-w-md">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                  placeholder="Search articles..."
                  className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm"
                />
                {searchQuery && (
                  <button
                    onClick={() => {
                      setSearchQuery("");
                      setFilter("all");
                      fetchArticles();
                    }}
                    className="absolute right-3 top-1/2 -translate-y-1/2"
                  >
                    <X className="w-4 h-4 text-[var(--muted)]" />
                  </button>
                )}
              </div>
            </div>

            <span className="text-[var(--muted)] text-sm">
              {articles.length} articles
            </span>

            {/* Sort dropdown */}
            <div className="relative">
              <button
                onClick={() => setShowSortMenu(!showSortMenu)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
              >
                <ArrowUpDown className="w-4 h-4" />
                <span className="hidden sm:inline">
                  {sortBy === "newest" && "Newest"}
                  {sortBy === "oldest" && "Oldest"}
                  {sortBy === "title-asc" && "A-Z"}
                  {sortBy === "title-desc" && "Z-A"}
                </span>
              </button>
              {showSortMenu && (
                <>
                  <div
                    className="fixed inset-0 z-10"
                    onClick={() => setShowSortMenu(false)}
                  />
                  <div className="absolute right-0 top-full mt-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg z-20 py-1 min-w-[140px]">
                    {[
                      { value: "newest", label: "Newest first" },
                      { value: "oldest", label: "Oldest first" },
                      { value: "title-asc", label: "Title A-Z" },
                      { value: "title-desc", label: "Title Z-A" },
                    ].map((option) => (
                      <button
                        key={option.value}
                        onClick={() => {
                          setSortBy(option.value as SortType);
                          setShowSortMenu(false);
                        }}
                        className={`w-full px-4 py-2 text-left text-sm hover:bg-[var(--surface)] transition-colors ${
                          sortBy === option.value ? "text-[var(--accent)] font-medium" : ""
                        }`}
                      >
                        {option.label}
                      </button>
                    ))}
                  </div>
                </>
              )}
            </div>

            {articles.length > 0 && (
              <button
                onClick={() => setIsSelectMode(true)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
              >
                <CheckSquare className="w-4 h-4" />
                Select
              </button>
            )}
          </header>
        )}

        <AddArticle onAdd={handleAddArticle} />

        <div className="flex-1 overflow-y-auto">
          {isLoading || isSearching ? (
            <div className="flex items-center justify-center h-64">
              <div className="animate-pulse text-[var(--muted)]">
                {isSearching ? "Searching..." : "Loading..."}
              </div>
            </div>
          ) : (
            <ArticleList
              articles={articles}
              isSelectMode={isSelectMode}
              selectedIds={selectedIds}
              onSelect={handleSelectArticle}
              onToggleSelect={handleToggleSelect}
              onToggleFavorite={handleToggleFavorite}
              onToggleArchive={handleToggleArchive}
              onDelete={handleDelete}
            />
          )}
        </div>
      </main>

      <SettingsPanel
        isOpen={isSettingsOpen}
        onClose={() => setIsSettingsOpen(false)}
        readerSettings={readerSettings}
        onReaderSettingsChange={setReaderSettings}
        ttsSettings={ttsSettings}
        onTTSSettingsChange={setTTSSettings}
        availableVoices={tts.voices}
      />
    </div>
  );
}