MikrotikManager/components/data-grids/certificate-expanded-detail.tsx

"use client"

import type { CertificateDto } from "@mmapp/contracts/certificates"
import { cn } from "@/lib/utils"

function daysLeftBar(days: number, total = 365): number {
  if (days <= 0) return 0
  return Math.min(100, Math.round((days / total) * 100))
}

function CertificateExpandedDetail({ cert }: { cert: CertificateDto }) {
  const pct = daysLeftBar(cert.daysLeft)

  return (
    <div className="px-10 pb-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs border-t border-border/50 pt-3">
      <div>
        <p className="text-muted-foreground mb-1">Key size</p>
        <p className="font-mono font-medium">{cert.keySize} bit</p>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">Действителен с</p>
        <p className="font-mono">{cert.validFrom}</p>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">SAN / Alt Names</p>
        <div className="flex flex-wrap gap-1">
          {cert.sans.length > 0
            ? cert.sans.map((s) => (
                <span key={s} className="font-mono bg-muted px-1.5 py-0.5 rounded">
                  {s}
                </span>
              ))
            : <span className="text-muted-foreground">—</span>}
        </div>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">Trusted</p>
        <p className={cert.trusted ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}>
          {cert.trusted ? "Да (доверенный)" : "Нет (не доверенный)"}
        </p>
      </div>
      <div className="col-span-2 sm:col-span-4">
        <div className="h-1.5 bg-muted rounded-full overflow-hidden max-w-xs">
          <div
            className={cn(
              "h-full rounded-full",
              cert.daysLeft < 0 || cert.daysLeft <= 7
                ? "bg-red-500"
                : cert.daysLeft <= 30
                  ? "bg-amber-500"
                  : "bg-emerald-500",
            )}
            style={{ width: `${pct}%` }}
          />
        </div>
      </div>
    </div>
  )
}

export { CertificateExpandedDetail, daysLeftBar }