"use client";

import React from "react";
import {
  SCHEDULE_STATUS_META,
  ROW_STATUS_META,
  AUDIT_TYPE_META,
  AUDIT_MODE_META,
} from "@/lib/api/mappers/audit-schedule.mappers";
import type {
  ScheduleStatus,
  RowStatus,
  AuditType,
  AuditMode,
} from "@/lib/api/types/audit-schedule.types";

const baseBadge: React.CSSProperties = {
  display: "inline-block",
  padding: "3px 10px",
  borderRadius: "12px",
  fontSize: "11px",
  fontWeight: 700,
  letterSpacing: ".02em",
  lineHeight: 1.4,
  whiteSpace: "nowrap",
};

export function ScheduleStatusBadge({ status }: { status: ScheduleStatus }) {
  const meta = SCHEDULE_STATUS_META[status];
  if (!meta) return <span>{status}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.label}
    </span>
  );
}

export function RowStatusBadge({ status }: { status: RowStatus }) {
  const meta = ROW_STATUS_META[status];
  if (!meta) return <span>{status}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.label}
    </span>
  );
}

export function AuditTypeBadge({ type }: { type: AuditType }) {
  const meta = AUDIT_TYPE_META[type];
  if (!meta) return <span>{type}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.label}
    </span>
  );
}

export function AuditModeBadge({ mode }: { mode: AuditMode }) {
  const meta = AUDIT_MODE_META[mode];
  if (!meta) return <span>{mode}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.icon} {meta.label}
    </span>
  );
}