import { useEffect, useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { ScrollArea } from '@/components/ui/scroll-area';
import { AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import type { EntityType } from '@/types/versioning';

interface FieldHistoryDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  entityType: EntityType;
  entityId: string;
  fieldName: string;
}

/**
 * Field-level history has been removed in the relational versioning system.
 * Use version comparison instead to see field changes between versions.
 * This component now shows a helpful message directing users to use version comparison.
 */
export function FieldHistoryDialog({
  open,
  onOpenChange,
  entityType,
  entityId,
  fieldName,
}: FieldHistoryDialogProps) {
  const formatFieldName = (name: string): string => {
    return name
      .split('_')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Field History: {formatFieldName(fieldName)}</DialogTitle>
        </DialogHeader>

        <div className="py-6">
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>
              <p className="font-medium mb-2">Field-level history is not available in the current versioning system.</p>
              <p className="text-sm text-muted-foreground">
                To see changes to the "{formatFieldName(fieldName)}" field, please use the <strong>Version Comparison</strong> feature 
                in the Version History tab. This will show you all field changes between any two versions.
              </p>
            </AlertDescription>
          </Alert>
        </div>
      </DialogContent>
    </Dialog>
  );
}