"use client";

import { useMemo, useState } from "react";
import { MainHeader } from "@/components/layout/main-header";
import { MainFooter } from "@/components/shared/main-footer";
import { ArticleCard } from "@/components/shared/article-card";
import { EmptyState } from "@/components/ui/empty-state";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { useArticlesQuery } from "@/hooks/queries/api-hooks";
import { useLocale } from "@/providers/locale-provider";

export default function ArticlesPage() {
  const { locale } = useLocale();
  const isArabic = locale === "ar";
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);

  const queryParams = useMemo(
    () => ({
      page,
      per_page: 12,
      search: search || undefined,
      sort: "latest",
    }),
    [page, search],
  );

  const articlesQuery = useArticlesQuery(queryParams);
  const articles = articlesQuery.data?.items ?? [];
  const meta = articlesQuery.data?.meta;

  return (
    <div>
      <MainHeader />
      <main className="container-shell section-space space-y-5">
        <section className="surface-card p-5">
          <h1 className="text-[1.7rem] font-black text-slate-900">{isArabic ? "المقالات" : "Articles"}</h1>
          <p className="mt-2 text-sm text-slate-500">
            {isArabic ? "مقالات ونصائح احترافية للتوفير الذكي." : "Professional articles and smart savings guides."}
          </p>
          <div className="mt-4 max-w-md">
            <Input
              value={search}
              onChange={(event) => {
                setSearch(event.target.value);
                setPage(1);
              }}
              placeholder={isArabic ? "ابحث في المقالات..." : "Search articles..."}
            />
          </div>
        </section>

        {articlesQuery.isLoading ? (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            {Array.from({ length: 6 }).map((_, idx) => (
              <Skeleton key={`article-skeleton-${idx}`} className="h-80 rounded-2xl" />
            ))}
          </div>
        ) : articles.length === 0 ? (
          <EmptyState
            title={isArabic ? "لا توجد مقالات" : "No articles"}
            description={isArabic ? "لم يتم نشر أي مقالات حتى الآن." : "No articles are published yet."}
          />
        ) : (
          <>
            <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
              {articles.map((article) => (
                <ArticleCard key={`article-list-${article.id}`} article={article} locale={locale} />
              ))}
            </section>

            <div className="flex items-center justify-between rounded-2xl border border-[var(--border)] bg-white p-4">
              <p className="text-sm text-slate-500">
                {isArabic ? "صفحة" : "Page"} {meta?.current_page ?? 1} / {meta?.last_page ?? 1}
              </p>
              <div className="flex gap-2">
                <Button
                  variant="secondary"
                  onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                  disabled={(meta?.current_page ?? 1) <= 1}
                >
                  {isArabic ? "السابق" : "Previous"}
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => setPage((prev) => prev + 1)}
                  disabled={(meta?.current_page ?? 1) >= (meta?.last_page ?? 1)}
                >
                  {isArabic ? "التالي" : "Next"}
                </Button>
              </div>
            </div>
          </>
        )}
      </main>
      <MainFooter />
    </div>
  );
}