import Link from "next/link";
import { STATUS_COLORS } from "@/lib/constants";
import { initials } from "@/lib/utils";

export function StatusBadge({ status }: { status: string }) {
  const cls = STATUS_COLORS[status] ?? "bg-slate-500/10 text-slate-600";
  return (
    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold tracking-wide ${cls}`}>
      {status.replace(/_/g, " ")}
    </span>
  );
}

export function Badge({ children, className = "bg-slate-500/10 text-slate-600" }: { children: React.ReactNode; className?: string }) {
  return (
    <span className={`inline-flex items-center rounded-full border border-transparent px-2 py-0.5 text-[11px] font-semibold ${className}`}>
      {children}
    </span>
  );
}

/** Frosted glass surface — the app's base card. */
export function Card({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={`rounded-2xl border border-white/70 bg-white/60 shadow-[0_8px_32px_rgba(80,90,180,0.10)] backdrop-blur-xl ${className}`}>
      {children}
    </div>
  );
}

export function StatCard({ label, value, sub, accent = "text-zinc-100" }: { label: string; value: React.ReactNode; sub?: string; accent?: string }) {
  return (
    <Card className="p-4">
      <div className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{label}</div>
      <div className={`mt-1.5 text-2xl font-bold tabular-nums ${accent}`}>{value}</div>
      {sub && <div className="mt-1 text-xs text-zinc-500">{sub}</div>}
    </Card>
  );
}

export function Avatar({ name, src, size = 8 }: { name: string; src?: string | null; size?: number }) {
  const px = size * 4;
  if (src) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={src} alt={name} width={px} height={px} className="rounded-full object-cover ring-2 ring-white/80" style={{ width: px, height: px }} />;
  }
  return (
    <div
      className="flex items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/20 to-fuchsia-500/20 font-semibold text-indigo-700 ring-2 ring-white/80"
      style={{ width: px, height: px, fontSize: px * 0.38 }}
    >
      {initials(name)}
    </div>
  );
}

export const btn = {
  primary:    "fx-shine inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/25 transition hover:brightness-110 hover:shadow-xl hover:shadow-indigo-500/30 disabled:opacity-50",
  secondary:
    "inline-flex items-center justify-center gap-2 rounded-xl border border-white/70 bg-white/60 px-4 py-2 text-sm font-medium text-zinc-300 shadow-sm backdrop-blur transition hover:bg-white/90",
  danger:
    "inline-flex items-center justify-center gap-2 rounded-xl bg-red-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-600",
  ghost:
    "inline-flex items-center justify-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium text-zinc-400 transition hover:bg-white/70 hover:text-zinc-100",
  sm: "fx-shine inline-flex items-center justify-center gap-1.5 rounded-lg bg-gradient-to-r from-indigo-500 to-violet-500 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm shadow-indigo-500/25 transition hover:brightness-110",
  smSecondary:
    "inline-flex items-center justify-center gap-1.5 rounded-lg border border-white/70 bg-white/60 px-2.5 py-1.5 text-xs font-medium text-zinc-300 shadow-sm backdrop-blur transition hover:bg-white/90",
};

export const input =
  "w-full rounded-xl border border-white/80 bg-white/70 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 shadow-sm backdrop-blur outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/25";

export const label = "mb-1.5 block text-xs font-semibold text-zinc-400";

export function Field({ name, title, children }: { name?: string; title: string; children: React.ReactNode }) {
  return (
    <div>
      <label htmlFor={name} className={label}>{title}</label>
      {children}
    </div>
  );
}

export function EmptyState({ title, body, action }: { title: string; body?: string; action?: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-indigo-200/80 bg-white/40 py-14 text-center backdrop-blur">
      <div className="text-sm font-semibold text-zinc-300">{title}</div>
      {body && <div className="mt-1 max-w-sm text-sm text-zinc-500">{body}</div>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

export function PageHeader({ title, sub, action }: { title: string; sub?: string; action?: React.ReactNode }) {
  return (
    <div className="mb-6 flex flex-wrap items-start justify-between gap-3">
      <div>
        <h1 className="text-xl font-bold text-zinc-100">{title}</h1>
        {sub && <p className="mt-1 text-sm text-zinc-500">{sub}</p>}
      </div>
      {action}
    </div>
  );
}

export function Logo({ href = "/" }: { href?: string }) {
  return (
    <Link href={href} className="flex items-center gap-2">
      <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 via-violet-500 to-fuchsia-500 text-sm font-bold text-white shadow-md shadow-indigo-500/30">C</span>
      <span className="text-[15px] font-bold tracking-tight text-zinc-100">Confexe</span>
    </Link>
  );
}