'use client'
import { ArrowRight, Circle, CircleCheck } from 'lucide-react'

import Link from 'next/link'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import type { Project } from '@/lib/types'

interface ProjectCardProps {
  project: Project
}

const statusColors: Record<Project['status'], string> = {
  discovery: 'bg-blue-500/10 text-blue-400',
  design: 'bg-purple-500/10 text-purple-400',
  development: 'bg-yellow-500/10 text-yellow-400',
  content: 'bg-orange-500/10 text-orange-400',
  testing: 'bg-cyan-500/10 text-cyan-400',
  completed: 'bg-emerald-500/10 text-emerald-400',
}

export function ProjectCard({ project }: ProjectCardProps) {
  return (
    <Link href={`/dashboard/projects/${project.id}`}>
      <Card className="glow-card bg-card border-border hover:border-primary transition-all duration-300">
        <CardContent className="p-6">
          {/* Thumbnail */}
          <div
            className="w-full h-40 rounded-lg mb-4 bg-cover bg-center"
            style={{ backgroundImage: `url(${project.thumbnail})` }}
          />

          {/* Title and Status */}
          <div className="flex items-start justify-between mb-3">
            <div className="flex-1">
              <h3 className="font-bold text-foreground text-lg mb-1">{project.title}</h3>
              <p className="text-sm text-muted-foreground line-clamp-2">
                {project.description}
              </p>
            </div>
            <Badge className={`ml-2 ${statusColors[project.status]}`}>
              {project.status}
            </Badge>
          </div>

          {/* Progress */}
          <div className="mb-4">
            <div className="flex justify-between text-sm mb-2">
              <span className="text-muted-foreground">Progress</span>
              <span className="text-foreground font-medium">{project.progress}%</span>
            </div>
            <Progress value={project.progress} className="h-2" />
          </div>

          {/* Stages */}
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            {project.stages.map((stage, index) => (
              <div key={index} className="flex items-center gap-1">
                {stage.completed ? (
                  <CircleCheck className="w-4 h-4 text-primary" />
                ) : (
                  <Circle className="w-4 h-4" />
                )}
                <span className={stage.completed ? 'text-foreground' : ''}>
                  {stage.name}
                </span>
                {index < project.stages.length - 1 && <span>→</span>}
              </div>
            ))}
          </div>

          {/* Updated */}
          <div className="mt-4 pt-4 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
            <span>Updated {new Date(project.updatedAt).toLocaleDateString()}</span>
            <ArrowRight className="w-4 h-4" />
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}