import { cva } from "../lib/cva";
import { getMotionRecipeClassNames } from "../lib/motion";

export const emptyStateVariants = cva(
  [
    "grid gap-6 rounded-[var(--ui-card-radius)] border shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
    "text-[var(--color-card-foreground)]",
    getMotionRecipeClassNames("transition", "ring")
  ],
  {
    variants: {
      tone: {
        default: "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
        subtle:
          "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
        accent:
          "border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
      },
      layout: {
        default: "p-8 sm:p-10",
        compact:
          "gap-4 p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center sm:[&>[data-slot=media]]:row-span-2 sm:[&>[data-slot=header]]:justify-items-start sm:[&>[data-slot=actions]]:col-start-2 sm:[&>[data-slot=actions]]:justify-start",
        split:
          "p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:[&>[data-slot=media]]:col-start-2 lg:[&>[data-slot=media]]:row-span-2 lg:[&>[data-slot=media]]:justify-self-end lg:[&>[data-slot=header]]:col-start-1 lg:[&>[data-slot=actions]]:col-start-1 lg:[&>[data-slot=actions]]:justify-start"
      },
      align: {
        center: "justify-items-center text-center",
        start: "justify-items-start text-left"
      }
    },
    defaultVariants: {
      tone: "default",
      layout: "default",
      align: "center"
    }
  }
);

export const emptyStateMediaVariants = cva(
  [
    "grid place-items-center rounded-[var(--ui-card-radius)] border [border-width:var(--ui-card-border-width)]",
    "border-[var(--ui-card-subtle-border)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--ui-card-subtle-bg))]",
    "text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]"
  ],
  {
    variants: {
      size: {
        compact: "min-h-16 min-w-16 p-3",
        default: "min-h-20 min-w-20 p-4",
        hero: "min-h-28 min-w-28 p-6"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
);

export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2", {
  variants: {
    align: {
      center: "justify-items-center text-center",
      start: "justify-items-start text-left"
    }
  },
  defaultVariants: {
    align: "center"
  }
});

export const emptyStateEyebrowVariants = cva(
  "text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
);

export const emptyStateTitleVariants = cva(
  "text-2xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
);

export const emptyStateDescriptionVariants = cva(
  "max-w-[30rem] text-sm leading-6 text-[var(--color-muted-foreground)]"
);

export const emptyStateActionsVariants = cva("flex flex-wrap items-center gap-3", {
  variants: {
    layout: {
      inline: "justify-center",
      stack: "flex-col justify-start sm:flex-row"
    }
  },
  defaultVariants: {
    layout: "inline"
  }
});