import { useRef, useState } from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ArrowUpRight } from "lucide-react";

interface StrategyCardProps {
  title: string;
  description: string;
  returnRange: string;
  riskLevel: "Low" | "Medium" | "Moderate";
  icon: React.ReactNode;
  isVisible?: boolean;
  delay?: number;
  clickable?: boolean;
  comingSoon?: boolean;
}

export default function StrategyCard({
  title,
  description,
  returnRange,
  riskLevel,
  icon,
  isVisible = true,
  delay = 0,
  clickable = true,
  comingSoon = false,
}: StrategyCardProps) {
  const cardRef = useRef<HTMLDivElement>(null);
  const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0, scale: 1 });

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    setTransform({
      rotateX: y * -8,
      rotateY: x * 8,
      scale: 1.02,
    });
  };

  const handleMouseLeave = () => {
    setTransform({ rotateX: 0, rotateY: 0, scale: 1 });
  };

  const riskColors = {
    Low: "bg-chart-2/20 text-chart-2",
    Medium: "bg-chart-5/20 text-chart-5",
    Moderate: "bg-chart-1/20 text-chart-1",
  };

  return (
    <div
      ref={cardRef}
      className={`transition-all duration-700 ease-out ${
        isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-12 scale-95"
      }`}
      style={{
        transitionDelay: `${delay}ms`,
        perspective: "1000px",
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <Card
        className={`p-8 ${clickable ? "cursor-pointer" : "cursor-default"} group relative overflow-visible border-card-border bg-card/50 backdrop-blur-sm transition-shadow duration-300 hover:shadow-xl hover:shadow-primary/5`}
        style={{
          transform: `perspective(1000px) rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg) scale(${transform.scale})`,
          transition: "transform 0.15s ease-out",
        }}
        data-testid={`card-strategy-${title.toLowerCase().replace(/\s/g, "-")}`}
      >
        <div className="flex items-start justify-between gap-4 mb-6">
          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
            {icon}
          </div>
          {comingSoon ? (
            <Badge variant="outline" className="border-dashed text-muted-foreground">
              Coming Soon
            </Badge>
          ) : (
            <ArrowUpRight className="w-5 h-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          )}
        </div>

        <h3 className="text-xl font-semibold mb-2" data-testid={`text-strategy-title-${title.toLowerCase().replace(/\s/g, "-")}`}>
          {title}
        </h3>
        <p className="text-muted-foreground mb-6 leading-relaxed">
          {description}
        </p>

        <div className="flex items-center justify-between gap-4 flex-wrap">
          <div>
            <p className="text-sm text-muted-foreground mb-1">Expected Returns</p>
            <p className="text-lg font-semibold text-chart-2">{returnRange}</p>
          </div>
          <Badge variant="secondary" className={`${riskColors[riskLevel]} border-0`}>
            {riskLevel} Risk
          </Badge>
        </div>
      </Card>
    </div>
  );
}
