trello_fake/components/task-detail/task-header.tsx

"use client";

import { useState } from "react";
import { ArrowLeft, MoreHorizontal, Pencil, Trash2, Clock, Copy, ExternalLink } from "lucide-react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
import { TaskFormSheet } from "@/components/task-form/task-form-sheet";
import { deleteTask } from "@/lib/tasksService";
import { 
  Task, 
  TaskStatus, 
  TaskPriority,
  TASK_STATUS_CONFIG, 
  TASK_PRIORITY_CONFIG 
} from "@/types/task";
import { Project } from "@/types/project";

interface TaskHeaderProps {
  task: Task;
  project: Project | null;
  onTaskUpdated?: (task: Task) => void;
  onTaskDeleted?: () => void;
}

// Badge de estado
function TaskStatusBadge({ status }: { status: TaskStatus }) {
  const config = TASK_STATUS_CONFIG[status];
  return (
    <Badge variant="outline" className={`${config.bgClass} text-sm px-3 py-1`}>
      {config.label}
    </Badge>
  );
}

// Badge de prioridad
function TaskPriorityBadge({ priority }: { priority: TaskPriority }) {
  const config = TASK_PRIORITY_CONFIG[priority];
  if (priority === '0') return null;
  
  return (
    <Badge variant="outline" className={`${config.bgClass} text-sm px-3 py-1`}>
      {config.label}
    </Badge>
  );
}

export function TaskHeader({ task, project, onTaskUpdated, onTaskDeleted }: TaskHeaderProps) {
  const router = useRouter();
  const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleCopyRef = () => {
    navigator.clipboard.writeText(task.ref);
  };

  const handleEditSuccess = (updatedTask: Task) => {
    onTaskUpdated?.(updatedTask);
  };

  const handleConfirmDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteTask(task.id);
      onTaskDeleted?.();
      // Navegar al proyecto o a la lista de proyectos
      if (project) {
        router.push(`/proyectos/${project.id}`);
      } else {
        router.push('/proyectos');
      }
    } catch (error) {
      console.error("Error deleting task:", error);
      toast.error("Error al eliminar la tarea", {
        description: "No se pudo eliminar la tarea. Inténtalo de nuevo.",
      });
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <div className="border-b bg-card">
      <div className="px-6 py-4">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
          <Link href="/proyectos" className="hover:text-foreground transition-colors">
            Proyectos
          </Link>
          <span>/</span>
          {project ? (
            <>
              <Link 
                href={`/proyectos/${project.id}`} 
                className="hover:text-foreground transition-colors"
              >
                {project.ref}
              </Link>
              <span>/</span>
            </>
          ) : (
            <>
              <span className="text-muted-foreground/70">Proyecto #{task.projectId}</span>
              <span>/</span>
            </>
          )}
          <span className="text-foreground font-medium">{task.ref}</span>
        </nav>

        {/* Header principal */}
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 space-y-3">
            {/* Título y badges */}
            <div className="flex flex-wrap items-center gap-3">
              <h1 className="text-2xl font-bold tracking-tight">{task.title}</h1>
              <TaskStatusBadge status={task.status} />
              <TaskPriorityBadge priority={task.priority} />
            </div>
            
            {/* Referencia y proyecto */}
            <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
              <button
                onClick={handleCopyRef}
                className="flex items-center gap-1.5 hover:text-foreground transition-colors font-mono"
                title="Copiar referencia"
              >
                {task.ref}
                <Copy className="h-3.5 w-3.5" />
              </button>
              
              {project && (
                <>
                  <span className="text-muted-foreground/50">|</span>
                  <Link 
                    href={`/proyectos/${project.id}`}
                    className="flex items-center gap-1.5 hover:text-foreground transition-colors"
                  >
                    <span>Proyecto: {project.name}</span>
                    <ExternalLink className="h-3.5 w-3.5" />
                  </Link>
                </>
              )}
            </div>
          </div>

          {/* Acciones */}
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => router.back()}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              Volver
            </Button>
            
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon" className="h-9 w-9">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setIsEditSheetOpen(true)}>
                  <Pencil className="h-4 w-4 mr-2" />
                  Editar tarea
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Clock className="h-4 w-4 mr-2" />
                  Registrar tiempo
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setIsDeleteDialogOpen(true)}>
                  <Trash2 className="h-4 w-4 mr-2" />
                  Eliminar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

      {/* Sheet de edición */}
      <TaskFormSheet
        open={isEditSheetOpen}
        onOpenChange={setIsEditSheetOpen}
        mode="edit"
        projectId={task.projectId}
        task={task}
        onSuccess={handleEditSuccess}
      />

      {/* Diálogo de confirmación de eliminación */}
      <DeleteConfirmationDialog
        open={isDeleteDialogOpen}
        onOpenChange={setIsDeleteDialogOpen}
        onConfirm={handleConfirmDelete}
        title="¿Eliminar tarea?"
        itemName={task.title}
        isDeleting={isDeleting}
      />
    </div>
  );
}