import { Sparkles, Check, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { NoteEdit } from '../../../shared/api-types';

interface PendingEditBlockProps {
  edit: NoteEdit;
  onApprove: () => void;
  onReject: () => void;
  isPending?: boolean;
}

const EDIT_TYPE_LABEL: Record<NoteEdit['type'], string> = {
  append: 'Add at end',
  insert: 'Insert',
  replace: 'Replace',
};

export function PendingEditBlock({ edit, onApprove, onReject, isPending }: PendingEditBlockProps) {
  return (
    <div
      className={cn(
        'rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30 p-4',
        'flex flex-col gap-3',
      )}
    >
      {/* Header */}
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary" />
        <span className="font-medium uppercase tracking-wide">
          AI suggestion — {EDIT_TYPE_LABEL[edit.type]}
        </span>
      </div>

      {/* Reasoning */}
      {edit.reasoning && (
        <p className="text-xs text-muted-foreground italic">{edit.reasoning}</p>
      )}

      {/* Proposed content preview */}
      <pre className="whitespace-pre-wrap rounded-md bg-background/60 p-3 text-sm leading-relaxed text-foreground font-sans">
        {edit.proposedContent}
      </pre>

      {/* Anchor hint for insert/replace */}
      {edit.type === 'replace' && edit.anchorText && (
        <p className="text-xs text-muted-foreground">
          Replaces: <span className="font-mono">{edit.anchorText.slice(0, 80)}</span>
        </p>
      )}
      {edit.type === 'insert' && edit.anchorBefore && (
        <p className="text-xs text-muted-foreground">
          After: <span className="font-mono">{edit.anchorBefore.slice(0, 80)}</span>
        </p>
      )}

      {/* Actions */}
      <div className="flex items-center gap-2">
        <Button
          size="sm"
          variant="default"
          className="h-7 gap-1.5 text-xs"
          onClick={onApprove}
          disabled={isPending}
        >
          <Check className="h-3.5 w-3.5" />
          Approve
        </Button>
        <Button
          size="sm"
          variant="ghost"
          className="h-7 gap-1.5 text-xs text-muted-foreground hover:text-destructive"
          onClick={onReject}
          disabled={isPending}
        >
          <X className="h-3.5 w-3.5" />
          Reject
        </Button>
      </div>
    </div>
  );
}
