'use client';

import { 
  SharedBox, 
  SharedButton, 
  SharedStack, 
  SharedText, 
  SharedIcon,
  SharedCard,
  SharedContainer
} from '@/components/shared/UIComponents';
import { Heading } from '@/ui/Heading';
import { Link as UILink } from '@/ui/Link';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import {
  AlertCircle,
  AlertTriangle,
  ArrowLeft,
  Calendar,
  CheckCircle,
  ChevronDown,
  Clock,
  ExternalLink,
  Flag,
  Gavel,
  Grid3x3,
  MapPin,
  MessageCircle,
  Send,
  Shield,
  ShieldAlert,
  TrendingDown,
  User,
  Video,
  XCircle,
  type LucideIcon
} from 'lucide-react';
import { routes } from '@/lib/routing/RouteConfig';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import { ViewData } from '@/lib/contracts/view-data/ViewData';

interface ProtestDetailTemplateProps extends TemplateProps<ViewData> {
  protestDetail: any;
  leagueId: string;
  showDecisionPanel: boolean;
  setShowDecisionPanel: (show: boolean) => void;
  decision: 'uphold' | 'dismiss' | null;
  setDecision: (decision: 'uphold' | 'dismiss' | null) => void;
  penaltyType: string;
  setPenaltyType: (type: string) => void;
  penaltyValue: number;
  setPenaltyValue: (value: number) => void;
  stewardNotes: string;
  setStewardNotes: (notes: string) => void;
  submitting: boolean;
  newComment: string;
  setNewComment: (comment: string) => void;
  penaltyTypes: any[];
  selectedPenalty: any;
  onSubmitDecision: () => void;
  onRequestDefense: () => void;
  getStatusConfig: (status: string) => any;
}

