import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { Calendar, FileText, ListChecks } from "lucide-react";

interface PhaseInfoCardProps {
  title: string;
  description: string;
  status: "completed" | "inProgress" | "delayed" | "notStarted";
  statusLabel: string;
  progress: number;
  startDate: string;
  endDate: string;
  totalTasks: number;
  completedTasks: number;
  startDateLabel: string;
  endDateLabel: string;
  completedTasksLabel: string;
  totalTasksLabel: string;
  progressLabel: string;
  className?: string;
}

const statusVariants = {
  completed:
    "bg-tag-background-success-light border-tag-border-success-light text-tag-text-success",
  inProgress:
    "bg-tag-background-info-light border-tag-border-info-light text-tag-text-info",
  delayed:
    "bg-tag-background-warning-light border-tag-border-warning-light text-tag-text-warning",
  notStarted:
    "bg-tag-background-neutral-light border-tag-border-neutral-light text-tag-text-neutral",
};

export function PhaseInfoCard({
  title,
  description,
  status,
  statusLabel,
  progress,
  startDate,
  endDate,
  totalTasks,
  completedTasks,
  startDateLabel,
  endDateLabel,
  completedTasksLabel,
  totalTasksLabel,
  progressLabel,
  className,
}: PhaseInfoCardProps) {
  return (
    <Card className={cn("p-4 flex flex-col gap-6 mt-6", className)}>
      {/* Phase Title and Progress */}
      <div className="flex items-center gap-8">
        {/* Title and Description */}
        <div className="flex-1 space-y-2">
          <div className="flex items-center gap-2">
            <h2 className="text-lg font-bold text-foreground">{title}</h2>
            <Badge
              variant="outline"
              className={cn("text-xs font-medium", statusVariants[status])}
            >
              {statusLabel}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground leading-relaxed">
            {description}
          </p>
        </div>

        {/* Progress */}
        <div className="flex  gap-4 shrink-0">
          <p className="text-lg font-bold text-success min-w-[50px]">
            {progress}%
          </p>
          <div className="w-[375px] space-y-1">
            <div className="flex ">
              <p className="text-base text-foreground">{progressLabel}</p>
            </div>
            <Progress value={progress} className="h-4" />
          </div>
        </div>
      </div>

      {/* Phase Stats */}
      <div className="flex gap-8 items-center w-full">
        <div className="bg-background-neutral-50 rounded-[16px] p-4 flex flex-col gap-2 items-center justify-center flex-1">
          <div className="flex gap-2 items-center">
            <Calendar className="w-5 h-5 text-muted-foreground shrink-0" />
            <p className="text-base text-muted-foreground">{startDateLabel}</p>
          </div>
          <p className="text-base font-bold text-foreground">{startDate}</p>
        </div>

        <div className="bg-background-neutral-50 rounded-[16px] p-4 flex flex-col gap-2 items-center justify-center flex-1">
          <div className="flex gap-2 items-center">
            <Calendar className="w-5 h-5 text-muted-foreground shrink-0" />
            <p className="text-base text-muted-foreground">{endDateLabel}</p>
          </div>
          <p className="text-base font-bold text-foreground">{endDate}</p>
        </div>

        <div className="bg-background-neutral-50 rounded-[16px] p-4 flex flex-col gap-2 items-center justify-center flex-1">
          <div className="flex gap-2 items-center">
            <ListChecks className="w-5 h-5 text-muted-foreground shrink-0" />
            <p className="text-base text-muted-foreground">
              {completedTasksLabel}
            </p>
          </div>
          <p className="text-base font-bold text-foreground">
            {completedTasks}
          </p>
        </div>

        <div className="bg-background-neutral-50 rounded-[16px] p-4 flex flex-col gap-2 items-center justify-center flex-1">
          <div className="flex gap-2 items-center">
            <FileText className="w-5 h-5 text-muted-foreground shrink-0" />
            <p className="text-base text-muted-foreground">{totalTasksLabel}</p>
          </div>
          <p className="text-base font-bold text-foreground">{totalTasks}</p>
        </div>
      </div>
    </Card>
  );
}