"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import useSWR from "swr";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import NewsService from "@/services/news.service";
import type { News, NewsListResponse } from "@/types/news.type";
import { format } from "date-fns";
import { id } from "date-fns/locale";

import MaterialSymbolsArrowRightAltIcon from "@/components/icons/material-symbols/arrow-right-alt";

// Fallback data
const FALLBACK_NEWS: News[] = [
  {
    id: "1",
    title: "Home Care untuk Konsultasi Kesehatan Fleksibel dan Nyaman",
    slug: "home-care",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "Home Care", slug: "home-care" },
    tags: [],
  },
  {
    id: "2",
    title: "Stunting Anak di Jogja Masih Tinggi, Data Terbaru Perlu Diperhatikan",
    slug: "stunting-anak",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "KIA", slug: "kia" },
    tags: [],
  },
  {
    id: "3",
    title: "Pentingnya Imunisasi Rutin untuk Cegah Penyakit Menular pada Anak",
    slug: "imunisasi-rutin",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "Vaksinasi", slug: "vaksinasi" },
    tags: [],
  },
  {
    id: "4",
    title: "Tips Menjaga Kesehatan Gigi dan Mulut untuk Keluarga",
    slug: "kesehatan-gigi",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "Poli Gigi", slug: "poli-gigi" },
    tags: [],
  },
  {
    id: "5",
    title: "Pemeriksaan Kesehatan Rutin: Investasi Terbaik untuk Masa Depan",
    slug: "pemeriksaan-rutin",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "MCU", slug: "mcu" },
    tags: [],
  },
  {
    id: "6",
    title: "Mengenal Layanan Sunat Modern dengan Teknologi Terkini",
    slug: "sunat-modern",
    excerpt: "",
    content: "",
    imageUrl: "/assets/home/news.jpg",
    status: "PUBLISHED",
    isFeatured: false,
    isRecommended: false,
    viewCount: 0,
    publishedAt: new Date().toISOString(),
    category: { id: "1", name: "Sunat", slug: "sunat" },
    tags: [],
  },
];

const formatDate = (dateString?: string) => {
  if (!dateString) return "";
  try {
    return format(new Date(dateString), "d MMMM yyyy", { locale: id });
  } catch {
    return "";
  }
};

const BeritaTopicSection = () => {
  const [page, setPage] = useState(1);
  const limit = 6;

  const { data: newsData, isLoading } = useSWR<NewsListResponse>(
    `/news?page=${page}&limit=${limit}`,
    () => NewsService.getAll({ page, limit }),
    {
      revalidateOnFocus: false,
    }
  );

  const news = newsData?.news || FALLBACK_NEWS;
  const totalPages = newsData?.pagination?.totalPages || 1;

  return (
    <section className="bg-background-custom py-12">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex flex-col mb-8">
          <h2 className="font-medium text-[56px] text-text-sub leading-tight tracking-[-2.8px]">
            Berita Kesehatan untuk anda
          </h2>
          <p className="text-[25px] text-[rgba(56,54,54,0.8)] mt-2">
            Info dan tips kesehatan ditinjau oleh dokter.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-6">
          {isLoading
            ? Array.from({ length: 6 }).map((_, idx) => (
                <div key={`topic-skeleton-${idx}`} className="flex items-center gap-4">
                  <Skeleton className="w-81 h-68.5 rounded-2xl shrink-0" />
                  <div className="flex flex-col gap-4 flex-1">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-24 w-full" />
                    <Skeleton className="h-6 w-28" />
                  </div>
                </div>
              ))
            : news.map((item) => (
                <div key={item.id} className="flex items-center gap-4">
                  {/* Thumbnail */}
                  <div className="relative w-81 h-68.5 shrink-0 rounded-2xl overflow-hidden shadow-md">
                    <Image
                      src={item.imageUrl || "/assets/home/news.jpg"}
                      alt={item.title}
                      fill
                      className="object-cover"
                    />
                  </div>

                  {/* Content */}
                  <div className="flex flex-col gap-4 h-full justify-between">
                    <div className="flex gap-4 justify-between text-[12px] text-black/60 tracking-[-0.48px]">
                      <span>{formatDate(item.publishedAt)}</span>
                      <span>by Adera clinic</span>
                    </div>

                    <h3 className="font-semibold text-[30px] text-black leading-tight tracking-[-1.2px] line-clamp-4">
                      {item.title}
                    </h3>

                    <Link
                      href={`/berita/${item.slug}`}
                      className="inline-flex items-center gap-2 text-[#003dd8] font-semibold text-[22px] tracking-[-0.88px] underline hover:text-[#003dd8]/80 transition-colors"
                    >
                      Selengkapnya
                      <MaterialSymbolsArrowRightAltIcon className="size-6 text-primary" />
                    </Link>
                  </div>
                </div>
              ))}
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex justify-center gap-2 mt-8">
            <Button
              variant="outline"
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1 || isLoading}
            >
              Sebelumnya
            </Button>
            <span className="px-4 py-2">
              Halaman {page} dari {totalPages}
            </span>
            <Button
              variant="outline"
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages || isLoading}
            >
              Selanjutnya
            </Button>
          </div>
        )}
      </div>
    </section>
  );
};

export default BeritaTopicSection;