export function ProtestDetailTemplate({
  protestDetail,
  leagueId,
  showDecisionPanel,
  setShowDecisionPanel,
  decision,
  setDecision,
  penaltyType,
  setPenaltyType,
  penaltyValue,
  setPenaltyValue,
  stewardNotes,
  setStewardNotes,
  submitting,
  newComment,
  setNewComment,
  penaltyTypes,
  selectedPenalty,
  onSubmitDecision,
  onRequestDefense,
  getStatusConfig,
}: ProtestDetailTemplateProps) {
  if (!protestDetail) return null;
  
  const protest = protestDetail.protest || protestDetail;
  const race = protestDetail.race;
  const protestingDriver = protestDetail.protestingDriver;
  const accusedDriver = protestDetail.accusedDriver;

  const statusConfig = getStatusConfig(protest.status);
  const StatusIcon = statusConfig.icon;
  const isPending = protest.status === 'pending';
  const submittedAt = protest.submittedAt || protestDetail.submittedAt;
  const daysSinceFiled = Math.floor((Date.now() - new Date(submittedAt).getTime()) / (1000 * 60 * 60 * 24));

  return (
    <SharedBox minHeight="100vh">
      <SharedContainer size="lg">
        <SharedBox paddingY={8}>
          {/* Compact Header */}
          <SharedBox mb={6}>
            <SharedStack direction="row" align="center" gap={3} mb={4}>
              <UILink href={routes.league.stewarding(leagueId)}>
                <SharedIcon icon={ArrowLeft} size={5} color="text-gray-400" />
              </UILink>
              <SharedStack direction="row" align="center" gap={3} flexGrow={1}>
                <Heading level={1}>Protest Review</Heading>
                <SharedBox display="flex" alignItems="center" gap={1.5} px={2.5} py={1} rounded="full" fontSize="0.75rem" weight="medium" border bg={statusConfig.bg} color={statusConfig.color} borderColor={statusConfig.borderColor}>
                  <SharedIcon icon={StatusIcon} size={3} />
                  <SharedText>{statusConfig.label}</SharedText>
                </SharedBox>
                {daysSinceFiled > 2 && isPending && (
                  <SharedBox display="flex" alignItems="center" gap={1} px={2} py={0.5} fontSize="0.75rem" weight="medium" bg="bg-red-500/20" color="text-red-400" rounded="full">
                    <SharedIcon icon={AlertTriangle} size={3} />
                    <SharedText>{daysSinceFiled}d old</SharedText>
                  </SharedBox>
                )}
              </SharedStack>
            </SharedStack>
          </SharedBox>

          {/* Main Layout: Feed + Sidebar */}
          <Grid cols={12} gap={6}>
            {/* Left Sidebar - Incident Info */}
            <GridItem colSpan={{ base: 12, lg: 3 }}>
              <SharedStack gap={4}>
                {/* Drivers Involved */}
                <SharedCard>
                  <SharedBox p={4}>
                    <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Parties Involved</Heading>
                    
                    <SharedStack gap={3}>
                      {/* Protesting Driver */}
                      <UILink href={routes.driver.detail(protestingDriver?.id || '')} block>
                        <SharedBox display="flex" alignItems="center" gap={3} p={3} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" hoverBorderColor="border-blue-500/50" hoverBg="bg-blue-500/5" transition cursor="pointer">
                          <SharedBox w={10} h={10} rounded="full" bg="bg-blue-500/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                            <SharedIcon icon={User} size={5} color="text-blue-400" />
                          </SharedBox>
                          <SharedBox flexGrow={1} minWidth="0">
                            <SharedText size="xs" color="text-blue-400" weight="medium" block>Protesting</SharedText>
                            <SharedText size="sm" weight="semibold" color="text-white" truncate block>{protestingDriver?.name || 'Unknown'}</SharedText>
                          </SharedBox>
                          <SharedIcon icon={ExternalLink} size={3} color="text-gray-500" />
                        </SharedBox>
                      </UILink>

                      {/* Accused Driver */}
                      <UILink href={routes.driver.detail(accusedDriver?.id || '')} block>
                        <SharedBox display="flex" alignItems="center" gap={3} p={3} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" hoverBorderColor="border-orange-500/50" hoverBg="bg-orange-500/5" transition cursor="pointer">
                          <SharedBox w={10} h={10} rounded="full" bg="bg-orange-500/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                            <SharedIcon icon={User} size={5} color="text-orange-400" />
                          </SharedBox>
                          <SharedBox flexGrow={1} minWidth="0">
                            <SharedText size="xs" color="text-orange-400" weight="medium" block>Accused</SharedText>
                            <SharedText size="sm" weight="semibold" color="text-white" truncate block>{accusedDriver?.name || 'Unknown'}</SharedText>
                          </SharedBox>
                          <SharedIcon icon={ExternalLink} size={3} color="text-gray-500" />
                        </SharedBox>
                      </UILink>
                    </SharedStack>
                  </SharedBox>
                </SharedCard>

                {/* Race Info */}
                <SharedCard>
                  <SharedBox p={4}>
                    <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Race Details</Heading>
                    
                    <SharedBox marginBottom={3}>
                      <UILink
                        href={routes.race.detail(race?.id || '')}
                        block
                      >
                        <SharedBox p={3} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" hoverBorderColor="border-primary-blue/50" hoverBg="bg-primary-blue/5" transition>
                          <SharedBox display="flex" alignItems="center" justifyContent="between">
                            <SharedText size="sm" weight="medium" color="text-white">{race?.name || 'Unknown Race'}</SharedText>
                            <SharedIcon icon={ExternalLink} size={3} color="text-gray-500" />
                          </SharedBox>
                        </SharedBox>
                      </UILink>
                    </SharedBox>

                    <SharedStack gap={2}>
                      <SharedBox display="flex" alignItems="center" gap={2}>
                        <SharedIcon icon={MapPin} size={4} color="text-gray-500" />
                        <SharedText size="sm" color="text-gray-300">{race?.name || 'Unknown Track'}</SharedText>
                      </SharedBox>
                      <SharedBox display="flex" alignItems="center" gap={2}>
                        <SharedIcon icon={Calendar} size={4} color="text-gray-500" />
                        <SharedText size="sm" color="text-gray-300">{race?.formattedDate || (race?.scheduledAt ? new Date(race.scheduledAt).toLocaleDateString() : 'Unknown Date')}</SharedText>
                      </SharedBox>
                      {protest.incident?.lap && (
                        <SharedBox display="flex" alignItems="center" gap={2}>
                          <SharedIcon icon={Flag} size={4} color="text-gray-500" />
                          <SharedText size="sm" color="text-gray-300">Lap {protest.incident.lap}</SharedText>
                        </SharedBox>
                      )}
                    </SharedStack>
                  </SharedBox>
                </SharedCard>

                {protest.proofVideoUrl && (
                  <SharedCard>
                    <SharedBox p={4}>
                      <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Evidence</Heading>
                      <UILink
                        href={protest.proofVideoUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        block
                      >
                        <SharedBox display="flex" alignItems="center" gap={2} p={3} rounded="lg" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" color="text-primary-blue" hoverBg="bg-primary-blue/20" transition>
                          <SharedIcon icon={Video} size={4} />
                          <SharedText size="sm" weight="medium" flexGrow={1}>Watch Video</SharedText>
                          <SharedIcon icon={ExternalLink} size={3} />
                        </SharedBox>
                      </UILink>
                    </SharedBox>
                  </SharedCard>
                )}

                {/* Quick Stats */}
                <SharedCard>
                  <SharedBox p={4}>
                    <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Timeline</Heading>
                    <SharedStack gap={2}>
                      <SharedBox display="flex" justifyContent="between">
                        <SharedText size="sm" color="text-gray-500">Filed</SharedText>
                        <SharedText size="sm" color="text-gray-300">{new Date(submittedAt).toLocaleDateString()}</SharedText>
                      </SharedBox>
                      <SharedBox display="flex" justifyContent="between">
                        <SharedText size="sm" color="text-gray-500">Age</SharedText>
                        <SharedText size="sm" color={daysSinceFiled > 2 ? 'text-red-400' : 'text-gray-300'}>{daysSinceFiled} days</SharedText>
                      </SharedBox>
                      {protest.reviewedAt && (
                        <SharedBox display="flex" justifyContent="between">
                          <SharedText size="sm" color="text-gray-500">Resolved</SharedText>
                          <SharedText size="sm" color="text-gray-300">{new Date(protest.reviewedAt).toLocaleDateString()}</SharedText>
                        </SharedBox>
                      )}
                    </SharedStack>
                  </SharedBox>
                </SharedCard>
              </SharedStack>
            </GridItem>

            {/* Center - Discussion Feed */}
            <GridItem colSpan={12} lgSpan={6}>
              <SharedStack gap={4}>
                {/* Timeline / Feed */}
                <SharedCard>
                  <SharedBox borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/30" p={4}>
                    <Heading level={2}>Discussion</Heading>
                  </SharedBox>

                  <SharedStack gap={0}>
                    {/* Initial Protest Filing */}
                    <SharedBox p={4}>
                      <SharedBox display="flex" gap={3}>
                        <SharedBox w={10} h={10} rounded="full" bg="bg-blue-500/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                          <SharedIcon icon={AlertCircle} size={5} color="text-blue-400" />
                        </SharedBox>
                        <SharedBox flexGrow={1} minWidth="0">
                          <SharedBox display="flex" alignItems="center" gap={2} mb={1}>
                            <SharedText weight="semibold" color="text-white" size="sm">{protestingDriver?.name || 'Unknown'}</SharedText>
                            <SharedText size="xs" color="text-blue-400" weight="medium">filed protest</SharedText>
                            <SharedText size="xs" color="text-gray-500">•</SharedText>
                            <SharedText size="xs" color="text-gray-500">{new Date(submittedAt).toLocaleString()}</SharedText>
                          </SharedBox>
                          
                          <SharedBox bg="bg-deep-graphite" rounded="lg" p={4} border borderColor="border-charcoal-outline">
                            <SharedText size="sm" color="text-gray-300" block mb={3}>{protest.description || protestDetail.incident?.description}</SharedText>

                            {(protest.comment || protestDetail.comment) && (
                              <SharedBox mt={3} pt={3} borderTop borderColor="border-charcoal-outline/50">
                                <SharedText size="xs" color="text-gray-500" block mb={1}>Additional details:</SharedText>
                                <SharedText size="sm" color="text-gray-400">{protest.comment || protestDetail.comment}</SharedText>
                              </SharedBox>
                            )}
                          </SharedBox>
                        </SharedBox>
                      </SharedBox>
                    </SharedBox>

                    {/* Defense placeholder */}
                    {protest.status === 'awaiting_defense' && (
                      <SharedBox p={4} bg="bg-purple-500/5">
                        <SharedBox display="flex" gap={3}>
                          <SharedBox w={10} h={10} rounded="full" bg="bg-purple-500/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                            <SharedIcon icon={MessageCircle} size={5} color="text-purple-400" />
                          </SharedBox>
                          <SharedBox flexGrow={1}>
                            <SharedText size="sm" color="text-purple-400" weight="medium" block mb={1}>Defense Requested</SharedText>
                            <SharedText size="sm" color="text-gray-400">Waiting for {accusedDriver?.name || 'the accused driver'} to submit their defense...</SharedText>
                          </SharedBox>
                        </SharedBox>
                      </SharedBox>
                    )}

                    {/* Decision (if resolved) */}
                    {(protest.status === 'upheld' || protest.status === 'dismissed') && protest.decisionNotes && (
                      <SharedBox p={4} bg={protest.status === 'upheld' ? 'bg-red-500/5' : 'bg-gray-500/5'}>
                        <SharedBox display="flex" gap={3}>
                          <SharedBox w={10} h={10} rounded="full" display="flex" alignItems="center" justifyContent="center" flexShrink={0} bg={protest.status === 'upheld' ? 'bg-red-500/20' : 'bg-gray-500/20'}>
                            <SharedIcon icon={Gavel} size={5} color={protest.status === 'upheld' ? 'text-red-400' : 'text-gray-400'} />
                          </SharedBox>
                          <SharedBox flexGrow={1} minWidth="0">
                            <SharedBox display="flex" alignItems="center" gap={2} mb={1}>
                              <SharedText weight="semibold" color="text-white" size="sm">Steward Decision</SharedText>
                              <SharedText size="xs" weight="medium" color={protest.status === 'upheld' ? 'text-red-400' : 'text-gray-400'}>
                                {protest.status === 'upheld' ? 'Protest Upheld' : 'Protest Dismissed'}
                              </SharedText>
                              {protest.reviewedAt && (
                                <>
                                  <SharedText size="xs" color="text-gray-500">•</SharedText>
                                  <SharedText size="xs" color="text-gray-500">{new Date(protest.reviewedAt).toLocaleString()}</SharedText>
                                </>
                              )}
                            </SharedBox>
                            
                            <SharedBox rounded="lg" p={4} border bg={protest.status === 'upheld' ? 'bg-red-500/10' : 'bg-gray-500/10'} borderColor={protest.status === 'upheld' ? 'border-red-500/20' : 'border-gray-500/20'}>
                              <SharedText size="sm" color="text-gray-300">{protest.decisionNotes}</SharedText>
                            </SharedBox>
                          </SharedBox>
                        </SharedBox>
                      </SharedBox>
                    )}
                  </SharedStack>

                  {/* Add Comment */}
                  {isPending && (
                    <SharedBox p={4} borderTop borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
                      <SharedBox display="flex" gap={3}>
                        <SharedBox w={10} h={10} rounded="full" bg="bg-iron-gray" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                          <SharedIcon icon={User} size={5} color="text-gray-500" />
                        </SharedBox>
                        <SharedBox flexGrow={1}>
                            <SharedBox as="textarea"
                              value={newComment}
                              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewComment(e.target.value)}
                              placeholder="Add a comment or request more information..."
                              style={{ height: '4rem' }}
                              w="full"
                              px={4}
                              py={3}
                              bg="bg-deep-graphite"
                              border
                              borderColor="border-charcoal-outline"
                              rounded="lg"
                              color="text-white"
                              fontSize="sm"
                            />
                          <SharedBox display="flex" justifyContent="end" mt={2}>
                            <SharedButton variant="secondary" disabled={!newComment.trim()}>
                              <SharedIcon icon={Send} size={3} style={{ marginRight: '0.25rem' }} />
                              Comment
                            </SharedButton>
                          </SharedBox>
                        </SharedBox>
                      </SharedBox>
                    </SharedBox>
                  )}
                </SharedCard>
              </SharedStack>
            </GridItem>

            {/* Right Sidebar - Actions */}
            <GridItem colSpan={12} lgSpan={3}>
              <SharedStack gap={4}>
                {isPending && (
                  <>
                    {/* Quick Actions */}
                    <SharedCard>
                      <SharedBox p={4}>
                        <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Actions</Heading>
                        
                        <SharedStack gap={2}>
                          <SharedButton
                            variant="secondary"
                            fullWidth
                            onClick={onRequestDefense}
                          >
                            <SharedStack direction="row" align="center" gap={2}>
                              <SharedIcon icon={MessageCircle} size={4} />
                              <SharedText>Request Defense</SharedText>
                            </SharedStack>
                          </SharedButton>
                          
                          <SharedButton
                            variant="primary"
                            fullWidth
                            onClick={() => setShowDecisionPanel(!showDecisionPanel)}
                          >
                            <SharedStack direction="row" align="center" gap={2} fullWidth>
                              <SharedIcon icon={Gavel} size={4} />
                              <SharedText>Make Decision</SharedText>
                              <SharedBox ml="auto" transition style={{ transform: showDecisionPanel ? 'rotate(180deg)' : 'none' }}>
                                <SharedIcon icon={ChevronDown} size={4} />
                              </SharedBox>
                            </SharedStack>
                          </SharedButton>
                        </SharedStack>
                      </SharedBox>
                    </SharedCard>

                    {/* Decision Panel */}
                    {showDecisionPanel && (
                      <SharedCard>
                        <SharedBox p={4}>
                          <Heading level={3} fontSize="xs" weight="semibold" color="text-gray-500" mb={3}>Stewarding Decision</Heading>
                          
                          {/* Decision Selection */}
                          <Grid cols={2} gap={2} mb={4}>
                            <SharedBox padding={3} border borderColor={decision === 'uphold' ? 'border-racing-red' : 'border-charcoal-outline'} bg={decision === 'uphold' ? 'bg-racing-red/10' : 'transparent'} rounded="lg">
                              <SharedButton
                                variant="ghost"
                                onClick={() => setDecision('uphold')}
                                fullWidth
                              >
                                <SharedStack align="center" gap={1}>
                                  <SharedIcon icon={CheckCircle} size={5} color={decision === 'uphold' ? 'text-red-400' : 'text-gray-500'} />
                                  <SharedText size="xs" weight="medium" color={decision === 'uphold' ? 'text-red-400' : 'text-gray-400'}>Uphold</SharedText>
                                </SharedStack>
                              </SharedButton>
                            </SharedBox>
                            <SharedBox padding={3} border borderColor={decision === 'dismiss' ? 'border-gray-500' : 'border-charcoal-outline'} bg={decision === 'dismiss' ? 'bg-gray-500/10' : 'transparent'} rounded="lg">
                              <SharedButton
                                variant="ghost"
                                onClick={() => setDecision('dismiss')}
                                fullWidth
                              >
                                <SharedStack align="center" gap={1}>
                                  <SharedIcon icon={XCircle} size={5} color={decision === 'dismiss' ? 'text-gray-300' : 'text-gray-500'} />
                                  <SharedText size="xs" weight="medium" color={decision === 'dismiss' ? 'text-gray-300' : 'text-gray-400'}>Dismiss</SharedText>
                                </SharedStack>
                              </SharedButton>
                            </SharedBox>
                          </Grid>

                          {/* Penalty Selection (if upholding) */}
                          {decision === 'uphold' && (
                            <SharedBox mb={4}>
                              <SharedText as="label" size="xs" weight="medium" color="text-gray-400" block mb={2}>Penalty Type</SharedText>

                              {penaltyTypes.length === 0 ? (
                                <SharedText size="xs" color="text-gray-500">
                                  Loading penalty types...
                                </SharedText>
                              ) : (
                                <>
                                  <Grid cols={2} gap={2}>
                                    {penaltyTypes.map((penalty: any) => {
                                      const Icon = penalty.icon;
                                      const isSelected = penaltyType === penalty.type;
                                      return (
                                        <SharedBox key={penalty.type} padding={2} border borderColor={isSelected ? undefined : 'border-charcoal-outline'} bg={isSelected ? undefined : 'bg-iron-gray/30'} rounded="lg">
                                          <SharedButton
                                            variant="ghost"
                                            onClick={() => {
                                              setPenaltyType(penalty.type);
                                              setPenaltyValue(penalty.defaultValue);
                                            }}
                                            fullWidth
                                            title={penalty.description}
                                          >
                                            <SharedStack align="start" gap={0.5}>
                                              <SharedIcon icon={Icon} size={3.5} color={isSelected ? penalty.color : 'text-gray-500'} />
                                              <SharedText size="xs" weight="medium" fontSize="10px" color={isSelected ? penalty.color : 'text-gray-500'}>
                                                {penalty.label}
                                              </SharedText>
                                            </SharedStack>
                                          </SharedButton>
                                        </SharedBox>
                                      );
                                    })}
                                  </Grid>

                                  {selectedPenalty?.requiresValue && (
                                    <SharedBox mt={3}>
                                      <SharedText as="label" size="xs" weight="medium" color="text-gray-400" block mb={1}>
                                        Value ({selectedPenalty.valueLabel})
                                      </SharedText>
                                      <SharedBox as="input"
                                        type="number"
                                        value={penaltyValue}
                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPenaltyValue(Number(e.target.value))}
                                        min="1"
                                        w="full"
                                        px={3}
                                        py={2}
                                        bg="bg-deep-graphite"
                                        border
                                        borderColor="border-charcoal-outline"
                                        rounded="lg"
                                        color="text-white"
                                        fontSize="sm"
                                      />
                                    </SharedBox>
                                  )}
                                </>
                              )}
                            </SharedBox>
                          )}

                          {/* Steward Notes */}
                          <SharedBox mb={4}>
                            <SharedText as="label" size="xs" weight="medium" color="text-gray-400" block mb={1}>Decision Reasoning *</SharedText>
                            <SharedBox as="textarea"
                              value={stewardNotes}
                              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setStewardNotes(e.target.value)}
                              placeholder="Explain your decision..."
                              style={{ height: '8rem' }}
                              w="full"
                              px={3}
                              py={2}
                              bg="bg-deep-graphite"
                              border
                              borderColor="border-charcoal-outline"
                              rounded="lg"
                              color="text-white"
                              fontSize="sm"
                            />
                          </SharedBox>

                          {/* Submit */}
                          <SharedButton
                            variant="primary"
                            fullWidth
                            onClick={onSubmitDecision}
                            disabled={!decision || !stewardNotes.trim() || submitting}
                          >
                            {submitting ? 'Submitting...' : 'Submit Decision'}
                          </SharedButton>
                        </SharedBox>
                      </SharedCard>
                    )}
                  </>
                )}

                {/* Already Resolved Info */}
                {!isPending && (
                  <SharedCard>
                    <SharedBox p={4} textAlign="center">
                      <SharedBox py={4} color={protest.status === 'upheld' ? 'text-red-400' : 'text-gray-400'}>
                        <SharedIcon icon={Gavel} size={8} style={{ margin: '0 auto 0.5rem auto' }} />
                        <SharedText weight="semibold" block>Case Closed</SharedText>
                        <SharedText size="xs" color="text-gray-500" block mt={1}>
                          {protest.status === 'upheld' ? 'Protest was upheld' : 'Protest was dismissed'}
                        </SharedText>
                      </SharedBox>
                    </SharedBox>
                  </SharedCard>
                )}
              </SharedStack>
            </GridItem>
          </Grid>
        </SharedBox>
      </SharedContainer>
    </SharedBox>
  );
}
