"use client";

import React from "react";
import { FiDownload } from "react-icons/fi";
import styles from "../../../(dashboard)/modules/commonstyle/dattabale.module.css";
import type { Certificate } from "./certificate.utils";
import { statusMeta, typeMeta, isExpiringSoon, formatDate } from "./certificate.utils";

interface Props {
  cert: Certificate;
  onDownload: (cert: Certificate) => void;
}

export default function CertificateRow({ cert, onDownload }: Props) {
  const meta = statusMeta(cert, styles);
  const type = typeMeta(cert.cert_type);
  const expiringSoon = isExpiringSoon(cert.expire_date);

  return (
    <tr style={{ background: expiringSoon ? "#fffbeb" : "transparent" }}>
      <td style={{ verticalAlign: "top" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <span className={styles.idCell}>{cert.certificate_no || "—"}</span>
          <span
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 4,
              padding: "2px 8px",
              borderRadius: 99,
              background: type.bg,
              color: type.color,
              fontSize: 10,
              fontWeight: 600,
              whiteSpace: "nowrap",
              width: "fit-content",
            }}
          >
            {type.icon} {type.label}
          </span>
        </div>
      </td>
      <td>
        {cert.standard_name ? (
          <span className={styles.departmentTag}>
            {cert.standard_short || cert.standard_name}
          </span>
        ) : (
          "—"
        )}
      </td>
      <td>{formatDate(cert.issue_date)}</td>
      <td>
        {formatDate(cert.expire_date)}
        {expiringSoon && (
          <span
            style={{
              marginLeft: 6,
              fontSize: 10,
              fontWeight: 700,
              padding: "1px 6px",
              borderRadius: 99,
              background: "#d97706",
              color: "#fff",
            }}
          >
            SOON
          </span>
        )}
      </td>
      <td style={{ color: "#64748b", fontSize: 13 }}>{formatDate(cert.surveillance_audit_due)}</td>
      <td style={{ color: "#64748b", fontSize: 13 }}>{formatDate(cert.recertification_due)}</td>
      <td>
        <span className={`${styles.statusBadge} ${meta.badgeClass}`}>
          <span className={styles.statusDot} />
          {meta.label}
        </span>
      </td>
      <td className={styles.actionsCell}>
        <div className={styles.actionGroup}>
          <button
            className={styles.actionBtnView}
            onClick={() => onDownload(cert)}
            title="Download certificate PDF"
          >
            <FiDownload size={14} />
          </button>
        </div>
      </td>
    </tr>
  );
}