"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import type { TrainingRowType } from "@/lib/api/types/training-certificate.types";

const STATUS_META: Record<string, { label: string; bg: string; color: string }> = {
  pending_scan: { label: "Pending Scan", bg: "#fef3c7", color: "#92400e" },
  active: { label: "Active", bg: "#dcfce7", color: "#15803d" },
  expired: { label: "Expired", bg: "#f1f5f9", color: "#475569" },
  revoked: { label: "Revoked", bg: "#fee2e2", color: "#b91c1c" },
  fake: { label: "Fake", bg: "#fecaca", color: "#7f1d1d" },
};

export function StatusBadge({ status }: { status: string }) {
  const meta = STATUS_META[status] || {
    label: status,
    bg: "#f1f5f9",
    color: "#475569",
  };
  return (
    <span
      style={{
        display: "inline-block",
        padding: "3px 10px",
        borderRadius: 999,
        fontSize: 11,
        fontWeight: 700,
        textTransform: "uppercase",
        letterSpacing: 0.4,
        background: meta.bg,
        color: meta.color,
        whiteSpace: "nowrap",
      }}
    >
      {meta.label}
    </span>
  );
}

interface Props {
  row: TrainingRowType;
  canEdit: boolean;
  canDelete: boolean;
  onView: (row: TrainingRowType) => void;
  onViewQR: (row: TrainingRowType) => void;
  onEdit: (row: TrainingRowType) => void;
  onDelete: (row: TrainingRowType) => void;
}

export function TrainingRow({
  row,
  canEdit,
  canDelete,
  onView,
  onViewQR,
  onEdit,
  onDelete,
}: Props) {
  const fmt = (d?: string | null) =>
    d ? new Date(d).toLocaleDateString("en-GB") : "—";

  return (
    <tr className={styles.tableRow}>
      <td>{row.sno}</td>
      <td className={styles.nameCell}>
        <span
          style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontWeight: 700,
            fontSize: 12.5,
          }}
        >
          {row.certificate_no}
        </span>
      </td>
      <td>
        <div style={{ fontWeight: 600, fontSize: 13 }}>
          {row.participant_name}
        </div>
        <div style={{ fontSize: 11.5, color: "#94a3b8" }}>
          {row.participant_company || "—"}
        </div>
      </td>
      <td>
        <div
          style={{
            fontSize: 12.5,
            maxWidth: 240,
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title={row.course_title}
        >
          {row.course_title}
        </div>
        {row.standard_name && (
          <div style={{ fontSize: 11, color: "#94a3b8" }}>
            {row.standard_name}
          </div>
        )}
      </td>
      <td style={{ whiteSpace: "nowrap" }}>{fmt(row.training_date)}</td>
      <td>
        <StatusBadge status={row.status} />
      </td>
      <td style={{ textAlign: "center" }}>
        {row.scan_pdf_url ? (
          <a
            href={row.scan_pdf_url}
            target="_blank"
            rel="noopener noreferrer"
            title="View uploaded scan"
            style={{ textDecoration: "none", fontSize: 16 }}
          >
            📄
          </a>
        ) : (
          <span title="Scan not uploaded yet" style={{ opacity: 0.35 }}>
            ⏳
          </span>
        )}
      </td>
      <td style={{ fontSize: 11, color: "#94a3b8" }}>{row.batch_ref || "—"}</td>
      <td className={styles.actionsCell}>
        <div className={styles.actionGroup}>
          <button
            className={styles.actionBtnView}
            onClick={() => onViewQR(row)}
            title="QR Code"
            type="button"
          >
            📱
          </button>
          <button
            className={styles.actionBtnView}
            onClick={() => onView(row)}
            title="View / Upload Scan"
            type="button"
          >
            👁️
          </button>
          {canEdit && (
            <button
              className={styles.actionBtnEdit}
              onClick={() => onEdit(row)}
              title="Edit"
              type="button"
            >
              ✏️
            </button>
          )}
          {canDelete && (
            <button
              className={styles.actionBtnDelete}
              onClick={() => onDelete(row)}
              title="Delete"
              type="button"
            >
              🗑️
            </button>
          )}
        </div>
      </td>
    </tr>
  );
}