"use client";

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

type EmptyStateAction = {
  /** Visible label for the call-to-action. */
  label: string;
  /** If provided, renders a Next.js Link. Mutually exclusive with onClick. */
  href?: string;
  /** If provided, renders a button. */
  onClick?: () => void;
};

type EmptyStateProps = {
  /** Optional icon element (typically a lucide-react icon). */
  icon?: ReactNode;
  /** Required heading explaining the empty state. */
  title: string;
  /** Optional supporting copy shown below the title. */
  description?: string;
  /** Optional single primary action. */
  action?: EmptyStateAction;
  /** Extra class names appended to the root. */
  className?: string;
};

/**
 * EmptyState — generic empty state for admin pages.
 *
 * Centers an icon + title + description and (optionally) a single primary CTA
 * styled with `.ha-btn-primary`. Uses the new admin design tokens for
 * colors and Fraunces for the title.
 */
export default function EmptyState({
  icon,
  title,
  description,
  action,
  className = "",
}: EmptyStateProps) {
  return (
    <div
      className={`flex flex-col items-center justify-center text-center ${className}`.trim()}
      style={{ padding: "3rem 1.5rem" }}
    >
      <div
        className="mb-4"
        style={{ color: "var(--admin-text-muted)" }}
        aria-hidden="true"
      >
        {icon ?? <DefaultEmptyIcon />}
      </div>

      <h3
        className="ha-display"
        style={{
          fontSize: "1.125rem",
          color: "var(--admin-text-primary)",
        }}
      >
        {title}
      </h3>

      {description && (
        <p
          className="mt-2 max-w-sm text-sm leading-relaxed"
          style={{ color: "var(--admin-text-muted)" }}
        >
          {description}
        </p>
      )}

      {action && (
        <div className="mt-6">
          <EmptyStateActionButton action={action} />
        </div>
      )}
    </div>
  );
}

function DefaultEmptyIcon() {
  return <Inbox className="h-9 w-9" strokeWidth={1.25} />;
}

function EmptyStateActionButton({ action }: { action: EmptyStateAction }) {
  // Pick Link vs button based on whether an href is provided. Both render
  // with the same .ha-btn-primary class so the CTA is visually consistent.
  if (action.href) {
    return (
      <Link href={action.href} className="ha-btn-primary">
        {action.label}
      </Link>
    );
  }
  return (
    <button
      type="button"
      onClick={action.onClick}
      className="ha-btn-primary"
    >
      {action.label}
    </button>
  );
}