import React from "react";
import Link from "next/link";
import { Movie } from "@/types/movie";
import { getPosterUrl } from "@/lib/tmdb";

interface MovieCardProps {
  movie: Movie;
}

export default function MovieCard({ movie }: MovieCardProps) {
  const year = movie.release_date ? movie.release_date.substring(0, 4) : "N/A";
  const rating = movie.vote_average ? movie.vote_average.toFixed(1) : "0.0";

  return (
    <div className="movie-card w-100">
      <div className="movie-card-img-wrapper">
        {/* Link wrapping the image only to navigate to details */}
        <Link href={movie.media_type === "tv" ? `/tv/${movie.id}` : `/movie/${movie.id}`}>
          <img
            src={getPosterUrl(movie.poster_path, "w500")}
            alt={movie.title || movie.name || "Poster"}
            className="movie-card-img"
            loading="lazy"
          />
        </Link>

        {/* Hover Overlay - now using independent sibling Links instead of nested Anchors */}
        <div className="movie-card-overlay">
          <div className="d-flex flex-column h-100 justify-content-between">
            {/* Top rating badge */}
            <div className="text-end">
              <span className="rating-badge d-inline-flex align-items-center gap-1">
                <i className="bi bi-star-fill text-warning"></i>
                {rating}
              </span>
            </div>

            {/* Bottom titles & play buttons */}
            <div>
              <Link href={movie.media_type === "tv" ? `/tv/${movie.id}` : `/movie/${movie.id}`} className="text-decoration-none text-white">
                <h6 className="fw-bold mb-1 text-truncate" title={movie.title}>
                  {movie.title}
                </h6>
              </Link>
              <div className="d-flex align-items-center gap-2 mb-3 small text-muted">
                <span className="year-badge py-0 px-1 extra-small">{year}</span>
                <span className="extra-small">Movie</span>
              </div>
              
              {/* Actions */}
              <div className="d-flex gap-2">
                <Link
                  href={`/watch/${movie.id}?type=${movie.media_type === "tv" ? "tv" : "movie"}`}
                  className="btn btn-sm btn-danger d-flex align-items-center justify-content-center gap-1 flex-grow-1 py-1 rounded-2"
                  style={{ fontSize: "0.8rem", fontWeight: "600" }}
                >
                  <i className="bi bi-play-fill"></i> Watch
                </Link>
                <Link
                  href={movie.media_type === "tv" ? `/tv/${movie.id}` : `/movie/${movie.id}`}
                  className="btn btn-sm btn-outline-light d-flex align-items-center justify-content-center flex-shrink-0 p-1 px-2 rounded-2"
                  style={{ fontSize: "0.8rem" }}
                >
                  <i className="bi bi-info-circle"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Static text card bottom (visible below poster / mobile fallback) */}
      <div className="p-2 bg-transparent text-white">
        <div className="d-flex justify-content-between align-items-start gap-1">
          <Link href={movie.media_type === "tv" ? `/tv/${movie.id}` : `/movie/${movie.id}`} className="text-decoration-none text-white text-truncate flex-grow-1">
            <h6 className="fw-semibold mb-0 small text-truncate" title={movie.title}>
              {movie.title}
            </h6>
          </Link>
          <span className="text-warning d-flex align-items-center gap-1 extra-small shrink-0">
            <i className="bi bi-star-fill text-warning" style={{ fontSize: "0.7rem" }}></i>
            {rating}
          </span>
        </div>
        <div className="d-flex justify-content-between align-items-center mt-1 extra-small text-white">
          <span>{year}</span>
          <span>{movie.media_type === "tv" ? "TV Series" : "Movie"}</span>
        </div>
      </div>
    </div>
  );
}