import { useState } from 'react';
import { ChevronDown, ChevronRight, Flag, Clock, Edit2, Link2, TestTube } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { format } from 'date-fns';
import type { ModerationItem } from '@/types/moderation';
import { UserAvatar } from '@/components/ui/user-avatar';

interface SubmissionMetadataPanelProps {
  item: ModerationItem;
}

export function SubmissionMetadataPanel({ item }: SubmissionMetadataPanelProps) {
  const [isOpen, setIsOpen] = useState(false);

  // Extract metadata from content_submissions
  const metadata = {
    // Workflow
    approval_mode: (item as any).approval_mode || 'full',
    escalated: item.escalated || false,
    escalation_reason: (item as any).escalation_reason,
    escalated_by: (item as any).escalated_by,
    escalated_at: (item as any).escalated_at,
    
    // Review Tracking
    first_reviewed_at: (item as any).first_reviewed_at,
    review_count: (item as any).review_count || 0,
    resolved_at: (item as any).resolved_at,
    
    // Modification Tracking
    last_modified_at: (item as any).last_modified_at,
    last_modified_by: (item as any).last_modified_by,
    
    // Relationships
    original_submission_id: (item as any).original_submission_id,
    
    // Flags
    is_test_data: (item as any).is_test_data || false,
  };

  const hasMetadata = metadata.escalated || 
    metadata.review_count > 0 || 
    metadata.last_modified_at || 
    metadata.original_submission_id ||
    metadata.is_test_data;

  if (!hasMetadata) return null;

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
        <span>Submission Metadata</span>
        <Badge variant="outline" className="ml-auto">
          {metadata.review_count} review{metadata.review_count !== 1 ? 's' : ''}
        </Badge>
      </CollapsibleTrigger>
      
      <CollapsibleContent className="mt-3">
        <div className="bg-card rounded-lg border divide-y">
          {/* Workflow Section */}
          {(metadata.escalated || metadata.approval_mode !== 'full') && (
            <div className="p-4 space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                <Flag className="h-4 w-4" />
                Workflow
              </div>
              
              <div className="space-y-2 text-sm">
                <div className="flex justify-between items-start">
                  <span className="text-muted-foreground">Approval Mode:</span>
                  <Badge variant={metadata.approval_mode === 'full' ? 'default' : 'outline'}>
                    {metadata.approval_mode === 'full' ? 'Full Approval' : 'Partial Approval'}
                  </Badge>
                </div>
                
                {metadata.escalated && (
                  <>
                    <div className="flex justify-between items-start">
                      <span className="text-muted-foreground">Escalated:</span>
                      <Badge variant="destructive">Yes</Badge>
                    </div>
                    
                    {metadata.escalation_reason && (
                      <div className="flex flex-col gap-1">
                        <span className="text-muted-foreground">Reason:</span>
                        <p className="text-foreground bg-muted/50 p-2 rounded text-xs">
                          {metadata.escalation_reason}
                        </p>
                      </div>
                    )}
                    
                    {metadata.escalated_at && (
                      <div className="flex justify-between items-start">
                        <span className="text-muted-foreground">Escalated At:</span>
                        <span className="font-mono text-xs">
                          {format(new Date(metadata.escalated_at), 'MMM d, yyyy HH:mm:ss')}
                        </span>
                      </div>
                    )}
                  </>
                )}
              </div>
            </div>
          )}
          
          {/* Review Tracking Section */}
          {(metadata.first_reviewed_at || metadata.resolved_at || metadata.review_count > 0) && (
            <div className="p-4 space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                <Clock className="h-4 w-4" />
                Review Tracking
              </div>
              
              <div className="space-y-2 text-sm">
                <div className="flex justify-between items-start">
                  <span className="text-muted-foreground">Review Count:</span>
                  <Badge variant="outline">{metadata.review_count}</Badge>
                </div>
                
                {metadata.first_reviewed_at && (
                  <div className="flex justify-between items-start">
                    <span className="text-muted-foreground">First Reviewed:</span>
                    <span className="font-mono text-xs">
                      {format(new Date(metadata.first_reviewed_at), 'MMM d, yyyy HH:mm:ss')}
                    </span>
                  </div>
                )}
                
                {metadata.resolved_at && (
                  <div className="flex justify-between items-start">
                    <span className="text-muted-foreground">Resolved At:</span>
                    <span className="font-mono text-xs">
                      {format(new Date(metadata.resolved_at), 'MMM d, yyyy HH:mm:ss')}
                    </span>
                  </div>
                )}
              </div>
            </div>
          )}
          
          {/* Modification Tracking Section */}
          {(metadata.last_modified_at || metadata.last_modified_by) && (
            <div className="p-4 space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                <Edit2 className="h-4 w-4" />
                Modification Tracking
              </div>
              
              <div className="space-y-2 text-sm">
                {metadata.last_modified_at && (
                  <div className="flex justify-between items-start">
                    <span className="text-muted-foreground">Last Modified:</span>
                    <span className="font-mono text-xs">
                      {format(new Date(metadata.last_modified_at), 'MMM d, yyyy HH:mm:ss')}
                    </span>
                  </div>
                )}
                
                {metadata.last_modified_by && (
                  <div className="flex justify-between items-start">
                    <span className="text-muted-foreground">Modified By:</span>
                    <Badge variant="secondary">Moderator</Badge>
                  </div>
                )}
              </div>
            </div>
          )}
          
          {/* Relationships Section */}
          {metadata.original_submission_id && (
            <div className="p-4 space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                <Link2 className="h-4 w-4" />
                Relationships
              </div>
              
              <div className="space-y-2 text-sm">
                <div className="flex justify-between items-start">
                  <span className="text-muted-foreground">Resubmission of:</span>
                  <a 
                    href={`#${metadata.original_submission_id}`}
                    className="font-mono text-xs text-primary hover:underline"
                  >
                    {metadata.original_submission_id.slice(0, 8)}...
                  </a>
                </div>
              </div>
            </div>
          )}
          
          {/* Flags Section */}
          {metadata.is_test_data && (
            <div className="p-4 space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                <TestTube className="h-4 w-4" />
                Flags
              </div>
              
              <div className="space-y-2 text-sm">
                <div className="flex justify-between items-start">
                  <span className="text-muted-foreground">Test Data:</span>
                  <Badge variant="outline" className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
                    Yes
                  </Badge>
                </div>
              </div>
            </div>
          )}
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}