/**
 * Project Header Component
 *
 * Header section for the project dashboard with title, status, and quick actions.
 */

'use client';

import { PlayCircle, PauseCircle, Plus, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { ProjectStatusBadge, AutonomyBadge } from './StatusBadge';
import type { Project } from './types';

// ============================================================================
// Types
// ============================================================================

interface ProjectHeaderProps {
  /** Project data */
  project: Project | null;
  /** Whether data is loading */
  isLoading?: boolean;
  /** Whether the project can be paused */
  canPause?: boolean;
  /** Whether the project can be started */
  canStart?: boolean;
  /** Callback when "Start/Run Sprint" is clicked */
  onStartSprint?: () => void;
  /** Callback when "Pause" is clicked */
  onPauseProject?: () => void;
  /** Callback when "Create Sprint" is clicked */
  onCreateSprint?: () => void;
  /** Callback when "Settings" is clicked */
  onSettings?: () => void;
  /** Additional CSS classes */
  className?: string;
}

// ============================================================================
// Subcomponents
// ============================================================================

function ProjectHeaderSkeleton() {
  return (
    <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
      <div className="space-y-3">
        <div className="flex flex-wrap items-center gap-3">
          <Skeleton className="h-9 w-64" />
          <Skeleton className="h-6 w-24" />
          <Skeleton className="h-6 w-28" />
        </div>
        <Skeleton className="h-5 w-96" />
      </div>
      <div className="flex gap-2">
        <Skeleton className="h-9 w-32" />
        <Skeleton className="h-9 w-28" />
      </div>
    </div>
  );
}

// ============================================================================
// Main Component
// ============================================================================

export function ProjectHeader({
  project,
  isLoading = false,
  canPause = false,
  canStart = true,
  onStartSprint,
  onPauseProject,
  onCreateSprint,
  onSettings,
  className,
}: ProjectHeaderProps) {
  if (isLoading) {
    return <ProjectHeaderSkeleton />;
  }

  if (!project) {
    return null;
  }

  const showPauseButton = canPause && project.status === 'active';
  const showStartButton =
    canStart && project.status !== 'completed' && project.status !== 'archived';

  return (
    <div
      className={cn('flex flex-col gap-4 md:flex-row md:items-start md:justify-between', className)}
      data-testid="project-header"
    >
      {/* Project Info */}
      <div className="space-y-2">
        <div className="flex flex-wrap items-center gap-3">
          <h1 className="text-3xl font-bold">{project.name}</h1>
          <ProjectStatusBadge status={project.status} />
          <AutonomyBadge level={project.autonomy_level} />
        </div>
        {project.description && <p className="text-muted-foreground">{project.description}</p>}
      </div>

      {/* Quick Actions */}
      <div className="flex flex-wrap gap-2">
        {onSettings && (
          <Button variant="ghost" size="icon" onClick={onSettings} aria-label="Project settings">
            <Settings className="h-4 w-4" />
          </Button>
        )}

        {showPauseButton && onPauseProject && (
          <Button variant="outline" size="sm" onClick={onPauseProject}>
            <PauseCircle className="mr-2 h-4 w-4" aria-hidden="true" />
            Pause Project
          </Button>
        )}

        {onCreateSprint && (
          <Button variant="outline" size="sm" onClick={onCreateSprint}>
            <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
            New Sprint
          </Button>
        )}

        {showStartButton && onStartSprint && (
          <Button size="sm" onClick={onStartSprint}>
            <PlayCircle className="mr-2 h-4 w-4" aria-hidden="true" />
            Run Sprint
          </Button>
        )}
      </div>
    </div>
  );
}
