import { CopyText } from "@/components/ui/copy-text";

export interface OverviewProps {
  path: string;
  source: string;
  branch: string | null;
  version: string | null;
  gitRemote: string | null;
  lastCommitHash: string | null;
  lastCommitMessage: string | null;
  lastCommitTime: Date | null;
  deployedVersion: string | null;
  deployedAt: Date | null;
}

interface Field {
  label: string;
  value: React.ReactNode;
  full?: boolean;
  copyValue?: string;
}

export function ProjectOverview(p: OverviewProps) {
  const fields: Field[] = [
    {
      label: "Đường dẫn",
      value: p.path,
      copyValue: p.path,
      full: true,
    },
    { label: "Nguồn", value: p.source.replace("-", " ") },
    { label: "Nhánh", value: p.branch ?? "—" },
    { label: "Phiên bản", value: p.version ?? "—" },
    {
      label: "Git remote",
      value: p.gitRemote ?? "—",
      copyValue: p.gitRemote ?? undefined,
      full: true,
    },
    {
      label: "Commit gần nhất",
      value: p.lastCommitHash ? p.lastCommitHash.slice(0, 12) : "—",
      copyValue: p.lastCommitHash ?? undefined,
    },
    {
      label: "Thời gian commit",
      value: p.lastCommitTime
        ? new Date(p.lastCommitTime).toISOString().replace("T", " ").slice(0, 19)
        : "—",
    },
    {
      label: "Nội dung commit",
      value: p.lastCommitMessage ?? "—",
      full: true,
    },
    {
      label: "Phiên bản đã deploy",
      value: p.deployedVersion ?? "Chưa deploy",
    },
    {
      label: "Deploy lúc",
      value: p.deployedAt
        ? new Date(p.deployedAt).toISOString().replace("T", " ").slice(0, 19)
        : "—",
    },
  ];

  return (
    <dl className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
      {fields.map((f) => (
        <div
          key={f.label}
          className={f.full ? "sm:col-span-2 min-w-0" : "min-w-0"}
        >
          <dt className="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
            {f.label}
          </dt>
          <dd className="mt-1 text-sm">
            {f.copyValue ? (
              <CopyText value={f.copyValue} display={String(f.value)} truncate className="max-w-full" />
            ) : (
              <span className="break-words text-foreground/90">{f.value}</span>
            )}
          </dd>
        </div>
      ))}
    </dl>
  );
}