"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { Calendar, Tag, ArrowRight, Newspaper, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import FadeIn from "@/components/animations/FadeIn";
import { getNewsPageArticles } from "@/services/pages/public/news/client";
import type { NewsPageArticle, NewsPageMeta } from "@/services/pages/public/news";

const categoryColors: Record<string, string> = {
  "Company News": "bg-blue-500/10 text-blue-600",
  Expansion: "bg-green-500/10 text-green-600",
  Training: "bg-orange-500/10 text-orange-600",
  Technology: "bg-purple-500/10 text-purple-600",
  Certification: "bg-cyan-500/10 text-cyan-600",
};

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("en-GB", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

interface Props {
  initialData: NewsPageArticle[];
  initialMeta: NewsPageMeta | null;
}

export function NewsGrid({ initialData, initialMeta }: Props) {
  const [page, setPage] = useState(1);
  const [data, setData] = useState(initialData);
  const [meta, setMeta] = useState(initialMeta);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (page === 1) {
      setData(initialData);
      setMeta(initialMeta);
      return;
    }
    setLoading(true);
    getNewsPageArticles(page)
      .then(({ data: d, meta: m }) => {
        setData(d);
        setMeta(m);
      })
      .finally(() => setLoading(false));
  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps

  const lastPage = meta?.last_page ?? 1;

  if (data.length === 0 && !loading) {
    return (
      <div className="text-center py-24 text-muted-foreground">
        <Newspaper size={48} className="mx-auto mb-4 opacity-30" />
        <p>No news articles published yet.</p>
      </div>
    );
  }

  return (
    <>
      <div
        className={`grid sm:grid-cols-2 lg:grid-cols-3 gap-6 transition-opacity duration-200 ${loading ? "opacity-50 pointer-events-none" : ""}`}
      >
        {data.map((article, i) => (
          <FadeIn key={`${article.slug}-${i}`} delay={i * 0.06}>
            <Link
              href={`/news/${article.slug}`}
              className="group petro-card flex flex-col overflow-hidden h-full"
            >
              <div className="relative h-52 overflow-hidden">
                {article.image_url ? (
                  <Image
                    src={article.image_url}
                    alt={article.title}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                ) : (
                  <div className="absolute inset-0 bg-muted flex items-center justify-center">
                    <Newspaper className="w-12 h-12 text-muted-foreground/30" />
                  </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-primary/30 to-transparent" />
                <span
                  className={`absolute top-3 left-3 inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full ${categoryColors[article.category] ?? "bg-accent/10 text-accent"}`}
                >
                  <Tag size={10} />
                  {article.category}
                </span>
              </div>
              <div className="p-6 flex flex-col flex-1">
                <h3 className="font-bold text-foreground mb-3 group-hover:text-accent transition-colors leading-snug flex-1">
                  {article.title}
                </h3>
                <p className="text-sm text-muted-foreground leading-relaxed mb-4 line-clamp-3">
                  {article.excerpt}
                </p>
                <div className="flex items-center justify-between pt-4 border-t border-border">
                  <span className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Calendar size={12} />
                    {formatDate(article.published_at)}
                  </span>
                  <span className="flex items-center gap-1 text-xs font-semibold text-accent group-hover:gap-2 transition-all">
                    Read <ArrowRight size={12} />
                  </span>
                </div>
              </div>
            </Link>
          </FadeIn>
        ))}
      </div>

      {lastPage > 1 && (
        <div className="mt-10 flex items-center justify-center gap-4">
          <Button
            variant="outline"
            size="icon"
            disabled={page <= 1 || loading}
            onClick={() => setPage((p) => p - 1)}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <span className="text-sm text-muted-foreground">
            Page {page} of {lastPage}
          </span>
          <Button
            variant="outline"
            size="icon"
            disabled={page >= lastPage || loading}
            onClick={() => setPage((p) => p + 1)}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      )}
    </>
  );
}