// components/portfolio/PortfolioProjectDetails.tsx
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
import { 
  Code, 
  ShoppingCart, 
  Calendar, 
  Users, 
  Smartphone 
} from "lucide-react";

interface Technology {
  name: string;
  icon: React.ReactNode;
}

interface ProjectDetails {
  technologies: Technology[];
  industries: string[];
  duration: string;
  teamSize: string;
  platforms: string[];
}

interface PortfolioProjectDetailsProps {
  title?: string;
  description?: string;
  details: ProjectDetails;
  achievements?: Array<{
    label: string;
    value: string;
    description: string;
  }>;
}

export const PortfolioProjectDetails = ({
  title = "Project Details",
  description = "Detailed overview of the project including technologies, timeline, and team composition.",
  details,
  achievements = []
}: PortfolioProjectDetailsProps) => {
  return (
    <section className="py-24 bg-card/30 relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-green-500/5" />
      <div className="absolute top-20 right-20 w-64 h-64 bg-accent/10 rounded-full blur-3xl opacity-20" />
      <div className="absolute bottom-20 left-20 w-48 h-48 bg-green-500/10 rounded-full blur-3xl opacity-20" />

      <div className="container mx-auto px-4 lg:px-6 relative z-10">
        <div className="max-w-7xl mx-auto">
          {/* Section Header */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
              {title}
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              {description}
            </p>
          </motion.div>

          {/* Project Meta Information Grid */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="grid lg:grid-cols-2 gap-8 mb-20"
          >
            {/* Technologies & Industries Card */}
            <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-accent/20 transition-all duration-500 group">
              <div className="space-y-8">
                {/* Technologies */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 bg-accent/10 backdrop-blur-sm rounded-xl border border-accent/20 flex items-center justify-center group-hover:bg-accent/20 transition-all duration-300">
                      <Code className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground">Technologies</h3>
                  </div>
                  <div className="flex flex-wrap gap-3">
                    {details.technologies.map((tech) => (
                      <Badge
                        key={tech.name}
                        variant="outline"
                        className="text-base border-border/40 bg-background/30 hover:bg-accent/10 hover:border-accent/40 flex items-center gap-2 px-4 py-2 transition-all duration-300"
                      >
                        <span className="text-accent">{tech.icon}</span>
                        {tech.name}
                      </Badge>
                    ))}
                  </div>
                </div>

                {/* Industries */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 bg-green-500/10 backdrop-blur-sm rounded-xl border border-green-500/20 flex items-center justify-center group-hover:bg-green-500/20 transition-all duration-300">
                      <ShoppingCart className="w-6 h-6 text-green-400" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground">Industries</h3>
                  </div>
                  <div className="flex flex-wrap gap-3">
                    {details.industries.map((industry) => (
                      <Badge
                        key={industry}
                        variant="secondary"
                        className="text-base bg-green-500/10 border-green-500/20 text-green-100 hover:bg-green-500/20 px-4 py-2 transition-all duration-300"
                      >
                        {industry}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Timeline & Team Card */}
            <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-blue-400/20 transition-all duration-500 group">
              <div className="space-y-8">
                {/* Duration */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 bg-blue-500/10 backdrop-blur-sm rounded-xl border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300">
                      <Calendar className="w-6 h-6 text-blue-400" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground">Project Timeline</h3>
                  </div>
                  <p className="text-lg text-muted-foreground pl-15">{details.duration}</p>
                </div>

                {/* Team */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 bg-purple-500/10 backdrop-blur-sm rounded-xl border border-purple-500/20 flex items-center justify-center group-hover:bg-purple-500/20 transition-all duration-300">
                      <Users className="w-6 h-6 text-purple-400" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground">Team Composition</h3>
                  </div>
                  <p className="text-lg text-muted-foreground pl-15">{details.teamSize}</p>
                </div>

                {/* Platforms */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 bg-orange-500/10 backdrop-blur-sm rounded-xl border border-orange-500/20 flex items-center justify-center group-hover:bg-orange-500/20 transition-all duration-300">
                      <Smartphone className="w-6 h-6 text-orange-400" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground">Target Platforms</h3>
                  </div>
                  <div className="flex gap-3 pl-15">
                    {details.platforms.map((platform) => (
                      <Badge
                        key={platform}
                        variant="outline"
                        className="text-base border-orange-400/40 bg-orange-500/10 text-orange-100 hover:bg-orange-500/20 px-3 py-1"
                      >
                        {platform}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Key Achievements Section */}
          {achievements.length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="mb-16"
            >
              <div className="text-center mb-12">
                <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
                  Key Impact & Results
                </h2>
                <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                  Measurable outcomes that demonstrate the project's success
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {achievements.map((achievement, index) => (
                  <motion.div
                    key={achievement.label}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                    whileHover={{
                      scale: 1.02,
                      y: -4,
                      transition: { duration: 0.3, ease: "easeOut" }
                    }}
                    className="bg-background/50 backdrop-blur-xl rounded-2xl p-8 border border-border/40 hover:border-accent/30 hover:bg-background/60 transition-all duration-500 group cursor-pointer relative overflow-hidden"
                  >
                    {/* Card Background Gradient */}
                    <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

                    {/* Content */}
                    <div className="relative z-10 text-center">
                      {/* Value */}
                      <div className="text-3xl lg:text-4xl font-bold text-accent mb-4 group-hover:text-accent transition-colors duration-300">
                        {achievement.value}
                      </div>

                      {/* Label */}
                      <div className="text-xl font-semibold text-foreground mb-3 group-hover:text-foreground transition-colors duration-300">
                        {achievement.label}
                      </div>

                      {/* Description */}
                      <div className="text-base text-muted-foreground leading-relaxed group-hover:text-muted-foreground transition-colors duration-300">
                        {achievement.description}
                      </div>
                    </div>

                    {/* Hover Effect Line */}
                    <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-accent/50 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}
        </div>
      </div>
    </section>
  );
};