import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { Clock, Calendar, Play, Pause, MoreHorizontal, Edit, Trash2, Timer, CheckCircle, X, Lock, CornerDownRight, Share2, Users } from "lucide-react";
import { Task, Label, User } from '@shared/schema';
import { ShareTaskModal } from './ShareTaskModal';
import { useQuery } from '@tanstack/react-query';
import { Checkbox } from "@/components/ui/checkbox";
import { motion, PanInfo, useAnimation } from 'framer-motion';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { triggerConfetti } from "@/lib/confetti";
import { playSuccessSound } from "@/lib/sounds";
import { simulateAIDecomposition } from "@/lib/ai-simulator";
import { Wand2, Loader2 } from "lucide-react";
import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";



interface TaskCardProps {
  task: Task;
  onStartTimer?: () => void;
  onStopTimer?: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
  onStatusChange?: (status: Task['status']) => void;
  onUpdate?: (updates: Partial<Task>) => void;
  onAutoSchedule?: () => void;
  isDragging?: boolean;
}

function SharedTaskIcon({ task }: { task: Task }) {
  const { t } = useTranslation();
  const { data: user } = useQuery<User>({ queryKey: ["/api/user"], retry: false });

  const isOwner = user?.id === task.userId;

  // If owner, fetch shared users
  const { data: sharedUsers } = useQuery<any[]>({
    queryKey: [`/api/tasks/${task.id}/shared-users`],
    enabled: !!isOwner && !!task.id,
    retry: false
  });

  if (!user) return null;

  // Case 1: Owner and task is shared
  if (isOwner && sharedUsers && sharedUsers.length > 0) {
    const names = sharedUsers.map(u => u.username).join(", ");
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-900 cursor-help">
            <Share2 className="w-3 h-3 text-indigo-600 dark:text-indigo-300" />
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <p>{t('share.sharedWith')}: {names}</p>
        </TooltipContent>
      </Tooltip>
    );
  }

  // Case 2: Not owner (Shared WITH me)
  if (!isOwner && task.userId) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center justify-center w-5 h-5 rounded-full bg-orange-100 dark:bg-orange-900 cursor-help">
            <Users className="w-3 h-3 text-orange-600 dark:text-orange-300" />
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <p>{t('share.sharedWithMe') || "Shared with me"}</p>
        </TooltipContent>
      </Tooltip>
    );
  }

  return null;
}

function SharedMenuItem({ task, onShare }: { task: Task, onShare: () => void }) {
  const { t } = useTranslation();
  const { data: user } = useQuery<User>({ queryKey: ["/api/user"], retry: false });

  // Only owner can share
  if (user?.id !== task.userId) return null;

  return (
    <DropdownMenuItem
      onClick={(e) => {
        e.stopPropagation();
        onShare();
      }}
    >
      <Share2 className="w-4 h-4 mr-2" />
      {t('share.taskTitle')}
    </DropdownMenuItem>
  );
}

