'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { format, formatDistanceToNow } from 'date-fns';
import {
  ArrowLeft,
  CheckCircle,
  Clock,
  User,
  Calendar,
  Paperclip,
  MessageSquare,
  AlertCircle,
  Repeat,
  Trash2,
} from 'lucide-react';
import { adminApi, Task, TaskStatus, TaskPriority } from '@/lib/api-client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Avatar } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';

const priorityColors: Record<TaskPriority, string> = {
  low: 'bg-green-100 text-green-800',
  medium: 'bg-blue-100 text-blue-800',
  high: 'bg-amber-100 text-amber-800',
  urgent: 'bg-red-100 text-red-800',
};

const statusColors: Record<TaskStatus, string> = {
  pending: 'bg-slate-100 text-slate-800',
  in_progress: 'bg-blue-100 text-blue-800',
  submitted: 'bg-purple-100 text-purple-800',
  completed: 'bg-green-100 text-green-800',
  cancelled: 'bg-gray-100 text-gray-800',
};

const statusLabels: Record<TaskStatus, string> = {
  pending: 'Pending',
  in_progress: 'In Progress',
  submitted: 'Submitted',
  completed: 'Completed',
  cancelled: 'Cancelled',
};

export default function TaskDetailPage() {
  const params = useParams();
  const router = useRouter();
  const queryClient = useQueryClient();
  const taskId = params.id as string;

  const { data: taskData, isLoading } = useQuery({
    queryKey: ['admin-task', taskId],
    queryFn: () => adminApi.getTask(taskId),
  });

  const deleteMutation = useMutation({
    mutationFn: () => adminApi.deleteTask(taskId),
    onSuccess: () => {
      alert('Task deleted successfully');
      router.push('/tasks');
    },
    onError: () => {
      alert('Failed to delete task');
    },
  });

  const handleDelete = () => {
    if (confirm('Are you sure you want to delete this task?')) {
      deleteMutation.mutate();
    }
  };

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-10 w-10" />
          <Skeleton className="h-8 w-64" />
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          <div className="md:col-span-2">
            <Card>
              <CardContent className="pt-6">
                <Skeleton className="h-6 w-48 mb-4" />
                <Skeleton className="h-24 w-full" />
              </CardContent>
            </Card>
          </div>
          <div>
            <Card>
              <CardContent className="pt-6">
                <Skeleton className="h-4 w-full mb-2" />
                <Skeleton className="h-4 w-3/4 mb-2" />
                <Skeleton className="h-4 w-1/2" />
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    );
  }

  const task = taskData?.data as Task | undefined;

  if (!task) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px]">
        <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
        <h2 className="text-xl font-semibold mb-2">Task Not Found</h2>
        <p className="text-muted-foreground mb-4">
          The task you&apos;re looking for doesn&apos;t exist or has been deleted.
        </p>
        <Button asChild>
          <Link href="/tasks">Back to Tasks</Link>
        </Button>
      </div>
    );
  }

  const isOverdue =
    task.deadline &&
    new Date(task.deadline) < new Date() &&
    task.status !== 'completed' &&
    task.status !== 'cancelled';

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href="/tasks">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="text-2xl font-bold">{task.title}</h1>
              <Badge className={statusColors[task.status]}>
                {statusLabels[task.status]}
              </Badge>
              <Badge className={priorityColors[task.priority]}>
                {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
              </Badge>
              {task.isRecurring && (
                <Badge variant="outline">
                  <Repeat className="h-3 w-3 mr-1" />
                  Recurring
                </Badge>
              )}
            </div>
            <p className="text-sm text-muted-foreground mt-1">
              Created {formatDistanceToNow(new Date(task.createdAt), { addSuffix: true })}
            </p>
          </div>
        </div>
        <Button variant="destructive" size="sm" onClick={handleDelete}>
          <Trash2 className="h-4 w-4 mr-2" />
          Delete Task
        </Button>
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        {/* Main Content */}
        <div className="md:col-span-2 space-y-6">
          {/* Description */}
          <Card>
            <CardHeader>
              <CardTitle>Description</CardTitle>
            </CardHeader>
            <CardContent>
              {task.description ? (
                <div
                  className="prose prose-sm max-w-none"
                  dangerouslySetInnerHTML={{
                    __html: task.description,
                  }}
                />
              ) : (
                <p className="text-muted-foreground">No description provided</p>
              )}
            </CardContent>
          </Card>

          {/* Assignees */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Assignees ({task.assignments?.length || 0})
              </CardTitle>
            </CardHeader>
            <CardContent>
              {task.assignments && task.assignments.length > 0 ? (
                <div className="space-y-3">
                  {task.assignments.map((assignment: any) => (
                    <div
                      key={assignment.id}
                      className="flex items-center justify-between p-3 rounded-lg bg-muted/50"
                    >
                      <div className="flex items-center gap-3">
                        <Avatar
                          src={assignment.user?.avatarUrl}
                          fallback={`${assignment.user?.firstName || ''} ${assignment.user?.lastName || ''}`}
                        />
                        <div>
                          <p className="font-medium">
                            {assignment.user?.firstName} {assignment.user?.lastName}
                          </p>
                          <p className="text-sm text-muted-foreground">
                            {assignment.user?.email}
                          </p>
                        </div>
                      </div>
                      <Badge
                        variant={
                          assignment.status === 'completed' ? 'default' : 'secondary'
                        }
                      >
                        {assignment.status === 'completed' && (
                          <CheckCircle className="h-3 w-3 mr-1" />
                        )}
                        {assignment.status}
                      </Badge>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-muted-foreground">No one assigned yet</p>
              )}
            </CardContent>
          </Card>

          {/* Submissions */}
          {task.submissions && task.submissions.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="h-5 w-5" />
                  Submissions ({task.submissions.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {task.submissions.map((submission: any) => (
                    <div
                      key={submission.id}
                      className="p-4 rounded-lg border bg-card"
                    >
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <Avatar
                            size="sm"
                            src={submission.submittedBy?.avatarUrl}
                            fallback={`${submission.submittedBy?.firstName || ''} ${submission.submittedBy?.lastName || ''}`}
                          />
                          <span className="font-medium">
                            {submission.submittedBy?.firstName}{' '}
                            {submission.submittedBy?.lastName}
                          </span>
                        </div>
                        <Badge
                          className={
                            submission.status === 'approved'
                              ? 'bg-green-100 text-green-800'
                              : submission.status === 'rejected'
                              ? 'bg-red-100 text-red-800'
                              : 'bg-amber-100 text-amber-800'
                          }
                        >
                          {submission.status}
                        </Badge>
                      </div>
                      {submission.content && (
                        <div
                          className="prose prose-sm max-w-none mb-2"
                          dangerouslySetInnerHTML={{
                            __html: submission.content,
                          }}
                        />
                      )}
                      <p className="text-xs text-muted-foreground">
                        Submitted{' '}
                        {formatDistanceToNow(new Date(submission.submittedAt), {
                          addSuffix: true,
                        })}
                      </p>
                      {submission.feedback && (
                        <div className="mt-3 p-3 bg-muted rounded-md">
                          <p className="text-sm font-medium mb-1">Feedback:</p>
                          <p className="text-sm text-muted-foreground">
                            {submission.feedback}
                          </p>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* Comments */}
          {task.comments && task.comments.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MessageSquare className="h-5 w-5" />
                  Comments ({task.comments.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {task.comments.map((comment: any) => (
                    <div key={comment.id} className="flex gap-3">
                      <Avatar
                        size="sm"
                        src={comment.author?.avatarUrl}
                        fallback={`${comment.author?.firstName || ''} ${comment.author?.lastName || ''}`}
                      />
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium text-sm">
                            {comment.author?.firstName} {comment.author?.lastName}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            {formatDistanceToNow(new Date(comment.createdAt), {
                              addSuffix: true,
                            })}
                          </span>
                        </div>
                        <p className="text-sm mt-1">{comment.content}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Details */}
          <Card>
            <CardHeader>
              <CardTitle>Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Creator */}
              <div>
                <p className="text-sm font-medium text-muted-foreground mb-1">
                  Created by
                </p>
                <div className="flex items-center gap-2">
                  <Avatar
                    size="sm"
                    src={task.createdBy?.avatarUrl}
                    fallback={`${task.createdBy?.firstName || ''} ${task.createdBy?.lastName || ''}`}
                  />
                  <span className="text-sm">
                    {task.createdBy?.firstName} {task.createdBy?.lastName}
                  </span>
                </div>
              </div>

              <Separator />

              {/* Deadline */}
              <div>
                <p className="text-sm font-medium text-muted-foreground mb-1">
                  Deadline
                </p>
                {task.deadline ? (
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    <span className={isOverdue ? 'text-red-600 font-medium' : ''}>
                      {format(new Date(task.deadline), 'PPP p')}
                    </span>
                    {isOverdue && (
                      <Badge variant="destructive" className="ml-2">
                        Overdue
                      </Badge>
                    )}
                  </div>
                ) : (
                  <span className="text-muted-foreground text-sm">No deadline</span>
                )}
              </div>

              <Separator />

              {/* Recurrence */}
              {task.isRecurring && task.recurrence && (
                <>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground mb-1">
                      Recurrence
                    </p>
                    <div className="flex items-center gap-2">
                      <Repeat className="h-4 w-4" />
                      <span className="text-sm">
                        Every {task.recurrence.interval}{' '}
                        {task.recurrence.frequency}
                      </span>
                    </div>
                  </div>
                  <Separator />
                </>
              )}

              {/* Attachments */}
              {task.attachments && task.attachments.length > 0 && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-2">
                    Attachments
                  </p>
                  <div className="space-y-2">
                    {task.attachments.map((attachment: any) => (
                      <a
                        key={attachment.id}
                        href={attachment.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 p-2 rounded-md bg-muted/50 hover:bg-muted transition-colors"
                      >
                        <Paperclip className="h-4 w-4" />
                        <span className="text-sm truncate flex-1">
                          {attachment.fileName}
                        </span>
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Timeline */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock className="h-5 w-5" />
                Timeline
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 mt-2 rounded-full bg-green-500" />
                  <div>
                    <p className="text-sm font-medium">Task Created</p>
                    <p className="text-xs text-muted-foreground">
                      {format(new Date(task.createdAt), 'PPP p')}
                    </p>
                  </div>
                </div>
                {task.updatedAt !== task.createdAt && (
                  <div className="flex items-start gap-3">
                    <div className="w-2 h-2 mt-2 rounded-full bg-blue-500" />
                    <div>
                      <p className="text-sm font-medium">Last Updated</p>
                      <p className="text-xs text-muted-foreground">
                        {format(new Date(task.updatedAt), 'PPP p')}
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}