"use client";

import { StatusBadge } from "@/components/shared/status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { Calendar, Eye, FileText, Pencil } from "lucide-react";

interface PhaseCardProps {
  phaseNumber: string;
  title: string;
  description: string;
  status: "completed" | "inProgress" | "delayed" | "notStarted";
  statusLabel: string;
  progress: number;
  startDate: string;
  endDate: string;
  taskCount: string;
  progressLabel: string;
  taskCountLabel: string;
  editLabel: string;
  viewDetailsLabel: string;
  onEdit?: () => void;
  onViewDetails?: () => void;
  editHref?: string;
  viewDetailsHref?: string;
  className?: string;
}

const progressColors = {
  completed: "bg-success",
  inProgress: "[&>div]:bg-primary",
  delayed: "[&>div]:bg-warning",
  notStarted: "[&>div]:bg-muted",
};

export function PhaseCard({
  phaseNumber,
  title,
  description,
  status,
  statusLabel,
  progress,
  startDate,
  endDate,
  taskCount,
  progressLabel,
  taskCountLabel,
  editLabel,
  viewDetailsLabel,
  onEdit,
  onViewDetails,
  editHref,
  viewDetailsHref,
  className,
}: PhaseCardProps) {
  return (
    <Card className={className}>
      <CardContent className="p-4 flex items-center justify-between gap-4">
        {/* Right Side - Phase Info */}
        <div className="flex flex-col gap-2 items-start flex-1">
          {/* Phase Number and Status */}
          <div className="flex items-center justify-start gap-2">
            <p className="text-sm font-medium text-foreground">{phaseNumber}</p>
            <StatusBadge status={status} label={statusLabel} />
          </div>

          {/* Phase Title */}
          <h3 className="text-lg font-bold text-foreground">{title}</h3>

          {/* Phase Description */}
          <p className="text-sm text-muted-foreground leading-relaxed">
            {description}
          </p>

          {/* Dates and Task Count */}
          <div className="flex items-center justify-start gap-3">
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm text-foreground">{startDate}</p>
              <span className="text-sm text-foreground">-</span>
              <p className="text-sm text-foreground">{endDate}</p>
            </div>

            <div className="flex items-center gap-2">
              <FileText className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm text-foreground">{taskCount}</p>
            </div>
          </div>
        </div>

        {/* Left Side - Progress and Actions */}
        <div className="flex flex-col items-start justify-between gap-4 h-full shrink-0">
          {/* Progress */}
          <div className="flex  gap-4">
            <div className="w-[320px] space-y-1">
              <div className="flex  justify-start">
                <p className="text-base text-foreground">{progressLabel}</p>
              </div>
              <Progress
                value={progress}
                className={cn("h-4", progressColors[status])}
              />
            </div>
            <p className="text-lg font-bold text-success min-w-[50px]">
              {progress}%
            </p>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-4">
            {editHref ? (
              <Button variant="outline" size="default" className="h-10" asChild>
                <Link href={editHref}>
                  <Pencil className="h-4 w-4" />
                  {editLabel}
                </Link>
              </Button>
            ) : (
              <Button
                variant="outline"
                size="default"
                onClick={onEdit}
                className="h-10"
                disabled={!onEdit}
              >
                <Pencil className="h-4 w-4" />
                {editLabel}
              </Button>
            )}
            {viewDetailsHref ? (
              <Button variant="outline" size="default" className="h-10" asChild>
                <Link href={viewDetailsHref}>
                  <Eye className="h-4 w-4" />
                  {viewDetailsLabel}
                </Link>
              </Button>
            ) : (
              <Button
                variant="outline"
                size="default"
                onClick={onViewDetails}
                className="h-10"
                disabled={!onViewDetails}
              >
                <Eye className="h-4 w-4" />
                {viewDetailsLabel}
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}