"use client";

import { useEffect, useState } from "react";
import api from "@/api/axios";
import Footer from "@/components/Footer";
import OfferCard from "@/components/offers/OfferCard";
import OffersEmptyState from "@/components/offers/OffersEmptyState";
import OffersSectionHeader from "@/components/offers/OffersSectionHeader";
import { useLanguage } from "@/context/LanguageContext";
import { Offer } from "@/types/offer";

function extractOffers(payload: any): Offer[] {
  const data = payload?.data;

  if (Array.isArray(data)) return data;
  if (Array.isArray(data?.data)) return data.data;

  return [];
}

export default function OffersPage() {
  const { lang, t } = useLanguage();
  const [offers, setOffers] = useState<Offer[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    const loadOffers = async () => {
      try {
        setLoading(true);
        setError(false);

        const response = await api.get("/offers", {
          headers: {
            "Accept-Language": lang,
          },
        });

        setOffers(extractOffers(response.data));
      } catch (e) {
        console.error("Error fetching offers:", e);
        setError(true);
      } finally {
        setLoading(false);
      }
    };

    loadOffers();
  }, [lang]);

  return (
    <div className="min-h-screen bg-white text-gray-800">
      <section className="relative overflow-hidden bg-[#FBF9F9] pt-12 pb-16 md:pt-14 md:pb-20">
        <div
          className="absolute inset-0 opacity-75"
          style={{
            backgroundImage:
              "linear-gradient(to right, rgba(46,53,83,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(46,53,83,0.05) 1px, transparent 1px)",
            backgroundSize: "44px 44px",
          }}
        />
        <div className="absolute top-[88px] left-[6%] h-14 w-14 bg-[#F8E8EF]" />
        <div className="absolute top-[70px] right-[10%] h-16 w-16 bg-[#F8E8EF]" />
        <div className="absolute left-0 right-0 top-0 h-[3px] bg-[#2897F3]" />

        <div className="relative z-10 mx-auto max-w-7xl px-4 md:px-6">
          <OffersSectionHeader />

          <div className="mt-10">
            {loading ? (
              <div className="min-h-[320px] flex items-center justify-center">
                <div className="flex flex-col items-center gap-4 text-[#FF3D8E]">
                  <div className="w-10 h-10 border-4 border-pink-200 border-t-[#FF3D8E] rounded-full animate-spin" />
                  <p className="text-sm font-medium">{t("loading_offers")}</p>
                </div>
              </div>
            ) : error ? (
              <div className="min-h-[260px] flex items-center justify-center text-center text-[#777184]">
                {t("offers_load_error")}
              </div>
            ) : offers.length === 0 ? (
              <OffersEmptyState />
            ) : (
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {offers.map((offer) => (
                  <OfferCard key={offer.id} offer={offer} />
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}