"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import AppImage from "@/components/ui/AppImage";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import { pickAds } from "@/lib/ads";
import { createClient } from "@/lib/supabase/client";
import SidebarAdStack from "@/components/SidebarAdStack";

interface SavedArticle {
  id: string;
  articleSlug: string;
  articleTitle: string;
  articleExcerpt: string;
  articleImage: string;
  articleImageAlt: string;
  articleCategory: string;
  articleAuthor: string;
  articleReadTime: string;
  articleDate: string;
  savedAt: string;
}

export default function ReadingListPage() {
  const [savedArticles, setSavedArticles] = useState<SavedArticle[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState<any>(null);
  const [removingId, setRemovingId] = useState<string | null>(null);
  const [toast, setToast] = useState<string | null>(null);
  const supabase = createClient();

  useEffect(() => {
    const init = async () => {
      const { data } = await supabase?.auth?.getUser();
      setCurrentUser(data?.user ?? null);
      if (data?.user) {
        await fetchReadingList(data.user.id);
      } else {
        setLoading(false);
      }
    };
    init();
  }, []);

  const fetchReadingList = async (userId: string) => {
    setLoading(true);
    try {
      const { data, error } = await supabase
        ?.from("reading_list")
        ?.select("*")
        ?.eq("user_id", userId)
        ?.order("saved_at", { ascending: false });

      if (!error && data) {
        setSavedArticles(
          data.map((row: any) => ({
            id: row.id,
            articleSlug: row.article_slug,
            articleTitle: row.article_title,
            articleExcerpt: row.article_excerpt ?? "",
            articleImage: row.article_image ?? "",
            articleImageAlt: row.article_image_alt ?? row.article_title,
            articleCategory: row.article_category ?? "",
            articleAuthor: row.article_author ?? "",
            articleReadTime: row.article_read_time ?? "",
            articleDate: row.article_date ?? "",
            savedAt: row.saved_at,
          }))
        );
      }
    } catch {
      // Silent fail
    } finally {
      setLoading(false);
    }
  };

  const handleRemove = async (id: string, slug: string) => {
    if (!currentUser) return;
    setRemovingId(id);
    try {
      await supabase
        ?.from("reading_list")
        ?.delete()
        ?.eq("id", id)
        ?.eq("user_id", currentUser.id);
      setSavedArticles((prev) => prev.filter((a) => a.id !== id));
      setToast("Removed from reading list");
      setTimeout(() => setToast(null), 2500);
    } catch {
      setToast("Failed to remove article");
      setTimeout(() => setToast(null), 2500);
    } finally {
      setRemovingId(null);
    }
  };

  const handleClearAll = async () => {
    if (!currentUser || savedArticles.length === 0) return;
    try {
      await supabase
        ?.from("reading_list")
        ?.delete()
        ?.eq("user_id", currentUser.id);
      setSavedArticles([]);
      setToast("Reading list cleared");
      setTimeout(() => setToast(null), 2500);
    } catch {
      setToast("Failed to clear reading list");
      setTimeout(() => setToast(null), 2500);
    }
  };

  return (
    <>
      <Header />
      <main className="bg-[#F8FAFC] min-h-screen">
      <aside className="float-right ml-6 mb-6 hidden lg:block max-w-[300px]"><SidebarAdStack /></aside>
        {/* Toast */}
        {toast && (
          <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-[#FFFFFF] border border-[#1D4ED8] text-[#e0e0e0] font-body text-sm px-5 py-3 rounded-sm shadow-lg flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1D4ED8" strokeWidth="2.5" aria-hidden="true">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            {toast}
          </div>
        )}

        {/* Page Header */}
        <div className="bg-[#F8FAFC] border-b border-[#1e1e1e]">
          <div className="max-w-container mx-auto px-4 py-2.5">
            <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-xs font-body text-[#555]">
              <Link href="/home-page" className="hover:text-[#1D4ED8] transition-colors">Home</Link>
              <span aria-hidden="true">/</span>
              <span className="text-[#888]">Reading List</span>
            </nav>
          </div>
        </div>

        <div className="max-w-container mx-auto px-4 py-8 md:py-10">
          {/* Title Row */}
          <div className="flex items-center justify-between mb-8 pb-4 border-b border-[#DCE6F2]">
            <div className="flex items-center gap-3">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1D4ED8" strokeWidth="2" aria-hidden="true">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
              </svg>
              <h1 className="font-heading text-xl md:text-2xl font-bold text-[#0F172A]">Reading List</h1>
              {savedArticles.length > 0 && (
                <span className="font-body text-xs text-[#666] bg-[#FFFFFF] border border-[#DCE6F2] px-2 py-0.5 rounded-sm">
                  {savedArticles.length} {savedArticles.length === 1 ? "article" : "articles"}
                </span>
              )}
            </div>
            {savedArticles.length > 0 && (
              <button
                onClick={handleClearAll}
                className="font-body text-xs text-[#555] hover:text-red-400 transition-colors uppercase tracking-wide focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]">
                Clear All
              </button>
            )}
          </div>

          {/* States */}
          {loading ? (
            <div className="space-y-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-sm p-4 animate-pulse">
                  <div className="flex gap-4">
                    <div className="w-28 h-20 bg-[#DCE6F2] rounded-sm flex-shrink-0" />
                    <div className="flex-1 space-y-2">
                      <div className="h-3 bg-[#DCE6F2] rounded w-1/4" />
                      <div className="h-4 bg-[#DCE6F2] rounded w-3/4" />
                      <div className="h-3 bg-[#DCE6F2] rounded w-1/2" />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : !currentUser ? (
            <div className="text-center py-20">
              <div className="w-16 h-16 mx-auto mb-5 flex items-center justify-center bg-[#FFFFFF] border border-[#DCE6F2] rounded-full">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#555" strokeWidth="1.5" aria-hidden="true">
                  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                </svg>
              </div>
              <h2 className="font-heading text-lg font-bold text-[#e0e0e0] mb-2">Sign in to view your reading list</h2>
              <p className="font-body text-sm text-[#666] mb-6 max-w-sm mx-auto">
                Create an account or sign in to save articles and access them anytime.
              </p>
              <Link
                href="/home-page"
                className="inline-block btn-subscribe px-6 py-2.5 text-sm font-body font-bold uppercase tracking-wide">
                Browse Articles
              </Link>
            </div>
          ) : savedArticles.length === 0 ? (
            <div className="text-center py-20">
              <div className="w-16 h-16 mx-auto mb-5 flex items-center justify-center bg-[#FFFFFF] border border-[#DCE6F2] rounded-full">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#555" strokeWidth="1.5" aria-hidden="true">
                  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                </svg>
              </div>
              <h2 className="font-heading text-lg font-bold text-[#e0e0e0] mb-2">Your reading list is empty</h2>
              <p className="font-body text-sm text-[#666] mb-6 max-w-sm mx-auto">
                Save articles from any article page to read them later.
              </p>
              <Link
                href="/home-page"
                className="inline-block btn-subscribe px-6 py-2.5 text-sm font-body font-bold uppercase tracking-wide">
                Discover Articles
              </Link>
            </div>
          ) : (
            <div className="space-y-4">
              {savedArticles.map((item) => (
                <div
                  key={item.id}
                  className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-sm hover:border-[#3a3a3a] transition-colors group">
                  <div className="flex gap-4 p-4">
                    {/* Thumbnail */}
                    <Link
                      href={`/articles/${item.articleSlug}`}
                      className="flex-shrink-0 w-28 h-20 overflow-hidden rounded-sm img-zoom">
                      {item.articleImage ? (
                        <AppImage
                          src={item.articleImage}
                          alt={item.articleImageAlt}
                          width={112}
                          height={80}
                          className="w-full h-full object-cover" />
                      ) : (
                        <div className="w-full h-full bg-[#DCE6F2] flex items-center justify-center">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#444" strokeWidth="1.5" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2" />
                            <circle cx="8.5" cy="8.5" r="1.5" />
                            <polyline points="21 15 16 10 5 21" />
                          </svg>
                        </div>
                      )}
                    </Link>

                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex-1 min-w-0">
                          {item.articleCategory && (
                            <span className="inline-block font-body text-[9px] font-bold uppercase tracking-widest text-[#1D4ED8] mb-1">
                              {item.articleCategory}
                            </span>
                          )}
                          <Link href={`/articles/${item.articleSlug}`}>
                            <h2 className="font-heading text-sm md:text-base font-bold text-[#e0e0e0] group-hover:text-[#1D4ED8] transition-colors leading-snug line-clamp-2 mb-1">
                              {item.articleTitle}
                            </h2>
                          </Link>
                          {item.articleExcerpt && (
                            <p className="font-body text-xs text-[#777] leading-relaxed line-clamp-2 mb-2 hidden sm:block">
                              {item.articleExcerpt}
                            </p>
                          )}
                          <div className="flex flex-wrap items-center gap-2 text-[10px] font-body text-[#555]">
                            {item.articleAuthor && <span>{item.articleAuthor}</span>}
                            {item.articleAuthor && item.articleDate && <span>·</span>}
                            {item.articleDate && <span>{item.articleDate}</span>}
                            {item.articleReadTime && (
                              <>
                                <span>·</span>
                                <span className="text-[#444]">{item.articleReadTime}</span>
                              </>
                            )}
                          </div>
                        </div>

                        {/* Remove Button */}
                        <button
                          onClick={() => handleRemove(item.id, item.articleSlug)}
                          disabled={removingId === item.id}
                          aria-label={`Remove "${item.articleTitle}" from reading list`}
                          className="flex-shrink-0 w-7 h-7 flex items-center justify-center text-[#444] hover:text-red-400 hover:bg-[#2a1a1a] rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] disabled:opacity-50">
                          {removingId === item.id ? (
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="animate-spin" aria-hidden="true">
                              <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
                              <path d="M12 2a10 10 0 0 1 10 10" />
                            </svg>
                          ) : (
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                              <polyline points="3 6 5 6 21 6" />
                              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                              <path d="M10 11v6M14 11v6" />
                              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                            </svg>
                          )}
                        </button>
                      </div>
                    </div>
                  </div>

                  {/* Read Article Link */}
                  <div className="border-t border-[#222] px-4 py-2 flex items-center justify-between">
                    <span className="font-body text-[10px] text-[#444] uppercase tracking-wide">
                      Saved {new Date(item.savedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                    </span>
                    <Link
                      href={`/articles/${item.articleSlug}`}
                      className="font-body text-[10px] font-bold uppercase tracking-wide text-[#1D4ED8] hover:text-[#1E3A8A] transition-colors">
                      Read Article →
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* In-content 728x90 banner */}
        {pickAds("728x90", 1).length > 0 && (
          <div className="max-w-container mx-auto px-4 mt-10 mb-6 hidden md:flex justify-center" aria-label="Advertisement">
            <AdImage ad={pickAds("728x90", 1)[0]} page="reading-list" />
          </div>
        )}
      </main>
      <Footer />
    </>
  );
}
