"use client";

import React from "react";

const STATUS_STYLES: Record<
  string,
  { bg: string; border: string; color: string; icon: string }
> = {
  ACTIVE: {
    bg: "#dcfce7",
    border: "#86efac",
    color: "#166534",
    icon: "🟢",
  },
  INVITED: {
    bg: "#fef3c7",
    border: "#fcd34d",
    color: "#92400e",
    icon: "📩",
  },
  DISABLED: {
    bg: "#fee2e2",
    border: "#fca5a5",
    color: "#991b1b",
    icon: "🔒",
  },
};

export function PortalStatusBadge({ status }: { status: string }) {
  const s = STATUS_STYLES[status] || STATUS_STYLES.INVITED;
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 4,
        padding: "4px 10px",
        borderRadius: 99,
        fontSize: 11,
        fontWeight: 700,
        background: s.bg,
        border: `1px solid ${s.border}`,
        color: s.color,
        whiteSpace: "nowrap",
      }}
    >
      {s.icon} {status}
    </span>
  );
}

export function RoleBadge({ role }: { role: string }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 4,
        padding: "3px 9px",
        borderRadius: 99,
        fontSize: 11,
        fontWeight: 600,
        background: "#eef2ff",
        border: "1px solid #c7d2fe",
        color: "#4338ca",
        whiteSpace: "nowrap",
      }}
    >
      {role}
    </span>
  );
}

export function SchemeBadge({ scheme }: { scheme?: string }) {
  if (!scheme) return null;
  const isQRS = scheme?.toUpperCase() === "QRS";
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        padding: "2px 7px",
        borderRadius: 99,
        fontSize: 10,
        fontWeight: 700,
        background: isQRS ? "#dbeafe" : "#fae8ff",
        border: `1px solid ${isQRS ? "#93c5fd" : "#e879f9"}`,
        color: isQRS ? "#1e40af" : "#86198f",
        whiteSpace: "nowrap",
      }}
    >
      {scheme.toUpperCase()}
    </span>
  );
}