"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    file_url: string;
    file_alt: string;
  }[];
};

export default function Opini() {
  const [opini, setOpini] = useState<Article[]>([]);
  const [jagaNegeri, setJagaNegeri] = useState<Article[]>([]);
  const [showDataOpini, setShowDataOpini] = useState("4");
  const [showData, setShowData] = useState("3");

  useEffect(() => {
    fetchOpini();
    fetchJagaNegeri();
  }, []);

  async function fetchOpini() {
    try {
      const res = await getListArticle({
        limit: showDataOpini,
        search: "",
        page: 1,
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });
      setOpini(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load Opini:", err);
    }
  }

  async function fetchJagaNegeri() {
    try {
      const res = await getListArticle({
        limit: showData,
        search: "",
        page: 1,
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });
      setJagaNegeri(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load Jaga Negeri:", err);
    }
  }

  return (
    <section className="w-full px-4 md:px-12 pt-8">
      <div className="max-w-screen-xl mx-auto flex flex-col md:flex-row gap-8 justify-between">
        {/* OPINI */}
        <div className="w-full md:w-4/12">
          <h2 className="text-xl font-semibold pb-2 flex items-center justify-between">
            OPINI
            <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
            <span className="text-gray-400 text-sm">‹ ›</span>
          </h2>

          <div className="mt-6 space-y-6">
            {opini.map((item) => (
              <div
                key={item.id}
                className="flex items-start gap-4 border-b pb-4"
              >
                <Image
                  src={item.thumbnailUrl || "/dummy.jpg"}
                  alt={item.title}
                  width={109}
                  height={70}
                  className="w-[109px] h-16 object-cover"
                />
                <div>
                  <p className="text-sm font-medium font-serif">{item.title}</p>
                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                    >
                      <g fill="none">
                        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" />
                        <path
                          fill="currentColor"
                          d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z"
                        />
                      </g>
                    </svg>
                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-4 w-4"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                      />
                    </svg>
                    0
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* JAGA NEGERI */}
        <div className="w-full md:w-7/12">
          <h2 className="text-xl font-semibold border-b pb-2 flex items-center justify-between">
            JAGA NEGERI
            <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
            <span className="text-gray-400 text-sm">‹ ›</span>
          </h2>

          {jagaNegeri.length > 0 && (
            <div className="mt-6 flex flex-col md:flex-row gap-6">
              <div className="w-full md:w-[455px]">
                <Image
                  src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
                  alt={jagaNegeri[0].title}
                  width={700}
                  height={400}
                  className="w-full h-[330px] object-cover"
                />
                <p className="text-lg mt-4 font-serif">{jagaNegeri[0].title}</p>
                <p className="text-xs text-gray-500 mt-1 flex items-center gap-2">
                  {new Date(jagaNegeri[0].createdAt).toLocaleDateString(
                    "id-ID",
                    {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    }
                  )}
                </p>
              </div>

              <div className="w-full md:w-4/12 flex flex-col gap-4">
                {jagaNegeri.slice(1).map((item) => (
                  <div key={item.id} className="flex flex-col gap-3">
                    <Image
                      src={item.thumbnailUrl || "/dummy.jpg"}
                      alt={item.title}
                      width={100}
                      height={70}
                      className="w-full md:w-[227px] h-auto md:h-[151px] object-cover"
                    />
                    <p className="text-sm font-serif font-medium leading-snug">
                      {item.title}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="relative my-5 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-cover"
        />
      </div>
    </section>
  );
}