"use client";

import Link from "next/link";
import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
} from "@/components/ui/dropdown";
import type { Project } from "@/types";

function getApprovalBadge(project: Project) {
  if (project.approval_status === "pending_approval") {
    return {
      label: "Pending approval",
      className: "border-amber-500/20 bg-amber-500/10 text-amber-700",
    };
  }

  if (project.approval_status === "changes_requested") {
    return {
      label: "Changes requested",
      className: "border-red-500/20 bg-red-500/10 text-red-700",
    };
  }

  if (project.approval_status === "approved") {
    return {
      label: "Approved",
      className: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700",
    };
  }

  return null;
}

interface ProjectCardProps {
  project: Project;
  taskCount: number;
  goalTitle?: string | null;
  onEdit: () => void;
  onDelete: () => void;
  canManage?: boolean;
}

export function ProjectCard({
  project,
  taskCount,
  goalTitle,
  onEdit,
  onDelete,
  canManage = true,
}: ProjectCardProps) {
  const approvalBadge = getApprovalBadge(project);

  return (
    <div className="group relative rounded-xl border border-border bg-card hover:border-foreground/10 transition-colors">
      <Link href={`/projects/${project.id}`} className="block p-5">
        <div
          className="flex items-center justify-center h-12 w-12 rounded-xl text-2xl mb-4"
          style={{ backgroundColor: project.color + "18" }}
        >
          {project.icon}
        </div>

        <h3 className="font-semibold text-sm">{project.name}</h3>
        {approvalBadge && (
          <span
            className={`mt-2 inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${approvalBadge.className}`}
          >
            {approvalBadge.label}
          </span>
        )}
        {project.goal && (
          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
            {project.goal}
          </p>
        )}
        {goalTitle && (
          <p className="text-[11px] text-primary mt-2 truncate">
            Linked goal: {goalTitle}
          </p>
        )}
        <p className="text-xs text-muted-foreground mt-1">
          {taskCount} {taskCount === 1 ? "task" : "tasks"}
        </p>
      </Link>

      {/* Actions dropdown */}
      {canManage && (
        <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
          <Dropdown>
            <DropdownTrigger className="p-1.5 rounded-md hover:bg-accent transition-colors">
              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
            </DropdownTrigger>
            <DropdownContent>
              <DropdownItem onClick={onEdit}>
                <Pencil className="h-3.5 w-3.5" />
                Edit
              </DropdownItem>
              <DropdownItem onClick={onDelete} destructive>
                <Trash2 className="h-3.5 w-3.5" />
                Delete
              </DropdownItem>
            </DropdownContent>
          </Dropdown>
        </div>
      )}
    </div>
  );
}