"use client"

/**
 * Catalog Apps grid — shelf marketing cards for every app.
 *
 * Each card uses the product's own brand hue (mixed toward transparent, not
 * `--card`). Standard shelf UI mock on top. No brand hue bands.
 */

import * as React from "react"
import { Link } from "react-router"

import { Button } from "@/components/ui/button"
import { StatusBadge } from "@/components/ui/status-badge"
import type { ProductHomeCard } from "@/lib/product-home"

import { AdminAppPicker } from "./admin-app-picker"
import { BetaAccessAction } from "./product-beta-access"
import { CampusDoorFooter, useCampusDoor } from "./campus-home"
import { productBrandFieldStyle } from "./product-brand-cover"
import { ProductMarkTile } from "./product-mark-tile"
import { ShelfCardIllustration } from "./product-shelves"

export type CatalogAppState = "active" | "off-campus" | "not-included"

function catalogEntitlementTag(state: CatalogAppState, card: ProductHomeCard) {
  if (state === "active") {
    return <StatusBadge label="Active" tone="success" icon="fa-circle-check" size="sm" />
  }
  if (state === "off-campus") {
    return <StatusBadge label="Other program" tone="warning" icon="fa-location-dot" size="sm" />
  }
  if (card.stage === "beta") return <StatusBadge status="beta" size="sm" />
  if (card.stage === "new") return <StatusBadge status="new" size="sm" />
  return <StatusBadge label="Not included" tone="neutral" icon="fa-tag" size="sm" />
}

const SHELF_CARD =
  "group relative flex h-full flex-col overflow-hidden rounded-xl border border-transparent p-4 font-sans shadow-xs transition-shadow focus-within:shadow-md hover:shadow-md bg-white dark:bg-background sm:p-5"

function CatalogIllustrationBlock({
  card,
  state,
}: {
  card: ProductHomeCard
  state: CatalogAppState
}) {
  return (
    <div className="relative mb-4 w-full">
      <ShelfCardIllustration card={card} showStage={false} />
      <div className="absolute end-2 top-2 z-10 shadow-sm">
        {catalogEntitlementTag(state, card)}
      </div>
    </div>
  )
}

function CatalogActiveFooter({
  card,
  onOpen,
}: {
  card: ProductHomeCard
  onOpen: (card: ProductHomeCard) => void
}) {
  const door = useCampusDoor(card, onOpen)

  return (
    <div className="mt-auto flex min-h-9 flex-col gap-3">
      {door.appScope ? <AdminAppPicker scope={door.appScope} variant="card" /> : null}
      {door.forked ? (
        <>
          <CampusDoorFooter card={card} door={door} />
          <div className="flex justify-end">
            <ProductMarkTile card={card} size="lg" className="shrink-0" />
          </div>
        </>
      ) : (
        <div className="flex items-center justify-between gap-3">
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="relative shrink-0"
            onClick={door.open}
          >
            Open
            <i className="fa-light fa-arrow-right text-sm" aria-hidden="true" />
          </Button>
          <ProductMarkTile card={card} size="lg" className="relative shrink-0" />
        </div>
      )}
    </div>
  )
}

function CatalogUpsellFooter({ card }: { card: ProductHomeCard }) {
  const action =
    card.stage === "beta" ? (
      <BetaAccessAction label={card.label} className="relative shrink-0" />
    ) : (
      <Button variant="outline" size="sm" asChild className="relative shrink-0">
        <Link to={`/home/${card.slug}`}>
          Learn more
          <span className="sr-only"> about {card.label}</span>
        </Link>
      </Button>
    )

  return (
    <div className="mt-auto flex min-h-9 items-center justify-between gap-3">
      {action}
      <ProductMarkTile card={card} size="lg" className="relative shrink-0" />
    </div>
  )
}

function CatalogShelfMarketingCard({
  card,
  state,
  onOpen,
}: {
  card: ProductHomeCard
  state: CatalogAppState
  onOpen?: (card: ProductHomeCard) => void
}) {
  const isActive = state === "active"

  return (
    <li className="min-w-0 list-none">
      <article className={SHELF_CARD} style={productBrandFieldStyle(card.brandColor)}>
        <CatalogIllustrationBlock card={card} state={state} />

        <div className="flex min-h-0 flex-1 flex-col gap-2">
          <h3 className="min-w-0 font-sans text-base font-semibold leading-snug tracking-tight text-balance">
            {isActive ? (
              card.label
            ) : (
              <Link
                to={`/home/${card.slug}`}
                className="after:absolute after:inset-0 after:content-['']"
              >
                {card.label}
              </Link>
            )}
          </h3>
          {!isActive && card.tagline ? (
            <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground text-pretty">
              {card.tagline}
            </p>
          ) : null}
        </div>

        {isActive && onOpen ? (
          <CatalogActiveFooter card={card} onOpen={onOpen} />
        ) : (
          <CatalogUpsellFooter card={card} />
        )}
      </article>
    </li>
  )
}

export function CatalogAppCard({
  card,
  state,
  onOpen,
}: {
  card: ProductHomeCard
  state: CatalogAppState
  onOpen: (card: ProductHomeCard) => void
}) {
  return (
    <CatalogShelfMarketingCard
      card={card}
      state={state}
      onOpen={state === "active" ? onOpen : undefined}
    />
  )
}