import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { fetchEditHistory } from '@/lib/submissionItemsService';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { EditHistoryEntry } from './EditHistoryEntry';
import { History, Loader2, AlertCircle } from 'lucide-react';

interface EditHistoryRecord {
  id: string;
  item_id: string;
  edited_at: string;
  edit_reason: string | null;
  changed_fields: string[];
  field_changes?: Array<{
    id: string;
    field_name: string;
    old_value: string | null;
    new_value: string | null;
  }>;
  editor?: {
    username: string;
    avatar_url?: string | null;
  } | null;
}

interface EditHistoryAccordionProps {
  submissionId: string;
}

const INITIAL_LOAD = 20;
const LOAD_MORE_INCREMENT = 10;

export function EditHistoryAccordion({ submissionId }: EditHistoryAccordionProps) {
  const [limit, setLimit] = useState(INITIAL_LOAD);

  const { data: editHistory, isLoading, error } = useQuery({
    queryKey: ['edit-history', submissionId, limit],
    queryFn: async () => {
      const { supabase } = await import('@/integrations/supabase/client');
      
      // Fetch edit history with user profiles
      const { data, error } = await supabase
        .from('item_edit_history')
        .select(`
          id,
          item_id,
          edited_at,
          edit_reason,
          changed_fields,
          field_changes:item_field_changes(
            id,
            field_name,
            old_value,
            new_value
          ),
          editor:profiles!item_edit_history_edited_by_fkey(
            username,
            avatar_url
          )
        `)
        .eq('item_id', submissionId)
        .order('edited_at', { ascending: false })
        .limit(limit);

      if (error) throw error;
      return (data || []) as unknown as EditHistoryRecord[];
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

  const loadMore = () => {
    setLimit(prev => prev + LOAD_MORE_INCREMENT);
  };

  const hasMore = editHistory && editHistory.length === limit;

  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="edit-history">
        <AccordionTrigger className="hover:no-underline">
          <div className="flex items-center gap-2">
            <History className="h-4 w-4" />
            <span>Edit History</span>
            {editHistory && editHistory.length > 0 && (
              <span className="text-xs text-muted-foreground">
                ({editHistory.length} edit{editHistory.length !== 1 ? 's' : ''})
              </span>
            )}
          </div>
        </AccordionTrigger>
        <AccordionContent>
          {isLoading && (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          )}

          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>
                Failed to load edit history: {error instanceof Error ? error.message : 'Unknown error'}
              </AlertDescription>
            </Alert>
          )}

          {!isLoading && !error && editHistory && editHistory.length === 0 && (
            <Alert>
              <AlertDescription>
                No edit history found for this submission.
              </AlertDescription>
            </Alert>
          )}

          {!isLoading && !error && editHistory && editHistory.length > 0 && (
            <div className="space-y-4">
              <ScrollArea className="h-[400px] pr-4">
                <div className="space-y-3">
                  {editHistory.map((entry: EditHistoryRecord) => {
                    // Transform relational field_changes into beforeData/afterData objects
                    const beforeData: Record<string, unknown> = {};
                    const afterData: Record<string, unknown> = {};
                    
                    entry.field_changes?.forEach(change => {
                      beforeData[change.field_name] = change.old_value;
                      afterData[change.field_name] = change.new_value;
                    });

                    return (
                      <EditHistoryEntry
                        key={entry.id}
                        editId={entry.id}
                        editorName={entry.editor?.username || 'Unknown User'}
                        editorAvatar={entry.editor?.avatar_url || undefined}
                        timestamp={entry.edited_at}
                        changedFields={entry.changed_fields || []}
                        editReason={entry.edit_reason || undefined}
                        beforeData={beforeData}
                        afterData={afterData}
                      />
                    );
                  })}
                </div>
              </ScrollArea>

              {hasMore && (
                <div className="flex justify-center pt-2">
                  <Button 
                    variant="outline" 
                    size="sm"
                    onClick={loadMore}
                  >
                    Load More
                  </Button>
                </div>
              )}
            </div>
          )}
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}