Update 35 files

- /src/api.ts
- /src/lib/utils.ts
- /src/lib/neoApi.ts
- /src/lib/mongodb.ts
- /src/lib/favoritesApi.ts
- /src/lib/models/Favorite.ts
- /src/hooks/useTMDBMovies.ts
- /src/hooks/useImageLoader.ts
- /src/hooks/useMovies.ts
- /src/types/movie.ts
- /src/components/SearchResults.tsx
- /src/components/SettingsContent.tsx
- /src/components/MovieCard.tsx
- /src/components/FavoriteButton.tsx
- /src/components/admin/MovieSearch.tsx
- /src/app/page.tsx
- /src/app/movie/[id]/page.tsx
- /src/app/movie/[id]/MovieContent.tsx
- /src/app/api/movies/upcoming/route.ts
- /src/app/api/movies/search/route.ts
- /src/app/api/movies/top-rated/route.ts
- /src/app/api/movies/[id]/route.ts
- /src/app/api/movies/popular/route.ts
- /src/app/api/favorites/route.ts
- /src/app/api/favorites/check/[mediaId]/route.ts
- /src/app/api/favorites/[mediaId]/route.ts
- /src/app/tv/[id]/TVShowContent.tsx
- /src/app/tv/[id]/TVShowPage.tsx
- /src/app/tv/[id]/page.tsx
- /src/app/favorites/page.tsx
- /src/configs/auth.ts
- /next.config.js
- /package.json
- /README.md
- /package-lock.json

src/app/api/favorites/[mediaId]/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { connectToDatabase } from '@/lib/mongodb';
+
+// DELETE /api/favorites/[mediaId] - удалить из избранного
+export async function DELETE(
+  request: Request,
+  { params }: { params: { mediaId: string } }
+) {
+  try {
+    const session = await getServerSession();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const mediaType = searchParams.get('mediaType');
+    const mediaId = params.mediaId;
+
+    if (!mediaType || !mediaId) {
+      return NextResponse.json({ error: 'Missing mediaType or mediaId' }, { status: 400 });
+    }
+
+    const { db } = await connectToDatabase();
+
+    const result = await db.collection('favorites').deleteOne({
+      userId: session.user.email,
+      mediaId,
+      mediaType
+    });
+
+    if (result.deletedCount === 0) {
+      return NextResponse.json({ error: 'Favorite not found' }, { status: 404 });
+    }
+
+    return NextResponse.json({ message: 'Removed from favorites' });
+  } catch (error) {
+    console.error('Error removing from favorites:', error);
+    return NextResponse.json({ error: 'Failed to remove from favorites' }, { status: 500 });
+  }
+}

src/app/api/favorites/check/[mediaId]/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { connectToDatabase } from '@/lib/mongodb';
+
+// GET /api/favorites/check/[mediaId] - проверить есть ли в избранном
+export async function GET(
+  request: Request,
+  { params }: { params: { mediaId: string } }
+) {
+  try {
+    const session = await getServerSession();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const mediaType = searchParams.get('mediaType');
+
+    const { db } = await connectToDatabase();
+
+    const favorite = await db.collection('favorites').findOne({
+      userId: session.user.email,
+      mediaId: params.mediaId,
+      mediaType
+    });
+
+    return NextResponse.json({ isFavorite: !!favorite });
+  } catch (error) {
+    console.error('Error checking favorite:', error);
+    return NextResponse.json({ error: 'Failed to check favorite status' }, { status: 500 });
+  }
+}

