"use client";

import { useState } from "react";
import { X } from "lucide-react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { MemberAvatar } from "@/features/members/components/member-avatar";
import { ProjectAvatar } from "@/features/projects/components/project-avatar";
import { TaskDescription } from "./task-description";
import { useGetTask } from "../api/use-get-task";
import { TaskWithRelations, TaskStatus } from "../types";

interface TaskDetailsModalProps {
  taskId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const getStatusColor = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.BACKLOG:
      return "bg-gray-500";
    case TaskStatus.TODO:
      return "bg-blue-500";
    case TaskStatus.IN_PROGRESS:
      return "bg-yellow-500";
    case TaskStatus.IN_REVIEW:
      return "bg-purple-500";
    case TaskStatus.DONE:
      return "bg-green-500";
    default:
      return "bg-gray-500";
  }
};

const getStatusLabel = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.BACKLOG:
      return "Backlog";
    case TaskStatus.TODO:
      return "To Do";
    case TaskStatus.IN_PROGRESS:
      return "In Progress";
    case TaskStatus.IN_REVIEW:
      return "In Review";
    case TaskStatus.DONE:
      return "Done";
    default:
      return status;
  }
};

export const TaskDetailsModal = ({
  taskId,
  open,
  onOpenChange,
}: TaskDetailsModalProps) => {
  const { data: task, isLoading, error } = useGetTask({ taskId });

  if (!open) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-full max-w-sm sm:max-w-2xl lg:max-w-4xl xl:max-w-5xl max-h-[90vh] overflow-hidden p-0 gap-0" hideCloseButton>
        {isLoading ? (
          <div className="flex items-center justify-center p-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : error ? (
          <div className="flex items-center justify-center p-8">
            <p className="text-destructive">Failed to load task details</p>
          </div>
        ) : task ? (
          <div className="flex flex-col h-full">
            {/* Header */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 sm:p-6 border-b gap-4">
              <div className="flex-1 min-w-0">
                <div className="flex flex-wrap items-center gap-2 mb-2">
                  <Badge
                    variant="outline"
                    className={`${getStatusColor(task.status)} text-white hover:${getStatusColor(task.status)} cursor-default`}
                  >
                    {getStatusLabel(task.status)}
                  </Badge>
                  {task.labels && task.labels.length > 0 && (
                    <div className="flex flex-wrap gap-1">
                      {task.labels.map((label, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {label}
                        </Badge>
                      ))}
                    </div>
                  )}
                </div>
                <h1 className="text-xl sm:text-2xl font-bold text-gray-900 break-words">
                  {task.name}
                </h1>
                <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 text-xs sm:text-sm text-gray-500">
                  {task.project && (
                    <div className="flex items-center gap-2">
                      <ProjectAvatar 
                        name={task.project.name}
                        image={task.project.imageUrl}
                        className="h-4 w-4"
                      />
                      <span className="truncate max-w-[120px] sm:max-w-none">{task.project.name}</span>
                    </div>
                  )}
                  {task.assignee && (
                    <div className="flex items-center gap-2">
                      <MemberAvatar 
                        name={task.assignee.name}
                        className="h-4 w-4"
                      />
                      <span className="truncate max-w-[120px] sm:max-w-none">{task.assignee.name}</span>
                    </div>
                  )}
                  {task.dueDate && (
                    <span className="whitespace-nowrap">Due: {new Date(task.dueDate).toLocaleDateString()}</span>
                  )}
                </div>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onOpenChange(false)}
                className="flex-shrink-0 self-start sm:self-center"
              >
                <X className="h-4 w-4" />
              </Button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto p-4 sm:p-6" style={{ maxHeight: 'calc(90vh - 120px)' }}>
              <TaskDescription task={task as any} />
            </div>
          </div>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}; 