'use client';

import Link from 'next/link';
import { useState } from 'react';
import type { Episode, OffsetMeta } from '@/types';
import { routes } from '@/lib/routes';
import { getEpisodes } from '@/lib/api/services/spotlight';
import { PlayIcon } from '@/components/icons/common';

interface EpisodesGridProps {
  initial: Episode[];
  meta: OffsetMeta;
  batchSize: number;
}

export default function EpisodesGrid({ initial, meta, batchSize }: EpisodesGridProps) {
  const [episodes, setEpisodes] = useState(initial);
  const [hasMore, setHasMore] = useState(meta.hasMore);
  const [loading, setLoading] = useState(false);

  const loadMore = async () => {
    setLoading(true);
    try {
      const next = await getEpisodes(episodes.length, batchSize);
      setEpisodes((current) => [...current, ...next.data]);
      setHasMore(Boolean(next.meta?.hasMore));
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="row g-4" id="epGrid">
        {episodes.map((episode) => {
          const body = (
            <>
              <div className="episode-image">
                <img src={episode.image} alt={episode.name} />{' '}
                <span className="episode-play">
                  <PlayIcon />
                </span>
              </div>
              <div className="episode-meta text-xs mt-2">CMO Spotlight &middot; {episode.episodeLabel}</div>
              <div className="episode-title text-lg mt-1">{episode.name}</div>
              <div className="episode-role text-sm">{episode.role}</div>
            </>
          );
          return (
            <div className="col-12 col-sm-6 col-lg-3 episode-col" key={episode.id}>
              <div className="episode-card">
                {/* Own slug only — never fall back to the featured interview (that made every card open the same video). */}
                {episode.slug ? <Link href={routes.editorial(episode.slug)}>{body}</Link> : body}
              </div>
            </div>
          );
        })}
      </div>

      {hasMore && (
        <div className="d-flex justify-content-center mt-4 mt-md-5">
          <button
            type="button"
            id="epLoadMore"
            className="button-style btn-outline-white text-sm fw-600 text-uppercase"
            onClick={loadMore}
            disabled={loading}
          >
            Load More
          </button>
        </div>
      )}
    </>
  );
}