src/app/api/favorites/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { connectToDatabase, resetIndexes } from '@/lib/mongodb';
+
+// Флаг для отслеживания инициализации
+let isInitialized = false;
+
+// GET /api/favorites - получить все избранные
+export async function GET() {
+  try {
+    // Инициализируем индексы при первом запросе
+    if (!isInitialized) {
+      await resetIndexes();
+      isInitialized = true;
+    }
+
+    const session = await getServerSession();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { db } = await connectToDatabase();
+    const favorites = await db.collection('favorites')
+      .find({ userId: session.user.email })
+      .sort({ createdAt: -1 })
+      .toArray();
+
+    return NextResponse.json(favorites);
+  } catch (error) {
+    console.error('Error getting favorites:', error);
+    return NextResponse.json({ error: 'Failed to get favorites' }, { status: 500 });
+  }
+}
+
+// POST /api/favorites - добавить в избранное
+export async function POST(request: Request) {
+  try {
+    // Инициализируем индексы при первом запросе
+    if (!isInitialized) {
+      await resetIndexes();
+      isInitialized = true;
+    }
+
+    const session = await getServerSession();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { mediaId, mediaType, title, posterPath } = await request.json();
+    
+    if (!mediaId || !mediaType || !title) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    }
+
+    const { db } = await connectToDatabase();
+
+    const favorite = {
+      userId: session.user.email,
+      mediaId: mediaId.toString(), // Преобразуем в строку для консистентности
+      mediaType,
+      title,
+      posterPath,
+      createdAt: new Date()
+    };
+
+    // Используем updateOne с upsert вместо insertOne
+    const result = await db.collection('favorites').updateOne(
+      {
+        userId: session.user.email,
+        mediaId: favorite.mediaId,
+        mediaType
+      },
+      { $set: favorite },
+      { upsert: true }
+    );
+
+    // Если документ был обновлен (уже существовал)
+    if (result.matchedCount > 0) {
+      return NextResponse.json({ message: 'Already in favorites' }, { status: 200 });
+    }
+
+    // Если документ был создан (новый)
+    return NextResponse.json(favorite);
+  } catch (error) {
+    console.error('Error adding to favorites:', error);
+    return NextResponse.json({ error: 'Failed to add to favorites' }, { status: 500 });
+  }
+}

