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

"use client";

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

import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ProjectStatusBadge } from "@/components/ui/project-status-badge";
import { ProjectFormSheet } from "@/components/project-form/project-form-sheet";
import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
import { deleteProject } from "@/lib/projectsService";
import { Project } from "@/types/project";

interface ProjectHeaderProps {
  project: Project;
  onProjectUpdated?: (project: Project) => void;
  onProjectDeleted?: () => void;
}

// Función para generar iniciales
function getInitials(name: string): string {
  return name
    .split(" ")
    .map((word) => word[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);
}

export function ProjectHeader({ project, onProjectUpdated, onProjectDeleted }: ProjectHeaderProps) {
  const router = useRouter();
  const initials = getInitials(project.name);
  const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

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

  const handleEditSuccess = (updatedProject: Project) => {
    onProjectUpdated?.(updatedProject);
  };

  const handleConfirmDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteProject(project.id);
      onProjectDeleted?.();
      router.push('/proyectos');
    } catch (error) {
      console.error("Error deleting project:", error);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <div className="border-b bg-card">
      <div className="px-6 py-4">
        {/* Navegación */}
        <div 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>
          <span className="text-foreground font-medium">{project.ref}</span>
        </div>

        {/* Header principal */}
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-start gap-4">
            {/* Avatar */}
            <Avatar className="h-16 w-16 shrink-0">
              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white font-semibold text-xl">
                {initials}
              </AvatarFallback>
            </Avatar>

            {/* Info principal */}
            <div className="space-y-1">
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-bold tracking-tight">{project.name}</h1>
                <ProjectStatusBadge status={project.status} className="text-sm px-3 py-1" />
              </div>
              
              <div className="flex 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"
                >
                  {project.ref}
                  <Copy className="h-3.5 w-3.5" />
                </button>
                
                {project.client !== "Sin cliente" && (
                  <>
                    <span className="text-muted-foreground/50">|</span>
                    <span>{project.client}</span>
                  </>
                )}
              </div>
            </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 proyecto
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Share2 className="h-4 w-4 mr-2" />
                  Compartir
                </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 */}
      <ProjectFormSheet
        open={isEditSheetOpen}
        onOpenChange={setIsEditSheetOpen}
        mode="edit"
        project={project}
        onSuccess={handleEditSuccess}
      />

      {/* Diálogo de confirmación de eliminación */}
      <DeleteConfirmationDialog
        open={isDeleteDialogOpen}
        onOpenChange={setIsDeleteDialogOpen}
        onConfirm={handleConfirmDelete}
        title="¿Eliminar proyecto?"
        itemName={project.name}
        description={`Esta acción eliminará el proyecto "${project.name}" y todas sus tareas asociadas. Esta acción no se puede deshacer.`}
        isDeleting={isDeleting}
      />
    </div>
  );
}