import { ActivityCard } from '@/components/ui/ActivityCard.tsx';
import Badge from '@/components/ui/Badge.tsx';
import Button from '@/components/ui/Button.tsx';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { CenteredContent } from '@/components/ui/CenteredContent.tsx';
import { EmptyState } from '@/components/ui/EmptyState.tsx';
import { Flex, Stack } from '@/components/ui/layout';
import { LoadingState } from '@/components/ui/LoadingState.tsx';
import { Target } from 'lucide-react';

type Activity = {
  id: string;
  description: string;
  timestamp: string;
  type: string;
};

type Props = {
  filteredActivities: Activity[];
  activityFilter: string;
  setActivityFilter: (f: string) => void;
  isLoading: boolean;
  t: (key: string) => string;
};

const RecentActivitySection = ({
  filteredActivities,
  activityFilter,
  setActivityFilter,
  isLoading,
  t,
}: Props) => {
  return (
    <Card>
      <CardHeader>
        <Flex align="center" justify="between">
          <CardTitle>{t('dashboard.recentActivity')}</CardTitle>
          <Badge variant="outline">{filteredActivities.length}</Badge>
        </Flex>
        <div className="flex flex-wrap gap-2 mt-4">
          <Button
            variant={activityFilter === 'all' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setActivityFilter('all')}
          >
            {t('dashboard.filterAll')}
          </Button>
          <Button
            variant={activityFilter === 'match' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setActivityFilter('match')}
          >
            {t('dashboard.filterMatches')}
          </Button>
          <Button
            variant={activityFilter === 'proposal' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setActivityFilter('proposal')}
          >
            {t('dashboard.filterProposals')}
          </Button>
          <Button
            variant={activityFilter === 'organization' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setActivityFilter('organization')}
          >
            {t('dashboard.filterOrganizations')}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <LoadingState size="md" />
        ) : filteredActivities.length > 0 ? (
          <Stack spacing="md">
            {filteredActivities.slice(0, 5).map((activity) => (
              <ActivityCard
                key={activity.id}
                description={activity.description}
                timestamp={activity.timestamp}
                type={activity.type}
              />
            ))}
            {filteredActivities.length > 5 && (
              <CenteredContent padding="sm">
                <Button variant="outline" size="sm">
                  {t('dashboard.viewAllActivity')}
                </Button>
              </CenteredContent>
            )}
          </Stack>
        ) : (
          <EmptyState
            type="no-data"
            icon={<Target className="h-12 w-12 opacity-50" />}
            title={
              activityFilter === 'all'
                ? t('dashboard.noRecentActivityTitle')
                : t('dashboard.noFilteredActivityTitle')
            }
            description={
              activityFilter === 'all'
                ? t('dashboard.noRecentActivityDesc')
                : t('dashboard.noFilteredActivityDesc')
            }
          />
        )}
      </CardContent>
    </Card>
  );
};

export default RecentActivitySection;