import * as React from "react";
import { cn } from "@/lib/utils";
import { useTheme } from "@/contexts/ThemeContext";
import { getBackgroundScopeForPath, isDecorationScopeActive } from "@/lib/appearanceScopes";
import type { AppearanceCardDecorationAnchor } from "@shared/appearance";
import { useLocation } from "wouter";

const cardDecorationAnchorClasses: Record<AppearanceCardDecorationAnchor, string> = {
  top_left: "left-0 top-0 -translate-x-[18%] -translate-y-[18%]",
  top_right: "right-0 top-0 translate-x-[18%] -translate-y-[18%]",
  bottom_left: "bottom-0 left-0 -translate-x-[18%] translate-y-[18%]",
  bottom_right: "bottom-0 right-0 translate-x-[18%] translate-y-[18%]",
};

function Card({ className, children, ...props }: React.ComponentProps<"div">) {
  const [location] = useLocation();
  const { appearance } = useTheme();
  const scope = getBackgroundScopeForPath(location);
  const cardDecorations = React.useMemo(
    () =>
      (appearance.decorativeElements || []).filter(
        (entry) =>
          entry.imageUrl &&
          entry.layer === "card" &&
          isDecorationScopeActive(entry.scope, scope),
      ),
    [appearance.decorativeElements, scope],
  );

  return (
    <div
      data-slot="card"
      className={cn(
        "portal-card-shell bg-card text-card-foreground flex flex-col gap-4 rounded-xl border border-border/80 py-4 shadow-[var(--portal-card-shadow)] transition-[transform,box-shadow,border-color,background-color] duration-[var(--portal-motion-base)]",
        className
      )}
      {...props}
    >
      {cardDecorations.map((entry) => (
        <div
          key={entry.id}
          aria-hidden="true"
          className={cn(
            "portal-card-decoration",
            cardDecorationAnchorClasses[entry.cardAnchor],
          )}
          style={{
            width: `${entry.widthPercent}%`,
            opacity: entry.opacity / 100,
            filter: `blur(${entry.blurRadius}px)`,
            margin: `${entry.cardInsetPercent}%`,
          }}
        >
          <img
            src={entry.imageUrl}
            alt=""
            className="h-full w-full object-contain"
          />
        </div>
      ))}
      {children}
    </div>
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
        className
      )}
      {...props}
    />
  );
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  );
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  );
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-5", className)}
      {...props}
    />
  );
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-5 [.border-t]:pt-4", className)}
      {...props}
    />
  );
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
};
