import Link from "next/link";
import { Project } from "@/lib/types";
import Chip from "@/components/chip";
import ImageCarousel from "@/components/image-carousel";
import {
  Eye,
  CloudDownload,
  AppWindow,
  Smartphone,
  Globe,
  MonitorCog,
  Gamepad2,
  Github,
} from "lucide-react";

const PlaceholderIcon = ({ category }: { category: Project["category"] }) => {
  const iconProps = { size: 128, className: "text-white/80" };
  switch (category) {
    case "Desktop":
      return <AppWindow {...iconProps} />;
    case "Mobile":
      return <Smartphone {...iconProps} />;
    case "Web":
      return <Globe {...iconProps} />;
    case "Api":
      return <MonitorCog {...iconProps} />;
    case "Game":
      return <Gamepad2 {...iconProps} />;
    default:
      return null;
  }
};

interface ProjectItemProps {
  project: Project;
}

const ProjectItem = ({ project }: ProjectItemProps) => {
  const ImageDisplay = (
    <div className="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full h-[40rem] flex items-center justify-center rounded-lg">
      {project.thumbnails && project.thumbnails.length > 0 ? (
        <ImageCarousel
          id={`carousel-${project.id}`}
          thumbnails={project.thumbnails}
        />
      ) : (
        <PlaceholderIcon category={project.category} />
      )}
    </div>
  );

  return (
    <div className="flex flex-col md:flex-row items-center justify-between w-full h-full gap-8 text-white p-4">
      <div className="flex flex-col w-full gap-4 md:w-1/3 backdrop-blur-2xl glass-effect glossy-effect bottom p-4 rounded-md h-full">
        <div className="prose prose-invert">
          <h1>{project.name}</h1>
          <p className="whitespace-pre-wrap">{project.short_description}</p>
        </div>

        <div className="flex flex-wrap gap-2">
          {project.technologies.map((tech) => (
            <Chip key={tech} text={tech} />
          ))}
        </div>

        <Link
          href={`/projects/${project.name}`}
          className="text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
        >
          Read more
        </Link>

        <div className="flex flex-col sm:flex-row gap-2 w-full">
          {project.github_url && (
            <a
              href={project.github_url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 flex items-center justify-center gap-2 text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
            >
              <Github size={20} /> CODE
            </a>
          )}
          {project.visit_url && (
            <a
              href={project.visit_url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 flex items-center justify-center gap-2 text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
            >
              <Eye size={20} /> LIVE
            </a>
          )}
          {project.download_url && (
            <a
              href={project.download_url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 flex items-center justify-center gap-2 text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
            >
              <CloudDownload size={20} /> DOWNLOAD
            </a>
          )}
        </div>

        <div className="w-full mt-4 md:hidden">{ImageDisplay}</div>
      </div>

      <div className="hidden md:flex md:w-1/2">{ImageDisplay}</div>
    </div>
  );
};

export default ProjectItem;