import { Show, type JSX } from "solid-js";

export interface HoverFeatureItem {
  name: string;
  description: string;
  href?: string;
  soon?: boolean;
  children?: JSX.Element;
  containerClassName?: string;
  fadeBottom?: boolean;
}

export interface HoverFeatureCardsProps {
  items: HoverFeatureItem[];
  className?: string;
}

function HoverFeatureCard(props: { item: HoverFeatureItem }) {
  const { item } = props;

  const inner = (
    <div
      class={`group flex flex-col w-full relative transition-transform duration-300 ease-out ${
        item.soon ? "opacity-70 cursor-not-allowed" : item.href ? "cursor-pointer" : ""
      }`}
      classList={{
        "hover:-translate-y-1": !item.soon,
      }}
    >
      <div
        class={`flex flex-col rounded-2xl border h-72 bg-canvas transition-all duration-300 w-full overflow-hidden ${
          !item.soon && item.href ? "hover:border-accent/40 hover:shadow-lg" : ""
        } ${item.soon ? "border-dashed border-border" : "border-border"}`}
      >
        <Show when={item.soon}>
          <span class="absolute top-3 right-3 z-10 text-xs text-ink-subtle border border-border rounded-full px-2.5 py-1 bg-canvas-subtle">
            Coming soon
          </span>
        </Show>

        <div
          class={`relative w-full flex-1 overflow-hidden px-5 pt-6 pb-4 flex flex-col gap-3 ${
            item.containerClassName ?? ""
          }`}
        >
          <span
            class={`font-display font-semibold text-xl tracking-tight ${
              item.soon ? "text-ink-subtle" : "text-ink"
            }`}
          >
            {item.name}
          </span>

          <Show when={item.children}>
            <div class="flex-1 min-h-0">{item.children}</div>
          </Show>

          <Show when={item.fadeBottom}>
            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-canvas to-transparent" />
          </Show>
        </div>
      </div>

      {/* Description panel that slides up on hover */}
      <div
        class="overflow-hidden w-11/12 self-center transition-all duration-300 ease-out translate-y-[-16px] opacity-0 group-hover:translate-y-0 group-hover:opacity-100"
      >
        <div class="py-3 px-5 relative border border-t-0 rounded-b-2xl bg-canvas-subtle/60">
          <div class="pointer-events-none w-[103%] bg-gradient-to-b from-canvas-subtle/60 to-transparent h-10 absolute -top-1 -left-1" />
          <p class="text-sm text-ink-muted leading-relaxed">{item.description}</p>
        </div>
      </div>
    </div>
  );

  if (item.href && !item.soon) {
    return (
      <a href={item.href} class="block">
        {inner}
      </a>
    );
  }

  return inner;
}

export function HoverFeatureCards(props: HoverFeatureCardsProps) {
  return (
    <div class={`grid grid-cols-1 sm:grid-cols-2 gap-5 w-full ${props.className ?? ""}`}>
      {props.items.map((item) => (
        <HoverFeatureCard item={item} />
      ))}
    </div>
  );
}
