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 DraftPreviewProps {
  originalContent: string;
  draftContent: string;
  modelUsed: string;
  tokens: { prompt: number; completion: number };
}

export default function DraftPreview({
  originalContent,
  draftContent,
  modelUsed,
  tokens,
}: DraftPreviewProps) {
  const [view, setView] = useState<'side-by-side' | 'original' | 'draft'>('side-by-side');

  const sanitizedOriginal = sanitizeHtml(originalContent);
  const sanitizedDraft = sanitizeHtml(draftContent);

  return (
    <div>
      <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')}
          >
            Original
          </Button>
          <Button
            variant={view === 'draft' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('draft')}
          >
            Draft
          </Button>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Badge variant="secondary">{modelUsed}</Badge>
          <span>{tokens.prompt + tokens.completion} tokens</span>
        </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">
            <h3 className="text-sm font-medium text-muted-foreground mb-2">Original</h3>
            {sanitizedOriginal.trim() ? (
              <div
                className="prose prose-sm dark:prose-invert max-w-none opacity-70"
                dangerouslySetInnerHTML={{ __html: sanitizedOriginal }}
              />
            ) : (
              <p className="text-sm text-muted-foreground italic">No original content available</p>
            )}
          </div>
        )}
        {(view === 'side-by-side' || view === 'draft') && (
          <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
            <h3 className="text-sm font-medium mb-2">AI Draft</h3>
            {sanitizedDraft.trim() ? (
              <div
                className="prose prose-sm dark:prose-invert max-w-none"
                dangerouslySetInnerHTML={{ __html: sanitizedDraft }}
              />
            ) : (
              <p className="text-sm text-muted-foreground italic">Draft not yet generated</p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}