"use client";

import { Card } from "@mcpengine/ui";
import Link from "next/link";

export type ProjectStatus = "draft" | "analyzed" | "generated" | "tested" | "deployed";

export interface Project {
  id: string;
  name: string;
  status: ProjectStatus;
  toolCount: number;
  updatedAt: Date;
}

const statusConfig: Record<ProjectStatus, { label: string; color: string }> = {
  draft: { label: "Draft", color: "bg-gray-600 text-gray-200" },
  analyzed: { label: "Analyzed", color: "bg-yellow-600/20 text-yellow-400" },
  generated: { label: "Generated", color: "bg-blue-600/20 text-blue-400" },
  tested: { label: "Tested", color: "bg-emerald-600/20 text-emerald-400" },
  deployed: { label: "Deployed", color: "bg-indigo-600/20 text-indigo-400" },
};

function relativeTime(date: Date): string {
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
  if (seconds < 60) return "just now";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days}d ago`;
  return date.toLocaleDateString();
}

export function ProjectCard({ project }: { project: Project }) {
  const status = statusConfig[project.status];

  return (
    <Link href={`/editor?project=${project.id}`}>
      <Card className="bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-xl p-5 transition-all cursor-pointer group h-full">
        <div className="flex items-start justify-between mb-3">
          <h3 className="font-semibold text-white group-hover:text-indigo-400 transition-colors truncate pr-2">
            {project.name}
          </h3>
          <span
            className={`text-xs font-medium px-2.5 py-0.5 rounded-full whitespace-nowrap ${status.color}`}
          >
            {status.label}
          </span>
        </div>
        <div className="flex items-center justify-between text-sm text-gray-500">
          <span className="flex items-center gap-1.5">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
            {project.toolCount} tools
          </span>
          <span>{relativeTime(project.updatedAt)}</span>
        </div>
      </Card>
    </Link>
  );
}