import clsx from "clsx";

/** Consistent loading spinner matching Viraly SPA */
export function Spinner({ size = "5" }: { size?: string }) {
  return (
    <div
      className={`vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin`}
      style={{ width: `${parseInt(size) * 4}px`, height: `${parseInt(size) * 4}px` }}
    />
  );
}

/** Page-level loading state */
export function PageLoading({ text = "Loading..." }: { text?: string }) {
  return (
    <div className="vr-flex vr-items-center vr-justify-center vr-gap-3 vr-py-16 vr-text-gray-400 vr-text-sm">
      <Spinner />
      {text}
    </div>
  );
}

/** Empty state matching Viraly SPA pattern */
export function EmptyState({
  icon,
  title,
  description,
  action,
}: {
  icon: string;
  title: string;
  description: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="vr-text-center vr-py-14 vr-px-6">
      <i className={`${icon} vr-text-4xl vr-text-gray-200 vr-mb-4 vr-block`} />
      <h3 className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-mb-1.5">{title}</h3>
      <p className="vr-text-xs vr-text-gray-500 vr-max-w-sm vr-mx-auto vr-leading-relaxed">{description}</p>
      {action && <div className="vr-mt-5">{action}</div>}
    </div>
  );
}

/** Error banner matching Viraly SPA pattern (border-l-4) */
export function ErrorBanner({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <div className="vr-flex vr-items-start vr-gap-3 vr-p-4 vr-rounded-lg vr-bg-red-50 vr-border-l-4 vr-border-red-400">
      <i className="fa-solid fa-circle-exclamation vr-text-red-400 vr-mt-0.5" />
      <div className="vr-flex-1">
        <p className="vr-text-sm vr-font-medium vr-text-red-800">{message}</p>
        {onRetry && (
          <button
            onClick={onRetry}
            className="vr-text-xs vr-text-red-600 vr-underline vr-mt-1 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
          >
            Try again
          </button>
        )}
      </div>
    </div>
  );
}

/** Info banner (blue, matching Viraly SPA analytics empty state) */
export function InfoBanner({ icon, message }: { icon?: string; message: string }) {
  return (
    <div className="vr-flex vr-items-center vr-gap-3 vr-p-4 vr-rounded-lg vr-bg-blue-50 vr-border vr-border-blue-200">
      <i className={clsx(icon || "fa-solid fa-circle-info", "vr-text-blue-400")} />
      <p className="vr-text-sm vr-text-blue-800">{message}</p>
    </div>
  );
}

/** Section card wrapper matching Viraly SPA */
export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={clsx("vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-7", className)}>
      {children}
    </div>
  );
}

/** Section header */
export function SectionHeader({
  title,
  description,
  action,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="vr-flex vr-items-start vr-justify-between vr-mb-5">
      <div>
        <h2 className="vr-text-lg vr-font-bold vr-text-gray-900 vr-mb-0.5">{title}</h2>
        {description && <p className="vr-text-sm vr-text-gray-500">{description}</p>}
      </div>
      {action && <div className="vr-flex-shrink-0">{action}</div>}
    </div>
  );
}

/** Primary action button matching Viraly SPA brand solid */
export function PrimaryButton({
  children,
  onClick,
  disabled,
  loading,
  className,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  loading?: boolean;
  className?: string;
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled || loading}
      className={clsx(
        "vr-inline-flex vr-items-center vr-justify-center vr-gap-2 vr-px-5 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer",
        className
      )}
    >
      {loading && <Spinner size="4" />}
      {children}
    </button>
  );
}

/** Secondary/outline button */
export function SecondaryButton({
  children,
  onClick,
  disabled,
  className,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={clsx(
        "vr-inline-flex vr-items-center vr-justify-center vr-gap-2 vr-px-5 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-medium vr-text-gray-600 vr-bg-gray-100 hover:vr-bg-gray-200 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer",
        className
      )}
    >
      {children}
    </button>
  );
}

/** Purple/AI accent button matching Viraly SPA */
export function AiButton({
  children,
  onClick,
  disabled,
  loading,
  className,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  loading?: boolean;
  className?: string;
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled || loading}
      className={clsx(
        "vr-inline-flex vr-items-center vr-justify-center vr-gap-2 vr-px-4 vr-py-2 vr-rounded-lg vr-text-xs vr-font-semibold vr-text-white vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer",
        "vr-bg-secondary-600 hover:vr-bg-secondary-700",
        className
      )}
    >
      {loading && <Spinner size="3" />}
      {children}
    </button>
  );
}

/** Status badge styles for calendar/post displays */
export const STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
  Scheduled: { bg: "vr-bg-blue-50", text: "vr-text-blue-600", label: "Scheduled" },
  Published: { bg: "vr-bg-emerald-50", text: "vr-text-emerald-600", label: "Published" },
  Draft: { bg: "vr-bg-gray-100", text: "vr-text-gray-500", label: "Draft" },
  Failed: { bg: "vr-bg-red-50", text: "vr-text-red-500", label: "Failed" },
  Processing: { bg: "vr-bg-amber-50", text: "vr-text-amber-600", label: "Processing" },
  PendingApproval: { bg: "vr-bg-orange-50", text: "vr-text-orange-600", label: "Pending" },
  Queued: { bg: "vr-bg-purple-50", text: "vr-text-purple-600", label: "Queued" },
};

/** Platform icon emoji lookup */
export const PLATFORM_ICONS: Record<string, string> = {
  Facebook: "📘",
  Instagram: "📷",
  TikTok: "🎵",
  Twitter: "𝕏",
  LinkedIn: "💼",
  Pinterest: "📌",
  YouTube: "▶️",
  Threads: "🧵",
  Bluesky: "🦋",
  Mastodon: "🐘",
};