import { memo, useCallback } from 'react';
import { 
  CheckCircle, XCircle, RefreshCw, AlertCircle, Lock, Trash2, 
  Edit, Info, ExternalLink, ChevronDown, ListTree, Calendar 
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { UserAvatar } from '@/components/ui/user-avatar';
import { format } from 'date-fns';
import type { ModerationItem } from '@/types/moderation';
import { sanitizeURL, sanitizePlainText } from '@/lib/sanitize';

interface QueueItemActionsProps {
  item: ModerationItem;
  isMobile: boolean;
  actionLoading: string | null;
  isLockedByMe: boolean;
  isLockedByOther: boolean;
  currentLockSubmissionId?: string;
  notes: Record<string, string>;
  isAdmin: boolean;
  isSuperuser: boolean;
  queueIsLoading: boolean;
  isClaiming: boolean;
  onNoteChange: (id: string, value: string) => void;
  onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
  onResetToPending: (item: ModerationItem) => void;
  onRetryFailed: (item: ModerationItem) => void;
  onOpenReviewManager: (submissionId: string) => void;
  onOpenItemEditor: (submissionId: string) => void;
  onDeleteSubmission: (item: ModerationItem) => void;
  onInteractionFocus: (id: string) => void;
  onInteractionBlur: (id: string) => void;
  onClaim: () => void;
}

export const QueueItemActions = memo(({
  item,
  isMobile,
  actionLoading,
  isLockedByMe,
  isLockedByOther,
  currentLockSubmissionId,
  notes,
  isAdmin,
  isSuperuser,
  queueIsLoading,
  isClaiming,
  onNoteChange,
  onApprove,
  onResetToPending,
  onRetryFailed,
  onOpenReviewManager,
  onOpenItemEditor,
  onDeleteSubmission,
  onInteractionFocus,
  onInteractionBlur,
  onClaim
}: QueueItemActionsProps) => {
  // Memoize all handlers to prevent re-renders
  const handleNoteChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    onNoteChange(item.id, e.target.value);
  }, [onNoteChange, item.id]);

  const handleApprove = useCallback(() => {
    onApprove(item, 'approved', notes[item.id]);
  }, [onApprove, item, notes]);

  const handleReject = useCallback(() => {
    onApprove(item, 'rejected', notes[item.id]);
  }, [onApprove, item, notes]);

  const handleResetToPending = useCallback(() => {
    onResetToPending(item);
  }, [onResetToPending, item]);

  const handleRetryFailed = useCallback(() => {
    onRetryFailed(item);
  }, [onRetryFailed, item]);

  const handleOpenReviewManager = useCallback(() => {
    onOpenReviewManager(item.id);
  }, [onOpenReviewManager, item.id]);

  const handleOpenItemEditor = useCallback(() => {
    onOpenItemEditor(item.id);
  }, [onOpenItemEditor, item.id]);

  const handleDeleteSubmission = useCallback(() => {
    onDeleteSubmission(item);
  }, [onDeleteSubmission, item]);

  const handleFocus = useCallback(() => {
    onInteractionFocus(item.id);
  }, [onInteractionFocus, item.id]);

  const handleBlur = useCallback(() => {
    onInteractionBlur(item.id);
  }, [onInteractionBlur, item.id]);

  const handleReverseNoteChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    onNoteChange(`reverse-${item.id}`, e.target.value);
  }, [onNoteChange, item.id]);

  const handleReverseApprove = useCallback(() => {
    onApprove(item, 'approved', notes[`reverse-${item.id}`]);
  }, [onApprove, item, notes]);

  const handleReverseReject = useCallback(() => {
    onApprove(item, 'rejected', notes[`reverse-${item.id}`]);
  }, [onApprove, item, notes]);

  return (
    <>
      {/* Action buttons based on status */}
      {(item.status === 'pending' || item.status === 'flagged') && (
        <>
          {/* Claim button for unclaimed submissions */}
          {!isLockedByOther && currentLockSubmissionId !== item.id && (
            <div className="mb-4">
              <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20">
                <AlertCircle className="h-4 w-4 text-blue-600" />
                <AlertTitle className="text-blue-900 dark:text-blue-100">Unclaimed Submission</AlertTitle>
                <AlertDescription className="text-blue-800 dark:text-blue-200">
                  <div className="flex items-center justify-between mt-2">
                    <span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
                    <Button
                      onClick={onClaim}
                      disabled={queueIsLoading || isClaiming}
                      size="sm"
                      className="ml-4"
                    >
                      {isClaiming ? (
                        <>
                          <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                          Claiming...
                        </>
                      ) : (
                        <>
                          <Lock className="w-4 h-4 mr-2" />
                          Claim Submission
                        </>
                      )}
                    </Button>
                  </div>
                </AlertDescription>
              </Alert>
            </div>
          )}
          
          <div className={isMobile ? 'space-y-4 mt-4' : 'grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start mt-4'}>
            {/* Submitter Context - shown before moderator can add their notes */}
            {(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
              <div className="space-y-3 mb-4 p-4 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg lg:col-span-2">
                <div className="flex items-center gap-2 mb-2">
                  <Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                  <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100">
                    Submitter Context
                  </h4>
                </div>
                
                {item.submission_items?.[0]?.item_data?.source_url && (
                  <div className="text-sm">
                    <span className="font-medium text-blue-900 dark:text-blue-100">Source: </span>
                    <a 
                      href={sanitizeURL(item.submission_items[0].item_data.source_url)} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-blue-600 hover:underline dark:text-blue-400 inline-flex items-center gap-1"
                    >
                      {sanitizePlainText(item.submission_items[0].item_data.source_url)}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </div>
                )}

                {item.submission_items?.[0]?.item_data?.submission_notes && (
                  <div className="text-sm">
                    <span className="font-medium text-blue-900 dark:text-blue-100">Submitter Notes: </span>
                    <p className="mt-1 whitespace-pre-wrap text-blue-800 dark:text-blue-200">
                      {sanitizePlainText(item.submission_items[0].item_data.submission_notes)}
                    </p>
                  </div>
                )}
              </div>
            )}
            
            {/* Left: Notes textarea */}
            <div className="space-y-2">
              <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
              <Textarea
                id={`notes-${item.id}`}
                placeholder="Add notes about your moderation decision..."
                value={notes[item.id] || ''}
                onChange={handleNoteChange}
                onFocus={handleFocus}
                onBlur={handleBlur}
                rows={isMobile ? 2 : 4}
                className={!isMobile ? 'min-h-[120px]' : ''}
                disabled={isLockedByOther || currentLockSubmissionId !== item.id}
              />
            </div>
            
            {/* Right: Action buttons */}
            <div className={isMobile ? 'flex flex-col gap-2' : 'grid grid-cols-2 gap-2 min-w-[400px]'}>
              {/* Show Review Items button for content submissions */}
              {item.type === 'content_submission' && (
                <>
                  <Button
                    onClick={handleOpenReviewManager}
                    disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                    variant="outline"
                    className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                    size={isMobile ? "default" : "default"}
                  >
                    <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                    Review Items
                  </Button>
                  
                  {isAdmin && isLockedByMe && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          onClick={handleOpenItemEditor}
                          disabled={actionLoading === item.id}
                          variant="ghost"
                          className={isMobile ? 'h-11' : ''}
                          size={isMobile ? "default" : "default"}
                        >
                          <Edit className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                          {!isMobile && "Edit"}
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>Quick edit first pending item</p>
                      </TooltipContent>
                    </Tooltip>
                  )}
                </>
              )}
              
              <Button
                onClick={handleApprove}
                disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                size={isMobile ? "default" : "default"}
              >
                <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                Approve
              </Button>
              <Button
                variant="destructive"
                onClick={handleReject}
                disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                size={isMobile ? "default" : "default"}
              >
                <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                Reject
              </Button>
            </div>
          </div>
        </>
      )}

      {/* Reset button for rejected items */}
      {item.status === 'rejected' && item.type === 'content_submission' && (
        <div className="space-y-3 pt-4 border-t bg-red-50 dark:bg-red-950/20 -mx-4 px-4 py-3 rounded-b-lg">
          <div className="flex items-start gap-2 text-sm text-red-800 dark:text-red-300">
            <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
            <div>
              <p className="font-medium">This submission was rejected</p>
              <p className="text-xs mt-1">You can reset it to pending to re-review and approve it.</p>
            </div>
          </div>
          <Button
            onClick={handleResetToPending}
            disabled={actionLoading === item.id}
            variant="outline"
            className="w-full"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Reset to Pending
          </Button>
        </div>
      )}

      {/* Retry/Reset buttons for partially approved items */}
      {item.status === 'partially_approved' && item.type === 'content_submission' && (
        <div className="space-y-3 pt-4 border-t bg-yellow-50 dark:bg-yellow-950/20 -mx-4 px-4 py-3 rounded-b-lg">
          <div className="flex items-start gap-2 text-sm text-yellow-800 dark:text-yellow-300">
            <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
            <div>
              <p className="font-medium">This submission was partially approved</p>
              <p className="text-xs mt-1">Some items failed. You can retry them or reset everything to pending.</p>
            </div>
          </div>
          <div className="flex gap-2">
            <Button
              onClick={handleOpenReviewManager}
              disabled={actionLoading === item.id}
              variant="outline"
              className="flex-1"
            >
              <ListTree className="w-4 h-4 mr-2" />
              Review Items
            </Button>
            <Button
              onClick={handleResetToPending}
              disabled={actionLoading === item.id}
              variant="outline"
              className="flex-1"
            >
              <RefreshCw className="w-4 h-4 mr-2" />
              Reset All
            </Button>
            <Button
              onClick={handleRetryFailed}
              disabled={actionLoading === item.id}
              className="flex-1 bg-yellow-600 hover:bg-yellow-700"
            >
              <RefreshCw className="w-4 h-4 mr-2" />
              Retry Failed
            </Button>
          </div>
        </div>
      )}
      
      {/* Reviewer Information for approved/rejected items */}
      {(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes || item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
        <div className="space-y-3 pt-4 border-t">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Calendar className="w-4 h-4" />
            <span>Reviewed {item.reviewed_at ? format(new Date(item.reviewed_at), 'MMM d, yyyy HH:mm') : 'recently'}</span>
            {item.reviewer_profile && (
              <>
                <span>by</span>
                <div className="flex items-center gap-2">
                  <UserAvatar
                    key={item.reviewer_profile.avatar_url || `reviewer-${item.reviewed_by}`}
                    avatarUrl={item.reviewer_profile.avatar_url}
                    fallbackText={item.reviewer_profile.display_name || item.reviewer_profile.username || 'R'}
                    size="sm"
                    className="h-6 w-6"
                  />
                  <span className="font-medium">
                    {item.reviewer_profile.display_name || item.reviewer_profile.username}
                  </span>
                </div>
              </>
            )}
          </div>
          
          {/* Submitter Context (shown in collapsed state after review) */}
          {(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
            <Collapsible>
              <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:underline">
                <ChevronDown className="w-4 h-4" />
                View Submitter Context
              </CollapsibleTrigger>
              <CollapsibleContent className="mt-2 bg-muted/30 p-3 rounded-lg">
                {item.submission_items?.[0]?.item_data?.source_url && (
                  <div className="text-sm mb-2">
                    <span className="font-medium">Source: </span>
                    <a 
                      href={sanitizeURL(item.submission_items[0].item_data.source_url)} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-blue-600 hover:underline inline-flex items-center gap-1"
                    >
                      {sanitizePlainText(item.submission_items[0].item_data.source_url)}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </div>
                )}
                {item.submission_items?.[0]?.item_data?.submission_notes && (
                  <div className="text-sm">
                    <span className="font-medium">Submitter Notes: </span>
                    <p className="mt-1 whitespace-pre-wrap text-muted-foreground">
                      {sanitizePlainText(item.submission_items[0].item_data.submission_notes)}
                    </p>
                  </div>
                )}
              </CollapsibleContent>
            </Collapsible>
          )}
          
          {item.reviewer_notes && (
            <div className="bg-muted/30 p-3 rounded-lg">
              <p className="text-sm font-medium mb-1">Moderator Notes:</p>
              <p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
            </div>
          )}
          
          {/* Reverse Decision Buttons */}
          <div className="space-y-2">
            <Label className="text-sm">Reverse Decision</Label>
            <Textarea
              placeholder="Add notes about reversing this decision..."
              value={notes[`reverse-${item.id}`] || ''}
              onChange={handleReverseNoteChange}
              onFocus={handleFocus}
              onBlur={handleBlur}
              rows={2}
            />
            <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
              {item.status === 'approved' && (
                <Button
                  variant="destructive"
                  onClick={handleReverseReject}
                  disabled={actionLoading === item.id}
                  className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                  size={isMobile ? "default" : "default"}
                >
                  <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                  Change to Rejected
                </Button>
              )}
              {item.status === 'rejected' && (
                <Button
                  onClick={handleReverseApprove}
                  disabled={actionLoading === item.id}
                  className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                  size={isMobile ? "default" : "default"}
                >
                  <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                  Change to Approved
                </Button>
              )}
            </div>
          </div>
        </div>
      )}
      
      {/* Delete button for rejected submissions (admin/superadmin only) */}
      {item.status === 'rejected' && item.type === 'content_submission' && (isAdmin || isSuperuser) && (
        <div className="pt-2">
          <Button
            variant="destructive"
            onClick={handleDeleteSubmission}
            disabled={actionLoading === item.id}
            className={`w-full ${isMobile ? 'h-11' : ''}`}
            size={isMobile ? "default" : "default"}
          >
            <Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
            Delete Submission
          </Button>
        </div>
      )}
    </>
  );
});

QueueItemActions.displayName = 'QueueItemActions';