import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { apiFetch } from '../lib/api';

interface Video {
  id: string;
  title: string;
  description: string;
  requiredLevel: number;
  locked: boolean;
  thumbnailUrl?: string;
}

interface VideosResponse {
  success: boolean;
  data: { videos: Video[] };
}

export default function HomePage() {
  const [videos, setVideos] = useState<Video[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiFetch<VideosResponse>('/videos')
      .then((res) => setVideos(res.data.videos))
      .catch(() => setVideos([]))
      .finally(() => setLoading(false));
  }, []);

  const free    = videos.filter((v) => !v.locked);
  const premium = videos.filter((v) => v.locked);

  return (
    <div className="flex flex-col gap-10">

      {/* Hero */}
      <section className="border-b border-od-border pb-8">
        <h1 className="text-2xl font-semibold text-od-text">Vidéos & formations</h1>
        <p className="mt-2 text-sm text-od-muted">
          Contenu libre et premium — connecte-toi pour accéder aux formations complètes.
        </p>
      </section>

      {loading && (
        <div className="grid gap-4 sm:grid-cols-2">
          {[...Array(4)].map((_, i) => <VideoCardSkeleton key={i} />)}
        </div>
      )}

      {!loading && (
        <>
          {free.length > 0 && (
            <section>
              <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-muted">
                Accès libre
              </h2>
              <div className="grid gap-4 sm:grid-cols-2">
                {free.map((v) => <VideoCard key={v.id} video={v} />)}
              </div>
            </section>
          )}

          {premium.length > 0 && (
            <section>
              <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-accent">
                Premium
              </h2>
              <div className="grid gap-4 sm:grid-cols-2">
                {premium.map((v) => <VideoCard key={v.id} video={v} />)}
              </div>
            </section>
          )}

          {videos.length === 0 && (
            <p className="text-sm text-od-muted">Aucune vidéo disponible pour l'instant.</p>
          )}
        </>
      )}

    </div>
  );
}

function VideoCard({ video }: { video: Video }) {
  const inner = (
    <div className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4 transition-colors hover:border-od-accent/40">
      {/* Thumbnail */}
      <div className="relative h-28 overflow-hidden rounded bg-od-surface-hi">
        {video.thumbnailUrl && (
          <img
            src={video.thumbnailUrl}
            alt={video.title}
            className="h-full w-full object-cover"
          />
        )}
        {video.locked && (
          <div className="absolute inset-0 flex items-center justify-center bg-od-bg/70">
            <span className="font-mono text-lg text-od-accent">⊘</span>
          </div>
        )}
      </div>

      <p className="text-sm font-medium text-od-text leading-snug">{video.title}</p>

      {video.description && (
        <p className="text-xs text-od-muted line-clamp-2">{video.description}</p>
      )}

      <div className="flex items-center gap-2">
        {video.locked ? (
          <span className="rounded border border-od-accent px-2 py-0.5 font-mono text-xs text-od-accent">
            Premium
          </span>
        ) : (
          <span className="rounded border border-od-border px-2 py-0.5 font-mono text-xs text-od-muted">
            Libre
          </span>
        )}
      </div>
    </div>
  );

  if (video.locked) return <div className="cursor-not-allowed opacity-75">{inner}</div>;

  return <Link to={`/video/${video.id}`}>{inner}</Link>;
}

function VideoCardSkeleton() {
  return (
    <div className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
      <div className="h-28 rounded bg-od-surface-hi animate-pulse" />
      <div className="h-3 w-3/4 rounded bg-od-surface-hi animate-pulse" />
      <div className="h-2 w-1/2 rounded bg-od-surface-hi animate-pulse" />
    </div>
  );
}