"use client";

import { useEffect, useState } from "react";
import DonationCard from "./components/DonationCard";
import DonationFilters from "./components/DonationFilters";
import { getDonationList } from "@/lib/api/apis";
import { useDonations } from "@/context/DonationContext";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function DonateListPage() {
  const { donations, setDonations, categories, setCategories } = useDonations();
  const [activeFilter, setActiveFilter] = useState("all");
  const { language } = useLanguage();
  const t = getTranslation(language).donateListPage;

  useEffect(() => {
    (async () => {
      const res = await getDonationList();

      const allSections = res.data.sections;
      const allItems =
        allSections.find((s: any) => s.key === "all")?.list || [];

      setDonations(allItems);
      setCategories(res.data.all_category);
    })();
  }, []);

  const filtered =
    activeFilter === "all"
      ? donations
      : donations.filter((d: any) => d.category_id === activeFilter);

  return (
    <div className="min-h-screen bg-[#FFF8F0] px-4 py-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <h1 className="text-2xl md:text-3xl font-bold text-center">{t.title}</h1>

        <DonationFilters
          active={activeFilter}
          setActive={setActiveFilter}
          categories={categories}
        />

        <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((item: any) => (
            <DonationCard
              key={item.donation_id}
              data={{
                id: item.donation_id,
                title: language === "hindi" ? item.title_hi : item.title,
                image: item.thumbnail,
                target: Number(item.total_amount),
                raised: Number(item.total_raised),
                remaining: Number(item.remaining_amount),
                backers: Number(item.total_donors),
                progressPercent: Number(item.progress_percent),
                endDate: item.end_date,
                daysLeft: Math.max(
                  0,
                  Math.ceil(
                    (new Date(item.end_date).getTime() - Date.now()) /
                      (1000 * 60 * 60 * 24),
                  ),
                ),
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}