import Link from "next/link";
import type { ReactNode } from "react";

export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`bg-bg-card border border-border rounded-xl p-4 ${className}`}>
      {children}
    </div>
  );
}

export function StatCard({
  label,
  value,
  color,
}: {
  label: string;
  value: ReactNode;
  color?: string;
}) {
  return (
    <Card>
      <div className="text-xs text-text-secondary mb-2">{label}</div>
      <div
        className="font-heading text-2xl font-bold"
        style={color ? { color } : undefined}
      >
        {value}
      </div>
    </Card>
  );
}

export function PageHeader({
  title,
  description,
  action,
}: {
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <div className="flex items-end justify-between gap-4 flex-wrap mb-5">
      <div>
        <h1 className="font-heading text-2xl font-bold tracking-tight mb-1">{title}</h1>
        {description && <div className="text-sm text-text-secondary">{description}</div>}
      </div>
      {action}
    </div>
  );
}

const badgeColors: Record<string, string> = {
  LIVE: "bg-success/15 text-success",
  BUILDING: "bg-accent/15 text-accent",
  ERROR: "bg-error/15 text-error",
  PAUSED: "bg-text-tertiary/20 text-text-secondary",
  ACTIVE: "bg-success/15 text-success",
  INVITED: "bg-warning/15 text-warning",
  SUSPENDED: "bg-error/15 text-error",
  Clean: "bg-success/15 text-success",
  Unknown: "bg-text-tertiary/20 text-text-secondary",
  Paid: "bg-success/15 text-success",
  "Not connected": "bg-text-tertiary/20 text-text-secondary",
};

export function Badge({ status, children }: { status: string; children?: ReactNode }) {
  const cls = badgeColors[status] ?? "bg-text-tertiary/20 text-text-secondary";
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold ${cls}`}>
      {status === "LIVE" && <span className="w-1.5 h-1.5 rounded-full bg-success pulse-dot" />}
      {children ?? status}
    </span>
  );
}

export function RoleBadge({ role }: { role: string }) {
  const map: Record<string, string> = {
    OWNER: "bg-accent/15 text-accent",
    ADMIN: "bg-accent-2/15 text-accent-2",
    DEVELOPER: "bg-warning/15 text-warning",
    CLIENT_VIEWER: "bg-text-tertiary/20 text-text-secondary",
    VIEWER: "bg-text-tertiary/20 text-text-secondary",
  };
  const label: Record<string, string> = {
    OWNER: "Owner",
    ADMIN: "Admin",
    DEVELOPER: "Developer",
    CLIENT_VIEWER: "Client viewer",
    VIEWER: "Viewer",
  };
  return (
    <span className={`inline-flex px-2.5 py-1 rounded-full text-[11px] font-bold ${map[role] ?? ""}`}>
      {label[role] ?? role}
    </span>
  );
}

export function PrimaryButton(
  props: React.ButtonHTMLAttributes<HTMLButtonElement>
) {
  const { className = "", ...rest } = props;
  return (
    <button
      {...rest}
      className={`bg-accent text-white font-bold text-[13px] px-3.5 py-2 rounded-lg cursor-pointer disabled:opacity-50 ${className}`}
    />
  );
}

export function SecondaryButton(
  props: React.ButtonHTMLAttributes<HTMLButtonElement>
) {
  const { className = "", ...rest } = props;
  return (
    <button
      {...rest}
      className={`bg-transparent border border-border-input text-text-primary font-semibold text-[12.5px] px-3.5 py-2 rounded-lg cursor-pointer disabled:opacity-50 ${className}`}
    />
  );
}

export function DangerButton(
  props: React.ButtonHTMLAttributes<HTMLButtonElement>
) {
  const { className = "", ...rest } = props;
  return (
    <button
      {...rest}
      className={`bg-transparent border border-error text-error font-bold text-[12.5px] px-3.5 py-2 rounded-lg cursor-pointer disabled:opacity-50 ${className}`}
    />
  );
}

export function LinkButton({ href, children }: { href: string; children: ReactNode }) {
  return (
    <Link
      href={href}
      className="bg-accent text-white font-bold text-[13px] px-3.5 py-2 rounded-lg inline-block"
    >
      {children}
    </Link>
  );
}

export function EmptyState({ children }: { children: ReactNode }) {
  return (
    <div className="text-center py-14 px-5 text-text-tertiary text-sm">{children}</div>
  );
}

export function ListRow({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`flex items-center gap-3 px-4 py-3.5 border-b border-border last:border-b-0 flex-wrap ${className}`}>
      {children}
    </div>
  );
}

export function Avatar({ name, size = 30 }: { name: string; size?: number }) {
  const initial = name.trim().charAt(0).toUpperCase() || "?";
  return (
    <div
      className="rounded-full bg-[#1b1e25] border border-border-input flex items-center justify-center font-heading font-bold flex-none"
      style={{ width: size, height: size, fontSize: size * 0.4 }}
    >
      {initial}
    </div>
  );
}