import { useState } from 'react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { sanitizeHtml } from '@/lib/sanitize';
import { cn } from '@/lib/utils';

interface DiffPreviewProps {
  originalContent: string;
  newContent: string;
  className?: string;
}

export default function DiffPreview({ originalContent, newContent, className }: DiffPreviewProps) {
  const [view, setView] = useState<'side-by-side' | 'original' | 'new'>('side-by-side');

  const sanitizedOriginal = sanitizeHtml(originalContent);
  const sanitizedNew = sanitizeHtml(newContent);

  // Calculate simple character diff for badge display
  const originalLength = originalContent.replace(/<[^>]*>/g, '').length;
  const newLength = newContent.replace(/<[^>]*>/g, '').length;
  const diff = newLength - originalLength;
  const diffPercent = originalLength > 0 ? Math.round((diff / originalLength) * 100) : 0;

  return (
    <div className={className}>
      <div className="flex items-center justify-between mb-4">
        <div className="flex gap-2">
          <Button
            variant={view === 'side-by-side' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('side-by-side')}
            className="hidden md:inline-flex"
          >
            Side by Side
          </Button>
          <Button
            variant={view === 'original' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('original')}
          >
            Current
          </Button>
          <Button
            variant={view === 'new' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('new')}
          >
            New
          </Button>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          {diff !== 0 && (
            <Badge variant={diff > 0 ? 'default' : 'secondary'}>
              {diff > 0 ? '+' : ''}
              {diff} chars ({diffPercent > 0 ? '+' : ''}
              {diffPercent}%)
            </Badge>
          )}
        </div>
      </div>

      <div
        className={cn('gap-4', view === 'side-by-side' ? 'grid grid-cols-1 md:grid-cols-2' : '')}
      >
        {(view === 'side-by-side' || view === 'original') && (
          <div className="rounded-lg border p-4 bg-red-50/50 dark:bg-red-950/20 border-red-200 dark:border-red-800">
            <h3 className="text-sm font-medium text-red-800 dark:text-red-200 mb-2 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-red-500 dark:bg-red-400" />
              Current Content
            </h3>
            {sanitizedOriginal.trim() ? (
              <div
                className="prose prose-sm dark:prose-invert max-w-none"
                dangerouslySetInnerHTML={{ __html: sanitizedOriginal }}
              />
            ) : (
              <p className="text-sm text-muted-foreground italic">No current content</p>
            )}
          </div>
        )}
        {(view === 'side-by-side' || view === 'new') && (
          <div className="rounded-lg border p-4 bg-green-50/50 dark:bg-green-950/20 border-green-200 dark:border-green-800">
            <h3 className="text-sm font-medium text-green-800 dark:text-green-200 mb-2 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-green-500 dark:bg-green-400" />
              New Content
            </h3>
            {sanitizedNew.trim() ? (
              <div
                className="prose prose-sm dark:prose-invert max-w-none"
                dangerouslySetInnerHTML={{ __html: sanitizedNew }}
              />
            ) : (
              <p className="text-sm text-muted-foreground italic">No new content</p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}