"use client";

import React, { useRef, useState, useCallback } from "react";
import Link from "next/link";
import type { ReactNode } from "react";
import { ArrowRight } from "lucide-react";
import { Icon, type IconName } from "@/lib/icons";
import { cn } from "@/lib/utils";

const cardBase =
  "relative overflow-hidden rounded-2xl border border-border/80 bg-card p-6 shadow-xs transition-all duration-300 hover:-translate-y-1 hover:border-[#4FDAF1]/40 hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0";

/** Custom Hook for mouse-following bubble blur tracking on cards */
function useCardSpotlight() {
  const divRef = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ x: -400, y: -400 });
  const [hovered, setHovered] = useState(false);

  const onMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current) return;
    const rect = divRef.current.getBoundingClientRect();
    setPos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  }, []);

  const onMouseEnter = useCallback(() => setHovered(true), []);
  const onMouseLeave = useCallback(() => setHovered(false), []);

  const spotlightElement = (
    <div
      className="pointer-events-none absolute -inset-px z-0 transition-opacity duration-300"
      style={{
        opacity: hovered ? 1 : 0,
        background: `radial-gradient(320px circle at ${pos.x}px ${pos.y}px, rgba(79, 218, 241, 0.08), transparent 70%)`,
      }}
      aria-hidden="true"
    />
  );

  return { divRef, onMouseMove, onMouseEnter, onMouseLeave, spotlightElement };
}

/** Rounded-square icon tile (§5.5) */
export function IconTile({
  name,
  className,
  size = "md",
}: {
  name: IconName;
  className?: string;
  size?: "sm" | "md";
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center justify-center rounded-xl bg-[#4FDAF1]/10 text-[#67B7E7] transition-colors group-hover:bg-[#4FDAF1] group-hover:text-[#020202]",
        size === "md" ? "size-11" : "size-9",
        className,
      )}
    >
      <Icon name={name} className={size === "md" ? "size-5" : "size-4.5"} />
    </span>
  );
}

export function FeatureCard({
  icon,
  title,
  children,
  badge,
  className,
}: {
  icon: IconName;
  title: string;
  children: ReactNode;
  badge?: string;
  className?: string;
}) {
  const { divRef, onMouseMove, onMouseEnter, onMouseLeave, spotlightElement } =
    useCardSpotlight();

  return (
    <div
      ref={divRef}
      onMouseMove={onMouseMove}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      className={cn(cardBase, "group", className)}
    >
      {spotlightElement}
      <div className="relative z-10">
        <div className="flex items-center justify-between">
          <IconTile name={icon} />
          {badge && (
            <span className="rounded-full bg-secondary px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
              {badge}
            </span>
          )}
        </div>
        <h3 className="mt-4 font-display text-lg font-semibold text-foreground">
          {title}
        </h3>
        <p className="mt-2 text-pretty text-sm text-muted-foreground leading-relaxed">
          {children}
        </p>
      </div>
    </div>
  );
}

export function SolutionCard({
  href,
  icon,
  title,
  description,
  tag,
  className,
}: {
  href: string;
  icon: IconName;
  title: string;
  description: string;
  tag?: string;
  className?: string;
}) {
  return (
    <Link
      href={href}
      className={cn(
        cardBase,
        "group flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        className,
      )}
    >
      <div className="flex items-center justify-between">
        <IconTile name={icon} />
        {tag && (
          <span className="rounded-full bg-primary/10 px-2.5 py-0.5 text-[10px] font-semibold text-primary">
            {tag}
          </span>
        )}
      </div>
      <h3 className="mt-4 font-display text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
        {title}
      </h3>
      <p className="mt-2 flex-1 text-pretty text-sm text-muted-foreground leading-relaxed">
        {description}
      </p>
      <span className="mt-5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
        Explore Solution
        <ArrowRight
          className="size-3.5 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
          aria-hidden
        />
      </span>
    </Link>
  );
}

export function IndustryCard({
  href,
  icon,
  title,
  description,
  className,
}: {
  href: string;
  icon: IconName;
  title: string;
  description: string;
  className?: string;
}) {
  return (
    <Link
      href={href}
      className={cn(
        cardBase,
        "group flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        className,
      )}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <IconTile name={icon} size="sm" />
          <h3 className="font-display text-base font-semibold text-foreground group-hover:text-primary transition-colors">
            {title}
          </h3>
        </div>
      </div>
      <p className="mt-3 flex-1 text-pretty text-sm text-muted-foreground leading-relaxed">
        {description}
      </p>
      <span className="mt-4 inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-primary">
        Explore Use Cases
        <ArrowRight
          className="size-3.5 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
          aria-hidden
        />
      </span>
    </Link>
  );
}

export function StatCard({
  value,
  label,
  note,
  className,
}: {
  value: string;
  label: string;
  note?: string;
  className?: string;
}) {
  return (
    <div className={cn(cardBase, className)}>
      <div className="font-display text-4xl font-medium tracking-tight text-foreground">
        {value}
      </div>
      <div className="mt-1 text-sm text-muted-foreground">{label}</div>
      {note ? (
        <div className="mt-3 inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground">
          {note}
        </div>
      ) : null}
    </div>
  );
}

export function IntegrationTile({
  name,
  icon,
  className,
}: {
  name: string;
  icon: IconName;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-2.5 rounded-xl border border-border/80 bg-card px-4 py-2.5 shadow-xs transition-all hover:border-primary/40 hover:shadow-sm",
        className,
      )}
    >
      <Icon name={icon} className="size-4.5 text-foreground/70" />
      <span className="text-sm font-medium text-foreground">{name}</span>
    </div>
  );
}