import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
import {
  AlertCircle,
  CheckCircle2,
  Clock,
  FileText,
  Layers,
} from "lucide-react";

interface ProjectInfoCardProps {
  title: string;
  description: string;
  status: "completed" | "inProgress" | "delayed" | "notStarted";
  statusLabel: string;
  progress: number;
  phaseCount: number;
  totalTasks: number;
  completedTasks: number;
  inProgressTasks: number;
  pendingTasks: number;
  overdueTasks: number;
  phaseCountLabel: string;
  totalTasksLabel: string;
  completedTasksLabel: string;
  inProgressTasksLabel: string;
  pendingTasksLabel: string;
  overdueTasksLabel: string;
  progressLabel: string;
  clients?: {
    id: number;
    name: string;
    avatar?: string | null;
  }[];
  className?: string;
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";


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 ProjectInfoCard({
  title,
  description,
  status,
  statusLabel,
  progress,
  phaseCount,
  totalTasks,
  completedTasks,
  inProgressTasks,
  pendingTasks,
  overdueTasks,
  phaseCountLabel,
  totalTasksLabel,
  completedTasksLabel,
  inProgressTasksLabel,
  pendingTasksLabel,
  overdueTasksLabel,
  progressLabel,
  clients,
  className,
}: ProjectInfoCardProps) {
  const statItems = [
    {
      label: totalTasksLabel,
      value: totalTasks,
      icon: FileText,
      valueClassName: "text-foreground",
      iconClassName: "text-muted-foreground",
    },
    {
      label: completedTasksLabel,
      value: completedTasks,
      icon: CheckCircle2,
      valueClassName: "text-success",
      iconClassName: "text-success",
    },
    {
      label: inProgressTasksLabel,
      value: inProgressTasks,
      icon: Clock,
      valueClassName: "text-info",
      iconClassName: "text-info",
    },
    {
      label: pendingTasksLabel,
      value: pendingTasks,
      icon: FileText,
      valueClassName: "text-foreground",
      iconClassName: "text-muted-foreground",
    },
    {
      label: overdueTasksLabel,
      value: overdueTasks,
      icon: AlertCircle,
      valueClassName: "text-warning",
      iconClassName: "text-warning",
    },
    {
      label: phaseCountLabel,
      value: phaseCount,
      icon: Layers,
      valueClassName: "text-foreground",
      iconClassName: "text-muted-foreground",
    },
  ];

  return (
    <div
      className={cn(
        "bg-card border border-border rounded-[16px] p-3 sm:p-4 md:p-6 flex flex-col gap-4 md:gap-6 shadow-sm",
        className,
      )}
    >
      {/* Project Title and Progress */}
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(280px,375px)] lg:items-start">
        {/* Title and Description */}
        <div className="min-w-0 space-y-3">
          <div className="flex flex-wrap items-start justify-start gap-2 sm:gap-3">
            <h2 className="min-w-0 break-words text-base font-bold text-foreground sm:text-lg">
              {title}
            </h2>
            <Badge
              variant="outline"
              className={cn(
                "shrink-0 text-xs font-medium",
                statusVariants[status],
              )}
            >
              {statusLabel}
            </Badge>
          </div>

          <div className="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-center">
            <p className="min-w-0 flex-1 text-sm leading-relaxed text-muted-foreground">
              {description}
            </p>


          </div>
        </div>
        {/* Progress */}
        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-end sm:gap-4 lg:justify-end">
          {clients && clients.length > 0 && (
            <div className="flex shrink-0 items-center -space-x-2 rtl:space-x-reverse">
              <TooltipProvider>
                {clients.slice(0, 5).map((client) => (
                  <Tooltip key={client.id}>
                    <TooltipTrigger asChild>
                      <Avatar className="h-8 w-8 border-2 border-background ring-1 ring-border">
                        <AvatarImage src={client.avatar || undefined} />
                        <AvatarFallback className="text-[10px]">
                          {client.name?.substring(0, 2).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>{client.name}</p>
                    </TooltipContent>
                  </Tooltip>
                ))}
                {clients.length > 5 && (
                  <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold border-2 border-background ring-1 ring-border text-muted-foreground">
                    +{clients.length - 5}
                  </div>
                )}
              </TooltipProvider>
            </div>
          )}
          <div className="min-w-0 flex-1 space-y-1 lg:max-w-[375px]">
            <div className="flex justify-start">
              <p className="break-words text-sm text-foreground sm:text-base">
                {progressLabel}
              </p>
            </div>
            <Progress value={progress} className="h-3 sm:h-4" />
          </div>
          <p className="min-w-[45px] text-base font-bold text-success sm:min-w-[50px] sm:text-lg sm:text-end">
            {progress}%
          </p>
        </div>
      </div>

      {/* Project Stats - Responsive Grid */}
      <div className="grid w-full grid-cols-2 gap-3 sm:gap-4 md:grid-cols-6">
        {statItems.map((item) => {
          const Icon = item.icon;

          return (
            <div
              key={item.label}
              className="bg-background-neutral-50 flex min-w-0 flex-col items-center justify-center gap-2 rounded-[12px] p-3 text-center sm:rounded-[16px] sm:p-4"
            >
              <div className="flex min-w-0 items-center gap-2">
                <p className="break-words text-center text-xs text-muted-foreground sm:text-sm">
                  {item.label}
                </p>
                <Icon className={cn("h-4 w-4 shrink-0", item.iconClassName)} />
              </div>
              <p
                className={cn(
                  "break-words text-sm font-bold sm:text-base",
                  item.valueClassName,
                )}
              >
                {item.value}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}