import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { formatDistanceToNow } from 'date-fns';
import { fr } from 'date-fns/locale';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';
import {
  MessageCircle,
  Reply,
  Trash2,
  Edit2,
  MoreVertical,
  Send,
  X,
  Loader2,
} from 'lucide-react';
import { useAuthStore } from '@/features/auth/store/authStore';
import { useToast } from '@/hooks/useToast';
import {
  createComment,
  updateComment,
  deleteComment,
  getReplies,
  type TrackComment,
} from '../services/commentService';
import { cn } from '@/lib/utils';

/**
 * FE-COMP-012: Comment thread component with replies and moderation
 */

interface CommentThreadProps {
  comment: TrackComment;
  trackId: string;
  depth?: number;
  className?: string;
}

const MAX_DEPTH = 3; // Maximum nesting depth for replies

export function CommentThread({
  comment,
  trackId,
  depth = 0,
  className,
}: CommentThreadProps) {
  const { user } = useAuthStore();
  const { success: showSuccess, error: showError } = useToast();
  const queryClient = useQueryClient();
  const [isReplying, setIsReplying] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [replyContent, setReplyContent] = useState('');
  const [editContent, setEditContent] = useState(comment.content);
  const [showReplies, setShowReplies] = useState(depth === 0);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);

  // Fetch replies
  const {
    data: repliesData,
    isLoading: isLoadingReplies,
  } = useQuery({
    queryKey: ['commentReplies', comment.id],
    queryFn: () => getReplies(comment.id, 1, 20),
    enabled: showReplies && !comment.replies,
  });

  const replies = comment.replies || repliesData?.replies || [];
  const canReply = depth < MAX_DEPTH;
  const canEdit = user?.id === comment.user_id;
  const canDelete = user?.id === comment.user_id || user?.role === 'admin';

  // Create reply mutation
  const createReplyMutation = useMutation({
    mutationFn: (content: string) => createComment(trackId, content, comment.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['trackComments', trackId] });
      queryClient.invalidateQueries({ queryKey: ['commentReplies', comment.id] });
      setReplyContent('');
      setIsReplying(false);
      setShowReplies(true);
      showSuccess('Réponse publiée');
    },
    onError: (error: any) => {
      showError(error.message || 'Erreur lors de la publication de la réponse');
    },
  });

  // Update comment mutation
  const updateCommentMutation = useMutation({
    mutationFn: (content: string) => updateComment(comment.id, content),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['trackComments', trackId] });
      setIsEditing(false);
      showSuccess('Commentaire modifié');
    },
    onError: (error: any) => {
      showError(error.message || 'Erreur lors de la modification');
    },
  });

  // Delete comment mutation
  const deleteCommentMutation = useMutation({
    mutationFn: () => deleteComment(comment.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['trackComments', trackId] });
      setShowDeleteDialog(false);
      showSuccess('Commentaire supprimé');
    },
    onError: (error: any) => {
      showError(error.message || 'Erreur lors de la suppression');
    },
  });

  const handleReplySubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!replyContent.trim() || !user) return;
    createReplyMutation.mutate(replyContent.trim());
  };

  const handleEditSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!editContent.trim()) return;
    updateCommentMutation.mutate(editContent.trim());
  };

  const handleDelete = () => {
    deleteCommentMutation.mutate();
  };

  return (
    <>
      <div className={cn('space-y-3', className)}>
        {/* Main Comment */}
        <div className="flex gap-3">
          <Avatar className="h-8 w-8 shrink-0">
            <AvatarImage src={comment.user?.avatar} />
            <AvatarFallback>
              {comment.user?.username?.charAt(0).toUpperCase() || 'U'}
            </AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0 space-y-2">
            {/* Comment Header */}
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="font-medium text-sm">
                    {comment.user?.username || 'Utilisateur'}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {formatDistanceToNow(new Date(comment.created_at), {
                      addSuffix: true,
                      locale: fr,
                    })}
                  </span>
                  {comment.is_edited && (
                    <span className="text-xs text-muted-foreground italic">
                      (modifié)
                    </span>
                  )}
                </div>
              </div>
              {(canEdit || canDelete) && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-6 w-6">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    {canEdit && (
                      <DropdownMenuItem onClick={() => setIsEditing(true)}>
                        <Edit2 className="mr-2 h-4 w-4" />
                        Modifier
                      </DropdownMenuItem>
                    )}
                    {canDelete && (
                      <DropdownMenuItem
                        onClick={() => setShowDeleteDialog(true)}
                        className="text-destructive"
                      >
                        <Trash2 className="mr-2 h-4 w-4" />
                        Supprimer
                      </DropdownMenuItem>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
              )}
            </div>

            {/* Comment Content */}
            {isEditing ? (
              <form onSubmit={handleEditSubmit} className="space-y-2">
                <Input
                  value={editContent}
                  onChange={(e) => setEditContent(e.target.value)}
                  maxLength={500}
                  autoFocus
                />
                <div className="flex gap-2">
                  <Button
                    type="submit"
                    size="sm"
                    disabled={
                      !editContent.trim() || updateCommentMutation.isPending
                    }
                  >
                    {updateCommentMutation.isPending ? (
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    ) : (
                      <Send className="h-4 w-4 mr-2" />
                    )}
                    Enregistrer
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setIsEditing(false);
                      setEditContent(comment.content);
                    }}
                  >
                    <X className="h-4 w-4 mr-2" />
                    Annuler
                  </Button>
                </div>
              </form>
            ) : (
              <p className="text-sm whitespace-pre-wrap break-words">
                {comment.content}
              </p>
            )}

            {/* Comment Actions */}
            {!isEditing && (
              <div className="flex items-center gap-4">
                {canReply && user && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setIsReplying(!isReplying)}
                    className="h-7 text-xs"
                  >
                    <Reply className="h-3 w-3 mr-1" />
                    Répondre
                  </Button>
                )}
                {replies.length > 0 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowReplies(!showReplies)}
                    className="h-7 text-xs"
                  >
                    <MessageCircle className="h-3 w-3 mr-1" />
                    {showReplies ? 'Masquer' : 'Afficher'} {replies.length}{' '}
                    {replies.length === 1 ? 'réponse' : 'réponses'}
                  </Button>
                )}
              </div>
            )}

            {/* Reply Form */}
            {isReplying && user && (
              <form onSubmit={handleReplySubmit} className="space-y-2 pt-2">
                <Input
                  value={replyContent}
                  onChange={(e) => setReplyContent(e.target.value)}
                  placeholder={`Répondre à ${comment.user?.username}...`}
                  maxLength={500}
                  autoFocus
                />
                <div className="flex gap-2">
                  <Button
                    type="submit"
                    size="sm"
                    disabled={
                      !replyContent.trim() || createReplyMutation.isPending
                    }
                  >
                    {createReplyMutation.isPending ? (
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    ) : (
                      <Send className="h-4 w-4 mr-2" />
                    )}
                    Publier
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setIsReplying(false);
                      setReplyContent('');
                    }}
                  >
                    <X className="h-4 w-4 mr-2" />
                    Annuler
                  </Button>
                </div>
              </form>
            )}

            {/* Replies */}
            {showReplies && (
              <div className="space-y-3 pt-2 pl-4 border-l-2 border-muted">
                {isLoadingReplies ? (
                  <div className="flex items-center justify-center py-4">
                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                  </div>
                ) : replies.length > 0 ? (
                  replies.map((reply) => (
                    <CommentThread
                      key={reply.id}
                      comment={reply}
                      trackId={trackId}
                      depth={depth + 1}
                    />
                  ))
                ) : null}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Delete Confirmation Dialog */}
      <ConfirmationDialog
        open={showDeleteDialog}
        onClose={() => setShowDeleteDialog(false)}
        onConfirm={handleDelete}
        title="Supprimer le commentaire"
        description="Êtes-vous sûr de vouloir supprimer ce commentaire ? Cette action est irréversible."
        confirmLabel="Supprimer"
        cancelLabel="Annuler"
        variant="destructive"
      />
    </>
  );
}