"use client";

import type { ButtonHTMLAttributes, ReactNode } from "react";

export function StatusBadge({ status }: { status: string }) {
  const map: Record<string, string> = {
    Pending: "bg-amber-100 text-amber-800",
    Running: "bg-sky-100 text-sky-800",
    Success: "bg-emerald-100 text-emerald-800",
    Failed: "bg-rose-100 text-rose-800",
    "Manual Action Required": "bg-orange-100 text-orange-900",
    Cancelled: "bg-slate-200 text-slate-700",
    info: "bg-teal-100 text-teal-800",
    success: "bg-emerald-100 text-emerald-800",
    warning: "bg-amber-100 text-amber-800",
    failed: "bg-rose-100 text-rose-800",
  };
  return <span className={`status-pill ${map[status] || "bg-slate-100 text-slate-700"}`}>{status}</span>;
}

export function Field({
  label,
  children,
  hint,
}: {
  label: string;
  children: ReactNode;
  hint?: string;
}) {
  return (
    <label className="block space-y-1.5">
      <span className="text-xs font-semibold uppercase tracking-[0.14em] text-teal-900/70">{label}</span>
      {children}
      {hint ? <span className="block text-xs text-slate-500">{hint}</span> : null}
    </label>
  );
}

export const inputClass =
  "w-full rounded-xl border border-[#d9cfc0] bg-white px-3 py-2.5 text-sm text-slate-900 outline-none transition focus:border-teal-700 focus:ring-4 focus:ring-teal-700/10";

export function Button({
  children,
  tone = "primary",
  className = "",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { tone?: "primary" | "ghost" | "danger" | "sand" }) {
  const tones = {
    primary: "bg-teal-800 text-white hover:bg-teal-900",
    ghost: "bg-white text-teal-900 border border-[#d9cfc0] hover:bg-[#f4efe6]",
    danger: "bg-rose-700 text-white hover:bg-rose-800",
    sand: "bg-[#efe6d6] text-teal-950 hover:bg-[#e6dcc8]",
  };
  return (
    <button
      className={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${tones[tone]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

export function Modal({
  open,
  title,
  children,
  onClose,
}: {
  open: boolean;
  title: string;
  children: ReactNode;
  onClose: () => void;
}) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-[#102a32]/55 p-4">
      <div className="glass-card w-full max-w-md rounded-3xl p-6">
        <div className="mb-4 flex items-start justify-between gap-4">
          <h3 className="text-lg font-semibold">{title}</h3>
          <button onClick={onClose} className="text-slate-500 hover:text-slate-800" type="button">
            Close
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}