import Link from "next/link";
import { GitBranch, Clock } from "lucide-react";
import { Badge } from "@/components/ui/badge";

export interface ProjectCardProps {
  id: string;
  name: string;
  branch: string | null;
  version: string | null;
  source: string;
  lastCommitTime: Date | null;
  lastCommitMessage: string | null;
  deployedVersion: string | null;
  deployedAt: Date | null;
  deployCount?: number;
  commitCount?: number;
}

export function ProjectCard(p: ProjectCardProps) {
  const drift =
    !!p.deployedVersion && !!p.version && p.deployedVersion !== p.version;
  const deployed = !!p.deployedVersion;

  let statusTone: "success" | "warning" | "muted" = "muted";
  let statusLabel = "chưa deploy";
  if (deployed && !drift) {
    statusTone = "success";
    statusLabel = "đã đồng bộ";
  } else if (drift) {
    statusTone = "warning";
    statusLabel = "lệch phiên bản";
  }

  return (
    <Link
      href={`/projects/${p.id}`}
      className="group relative block overflow-hidden rounded-lg border border-border bg-surface p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg"
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
      />

      <div className="flex items-start justify-between gap-2">
        <h3 className="truncate text-sm font-semibold tracking-tight">{p.name}</h3>
        <Badge tone={statusTone} dot>
          {statusLabel}
        </Badge>
      </div>

      <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
        <span className="flex items-center gap-1">
          <GitBranch className="h-3 w-3" />
          <span className="text-mono">{p.branch ?? "—"}</span>
        </span>
        <span className="text-mono">{p.version ?? "—"}</span>
        {drift && (
          <Badge tone="warning">→ {p.deployedVersion}</Badge>
        )}
      </div>

      {p.lastCommitMessage && (
        <p className="mt-3 line-clamp-2 text-xs text-foreground/75">
          {p.lastCommitMessage}
        </p>
      )}

      <div className="mt-4 flex items-center justify-between text-2xs uppercase tracking-wider text-muted-foreground">
        <span className="flex items-center gap-1">
          <Clock className="h-3 w-3" />
          {agoVi(p.lastCommitTime)}
        </span>
        <span className="flex gap-2.5">
          {typeof p.commitCount === "number" && (
            <span>{p.commitCount} commit</span>
          )}
          {typeof p.deployCount === "number" && (
            <span>{p.deployCount} deploy</span>
          )}
        </span>
      </div>
    </Link>
  );
}

function agoVi(d: Date | null): string {
  if (!d) return "—";
  const ms = Date.now() - new Date(d).getTime();
  const min = Math.round(ms / 60000);
  if (min < 1) return "vừa xong";
  if (min < 60) return `${min} phút trước`;
  const hr = Math.round(min / 60);
  if (hr < 24) return `${hr} giờ trước`;
  const day = Math.round(hr / 24);
  if (day < 30) return `${day} ngày trước`;
  return new Date(d).toISOString().slice(0, 10);
}