"use client";
// Primitives UI d'Immbot AI — style sobre, accessible, thème clair/sombre.
import { forwardRef, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from "react";

export function cn(...cls: (string | false | null | undefined)[]): string {
  return cls.filter(Boolean).join(" ");
}

// ---------- Button ----------
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger" | "gold";
  size?: "sm" | "md" | "lg" | "icon";
};
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { variant = "primary", size = "md", className, ...props },
  ref
) {
  const variants = {
    primary: "bg-brand-600 hover:bg-brand-700 text-white shadow-sm disabled:bg-brand-600/50",
    secondary: "bg-card border border-app hover:bg-surface-2 dark:hover:bg-brand-900/40 text-fg",
    ghost: "hover:bg-surface-2 dark:hover:bg-brand-900/40 text-fg",
    danger: "bg-red-600 hover:bg-red-700 text-white",
    gold: "bg-gold-500 hover:bg-gold-600 text-brand-900 font-semibold shadow-sm",
  };
  const sizes = {
    sm: "h-8 px-3 text-[13px] rounded-md gap-1.5",
    md: "h-9.5 px-4 text-sm rounded-lg gap-2 font-semibold",
    lg: "h-11 px-5 text-[15px] rounded-xl gap-2",
    icon: "h-9 w-9 rounded-lg justify-center",
  };
  return (
    <button
      ref={ref}
      className={cn(
        "inline-flex items-center font-medium transition-colors duration-150 disabled:opacity-60 disabled:cursor-not-allowed select-none",
        variants[variant],
        sizes[size],
        className
      )}
      {...props}
    />
  );
});

// ---------- Input / Textarea / Label ----------
export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(function Input(
  { className, ...props },
  ref
) {
  return (
    <input
      ref={ref}
      className={cn(
        "w-full h-10 px-3.5 rounded-lg bg-card border border-app text-sm text-fg placeholder:text-muted",
        "focus:border-brand-400 focus:ring-2 focus:ring-brand-500/25 outline-none transition-shadow",
        className
      )}
      {...props}
    />
  );
});

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
  function Textarea({ className, ...props }, ref) {
    return (
      <textarea
        ref={ref}
        className={cn(
          "w-full px-3.5 py-2.5 rounded-lg bg-card border border-app text-sm text-fg placeholder:text-muted",
          "focus:border-brand-400 focus:ring-2 focus:ring-brand-500/25 outline-none transition-shadow resize-none",
          className
        )}
        {...props}
      />
    );
  }
);

export function Label({ children, htmlFor, className }: { children: ReactNode; htmlFor?: string; className?: string }) {
  return (
    <label htmlFor={htmlFor} className={cn("block text-[13px] font-medium text-fg mb-1.5", className)}>
      {children}
    </label>
  );
}

// ---------- Card ----------
export function Card({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("bg-card border border-app rounded-xl shadow-[0_1px_3px_rgb(15_35_60/0.06)]", className)}>{children}</div>;
}

// ---------- Badge ----------
export function Badge({
  children,
  tone = "neutral",
  className,
}: {
  children: ReactNode;
  tone?: "neutral" | "brand" | "gold" | "green" | "red" | "amber";
  className?: string;
}) {
  const tones = {
    neutral: "bg-surface-2 dark:bg-brand-900/50 text-muted",
    brand: "bg-brand-100 dark:bg-brand-900/60 text-brand-700 dark:text-brand-300",
    gold: "bg-gold-500/15 text-gold-600 dark:text-gold-400",
    green: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-400",
    red: "bg-red-500/12 text-red-700 dark:text-red-400",
    amber: "bg-amber-500/14 text-amber-700 dark:text-amber-400",
  };
  return (
    <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11.5px] font-medium whitespace-nowrap", tones[tone], className)}>
      {children}
    </span>
  );
}

// ---------- Skeleton ----------
export function Skeleton({ className }: { className?: string }) {
  return <div className={cn("skeleton", className)} aria-hidden />;
}

// ---------- EmptyState ----------
export function EmptyState({
  icon,
  title,
  description,
  action,
}: {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-14 px-6 animate-fade-up">
      {icon && <div className="mb-3 text-muted [&>svg]:w-9 [&>svg]:h-9 opacity-70">{icon}</div>}
      <h3 className="font-semibold text-fg">{title}</h3>
      {description && <p className="text-sm text-muted mt-1 max-w-sm">{description}</p>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

// ---------- ProgressBar ----------
export function ProgressBar({ value, className, tone = "brand" }: { value: number; className?: string; tone?: "brand" | "gold" | "green" }) {
  const tones = { brand: "bg-brand-500", gold: "bg-gold-500", green: "bg-emerald-500" };
  return (
    <div className={cn("h-2 rounded-full bg-surface-2 dark:bg-brand-900/60 overflow-hidden", className)} role="progressbar" aria-valuenow={Math.round(value * 100)} aria-valuemin={0} aria-valuemax={100}>
      <div className={cn("h-full rounded-full transition-all duration-500", tones[tone])} style={{ width: `${Math.min(100, Math.max(0, value * 100))}%` }} />
    </div>
  );
}

// ---------- Modal ----------
export function Modal({
  open,
  onClose,
  title,
  children,
  wide,
}: {
  open: boolean;
  onClose: () => void;
  title?: string;
  children: ReactNode;
  wide?: boolean;
}) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-6" role="dialog" aria-modal="true" aria-label={title}>
      <div className="absolute inset-0 bg-black/45 animate-fade-in" onClick={onClose} />
      <div className={cn("relative bg-card border border-app rounded-t-2xl sm:rounded-xl shadow-2xl w-full animate-fade-up max-h-[92dvh] flex flex-col", wide ? "sm:max-w-3xl" : "sm:max-w-lg")}>
        {title && (
          <div className="flex items-center justify-between px-5 py-3.5 border-b border-app shrink-0">
            <h2 className="font-semibold text-fg">{title}</h2>
            <button onClick={onClose} aria-label="Fermer" className="text-muted hover:text-fg p-1 rounded-md">✕</button>
          </div>
        )}
        <div className="p-5 overflow-y-auto">{children}</div>
      </div>
    </div>
  );
}

// ---------- Spinner ----------
export function Spinner({ className }: { className?: string }) {
  return (
    <svg className={cn("animate-spin h-4 w-4", className)} viewBox="0 0 24 24" fill="none" aria-label="Chargement">
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
      <path className="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
    </svg>
  );
}

// ---------- Tabs (simple) ----------
export function Tabs({
  tabs,
  active,
  onChange,
  className,
}: {
  tabs: { key: string; label: ReactNode }[];
  active: string;
  onChange: (key: string) => void;
  className?: string;
}) {
  return (
    <div className={cn("flex gap-1 p-1 bg-surface-2 dark:bg-brand-900/40 rounded-xl w-fit max-w-full overflow-x-auto", className)} role="tablist">
      {tabs.map((t) => (
        <button
          key={t.key}
          role="tab"
          aria-selected={active === t.key}
          onClick={() => onChange(t.key)}
          className={cn(
            "px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap transition-colors",
            active === t.key ? "bg-card text-fg shadow-sm" : "text-muted hover:text-fg"
          )}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}