import { useState } from 'react';

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

interface ContentSnapshot {
  id: number;
  title: string;
  content: string;
  meta_description: string | null;
  wp_modified_at: string;
  created_at: string;
}

interface SnapshotDiffProps {
  beforeSnapshot: ContentSnapshot;
  afterSnapshot: ContentSnapshot;
}

export default function SnapshotDiff({ beforeSnapshot, afterSnapshot }: SnapshotDiffProps) {
  const [view, setView] = useState<'side-by-side' | 'before' | 'after'>('side-by-side');

  const sanitizedBefore = sanitizeHtml(beforeSnapshot.content);
  const sanitizedAfter = sanitizeHtml(afterSnapshot.content);

  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 === 'before' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('before')}
          >
            Before
          </Button>
          <Button
            variant={view === 'after' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setView('after')}
          >
            After
          </Button>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Badge variant="secondary">{formatDateTime(beforeSnapshot.wp_modified_at)}</Badge>
          <span>→</span>
          <Badge variant="secondary">{formatDateTime(afterSnapshot.wp_modified_at)}</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 === 'before') && (
          <div className="rounded-lg border p-4">
            <h3 className="text-sm font-medium text-muted-foreground mb-2">Before</h3>

            {beforeSnapshot.title && (
              <div className="mb-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                  Title
                </p>
                <p className="text-sm font-semibold opacity-70">{beforeSnapshot.title}</p>
              </div>
            )}

            {beforeSnapshot.meta_description && (
              <div className="mb-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                  Meta Description
                </p>
                <p className="text-sm italic opacity-70">{beforeSnapshot.meta_description}</p>
              </div>
            )}

            <div>
              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                Content
              </p>
              {sanitizedBefore.trim() ? (
                <div
                  className="prose prose-sm dark:prose-invert max-w-none opacity-70"
                  dangerouslySetInnerHTML={{ __html: sanitizedBefore }}
                />
              ) : (
                <p className="text-sm text-muted-foreground italic">No content available</p>
              )}
            </div>
          </div>
        )}
        {(view === 'side-by-side' || view === 'after') && (
          <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
            <h3 className="text-sm font-medium mb-2">After</h3>

            {afterSnapshot.title && (
              <div className="mb-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                  Title
                </p>
                <p className="text-sm font-semibold">{afterSnapshot.title}</p>
              </div>
            )}

            {afterSnapshot.meta_description && (
              <div className="mb-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                  Meta Description
                </p>
                <p className="text-sm italic">{afterSnapshot.meta_description}</p>
              </div>
            )}

            <div>
              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
                Content
              </p>
              {sanitizedAfter.trim() ? (
                <div
                  className="prose prose-sm dark:prose-invert max-w-none"
                  dangerouslySetInnerHTML={{ __html: sanitizedAfter }}
                />
              ) : (
                <p className="text-sm text-muted-foreground italic">No content available</p>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}