export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDelete, onStatusChange, onUpdate, onAutoSchedule, isDragging }: TaskCardProps) {
  const { t } = useTranslation();
  const { toast } = useToast();
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [isShareModalOpen, setIsShareModalOpen] = useState(false);

  const handleAIMagic = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (isAnalyzing) return;

    setIsAnalyzing(true);
    try {
      const aiContent = await simulateAIDecomposition(task.title);
      const newDescription = (task.description || '') + aiContent;

      onUpdate?.({ description: newDescription });
      triggerConfetti(0.5, 0.5); // Small burst for "Magic"
      playSuccessSound();
    } catch (err) {
      console.error(err);
    } finally {
      setIsAnalyzing(false);
    }
  };

  const { data: allTasks = [] } = useQuery<Task[]>({
    queryKey: ['/api/tasks'],
    staleTime: 5 * 60 * 1000,
  });

  const blockingTasks = task.dependencies?.map(dId => allTasks.find(t => t.id === dId)).filter(t => t && t.status !== 'done') || [];
  const isBlocked = blockingTasks.length > 0;

  const subtasks = allTasks.filter(t => t.parentTaskId === task.id);
  const completedSubtasks = subtasks.filter(t => t.status === 'done');

  // Fetch labels to get the label color
  const { data: labels = [] } = useQuery<Label[]>({
    queryKey: ['/api/labels'],
    staleTime: 5 * 60 * 1000, // 5 minutes cache
    refetchOnWindowFocus: false,
  });

  // Find the label for this task
  const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;

  const handleToggleTimer = () => {
    if (task.isTracking) {
      onStopTimer?.();
      console.log(`Timer stopped for task: ${task.title}`);
    } else {
      onStartTimer?.();
      console.log(`Timer started for task: ${task.title}`);
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return 'bg-destructive text-destructive-foreground';
      case 'medium': return 'bg-yellow-500 text-white';
      default: return 'bg-muted text-muted-foreground';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'done': return 'bg-green-500 text-white';
      case 'inProgress': return 'bg-primary text-primary-foreground';
      default: return 'bg-muted text-muted-foreground';
    }
  };

  const formatTime = (minutes: number) => {
    if (minutes < 60) {
      return `${minutes}m`;
    }
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (mins === 0) {
      return `${hours}h`;
    }
    return `${hours}h ${mins}m`;
  };

  /* AI Follow-up Check */
  const checkFollowUp = async () => {
    // Fire and forget - don't block UI
    try {
      const res = await apiRequest("POST", "/api/ai/analyze-completion", { taskId: task.id });
      if (res.ok) {
        const data = await res.json();
        if (data.needed && data.title) {
          toast({
            title: t('ai.followUpSuggestion', 'Follow-up Suggested'),
            description: `${data.title} - ${data.description || ''}`,
            action: (
              <Button
                variant="outline"
                size="sm"
                onClick={async (e) => {
                  e.stopPropagation(); // prevent toast click from doing generic things
                  // Create the task immediately
                  try {
                    await apiRequest("POST", "/api/tasks", {
                      title: data.title,
                      description: data.description,
                      status: "todo",
                      priority: "medium",
                      labelId: task.labelId, // Inherit label
                      dueDate: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString() // Tomorrow
                    });
                    toast({ title: t('ai.taskCreated', 'Follow-up task created!') });
                    // Invalidate queries to show new task
                    // queryClient.invalidateQueries... (Need queryClient access)
                    // Since we don't have queryClient here easily without import useQueryClient
                    // We can just reload or rely on auto-refetch
                    window.location.reload(); // Crude but effective for now, or useQueryClient
                  } catch (err) {
                    toast({ title: t('ai.errorCreating', 'Failed to create task'), variant: "destructive" });
                  }
                }}
              >
                {t('common.create', 'Create')}
              </Button>
            ),
            duration: 8000,
          });
        }
      }
    } catch (e) {
      console.error("Follow-up check failed", e);
    }
  };

  const handleToggleComplete = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (isBlocked) return;
    if (task.status === 'done') {
      onStatusChange?.('todo');
    } else {
      triggerConfetti(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
      playSuccessSound();
      onStatusChange?.('done');
      // Trigger AI check
      checkFollowUp();
    }
  };

  const controls = useAnimation();

  const handleDragEnd = async (event: any, info: PanInfo) => {
    if (info.offset.x > 100) {
      if (isBlocked) {
        controls.start({ x: 0 });
        return;
      }
      // Swiped right -> Complete
      triggerConfetti(0.5, 0.5);
      playSuccessSound();
      onStatusChange?.('done');
      await controls.start({ x: 500, opacity: 0 });
    } else if (info.offset.x < -100 && onDelete) {
      // Swiped left -> Delete (optional, maybe just shake for now)
      onDelete();
    } else {
      controls.start({ x: 0 });
    }
  };

  /* Retrieve parent task if this is a subtask */
  const parentTask = task.parentTaskId
    ? allTasks.find(t => String(t.id) === String(task.parentTaskId))
    : null;

  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: -50, right: 150 }} // Limit swipe distance
      dragElastic={0.1}
      onDragEnd={handleDragEnd}
      animate={controls}
      whileDrag={{ scale: 1.02, cursor: 'grabbing' }}
      className="touch-pan-y" // Allow vertical scroll, horizontal swipe
    >
      <ContextMenu>
        <ContextMenuTrigger asChild>
          <Card
            className={`p-5 hover-elevate active-elevate-2 transition-all duration-300 relative hover:-translate-y-1 hover:shadow-xl ${isDragging ? 'rotate-1 scale-105 shadow-lg' : ''
              } ${task.status === 'done' ? 'opacity-60' : ''} ${parentTask ? 'border-l-4 border-l-indigo-400 bg-indigo-50/10' : ''}`}
            style={taskLabel ? {
              borderColor: taskLabel.color,
              borderWidth: '2px',
              borderStyle: 'solid',
              borderLeftWidth: parentTask ? '4px' : '2px', // Make left border thicker if subtask
              borderLeftColor: parentTask ? '#818cf8' : taskLabel.color // Indigo for subtask
            } : {}}
            data-testid={`card-task-${task.id}`}
          >
            <div className="flex items-start gap-3">
              {/* Checkbox for quick completion */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Checkbox
                    checked={task.status === 'done'}
                    onClick={handleToggleComplete}
                    data-testid={`checkbox-complete-${task.id}`}
                    className="mt-0.5"
                    disabled={isBlocked}
                  />
                </TooltipTrigger>
                <TooltipContent>
                  {isBlocked ? (
                    <p className="text-destructive font-medium">
                      {t('taskCard.blockedBy', { tasks: blockingTasks.map(t => t?.title).join(", ") })}
                    </p>
                  ) : (
                    <p>{t('taskCard.toggleComplete')}</p>
                  )}
                </TooltipContent>
              </Tooltip>

              <div
                className="flex-1 min-w-0 cursor-pointer"
                onClick={() => {
                  onEdit?.();
                  console.log(`Task card clicked: ${task.title}`);
                }}
              >
                {/* Parent Task Link rendered in title now */}
                <h3 className={`font-medium text-sm leading-tight truncate ${task.status === 'done' ? 'line-through' : ''}`} data-testid={`text-task-title-${task.id}`}>
                  {parentTask ? (
                    <span className="flex items-center gap-1">
                      <span className="text-muted-foreground font-normal">{parentTask.title}</span>
                      <span className="text-muted-foreground">›</span>
                      <span>{task.title}</span>
                    </span>
                  ) : (
                    task.title
                  )}
                </h3>
                {task.description && (
                  <p className="text-xs text-muted-foreground mt-1 line-clamp-2" data-testid={`text-task-description-${task.id}`}>
                    {task.description}
                  </p>
                )}

                <div className="flex items-center gap-2 mt-3 flex-wrap">
                  <Badge
                    variant="secondary"
                    className={`text-xs ${getPriorityColor(task.priority)}`}
                    data-testid={`badge-priority-${task.id}`}
                  >
                    {t(`priority.${task.priority}`)}
                  </Badge>

                  <Badge
                    variant="outline"
                    className={`text-xs ${getStatusColor(task.status)}`}
                    data-testid={`badge-status-${task.id}`}
                  >
                    {t(`status.${task.status}`)}
                  </Badge>

                  {/* Shared Status Icon */}
                  <SharedTaskIcon task={task} />

                  {(task.dueDate || task.startDate) && (
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <Calendar className="w-3 h-3" />
                      <span data-testid={`text-due-date-${task.id}`}>
                        {task.startDate ? `${new Date(task.startDate).toLocaleDateString()} - ` : ''}
                        {task.dueDate ? new Date(task.dueDate).toLocaleDateString() : ''}
                      </span>
                    </div>
                  )}
                  {task.energyLevel && task.energyLevel !== 'medium' && (
                    <Badge variant="secondary" className="text-xs bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                      {t(`energy.${task.energyLevel}`)}
                    </Badge>
                  )}

                  {task.estimatedDuration && (
                    <Badge variant="outline" className="text-xs text-muted-foreground border-dashed">
                      ⏳ {formatTime(task.estimatedDuration)}
                    </Badge>
                  )}

                  {subtasks.length > 0 && (
                    <Badge variant="secondary" className="text-xs">
                      {completedSubtasks.length}/{subtasks.length} Subtasks
                    </Badge>
                  )}

                  {isBlocked && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Badge variant="outline" className="text-xs border-destructive text-destructive gap-1 animate-pulse">
                          <Lock className="w-3 h-3" />
                          Blocked
                        </Badge>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>Waiting for: {blockingTasks.map(t => t?.title).join(", ")}</p>
                      </TooltipContent>
                    </Tooltip>
                  )}
                </div>

                {(task.timeTracked > 0 || task.isTracking) && (
                  <div className="flex items-center gap-1 mt-2 text-xs">
                    <Clock className={`w-3 h-3 ${task.isTracking ? 'text-primary animate-pulse' : 'text-muted-foreground'}`} />
                    <span
                      data-testid={`text-time-tracked-${task.id}`}
                      className={task.isTracking ? 'text-primary font-medium' : 'text-muted-foreground'}
                    >
                      {task.timeTracked > 0 ? formatTime(task.timeTracked) : '0m'}
                      {task.isTracking && ` (${t('taskCard.running')})`}
                    </span>
                  </div>
                )}
              </div>

              <div className="flex items-start gap-1">
                {/* Quick delete button */}
                {onDelete && (
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        size="icon"
                        variant="ghost"
                        onClick={(e) => {
                          e.stopPropagation();
                          onDelete();
                        }}
                        data-testid={`button-delete-${task.id}`}
                        className="w-6 h-6 text-muted-foreground hover:text-destructive"
                      >
                        <X className="w-3 h-3" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>{t('taskCard.quickDelete')}</p>
                    </TooltipContent>
                  </Tooltip>
                )}

                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      size="icon"
                      variant="ghost"
                      onClick={(e) => e.stopPropagation()}
                      data-testid={`button-menu-${task.id}`}
                      className="w-6 h-6"
                    >
                      <MoreHorizontal className="w-3 h-3" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation();
                        onEdit?.();
                        console.log(`Edit task: ${task.title}`);
                      }}
                      data-testid={`menu-edit-${task.id}`}
                    >
                      <Edit className="w-4 h-4 mr-2" />
                      {t('taskCard.editTask')}
                    </DropdownMenuItem>

                    {onAutoSchedule && !task.dueDate && (
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          onAutoSchedule();
                        }}
                        className="text-indigo-600 dark:text-indigo-400"
                        data-testid={`menu-schedule-${task.id}`}
                      >
                        <Wand2 className="w-4 h-4 mr-2" />
                        {t('taskDetails.autoSchedule', 'Auto-Schedule')}
                      </DropdownMenuItem>
                    )}

                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation();
                        handleToggleTimer();
                      }}
                      data-testid={`menu-timer-${task.id}`}
                    >
                      <Timer className="w-4 h-4 mr-2" />
                      {task.isTracking ? t('taskCard.stopTimer') : t('taskCard.startTimer')}
                    </DropdownMenuItem>

                    {/* Share Option - Check if owner */}
                    <SharedMenuItem task={task} onShare={() => setIsShareModalOpen(true)} />

                    <DropdownMenuSeparator />

                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation();
                        if (isBlocked) return;
                        onStatusChange?.('done');
                        console.log(`Mark task as done: ${task.title}`);
                      }}
                      disabled={isBlocked}
                      data-testid={`menu-complete-${task.id}`}
                    >
                      {isBlocked ? <Lock className="w-4 h-4 mr-2" /> : <CheckCircle className="w-4 h-4 mr-2" />}
                      {t('taskCard.markAsDone')}
                    </DropdownMenuItem>


                    {task.status === 'todo' && (
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          onStatusChange?.('inProgress');
                          console.log(`Start working on: ${task.title}`);
                        }}
                        data-testid={`menu-start-${task.id}`}
                      >
                        <Play className="w-4 h-4 mr-2" />
                        {t('taskCard.startWorking')}
                      </DropdownMenuItem>
                    )}

                    {task.status === 'inProgress' && (
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          onStatusChange?.('todo');
                          console.log(`Move back to todo: ${task.title}`);
                        }}
                        data-testid={`menu-todo-${task.id}`}
                      >
                        <Clock className="w-4 h-4 mr-2" />
                        {t('taskCard.moveToTodo')}
                      </DropdownMenuItem>
                    )}

                    {task.status === 'done' && (
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          onStatusChange?.('inProgress');
                          console.log(`Reopen task: ${task.title}`);
                        }}
                        data-testid={`menu-reopen-${task.id}`}
                      >
                        <Play className="w-4 h-4 mr-2" />
                        {t('taskCard.reopenTask')}
                      </DropdownMenuItem>
                    )}

                    <DropdownMenuSeparator />

                    {onDelete && (
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          onDelete();
                          console.log(`Delete task: ${task.title}`);
                        }}
                        className="text-destructive"
                        data-testid={`menu-delete-${task.id}`}
                      >
                        <Trash2 className="w-4 h-4 mr-2" />
                        {t('taskCard.deleteTask')}
                      </DropdownMenuItem>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          </Card>
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem
            onClick={(e) => {
              e.stopPropagation();
              onEdit?.();
            }}
            data-testid={`context-menu-edit-${task.id}`}
          >
            <Edit className="w-4 h-4 mr-2" />
            {t('taskCard.editTask')}
          </ContextMenuItem>

          <ContextMenuItem
            onClick={(e) => {
              e.stopPropagation();
              handleToggleTimer();
            }}
            data-testid={`context-menu-timer-${task.id}`}
          >
            <Timer className="w-4 h-4 mr-2" />
            {task.isTracking ? t('taskCard.stopTimer') : t('taskCard.startTimer')}
          </ContextMenuItem>

          <ContextMenuSeparator />

          {task.status !== 'done' && (
            <ContextMenuItem
              onClick={(e) => {
                e.stopPropagation();
                onStatusChange?.('done');
              }}
              data-testid={`context-menu-complete-${task.id}`}
            >
              <CheckCircle className="w-4 h-4 mr-2" />
              {t('taskCard.markAsDone')}
            </ContextMenuItem>
          )}

          {task.status === 'todo' && (
            <ContextMenuItem
              onClick={(e) => {
                e.stopPropagation();
                onStatusChange?.('inProgress');
              }}
              data-testid={`context-menu-start-${task.id}`}
            >
              <Play className="w-4 h-4 mr-2" />
              {t('taskCard.startWorking')}
            </ContextMenuItem>
          )}

          {task.status === 'inProgress' && (
            <ContextMenuItem
              onClick={(e) => {
                e.stopPropagation();
                onStatusChange?.('todo');
              }}
              data-testid={`context-menu-todo-${task.id}`}
            >
              <Clock className="w-4 h-4 mr-2" />
              {t('taskCard.moveToTodo')}
            </ContextMenuItem>
          )}

          {task.status === 'done' && (
            <ContextMenuItem
              onClick={(e) => {
                e.stopPropagation();
                onStatusChange?.('inProgress');
              }}
              data-testid={`context-menu-reopen-${task.id}`}
            >
              <Play className="w-4 h-4 mr-2" />
              {t('taskCard.reopenTask')}
            </ContextMenuItem>
          )}

          <ContextMenuSeparator />

          {onDelete && (
            <ContextMenuItem
              onClick={(e) => {
                e.stopPropagation();
                onDelete();
              }}
              className="text-destructive"
              data-testid={`context-menu-delete-${task.id}`}
            >
              <Trash2 className="w-4 h-4 mr-2" />
              {t('taskCard.deleteTask')}
            </ContextMenuItem>
          )}
        </ContextMenuContent>
      </ContextMenu>

      <ShareTaskModal
        taskId={task.id}
        open={isShareModalOpen}
        onOpenChange={setIsShareModalOpen}
      />
    </motion.div>
  );
}