"use client";

import { LoaderCircle, Music2, RefreshCw } from "lucide-react";
import { AudioPlayerCard } from "@/features/audio/components/audio-player-card";
import { useAudioFiles } from "@/features/audio/hooks/use-audio-files";

export function AudioPageContent() {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isError,
    isFetchingNextPage,
    isLoading,
    refetch,
  } = useAudioFiles();
  const audioFiles = data?.pages.flatMap((page) => page.data) ?? [];

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col pb-28 md:pb-8">
      <header className="border-b border-border bg-card/80 px-4 py-5 backdrop-blur sm:px-6 sm:py-6">
        <div className="flex items-center gap-3">
          <div className="flex size-12 items-center justify-center rounded-2xl bg-[#2EC4B6]/15 text-[#168f84] dark:text-[#52dbd0]">
            <Music2 className="size-6" />
          </div>
          <div>
            <h1 className="text-xl font-extrabold text-card-foreground sm:text-2xl">
              فایل‌های صوتی
            </h1>
            <p className="mt-1 text-sm text-muted-foreground">
              گوش بدهید و با ایده‌های تازه همراه شوید
            </p>
          </div>
        </div>
      </header>

      <main className="flex flex-1 flex-col gap-4 px-4 py-5 sm:px-6 sm:py-6">
        {isLoading ? (
          Array.from({ length: 3 }).map((_, index) => (
            <div
              key={index}
              className="h-40 animate-pulse rounded-[2rem] bg-card shadow-soft-sm"
            />
          ))
        ) : isError ? (
          <div className="flex min-h-64 flex-col items-center justify-center rounded-[2rem] bg-card px-6 text-center shadow-soft-sm">
            <p className="text-base font-bold text-card-foreground">
              دریافت فایل‌های صوتی ممکن نشد
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              {error instanceof Error ? error.message : "لطفاً دوباره تلاش کنید."}
            </p>
            <button
              type="button"
              onClick={() => void refetch()}
              className="mt-5 inline-flex items-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-bold text-primary-foreground transition-opacity hover:opacity-90"
            >
              <RefreshCw className="size-4" />
              تلاش دوباره
            </button>
          </div>
        ) : audioFiles.length === 0 ? (
          <div className="flex min-h-64 flex-col items-center justify-center rounded-[2rem] bg-card px-6 text-center shadow-soft-sm">
            <Music2 className="size-10 text-muted-foreground" />
            <p className="mt-4 text-base font-bold text-card-foreground">
              هنوز فایل صوتی منتشر نشده است
            </p>
          </div>
        ) : (
          <>
            {audioFiles.map((audioFile) => (
              <AudioPlayerCard key={audioFile.id} audioFile={audioFile} />
            ))}

            {hasNextPage ? (
              <button
                type="button"
                disabled={isFetchingNextPage}
                onClick={() => void fetchNextPage()}
                className="mx-auto mt-2 inline-flex min-h-11 items-center gap-2 rounded-xl border border-border bg-card px-5 py-2.5 text-sm font-bold text-card-foreground shadow-soft-sm transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60"
              >
                {isFetchingNextPage ? (
                  <LoaderCircle className="size-4 animate-spin" />
                ) : null}
                {isFetchingNextPage ? "در حال دریافت..." : "نمایش بیشتر"}
              </button>
            ) : null}
          </>
        )}
      </main>
    </div>
  );
}