"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import EscortCard from "./escort-card";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Escort = any;

interface HomepageData {
  availableNow: Escort[];
  featured: Escort[];
  mostViewed: Escort[];
  trending: Escort[];
  newJoiners: Escort[];
}

export default function HomepageEscorts() {
  const [data, setData] = useState<HomepageData | null>(null);

  useEffect(() => {
    fetch("/api/homepage")
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => d && setData(d))
      .catch(() => {});
  }, []);

  if (
    !data ||
    ![
      data.availableNow,
      data.featured,
      data.mostViewed,
      data.newJoiners,
    ].some((escorts) => escorts.length > 0)
  ) {
    return null;
  }

  return (
    <div className="space-y-12">
      {data.availableNow.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-5">
            <div className="flex items-center gap-3">
              <span className="relative flex h-3 w-3">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
                <span className="relative inline-flex h-3 w-3 rounded-full bg-green-400" />
              </span>
              <h2 className="text-xl md:text-2xl font-bold">Available Now</h2>
            </div>
            <Link href="/escorts/available-now" className="text-sm text-primary hover:text-primary-light transition-colors font-medium">View All</Link>
          </div>
          <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-surface-light snap-x snap-mandatory">
            {data.availableNow.map((escort: Escort) => (
              <div key={escort.id} className="flex-shrink-0 w-44 md:w-48 snap-start">
                <EscortCard escort={escort} />
              </div>
            ))}
          </div>
        </section>
      )}

      {data.featured.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-xl md:text-2xl font-bold">Featured Escorts</h2>
            <Link href="/escorts" className="text-sm text-primary hover:text-primary-light transition-colors font-medium">View All</Link>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {data.featured.map((escort: Escort) => (
              <EscortCard key={escort.id} escort={escort} />
            ))}
          </div>
        </section>
      )}

      {data.mostViewed.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-xl md:text-2xl font-bold">Most Viewed</h2>
            <Link href="/escorts?sort=popular" className="text-sm text-primary hover:text-primary-light transition-colors font-medium">View All</Link>
          </div>
          <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-surface-light snap-x snap-mandatory">
            {data.mostViewed.map((escort: Escort) => (
              <div key={escort.id} className="flex-shrink-0 w-44 md:w-48 snap-start">
                <EscortCard escort={escort} />
              </div>
            ))}
          </div>
        </section>
      )}

      {data.newJoiners.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-xl md:text-2xl font-bold">Just Joined</h2>
            <Link href="/escorts?sort=newest" className="text-sm text-primary hover:text-primary-light transition-colors font-medium">View All</Link>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {data.newJoiners.map((escort: Escort) => (
              <EscortCard key={escort.id} escort={escort} />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}