import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useMedia } from "../contexts/MediaContext";
import { useAuth } from "../contexts/AuthContext";
import { listMedia } from "../services/supabase";
import { mediaTypes } from "../services/mediaService";
import { FiTrendingUp, FiCalendar, FiAward } from "react-icons/fi";
import MediaCarousel from "../components/media/MediaCarousel";
import { getImageUrl } from "../services/tmdbApi";

const HomePage = () => {
  const [media, setMedia] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { user } = useAuth();

  useEffect(() => {
    const loadMedia = async () => {
      try {
        setLoading(true);
        setError(null);
        const { data, error } = await listMedia();

        if (error) {
          throw new Error(error);
        }

        setMedia(data || []);
      } catch (err) {
        console.error("Error loading media:", err);
        setError("Не удалось загрузить контент");
      } finally {
        setLoading(false);
      }
    };

    loadMedia();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen bg-campfire-dark pt-20">
        <div className="container-custom py-12">
          <div className="flex justify-center items-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-campfire-dark pt-20">
        <div className="container-custom py-12">
          <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
            {error}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-campfire-dark pt-20">
      <div className="container-custom py-12">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-campfire-light">
            Добро пожаловать в CampFire
          </h1>
          {user?.role === "admin" && (
            <Link to="/admin/media" className="btn-secondary">
              Управление контентом
            </Link>
          )}
        </div>

        {media.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {media.map((item) => (
              <Link
                key={`${item.id}-${item.type}`}
                to={`/media/${item.id}`}
                className="group"
              >
                <div className="bg-campfire-charcoal rounded-lg overflow-hidden shadow-lg border border-campfire-ash/20 transition-all duration-300 hover:shadow-xl hover:border-campfire-amber/30">
                  <div className="aspect-[2/3] relative">
                    <img
                      src={item.poster_url}
                      alt={item.title}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-campfire-charcoal/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  </div>
                  <div className="p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-medium px-2 py-1 rounded-full bg-campfire-amber/20 text-campfire-amber">
                        {item.type === "movie" ? "Фильм" : "Сериал"}
                      </span>
                      <span className="text-sm text-campfire-ash">
                        {new Date(item.release_date).getFullYear()}
                      </span>
                    </div>
                    <h3 className="text-lg font-semibold text-campfire-light mb-1 group-hover:text-campfire-amber transition-colors">
                      {item.title}
                    </h3>
                    <p className="text-sm text-campfire-ash line-clamp-2">
                      {item.description}
                    </p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <p className="text-campfire-ash text-lg">
              Пока нет доступного контента
            </p>
            {user?.role === "admin" && (
              <Link to="/admin/media" className="inline-block mt-4 btn-primary">
                Добавить контент
              </Link>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default HomePage;