work-club-manager/frontend/src/app/(protected)/tasks/[id]/page.tsx

'use client';

import { use } from 'react';
import Link from 'next/link';
import { useTask, useUpdateTask, useAssignTask, useUnassignTask } from '@/hooks/useTasks';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useSession } from 'next-auth/react';

const VALID_TRANSITIONS: Record<string, string[]> = {
  Open: ['Assigned'],
  Assigned: ['InProgress'],
  InProgress: ['Review'],
  Review: ['Done', 'InProgress'],
};

const statusColors: Record<string, string> = {
  Open: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
  Assigned: 'bg-primary text-primary-foreground hover:bg-primary/80',
  InProgress: 'bg-yellow-500 text-black hover:bg-yellow-500/80',
  Review: 'bg-destructive text-destructive-foreground hover:bg-destructive/80',
  Done: 'bg-green-500 text-white hover:bg-green-500/80',
};

export default function TaskDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const { data: task, isLoading, error } = useTask(resolvedParams.id);
  const { mutate: updateTask, isPending: isUpdating } = useUpdateTask();
  const { mutate: assignTask, isPending: isAssigning } = useAssignTask();
  const { mutate: unassignTask, isPending: isUnassigning } = useUnassignTask();
  const { data: session } = useSession();

  const isPending = isUpdating || isAssigning || isUnassigning;

  if (isLoading) return <div className="p-8">Loading task...</div>;
  if (error || !task) return <div className="p-8 text-red-500">Failed to load task.</div>;

  const validTransitions = VALID_TRANSITIONS[task.status] || [];

  const handleTransition = (newStatus: string) => {
    updateTask({ id: task.id, data: { status: newStatus } });
  };

  const handleAssignToMe = () => {
    assignTask(task.id);
  };

  const handleUnassign = () => {
    unassignTask(task.id);
  };

  const getTransitionLabel = (status: string, newStatus: string) => {
    if (status === 'Review' && newStatus === 'InProgress') return 'Back to InProgress';
    if (newStatus === 'Done') return 'Mark as Done';
    return `Move to ${newStatus}`;
  };

  return (
    <div className="flex-1 space-y-4 p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <Button variant="ghost" size="sm" asChild className="mb-2 -ml-3">
            <Link href="/tasks">← Back to Tasks</Link>
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Task Details</h2>
        </div>
      </div>

      <Card>
        <CardHeader>
          <div className="flex items-start justify-between">
            <div>
              <CardTitle className="text-2xl">{task.title}</CardTitle>
              <CardDescription className="mt-2 text-base">
                {task.description || 'No description provided.'}
              </CardDescription>
            </div>
            <Badge className={`text-sm px-3 py-1 ${statusColors[task.status] || 'bg-secondary'}`}>
              {task.status}
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Assignee</p>
              <p className="mt-1">{task.assigneeId || 'Unassigned'}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Created By</p>
              <p className="mt-1">{task.createdById}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Created At</p>
              <p className="mt-1">{new Date(task.createdAt).toLocaleString()}</p>
            </div>
            {task.dueDate && (
              <div>
                <p className="text-sm font-medium text-muted-foreground">Due Date</p>
                <p className="mt-1">{new Date(task.dueDate).toLocaleDateString()}</p>
              </div>
            )}
          </div>

          {validTransitions.length > 0 && (
            <div className="pt-6 border-t">
              <h3 className="text-lg font-medium mb-4">Actions</h3>
              <div className="flex flex-wrap gap-2">
                {!task.assigneeId && session?.user && (
                  <Button
                    onClick={handleAssignToMe}
                    disabled={isPending}
                    variant="outline"
                  >
                    {isAssigning ? 'Assigning...' : 'Assign to Me'}
                  </Button>
                )}
                {task.isAssignedToMe && (
                  <Button
                    onClick={handleUnassign}
                    disabled={isPending}
                    variant="outline"
                  >
                    {isUnassigning ? 'Unassigning...' : 'Unassign'}
                  </Button>
                )}
                {validTransitions.map((nextStatus) => (
                  <Button
                    key={nextStatus}
                    onClick={() => handleTransition(nextStatus)}
                    disabled={isPending}
                    variant={nextStatus === 'Done' ? 'default' : 'outline'}
                    className={nextStatus === 'Done' ? 'bg-green-600 hover:bg-green-700' : ''}
                  >
                    {isPending ? 'Updating...' : getTransitionLabel(task.status, nextStatus)}
                  </Button>
                ))}
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}