import {
  ArrowRight,
  Clock,
  Users,
  Star,
  TrendingUp,
  Award,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

// Sample project data with metrics
const projects = [
  {
    id: 1,
    title: 'Enterprise CRM System',
    category: 'Full Stack Development',
    description:
      'Engineered a comprehensive CRM solution with advanced analytics dashboard and automation tools for enterprise clients.',
    image:
      'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['React', 'Node.js', 'PostgreSQL', 'Redis', 'Docker'],
    stats: {
      duration: '8 months',
      teamSize: 6,
      impactScore: 92,
      clientSatisfaction: 96,
      complexity: 85,
    },
    link: '#',
  },
  {
    id: 2,
    title: 'AI-Powered Content Analyzer',
    category: 'Machine Learning',
    description:
      'Developed an AI solution that automatically analyzes, categorizes, and extracts key insights from various content types.',
    image:
      'https://images.unsplash.com/photo-1655720828018-edd2daec9349?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['Python', 'TensorFlow', 'FastAPI', 'AWS'],
    stats: {
      duration: '6 months',
      teamSize: 4,
      impactScore: 89,
      clientSatisfaction: 90,
      complexity: 95,
    },
    link: '#',
  },
  {
    id: 3,
    title: 'FinTech Mobile Application',
    category: 'Mobile Development',
    description:
      'Created a secure financial management app with real-time transaction monitoring, budgeting tools, and investment tracking.',
    image:
      'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?q=80&w=2068&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['React Native', 'Firebase', 'Redux', 'Node.js', 'Jest'],
    stats: {
      duration: '5 months',
      teamSize: 5,
      impactScore: 87,
      clientSatisfaction: 94,
      complexity: 78,
    },
    link: '#',
  },
  {
    id: 4,
    title: 'E-commerce Platform Redesign',
    category: 'UI/UX & Front-end',
    description:
      'Completely redesigned and rebuilt the front-end of an e-commerce platform, improving conversion rates and user engagement.',
    image:
      'https://images.unsplash.com/photo-1557821552-17105176677c?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['Next.js', 'TypeScript', 'TailwindCSS', 'Stripe'],
    stats: {
      duration: '4 months',
      teamSize: 3,
      impactScore: 83,
      clientSatisfaction: 98,
      complexity: 72,
    },
    link: '#',
  },
  {
    id: 5,
    title: 'IoT Fleet Management System',
    category: 'IoT Development',
    description:
      'Built an IoT-based solution for real-time tracking, diagnostics, and management of vehicle fleets with predictive maintenance.',
    image:
      'https://images.unsplash.com/photo-1511578194003-00c80e42dc9b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['Python', 'MQTT', 'React', 'MongoDB', 'Azure IoT'],
    stats: {
      duration: '10 months',
      teamSize: 7,
      impactScore: 95,
      clientSatisfaction: 92,
      complexity: 90,
    },
    link: '#',
  },
  {
    id: 6,
    title: 'Blockchain Supply Chain Solution',
    category: 'Blockchain Development',
    description:
      'Developed a blockchain-based supply chain tracking system providing end-to-end visibility and improved authentication.',
    image:
      'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
    technologies: ['Solidity', 'Ethereum', 'Node.js', 'React', 'Web3.js'],
    stats: {
      duration: '9 months',
      teamSize: 5,
      impactScore: 91,
      clientSatisfaction: 88,
      complexity: 93,
    },
    link: '#',
  },
];

export default function PortfolioStatsCards() {
  return (
    <div className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4 2xl:max-w-[1400px]">
        {/* Section header */}
        <div className="mb-12 text-center md:mb-16">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Project Portfolio & Metrics
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl">
            A quantitative look at my key projects, highlighting scope, impact,
            and technical complexity
          </p>
        </div>

        {/* Project grid */}
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => (
            <Card
              key={project.id}
              className="group overflow-hidden pt-0 transition-all duration-300 hover:shadow-lg"
            >
              {/* Project image with category overlay */}
              <div className="relative aspect-[3/2] overflow-hidden">
                <img
                  src={project.image}
                  alt={project.title}
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>

                <div className="absolute right-4 bottom-4 left-4">
                  <Badge
                    variant="secondary"
                    className="bg-primary/90 text-primary-foreground backdrop-blur-sm"
                  >
                    {project.category}
                  </Badge>
                  <h3 className="mt-2 text-xl font-bold text-white drop-shadow-sm">
                    {project.title}
                  </h3>
                </div>
              </div>

              <CardHeader>
                <p className="text-muted-foreground line-clamp-2">
                  {project.description}
                </p>
              </CardHeader>

              <CardContent>
                {/* Project stats section */}
                <div className="mb-4 grid grid-cols-2 gap-4">
                  <div className="col-span-2 flex flex-col gap-2 xl:flex-row">
                    <div className="flex w-full flex-row items-center gap-2">
                      <Clock className="text-muted-foreground h-4 w-4" />
                      <span className="text-muted-foreground text-sm">
                        Duration:
                      </span>
                      <span className="text-sm font-medium">
                        {project.stats.duration}
                      </span>
                    </div>

                    <div className="flex w-full flex-row items-center gap-2">
                      <Users className="text-muted-foreground h-4 w-4" />
                      <span className="text-muted-foreground text-sm">
                        Team:
                      </span>
                      <span className="text-sm font-medium">
                        {project.stats.teamSize} people
                      </span>
                    </div>
                  </div>

                  <div className="col-span-2 flex flex-col gap-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <TrendingUp className="text-muted-foreground h-4 w-4" />
                        <span className="text-muted-foreground text-sm">
                          Impact Score:
                        </span>
                      </div>
                      <span className="text-sm font-medium">
                        {project.stats.impactScore}/100
                      </span>
                    </div>
                    <Progress
                      value={project.stats.impactScore}
                      className="h-1.5"
                    />
                  </div>

                  <div className="col-span-2 flex flex-col gap-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Star className="text-muted-foreground h-4 w-4" />
                        <span className="text-muted-foreground text-sm">
                          Client Satisfaction:
                        </span>
                      </div>
                      <span className="text-sm font-medium">
                        {project.stats.clientSatisfaction}/100
                      </span>
                    </div>
                    <Progress
                      value={project.stats.clientSatisfaction}
                      className="h-1.5"
                    />
                  </div>

                  <div className="col-span-2 flex flex-col gap-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Award className="text-muted-foreground h-4 w-4" />
                        <span className="text-muted-foreground text-sm">
                          Complexity:
                        </span>
                      </div>
                      <span className="text-sm font-medium">
                        {project.stats.complexity}/100
                      </span>
                    </div>
                    <Progress
                      value={project.stats.complexity}
                      className="h-1.5"
                    />
                  </div>
                </div>

                {/* Technologies */}
                <div className="mt-4 flex flex-wrap gap-1.5">
                  {project.technologies.map((tech) => (
                    <Badge key={tech} variant="outline" className="text-xs">
                      {tech}
                    </Badge>
                  ))}
                </div>
              </CardContent>

              <CardFooter>
                <Button className="w-full gap-1.5" variant="default" asChild>
                  <a href={project.link}>
                    View Project Details
                    <ArrowRight className="h-4 w-4" />
                  </a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}