"use client";

import * as React from "react";
import { cn } from "../utils/cn";

export const BackgroundGrid: React.FC = () => (
  <div className="fixed inset-0 pointer-events-none -z-20" aria-hidden="true">
    <div
      className="absolute inset-0 opacity-[0.015]"
      style={{
        backgroundImage: `
          linear-gradient(#94a3b8 1px, transparent 1px),
          linear-gradient(90deg, #94a3b8 1px, transparent 1px)
        `,
        backgroundSize: "80px 80px",
      }}
    />
  </div>
);

interface CardProps {
  children: React.ReactNode;
  className?: string;
  variant?: "white" | "dark" | "gray" | "glass";
  hover?: boolean;
  padding?: "none" | "small" | "normal" | "large";
  techBorder?: boolean;
}

export const Card: React.FC<CardProps> = ({
  children,
  className = "",
  variant = "white",
  hover = true,
  padding = "normal",
  techBorder = false,
}) => {
  const variants = {
    white: "bg-white border-slate-100 text-slate-900 shadow-sm",
    dark: "bg-slate-900 border-white/5 text-white shadow-xl",
    gray: "bg-slate-50/50 border-slate-100 text-slate-900",
    glass: "glass text-slate-900",
  };

  const paddings = {
    none: "p-0",
    small: "p-4 md:p-8",
    normal: "p-5 md:p-10",
    large: "p-6 md:p-12",
  };

  const [hexId, setHexId] = React.useState("0x0000");

  React.useEffect(() => {
    setHexId(
      `0x${Math.floor(Math.random() * 0xffff)
        .toString(16)
        .padStart(4, "0")
        .toUpperCase()}`,
    );
  }, []);

  return (
    <div
      className={cn(
        "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out relative overflow-hidden group/card",
        variants[variant],
        paddings[padding],
        hover ? "hover:border-slate-200 hover:shadow-md" : "",
        techBorder ? "tech-border" : "",
        className,
      )}
    >
      {/* Binary corner accent on hover */}
      {hover && (
        <span
          className="absolute top-3 right-3 text-[7px] font-mono tracking-widest opacity-0 group-hover/card:opacity-100 transition-opacity duration-500 select-none pointer-events-none"
          style={{
            color:
              variant === "dark"
                ? "rgba(255,255,255,0.1)"
                : "rgba(148,163,184,0.2)",
          }}
          aria-hidden="true"
        >
          {hexId}
        </span>
      )}
      {children}
    </div>
  );
};

export const Container: React.FC<{
  children: React.ReactNode;
  className?: string;
  variant?: "narrow" | "normal" | "wide";
}> = ({ children, className = "", variant = "normal" }) => {
  const variants = {
    narrow: "max-w-4xl",
    normal: "max-w-6xl",
    wide: "max-w-7xl",
  };

  return (
    <div
      className={cn(
        "mx-auto px-5 md:px-6 w-full",
        variants[variant],
        className,
      )}
    >
      {children}
    </div>
  );
};