src/app/api/movies/[id]/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'https://api.themoviedb.org/3',
+  headers: {
+    'Authorization': `Bearer ${process.env.NEXT_PUBLIC_TMDB_ACCESS_TOKEN}`,
+    'Content-Type': 'application/json'
+  }
+});
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  const id = params.id;
+
+  try {
+    const response = await api.get(`/movie/${id}`, {
+      params: {
+        language: 'ru-RU',
+        append_to_response: 'credits,videos,similar'
+      }
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: any) {
+    console.error('Error fetching movie details:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch movie details' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

src/app/api/movies/popular/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'https://api.themoviedb.org/3',
+  headers: {
+    'Authorization': `Bearer ${process.env.NEXT_PUBLIC_TMDB_ACCESS_TOKEN}`,
+    'Content-Type': 'application/json'
+  }
+});
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const page = searchParams.get('page') || '1';
+
+  try {
+    const response = await api.get('/discover/movie', {
+      params: {
+        page,
+        language: 'ru-RU',
+        'vote_count.gte': 100,
+        'vote_average.gte': 1,
+        sort_by: 'popularity.desc',
+        include_adult: false,
+        'primary_release_date.lte': new Date().toISOString().split('T')[0]
+      }
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: any) {
+    console.error('Error fetching popular movies:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch movies' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

src/app/api/movies/search/route.ts

@@ -1,8 +1,5 @@
 import { NextResponse } from 'next/server';
-import { searchAPI } from '@/lib/api';
-
-const TMDB_API_KEY = process.env.TMDB_API_KEY;
-const TMDB_API_URL = 'https://api.themoviedb.org/3';
+import { searchAPI } from '@/lib/neoApi';
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
@@ -16,12 +13,15 @@ export async function GET(request: Request) {
   }
 
   try {
-    const { data } = await searchAPI.multiSearch(query);
-    return NextResponse.json(data);
-  } catch (error) {
+    const response = await searchAPI.multiSearch(query);
+    return NextResponse.json(response.data);
+  } catch (error: any) {
     console.error('Error searching:', error);
     return NextResponse.json(
-      { error: 'Failed to search' },
+      { 
+        error: 'Failed to search',
+        details: error.message
+      },
       { status: 500 }
     );
   }

src/app/api/movies/top-rated/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const page = searchParams.get('page') || '1';
+
+  const response = await fetch(
+    `https://api.themoviedb.org/3/movie/top_rated?page=${page}`,
+    {
+      headers: {
+        'Authorization': `Bearer ${process.env.TMDB_ACCESS_TOKEN}`,
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  const data = await response.json();
+  return NextResponse.json(data);
+}

src/app/api/movies/upcoming/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const page = searchParams.get('page') || '1';
+
+  const response = await fetch(
+    `https://api.themoviedb.org/3/movie/upcoming?page=${page}`,
+    {
+      headers: {
+        'Authorization': `Bearer ${process.env.TMDB_ACCESS_TOKEN}`,
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  const data = await response.json();
+  return NextResponse.json(data);
+}

src/app/favorites/page.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useSession } from 'next-auth/react';
+import { favoritesAPI } from '@/lib/favoritesApi';
+import { getImageUrl } from '@/lib/neoApi';
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+`;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  color: white;
+  margin-bottom: 2rem;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 2rem;
+`;
+
+const Card = styled(Link)`
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  transition: transform 0.2s;
+  text-decoration: none;
+
+  &:hover {
+    transform: translateY(-5px);
+  }
+`;
+
+const Poster = styled.div`
+  width: 100%;
+  aspect-ratio: 2/3;
+  object-fit: cover;
+`;
+
+const Info = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+`;
+
+const MediaTitle = styled.h2`
+  font-size: 1rem;
+  color: white;
+  margin: 0;
+`;
+
+const MediaType = styled.span`
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.7);
+`;
+
+const EmptyState = styled.div`
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 4rem 0;
+`;
+
+interface Favorite {
+  id: number;
+  mediaId: string;
+  mediaType: 'movie' | 'tv';
+  title: string;
+  posterPath: string;
+}
+
+export default function FavoritesPage() {
+  const { data: session } = useSession();
+  const [favorites, setFavorites] = useState<Favorite[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFavorites = async () => {
+      if (!session?.user) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await favoritesAPI.getFavorites();
+        setFavorites(response.data);
+      } catch (error) {
+        console.error('Error fetching favorites:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFavorites();
+  }, [session?.user]);
+
+  if (loading) {
+    return (
+      <Container>
+        <Title>Избранное</Title>
+        <EmptyState>Загрузка...</EmptyState>
+      </Container>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <Container>
+        <Title>Избранное</Title>
+        <EmptyState>
+          Для доступа к избранному необходимо авторизоваться
+        </EmptyState>
+      </Container>
+    );
+  }
+
+  if (favorites.length === 0) {
+    return (
+      <Container>
+        <Title>Избранное</Title>
+        <EmptyState>
+          У вас пока нет избранных фильмов и сериалов
+        </EmptyState>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <Title>Избранное</Title>
+      <Grid>
+        {favorites.map(favorite => (
+          <Card
+            key={`${favorite.mediaType}-${favorite.mediaId}`}
+            href={`/${favorite.mediaType === 'movie' ? 'movie' : 'tv'}/${favorite.mediaId}`}
+          >
+            <Poster>
+              <Image
+                src={favorite.posterPath ? getImageUrl(favorite.posterPath) : '/placeholder.jpg'}
+                alt={favorite.title}
+                width={200}
+                height={300}
+                className="rounded-lg"
+              />
+            </Poster>
+            <Info>
+              <MediaTitle>{favorite.title}</MediaTitle>
+              <MediaType>{favorite.mediaType === 'movie' ? 'Фильм' : 'Сериал'}</MediaType>
+            </Info>
+          </Card>
+        ))}
+      </Grid>
+    </Container>
+  );
+}

src/app/movie/[id]/MovieContent.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useEffect, useState, Suspense } from 'react';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { moviesAPI } from '@/lib/api';
+import { getImageUrl } from '@/lib/neoApi';
 import type { MovieDetails } from '@/lib/api';
 import { useSettings } from '@/hooks/useSettings';
 import MoviePlayer from '@/components/MoviePlayer';
+import FavoriteButton from '@/components/FavoriteButton';
 
 declare global {
   interface Window {
@@ -120,56 +122,39 @@ const ErrorContainer = styled.div`
   color: #ff4444;
 `;
 
-
 import { useParams } from 'next/navigation';
 
-export default function MovieContent() {
-  const { id: movieId } = useParams();
+interface MovieContentProps {
+  movieId: string;
+  initialMovie: MovieDetails;
+}
+
+export default function MovieContent({ movieId, initialMovie }: MovieContentProps) {
   const { settings } = useSettings();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [movie, setMovie] = useState<MovieDetails | null>(null);
+  const [movie] = useState<MovieDetails>(initialMovie);
   const [imdbId, setImdbId] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchMovie = async () => {
-      if (!movieId) return;
-      
+    const fetchImdbId = async () => {
       try {
-        setLoading(true);
-        const response = await moviesAPI.getMovie(movieId);
-        setMovie(response.data);
-
         const newImdbId = await moviesAPI.getImdbId(movieId);
-        if (!newImdbId) {
-          setError('IMDb ID не найден');
-          return;
+        if (newImdbId) {
+          setImdbId(newImdbId);
         }
-        setImdbId(newImdbId);
-
-        setError(null);
       } catch (err) {
-        console.error('Error fetching movie:', err);
-        setError('Ошибка при загрузке фильма');
-      } finally {
-        setLoading(false);
+        console.error('Error fetching IMDb ID:', err);
       }
     };
-
-    fetchMovie();
+    fetchImdbId();
   }, [movieId]);
 
-  if (loading) return <LoadingContainer>Загрузка...</LoadingContainer>;
-  if (error) return <ErrorContainer>{error}</ErrorContainer>;
-  if (!movie || !imdbId) return null;
-
   return (
     <Container>
       <Content>
         <MovieInfo>
           <PosterContainer>
             <Poster
-              src={movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : '/placeholder.jpg'}
+              src={getImageUrl(movie.poster_path)}
               alt={movie.title}
             />
           </PosterContainer>
@@ -188,19 +173,24 @@ export default function MovieContent() {
             </GenreList>
             {movie.tagline && <Tagline>{movie.tagline}</Tagline>}
             <Overview>{movie.overview}</Overview>
+            <div style={{ marginTop: '1rem' }}>
+              <FavoriteButton
+                mediaId={movie.id.toString()}
+                mediaType="movie"
+                title={movie.title}
+                posterPath={movie.poster_path}
+              />
+            </div>
           </Details>
         </MovieInfo>
 
-        <PlayerSection>
-          <Suspense fallback={<LoadingContainer>Загрузка плеера...</LoadingContainer>}>
-            <MoviePlayer
-              id={movie.id.toString()}
-              title={movie.title}
-              poster={movie.backdrop_path ? `https://image.tmdb.org/t/p/w1280${movie.backdrop_path}` : undefined}
+        {imdbId && (
+          <PlayerSection>
+            <MoviePlayer 
               imdbId={imdbId}
             />
-          </Suspense>
-        </PlayerSection>
+          </PlayerSection>
+        )}
       </Content>
     </Container>
   );

src/app/movie/[id]/page.tsx

@@ -1,5 +1,6 @@
-import MoviePage from './MoviePage';
+import { Metadata } from 'next';
 import { moviesAPI } from '@/lib/api';
+import MoviePage from '@/app/movie/[id]/MoviePage';
 
 interface PageProps {
   params: {
@@ -7,17 +8,34 @@ interface PageProps {
   };
 }
 
+// Генерация метаданных для страницы
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = params;
+  try {
+    const { data: movie } = await moviesAPI.getMovie(id);
+    return {
+      title: `${movie.title} - NeoMovies`,
+      description: movie.overview,
+    };
+  } catch (error) {
+    return {
+      title: 'Фильм - NeoMovies',
+    };
+  }
+}
+
+// Получение данных для страницы
 async function getData(id: string) {
   try {
-    const response = await moviesAPI.getMovie(id);
-    return { id, movie: response.data };
+    const { data: movie } = await moviesAPI.getMovie(id);
+    return { id, movie };
   } catch (error) {
-    console.error('Error fetching movie:', error);
-    return { id, movie: null };
+    throw new Error('Failed to fetch movie');
   }
 }
 
 export default async function Page({ params }: PageProps) {
-  const data = await getData(params.id);
+  const { id } = params;
+  const data = await getData(id);
   return <MoviePage movieId={data.id} movie={data.movie} />;
 }

src/app/page.tsx

@@ -7,6 +7,8 @@ import { HeartIcon } from '@/components/Icons/HeartIcon';
 import MovieCard from '@/components/MovieCard';
 import { useMovies } from '@/hooks/useMovies';
 import Pagination from '@/components/Pagination';
+import { getImageUrl } from '@/lib/neoApi';
+import FavoriteButton from '@/components/FavoriteButton';
 
 const Container = styled.div`
   min-height: 100vh;
@@ -19,15 +21,26 @@ const Container = styled.div`
   }
 `;
 
-const FeaturedMovie = styled.div`
+const FeaturedMovie = styled.div<{ $backdrop: string }>`
   position: relative;
   width: 100%;
   height: 600px;
+  background-image: ${props => `url(${props.$backdrop})`};
   background-size: cover;
   background-position: center;
   margin-bottom: 2rem;
   border-radius: 24px;
   overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
+  }
 `;
 
 const Overlay = styled.div`
@@ -36,14 +49,16 @@ const Overlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
   display: flex;
   align-items: center;
   padding: 2rem;
 `;
 
 const FeaturedContent = styled.div`
-  max-width: 600px;
+  position: relative;
+  z-index: 1;
+  max-width: 800px;
+  padding: 2rem;
   color: white;
 `;
 
@@ -64,49 +79,32 @@ const Title = styled.h1`
   font-size: 3rem;
   font-weight: bold;
   margin-bottom: 1rem;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 `;
 
-const Description = styled.p`
+const Overview = styled.p`
   font-size: 1.125rem;
   margin-bottom: 2rem;
   opacity: 0.9;
   line-height: 1.6;
 `;
 
-const ButtonGroup = styled.div`
+const ButtonContainer = styled.div`
   display: flex;
   gap: 1rem;
 `;
 
-const WatchButton = styled.div`
-  background: ${props => props.theme.colors.primary};
-  color: white;
+const WatchButton = styled.button`
   padding: 0.75rem 2rem;
+  background: #e50914;
+  color: white;
   border: none;
-  border-radius: 9999px;
+  border-radius: 0.5rem;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 
   &:hover {
-    background: #2563eb;
-  }
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const FavoriteButton = styled(WatchButton)`
-  background: rgba(255, 255, 255, 0.1);
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: #f40612;
   }
 `;
 
@@ -144,11 +142,7 @@ export default function HomePage() {
   return (
     <Container>
       {featuredMovie && (
-        <FeaturedMovie
-          style={{
-            backgroundImage: `url(https://image.tmdb.org/t/p/original${featuredMovie.backdrop_path})`,
-          }}
-        >
+        <FeaturedMovie $backdrop={getImageUrl(featuredMovie.backdrop_path, 'original')}>
           <Overlay>
             <FeaturedContent>
               <GenreTags>
@@ -157,21 +151,18 @@ export default function HomePage() {
                 ))}
               </GenreTags>
               <Title>{featuredMovie.title}</Title>
-              <Description>{featuredMovie.overview}</Description>
-              <ButtonGroup>
+              <Overview>{featuredMovie.overview}</Overview>
+              <ButtonContainer>
                 <Link href={`/movie/${featuredMovie.id}`}>
-                  <WatchButton>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M8 5v14l11-7z" />
-                    </svg>
-                    Смотреть
-                  </WatchButton>
+                  <WatchButton>Смотреть</WatchButton>
                 </Link>
-                <FavoriteButton as="button">
-                  <HeartIcon />
-                  В избранное
-                </FavoriteButton>
-              </ButtonGroup>
+                <FavoriteButton
+                  mediaId={featuredMovie.id.toString()}
+                  mediaType="movie"
+                  title={featuredMovie.title}
+                  posterPath={featuredMovie.poster_path}
+                />
+              </ButtonContainer>
             </FeaturedContent>
           </Overlay>
         </FeaturedMovie>

src/app/tv/[id]/TVShowContent.tsx

@@ -1,10 +1,10 @@
-'use client';
-
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Image from 'next/image';
-import type { TVShowDetails } from '@/lib/api';
+import type { TVShow } from '@/types/movie';
+import { tvShowsAPI, getImageUrl } from '@/lib/neoApi';
 import MoviePlayer from '@/components/MoviePlayer';
+import FavoriteButton from '@/components/FavoriteButton';
 
 const Container = styled.div`
   width: 100%;
@@ -12,17 +12,6 @@ const Container = styled.div`
   margin: 0 auto;
 `;
 
-const ShowInfo = styled.div`
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 2rem;
-  margin-bottom: 2rem;
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-`;
-
 const PosterContainer = styled.div`
   position: relative;
   width: 100%;
@@ -31,47 +20,42 @@ const PosterContainer = styled.div`
   overflow: hidden;
 `;
 
-const InfoContent = styled.div`
+const Info = styled.div`
   color: white;
 `;
 
 const Title = styled.h1`
-  font-size: 2.5rem;
+  font-size: 2rem;
   margin-bottom: 1rem;
+  color: white;
 `;
 
 const Overview = styled.p`
-  margin-bottom: 1.5rem;
+  color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
-`;
-
-const Stats = styled.div`
-  display: flex;
-  gap: 2rem;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-`;
-
-const StatItem = styled.div`
-  span {
-    color: rgba(255, 255, 255, 0.6);
-  }
-`;
-
-const Section = styled.section`
-  margin-bottom: 2rem;
-`;
-
-const SectionTitle = styled.h2`
-  font-size: 1.5rem;
   margin-bottom: 1rem;
-  color: white;
-  padding-top: 1rem;
 `;
 
-const PlayerSection = styled(Section)`
-  margin-top: 2rem;
-  min-height: 500px;
+const Details = styled.div`
+  flex: 1;
+`;
+
+const DetailItem = styled.div`
+  margin-bottom: 0.5rem;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+const Label = styled.span`
+  color: rgba(255, 255, 255, 0.6);
+  margin-right: 0.5rem;
+`;
+
+const Value = styled.span`
+  color: white;
+`;
+
+const ButtonContainer = styled.div`
+  margin-top: 1rem;
 `;
 
 const PlayerContainer = styled.div`
@@ -83,133 +67,121 @@ const PlayerContainer = styled.div`
   overflow: hidden;
 `;
 
-const CastGrid = styled.div`
+const Content = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
-`;
+  grid-template-columns: 300px 1fr;
+  gap: 2rem;
+  margin-bottom: 2rem;
 
-const CastCard = styled.div`
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  transition: transform 0.2s;
-
-  &:hover {
-    transform: translateY(-2px);
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
   }
 `;
 
-const CastImageContainer = styled.div`
-  position: relative;
-  width: 100%;
-  height: 225px;
-`;
+const parseRussianDate = (dateStr: string): Date | null => {
+  if (!dateStr) return null;
 
-const CastInfo = styled.div`
-  padding: 0.75rem;
-`;
+  const months: { [key: string]: number } = {
+    'января': 0, 'февраля': 1, 'марта': 2, 'апреля': 3,
+    'мая': 4, 'июня': 5, 'июля': 6, 'августа': 7,
+    'сентября': 8, 'октября': 9, 'ноября': 10, 'декабря': 11
+  };
 
-const CastName = styled.h3`
-  font-size: 0.9rem;
-  margin-bottom: 0.25rem;
-  color: white;
-`;
+  const match = dateStr.match(/(\d+)\s+([а-яё]+)\s+(\d{4})/i);
+  if (!match) return null;
 
-const Character = styled.p`
-  font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.6);
-`;
+  const [, day, month, year] = match;
+  const monthIndex = months[month.toLowerCase()];
+  
+  if (monthIndex === undefined) return null;
+  
+  return new Date(parseInt(year), monthIndex, parseInt(day));
+};
 
 interface TVShowContentProps {
   tvShowId: string;
-  initialShow: TVShowDetails;
+  initialShow: TVShow;
 }
 
 export default function TVShowContent({ tvShowId, initialShow }: TVShowContentProps) {
-  const [show] = useState<TVShowDetails>(initialShow);
+  const [show] = useState<TVShow>(initialShow);
+  const [imdbId, setImdbId] = useState<string | null>(null);
 
-  const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('ru-RU', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
+  useEffect(() => {
+    const fetchImdbId = async () => {
+      try {
+        const newImdbId = await tvShowsAPI.getImdbId(tvShowId);
+        if (newImdbId) {
+          setImdbId(newImdbId);
+        }
+      } catch (err) {
+        console.error('Error fetching IMDb ID:', err);
+      }
+    };
+    fetchImdbId();
+  }, [tvShowId]);
 
   return (
     <Container>
-      <ShowInfo>
+      <Content>
         <PosterContainer>
           {show.poster_path && (
             <Image
-              src={`https://image.tmdb.org/t/p/w500${show.poster_path}`}
+              src={getImageUrl(show.poster_path, 'w500')}
               alt={show.name}
-              fill
-              style={{ objectFit: 'cover' }}
+              width={300}
+              height={450}
               priority
             />
           )}
         </PosterContainer>
 
-        <InfoContent>
+        <Info>
           <Title>{show.name}</Title>
           <Overview>{show.overview}</Overview>
+          
+          <Details>
+            <DetailItem>
+              <Label>Дата выхода:</Label>
+              <Value>
+                {show.first_air_date ? 
+                  (parseRussianDate(show.first_air_date)?.toLocaleDateString('ru-RU') || 'Неизвестно')
+                  : 'Неизвестно'
+                }
+              </Value>
+            </DetailItem>
+            <DetailItem>
+              <Label>Сезонов:</Label>
+              <Value>{show.number_of_seasons || 'Неизвестно'}</Value>
+            </DetailItem>
+            <DetailItem>
+              <Label>Эпизодов:</Label>
+              <Value>{show.number_of_episodes || 'Неизвестно'}</Value>
+            </DetailItem>
+            <DetailItem>
+              <Label>Рейтинг:</Label>
+              <Value>{show.vote_average.toFixed(1)}</Value>
+            </DetailItem>
+          </Details>
 
-          <Stats>
-            <StatItem>
-              <span>Дата выхода: </span>
-              {formatDate(show.first_air_date)}
-            </StatItem>
-            <StatItem>
-              <span>Сезонов: </span>
-              {show.number_of_seasons}
-            </StatItem>
-            <StatItem>
-              <span>Эпизодов: </span>
-              {show.number_of_episodes}
-            </StatItem>
-          </Stats>
-        </InfoContent>
-      </ShowInfo>
+          <ButtonContainer>
+            <FavoriteButton
+              mediaId={tvShowId}
+              mediaType="tv"
+              title={show.name}
+              posterPath={show.poster_path || ''}
+            />
+          </ButtonContainer>
+        </Info>
+      </Content>
 
-      <PlayerSection>
-        <SectionTitle>Смотреть онлайн</SectionTitle>
+      {imdbId && (
         <PlayerContainer>
-          <MoviePlayer
-            id={tvShowId}
-            title={show.name}
-            poster={show.poster_path ? `https://image.tmdb.org/t/p/w500${show.poster_path}` : ''}
-            imdbId={show.external_ids?.imdb_id}
+          <MoviePlayer 
+            imdbId={imdbId} 
+            backdrop={show.backdrop_path ? getImageUrl(show.backdrop_path, 'original') : undefined}
           />
         </PlayerContainer>
-      </PlayerSection>
-
-      {show.credits.cast.length > 0 && (
-        <Section>
-          <SectionTitle>В ролях</SectionTitle>
-          <CastGrid>
-            {show.credits.cast.slice(0, 12).map(actor => (
-              <CastCard key={actor.id}>
-                <CastImageContainer>
-                  <Image
-                    src={actor.profile_path
-                      ? `https://image.tmdb.org/t/p/w300${actor.profile_path}`
-                      : '/placeholder.png'}
-                    alt={actor.name}
-                    fill
-                    style={{ objectFit: 'cover' }}
-                  />
-                </CastImageContainer>
-                <CastInfo>
-                  <CastName>{actor.name}</CastName>
-                  <Character>{actor.character}</Character>
-                </CastInfo>
-              </CastCard>
-            ))}
-          </CastGrid>
-        </Section>
       )}
     </Container>
   );

src/app/tv/[id]/TVShowPage.tsx

@@ -3,7 +3,7 @@
 import styled from 'styled-components';
 import PageLayout from '@/components/PageLayout';
 import TVShowContent from './TVShowContent';
-import type { TVShowDetails } from '@/lib/api';
+import type { TVShow } from '@/types/movie';
 
 const Container = styled.div`
   width: 100%;
@@ -13,7 +13,7 @@ const Container = styled.div`
 
 interface TVShowPageProps {
   tvShowId: string;
-  show: TVShowDetails | null;
+  show: TVShow | null;
 }
 
 export default function TVShowPage({ tvShowId, show }: TVShowPageProps) {
@@ -21,7 +21,10 @@ export default function TVShowPage({ tvShowId, show }: TVShowPageProps) {
     return (
       <PageLayout>
         <Container>
-          <div>Сериал не найден</div>
+          <div className="flex flex-col items-center justify-center min-h-screen p-4 text-center">
+            <h1 className="text-3xl font-bold mb-4">Сериал не найден</h1>
+            <p className="text-gray-400">К сожалению, запрашиваемый сериал не существует или был удален.</p>
+          </div>
         </Container>
       </PageLayout>
     );

src/app/tv/[id]/page.tsx

@@ -1,5 +1,5 @@
 import TVShowPage from './TVShowPage';
-import { tvAPI } from '@/lib/api';
+import { tvShowsAPI } from '@/lib/neoApi';
 
 interface PageProps {
   params: {
@@ -10,8 +10,8 @@ interface PageProps {
 
 async function getData(id: string) {
   try {
-    const response = await tvAPI.getShow(id);
-    return { id, show: response.data };
+    const response = await tvShowsAPI.getTVShow(id).then(res => res.data);
+    return { id, show: response };
   } catch (error) {
     console.error('Error fetching show:', error);
     return { id, show: null };