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

export const dataTableRootVariants = cva("grid gap-4 text-[var(--color-foreground)]");

export const dataTableToolbarVariants = cva(
  [
    "flex flex-wrap items-center justify-between gap-3 rounded-[calc(var(--ui-card-radius)-0.25rem)]",
    "border border-[color-mix(in_oklch,var(--ui-card-subtle-border)_84%,transparent)] [border-width:var(--ui-card-border-width)]",
    "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_82%,white_18%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,white_12%))]",
    "px-3 py-3 shadow-[var(--ui-card-subtle-shadow)] sm:px-4",
    "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
    "focus-within:border-[color-mix(in_oklch,var(--color-primary)_14%,var(--ui-card-subtle-border))]",
    "focus-within:shadow-[0_16px_32px_color-mix(in_oklch,var(--color-primary)_8%,transparent),inset_0_1px_0_rgba(255,255,255,0.42)]"
  ]
);

export const dataTableContentVariants = cva(
  [
    "relative overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] [border-width:var(--ui-card-border-width)]",
    "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_74%,white_26%),color-mix(in_oklch,var(--ui-card-default-bg)_92%,var(--ui-card-subtle-bg)))]",
    "shadow-[var(--ui-card-default-shadow)]",
    "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-16 before:bg-[linear-gradient(180deg,color-mix(in_oklch,white_54%,transparent),transparent)] before:content-['']",
    getMotionRecipeClassNames("transition", "ring")
  ],
  {
    variants: {
      loading: {
        false: "",
        true: "opacity-95 saturate-[0.96]"
      }
    },
    defaultVariants: {
      loading: false
    }
  }
);

export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");

export const dataTableHeaderVariants = cva(
  [
    "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-default-bg)_82%,var(--ui-card-subtle-bg)))]",
    "shadow-[inset_0_-1px_0_color-mix(in_oklch,var(--color-border)_74%,transparent)]"
  ]
);

export const dataTableHeaderCellVariants = cva(
  [
    "relative px-4 first:pl-5 last:pr-5 align-middle text-[0.72rem] font-medium uppercase tracking-[var(--tracking-caps)]",
    "text-[var(--color-muted-foreground)]"
  ],
  {
    variants: {
      align: {
        start: "text-left",
        center: "text-center",
        end: "text-right"
      },
      density: {
        comfortable: "py-4",
        compact: "py-3 text-[0.68rem]"
      },
      sortable: {
        false: "",
        true: "select-none"
      }
    },
    defaultVariants: {
      align: "start",
      density: "comfortable",
      sortable: false
    }
  }
);

export const dataTableBodyVariants = cva("");

export const dataTableRowVariants = cva(
  [
    "group/row",
    "border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]",
    "transition-[background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
    "[&>td]:transition-[background-color,box-shadow] [&>td]:duration-[var(--dur-base)] [&>td]:ease-[var(--ease-standard)]",
    "motion-reduce:[&>td]:transition-none"
  ],
  {
    variants: {
      interactive: {
        false: "",
        true:
          [
            "hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,var(--ui-card-subtle-bg)))]",
            "hover:shadow-[inset_0_1px_0_color-mix(in_oklch,white_34%,transparent),0_10px_20px_color-mix(in_oklch,var(--color-primary)_5%,transparent)]",
            "hover:[&>td]:bg-[color-mix(in_oklch,var(--color-surface-bright)_62%,transparent)]",
            "hover:[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent)]"
          ]
      },
      selected: {
        false: "",
        true:
          [
            "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_64%,white_36%),color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg)))]",
            "shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent),0_14px_24px_color-mix(in_oklch,var(--color-primary)_7%,transparent)]",
            "[&>td]:bg-[color-mix(in_oklch,var(--color-primary-container)_26%,transparent)]",
            "[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_40%,transparent)]"
          ]
      }
    },
    defaultVariants: {
      interactive: true,
      selected: false
    }
  }
);

export const dataTableCellVariants = cva(
  "px-4 first:pl-5 last:pr-5 align-top text-[var(--color-card-foreground)]",
  {
    variants: {
      align: {
        start: "text-left",
        center: "text-center",
        end: "text-right"
      },
      density: {
        comfortable: "py-4 text-sm leading-6",
        compact: "py-3 text-[0.8125rem] leading-5"
      }
    },
    defaultVariants: {
      align: "start",
      density: "comfortable"
    }
  }
);

export const dataTableSearchContainerVariants = cva(
  "w-full max-w-[23.5rem] min-w-[15rem]"
);

export const dataTablePaginationVariants = cva(
  [
    "flex flex-wrap items-center justify-between gap-3 border-t px-5 py-3",
    "border-[color-mix(in_oklch,var(--color-border)_72%,transparent)]",
    "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%))]",
    "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
    "[&>*]:transition-[background-color,border-color,box-shadow,opacity] [&>*]:duration-[var(--dur-base)] [&>*]:ease-[var(--ease-standard)]",
    "motion-reduce:[&>*]:transition-none"
  ]
);

export const dataTableSelectionBarVariants = cva(
  [
    "flex flex-wrap items-center justify-between gap-3 rounded-[calc(var(--ui-card-radius)-0.2rem)]",
    "border border-[color-mix(in_oklch,var(--color-primary)_26%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]",
    "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_70%,white_30%),color-mix(in_oklch,var(--color-primary)_6%,var(--ui-card-default-bg)))] px-4 py-3.5",
    "shadow-[var(--ui-card-subtle-shadow)]",
    "motion-enter-fade motion-enter-rise",
    "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
    "[&>*]:transition-opacity [&>*]:duration-[var(--dur-fast)] [&>*]:ease-[var(--ease-standard)]",
    "motion-reduce:[&>*]:transition-none"
  ]
);

export const dataTableStatusVariants = cva(
  "grid min-h-52 place-items-center px-6 py-8"
);