"use client";

import { useMemo } from "react";
import { CodingProject, getTagSlug } from "@/content/cv/portfolio";
import { formatEssayDate } from "@/lib/portfolio-filters";
import PortfolioAccordion from "./portfolio-accordion";
import {
  ArrowTopRightOnSquareIcon,
  LockClosedIcon,
} from "@heroicons/react/24/outline";
import PortfolioMarkdown from "./portfolio-markdown";
import TagButton from "./tag-button";

interface ProjectItemProps {
  project: CodingProject;
  onTagClick?: (tagSlug: string) => void;
  selectedTags?: string[];
}

const EMPTY_TAGS: string[] = [];

export default function ProjectItem({
  project,
  onTagClick,
  selectedTags = EMPTY_TAGS,
}: ProjectItemProps) {
  const formattedDate = formatEssayDate(project.date);

  const tagSlugs = useMemo(
    () => project.tags.map((tag) => getTagSlug(tag)),
    [project.tags]
  );

  return (
    <article className="border-b border-gray-200 py-8">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="mb-2">
            <PortfolioMarkdown content={`### ${project.title}`} />
          </div>

          <div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
            <time dateTime={project.date}>{formattedDate}</time>
            <span>•</span>
            <span>{project.status}</span>
          </div>

          <PortfolioAccordion abstract={project.description} className="mb-4" />

          <div className="flex flex-wrap gap-2 mb-4">
            {project.techStack.map((tech) => (
              <span
                key={tech}
                className="inline-flex items-center rounded-md bg-gray-50 px-2 py-0.5 text-xs text-gray-600 ring-1 ring-inset ring-gray-200"
              >
                {tech}
              </span>
            ))}
          </div>

          <div className="flex flex-wrap gap-2">
            {project.tags.map((tag, index) => (
              <TagButton
                key={tag}
                tag={tag}
                tagSlug={tagSlugs[index]}
                isSelected={selectedTags.includes(tagSlugs[index])}
                onClick={onTagClick}
              />
            ))}
          </div>
        </div>

        <div className="ml-6 flex-shrink-0 flex flex-col items-end gap-2">
          {project.repoUrl ? (
            <a
              href={project.repoUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-500 transition-colors"
            >
              <span>
                {project.repoHost === "tangled"
                  ? "View on Tangled"
                  : "View on GitHub"}
              </span>
              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
            </a>
          ) : null}
          {project.liveUrl ? (
            <a
              href={project.liveUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-500 transition-colors"
            >
              <span>Visit site</span>
              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
            </a>
          ) : null}
          {project.visibility !== "public" ? (
            <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
              <LockClosedIcon className="h-3 w-3" />
              {project.visibility === "private" ? "Private" : "Closed source"}
            </span>
          ) : null}
        </div>
      </div>
    </article>
  );
}
