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

"use client";

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 { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Project, ProjectStatus } from "@/types/project";

interface ProjectHeaderProps {
  project: Project;
}

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

// Componente para el badge de estado
function StatusBadge({ status }: { status: ProjectStatus }) {
  const statusConfig: Record<ProjectStatus, { label: string; className: string }> = {
    "0": {
      label: "Borrador",
      className: "bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700",
    },
    "1": {
      label: "Abierto",
      className: "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800",
    },
    "2": {
      label: "Cerrado",
      className: "bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800",
    },
  };

  const config = statusConfig[status] || statusConfig["0"];

  return (
    <Badge variant="outline" className={`${config.className} text-sm px-3 py-1`}>
      {config.label}
    </Badge>
  );
}

export function ProjectHeader({ project }: ProjectHeaderProps) {
  const router = useRouter();
  const initials = getInitials(project.name);

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

  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>
                <StatusBadge status={project.status} />
              </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>
                  <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">
                  <Trash2 className="h-4 w-4 mr-2" />
                  Eliminar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>
    </div>
  );
}