"use client";

import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Search, Filter, Eye, Pencil, Trash2, Plus } from "lucide-react";
import Link from "next/link";
import { getArticleByCategory, getArticlePagination } from "@/service/article";
import { formatDate } from "@/utils/global";
import { close, loading } from "@/config/swal";
import Cookies from "js-cookie";

export default function NewsImage() {
  const [articles, setArticles] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [search, setSearch] = useState("");
  const [levelId, setLevelId] = useState<string | undefined>();
  const [categories, setupCategory] = useState<any[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<number | null>(null);

  useEffect(() => {
    const ulne = Cookies.get("ulne");
    setLevelId(ulne);
  }, []);

  useEffect(() => {
    fetchCategory();
  }, []);

  const fetchCategory = async () => {
    const res = await getArticleByCategory();
    if (res?.data?.data) {
      setupCategory(res.data.data);
    }
  };

  useEffect(() => {
    fetchData();
  }, [page, search, selectedCategory]);

  async function fetchData() {
    loading();

    const req = {
      limit: "10",
      page: page,
      title: search,
      source: "internal",
      categoryId: selectedCategory,
      search: "",
      sort: "desc",
      sortBy: "created_at",
    };
    const res = await getArticlePagination(req);

    const data = res?.data?.data || [];

    setArticles(data);
    setTotalPage(res?.data?.meta?.totalPage || 1);

    close();
  }

  const getStatus = (article: any) => {
    if (article.isDraft) return "Draft";

    if (article.publishStatus?.toLowerCase() === "cancel") {
      return "Pending";
    }

    if (article.isPublish) return "Published";

    return "Pending";
  };

  const statusVariant = (status: string) => {
    const value = status.toLowerCase();

    if (value === "published") {
      return "bg-green-100 text-green-700";
    }

    if (value === "pending") {
      return "bg-yellow-100 text-yellow-700";
    }

    if (value === "draft") {
      return "bg-gray-200 text-gray-600";
    }

    return "bg-gray-200 text-gray-600";
  };

  const getCategoryCount = (title: string) => {
    return articles.filter((article) =>
      article.categories?.some((c: any) => c.title === title),
    ).length;
  };

  const filteredArticles =
    selectedCategory === null
      ? articles
      : articles.filter((article) =>
          article.categories?.some((c: any) => c.id === selectedCategory),
        );

  return (
    <div className="space-y-6">
      {/* ================= HEADER ================= */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-slate-800">
            News & Articles
          </h1>
          <p className="text-sm text-slate-500 mt-1">
            Create and manage news articles and blog posts
          </p>
        </div>
        {levelId === "3" && (
          <Link href={"/admin/news-article/image/create"}>
            <Button className="bg-blue-600 hover:bg-blue-700 rounded-lg">
              <Plus className="w-4 h-4 mr-2" />
              Create New Article
            </Button>
          </Link>
        )}
      </div>
      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          variant={selectedCategory === null ? "default" : "outline"}
          onClick={() => {
            setSelectedCategory(null);
            setPage(1);
          }}
        >
          <div className="flex items-center gap-1">
            All
            <span className="text-xs bg-slate-200 px-2 py-0.5 rounded-full">
              {articles.length}
            </span>
          </div>
        </Button>

        {categories.map((cat: any) => (
          <Button
            key={cat.id}
            size="sm"
            variant={selectedCategory === cat.id ? "default" : "outline"}
            onClick={() => {
              setSelectedCategory(cat.id);
              setPage(1);
            }}
          >
            <div className="flex items-center gap-1">
              {cat.title}
              <span className="text-xs bg-white text-black px-2 py-0.5 rounded-full ">
                {getCategoryCount(cat.title)}
              </span>
            </div>
          </Button>
        ))}
      </div>
      {/* ================= SEARCH ================= */}
      <div className="flex gap-3">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
          <Input
            placeholder="Search articles..."
            className="pl-9"
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>

        <Button variant="outline" className="rounded-lg">
          <Filter className="w-4 h-4 mr-2" />
          Filters
        </Button>
      </div>

      {/* ================= TABLE ================= */}
      <Card className="rounded-2xl border shadow-sm">
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="pl-3">Article</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Author</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Date</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {filteredArticles.length > 0 ? (
                filteredArticles.map((article, index) => (
                  <TableRow key={article.id}>
                    <TableCell className="font-medium max-w-xs pl-3">
                      {article.title}
                    </TableCell>

                    <TableCell>
                      <Badge variant="secondary">
                        {article?.categories
                          ?.map((c: any) => c.title)
                          .join(", ")}
                      </Badge>
                    </TableCell>

                    <TableCell>
                      {article.customCreatorName || article.createdByName}
                    </TableCell>

                    <TableCell>
                      {(() => {
                        const status = getStatus(article);

                        return (
                          <span
                            className={`px-3 py-1 text-xs rounded-full font-medium ${statusVariant(
                              status,
                            )}`}
                          >
                            {status}
                          </span>
                        );
                      })()}
                    </TableCell>

                    <TableCell>{formatDate(article.createdAt)}</TableCell>

                    <TableCell className="text-right space-x-2">
                      <Link
                        href={`/admin/news-article/image/detail/${article.id}`}
                      >
                        <Button size="icon" variant="ghost">
                          <Eye className="w-4 h-4" />
                        </Button>
                      </Link>
                      <Button size="icon" variant="ghost">
                        <Pencil className="w-4 h-4" />
                      </Button>
                      <Button size="icon" variant="ghost">
                        <Trash2 className="w-4 h-4 text-red-500" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    No data available
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>

          {/* ================= PAGINATION ================= */}
          <div className="flex items-center justify-between p-4 border-t text-sm text-slate-500">
            <p>
              Page {page} of {totalPage}
            </p>

            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={page === 1}
                onClick={() => setPage(page - 1)}
              >
                Previous
              </Button>

              <Button size="sm" className="bg-blue-600">
                {page}
              </Button>

              <Button
                variant="outline"
                size="sm"
                disabled={page === totalPage}
                onClick={() => setPage(page + 1)}
              >
                Next
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}