ColaFlow-Web/app/(dashboard)/projects/[id]/page.tsx

'use client';

import { use, useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ArrowLeft, Loader2, KanbanSquare, Pencil, Archive } from 'lucide-react';
import { useQueryClient } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useProject } from '@/lib/hooks/use-projects';
import { useProjectHub } from '@/lib/hooks/useProjectHub';
import { EditProjectDialog } from '@/components/features/projects/EditProjectDialog';
import { ArchiveProjectDialog } from '@/components/features/projects/ArchiveProjectDialog';
import type { Project } from '@/types/project';
import { toast } from 'sonner';

interface ProjectDetailPageProps {
  params: Promise<{ id: string }>;
}

export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
  const { id } = use(params);
  const router = useRouter();
  const queryClient = useQueryClient();
  const { data: project, isLoading, error } = useProject(id);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [isArchiveDialogOpen, setIsArchiveDialogOpen] = useState(false);

  // SignalR real-time updates
  const { connectionState } = useProjectHub(id, {
    onProjectUpdated: (updatedProject) => {
      if (updatedProject.id === id) {
        console.log('[ProjectDetail] Project updated via SignalR:', updatedProject);
        queryClient.setQueryData(['projects', id], updatedProject);
        toast.info('Project updated');
      }
    },
    onProjectArchived: (data) => {
      if (data.ProjectId === id) {
        console.log('[ProjectDetail] Project archived via SignalR:', data);
        toast.info('Project has been archived');
        router.push('/projects');
      }
    },
  });

  if (isLoading) {
    return (
      <div className="flex h-[50vh] items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error || !project) {
    return (
      <div className="flex h-[50vh] items-center justify-center">
        <p className="text-sm text-muted-foreground">
          Project not found or failed to load.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/projects">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div className="flex-1">
          <div className="flex items-center gap-3">
            <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
            <Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
              {project.status}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground">Key: {project.key}</p>
        </div>
        <div className="flex gap-2">
          <Link href={`/kanban/${project.id}`}>
            <Button variant="outline">
              <KanbanSquare className="mr-2 h-4 w-4" />
              View Board
            </Button>
          </Link>
          {project.status === 'Active' && (
            <>
              <Button variant="outline" onClick={() => setIsEditDialogOpen(true)}>
                <Pencil className="mr-2 h-4 w-4" />
                Edit
              </Button>
              <Button variant="destructive" onClick={() => setIsArchiveDialogOpen(true)}>
                <Archive className="mr-2 h-4 w-4" />
                Archive
              </Button>
            </>
          )}
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Description</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm">{project.description || 'No description provided'}</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Details</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Created</span>
              <span>{new Date(project.createdAt).toLocaleDateString()}</span>
            </div>
            {project.updatedAt && (
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Updated</span>
                <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
              </div>
            )}
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Status</span>
              <Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
                {project.status}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* SignalR Connection Status */}
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <div
          className={`h-2 w-2 rounded-full ${
            connectionState === 'connected' ? 'bg-green-500' : 'bg-gray-400'
          }`}
        />
        <span>
          {connectionState === 'connected' ? 'Real-time updates enabled' : 'Connecting...'}
        </span>
      </div>

      {/* Dialogs */}
      {project && (
        <>
          <EditProjectDialog
            project={project}
            open={isEditDialogOpen}
            onOpenChange={setIsEditDialogOpen}
          />
          <ArchiveProjectDialog
            projectId={project.id}
            projectName={project.name}
            open={isArchiveDialogOpen}
            onOpenChange={setIsArchiveDialogOpen}
          />
        </>
      )}
    </div>
  );
}