"use client";

import { format } from "date-fns";
import { MoreVertical, Target, User, Calendar } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { MemberAvatar } from "@/features/members/components/member-avatar";
import { ProjectAvatar } from "@/features/projects/components/project-avatar";

import { EpicWithRelations, TaskStatus } from "../types";
import { useDeleteEpic } from "../api/use-delete-epic";
import { useEditEpicModal } from "../hooks/use-edit-epic-modal";

interface EpicCardProps {
  epic: EpicWithRelations & {
    stats?: {
      totalTasks: number;
      completedTasks: number;
      progressPercentage: number;
    };
  };
}

const statusColorMap = {
  [TaskStatus.BACKLOG]: "bg-gray-500",
  [TaskStatus.TODO]: "bg-red-500",
  [TaskStatus.IN_PROGRESS]: "bg-yellow-500",
  [TaskStatus.IN_REVIEW]: "bg-blue-500",
  [TaskStatus.DONE]: "bg-green-500",
};

const statusTextMap = {
  [TaskStatus.BACKLOG]: "Backlog",
  [TaskStatus.TODO]: "Todo",
  [TaskStatus.IN_PROGRESS]: "In Progress",
  [TaskStatus.IN_REVIEW]: "In Review",
  [TaskStatus.DONE]: "Done",
};

export const EpicCard = ({ epic }: EpicCardProps) => {
  const { mutate: deleteEpic } = useDeleteEpic();
  const { open } = useEditEpicModal();

  const handleDelete = () => {
    deleteEpic({ param: { epicId: epic.id } });
  };

  const handleEdit = () => {
    open(epic.id);
  };

  return (
    <Card className="group hover:shadow-md transition-shadow">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-2">
            <Target className="size-4 text-muted-foreground" />
            <h3 className="font-semibold text-sm truncate max-w-[200px]">
              {epic.name}
            </h3>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
                className="opacity-0 group-hover:opacity-100 transition-opacity"
              >
                <MoreVertical className="size-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={handleEdit}>
                Edit Epic
              </DropdownMenuItem>
              <DropdownMenuItem 
                onClick={handleDelete}
                className="text-destructive focus:text-destructive"
              >
                Delete Epic
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <div className="flex items-center gap-2">
          <Badge 
            variant="outline" 
            className={`${statusColorMap[epic.status]} text-white border-none`}
          >
            {statusTextMap[epic.status]}
          </Badge>
          {epic.labels && epic.labels.length > 0 && (
            <>
              {epic.labels.slice(0, 2).map((label) => (
                <Badge key={label} variant="secondary" className="text-xs">
                  {label}
                </Badge>
              ))}
              {epic.labels.length > 2 && (
                <Badge variant="secondary" className="text-xs">
                  +{epic.labels.length - 2}
                </Badge>
              )}
            </>
          )}
        </div>
      </CardHeader>

      <CardContent className="pt-0 space-y-3">
        {epic.description && (
          <p className="text-sm text-muted-foreground line-clamp-2">
            {epic.description}
          </p>
        )}

        {epic.stats && (
          <div className="space-y-2">
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">Progress</span>
              <span className="font-medium">
                {epic.stats.completedTasks}/{epic.stats.totalTasks} tasks
              </span>
            </div>
            <Progress 
              value={epic.stats.progressPercentage} 
              className="h-2" 
            />
          </div>
        )}

        <Separator />

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {epic.project && (
              <div className="flex items-center gap-1">
                <ProjectAvatar
                  name={epic.project.name}
                  image={epic.project.imageUrl}
                  className="size-4"
                />
                <span className="text-xs text-muted-foreground truncate max-w-[80px]">
                  {epic.project.name}
                </span>
              </div>
            )}
          </div>

          <div className="flex items-center gap-2">
            {epic.dueDate && (
              <div className="flex items-center gap-1 text-xs text-muted-foreground">
                <Calendar className="size-3" />
                {format(new Date(epic.dueDate), "MMM dd")}
              </div>
            )}
            {epic.assignee && (
              <div className="flex items-center gap-1">
                <User className="size-3 text-muted-foreground" />
                <MemberAvatar
                  name={epic.assignee.name || epic.assignee.email || ""}
                  className="size-4"
                />
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}; 