import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getComments, createComment } from '../services/commentService';
import { useAuthStore } from '@/stores/auth';
import { useToast } from '@/hooks/useToast';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { MessageCircle, Send, Loader2 } from 'lucide-react';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { CommentThread } from './CommentThread';
import type { TrackComment } from '../services/commentService';

// FE-PAGE-007: Complete Track Detail page implementation - Comments Section

interface CommentSectionProps {
  trackId: string;
}

export function CommentSection({ trackId }: CommentSectionProps) {
  const { user } = useAuthStore();
  const toast = useToast();
  const queryClient = useQueryClient();
  const [newComment, setNewComment] = useState('');
  const [page, setPage] = useState(1);
  const limit = 20;

  const {
    data: commentsData,
    isLoading,
    error,
  } = useQuery({
    queryKey: ['trackComments', trackId, page],
    queryFn: () => getComments(trackId, page, limit),
    enabled: !!trackId,
  });

  const createCommentMutation = useMutation({
    mutationFn: (content: string) => createComment(trackId, content),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['trackComments', trackId] });
      setNewComment('');
      toast.success('Commentaire publié');
    },
    onError: (error: any) => {
      toast.error(error.message || 'Erreur lors de la publication');
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newComment.trim() || !user) return;
    createCommentMutation.mutate(newComment.trim());
  };

  // Filter to show only top-level comments (no parent_id)
  const topLevelComments =
    commentsData?.comments?.filter((c: TrackComment) => !c.parent_id) || [];
  const total = commentsData?.total || 0;
  const totalPages = Math.ceil(total / limit);

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MessageCircle className="h-5 w-5" />
          Commentaires ({commentsData?.total || 0})
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Comment Form */}
        {user ? (
          <form onSubmit={handleSubmit} className="flex gap-2">
            <Input
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="Écrire un commentaire..."
              maxLength={500}
            />
            <Button
              type="submit"
              disabled={!newComment.trim() || createCommentMutation.isPending}
            >
              {createCommentMutation.isPending ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Send className="h-4 w-4" />
              )}
            </Button>
          </form>
        ) : (
          <p className="text-sm text-muted-foreground">
            Connectez-vous pour commenter
          </p>
        )}

        {/* Comments List */}
        {isLoading ? (
          <div className="flex justify-center py-8">
            <LoadingSpinner />
          </div>
        ) : error ? (
          <div className="text-center text-destructive py-4">
            Failed to load comments
          </div>
        ) : topLevelComments.length === 0 ? (
          <div className="text-center text-muted-foreground py-8">
            Aucun commentaire pour le moment. Soyez le premier à commenter !
          </div>
        ) : (
          <div className="space-y-4">
            {topLevelComments.map((comment: TrackComment) => (
              <CommentThread
                key={comment.id}
                comment={comment}
                trackId={trackId}
              />
            ))}

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="flex items-center justify-center gap-2 pt-4">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  disabled={page === 1}
                >
                  Précédent
                </Button>
                <span className="text-sm text-muted-foreground">
                  Page {page} sur {totalPages}
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                  disabled={page === totalPages}
                >
                  Suivant
                </Button>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}