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 } from '@/components/ui/layout';
import type { Proposal } from '@/types.ts';
import { Users } from 'lucide-react';

type Props = {
  pendingProposals: Proposal[];
  onNavigate: (path: string) => void;
  t: (key: string) => string;
};

const ActiveProposalsSection = ({ pendingProposals, onNavigate, t }: Props) => {
  return (
    <Card>
      <CardHeader>
        <Flex align="center" justify="between">
          <CardTitle>{t('dashboard.activeProposals')}</CardTitle>
          <Badge variant="outline">{pendingProposals.length}</Badge>
        </Flex>
      </CardHeader>
      <CardContent>
        {pendingProposals.length > 0 ? (
          <div className="space-y-3">
            {pendingProposals.slice(0, 5).map((proposal: Proposal) => (
              <div
                key={proposal.id}
                className="p-3 rounded-lg border bg-card/50 hover:bg-card transition-colors cursor-pointer"
                onClick={() => {
                  if (proposal.toOrgId) onNavigate(`/organization/${proposal.toOrgId}`);
                  else if (proposal.fromOrgId) onNavigate(`/organization/${proposal.fromOrgId}`);
                  else onNavigate('/matching');
                }}
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1 min-w-0">
                    <div className="font-medium line-clamp-2">{proposal.message}</div>
                    <div className="text-xs text-muted-foreground mt-1">
                      {t('dashboard.proposalStatus')}:{' '}
                      {t(`organizationPage.status.${proposal.status}`)}
                    </div>
                  </div>
                  <Badge
                    variant={
                      proposal.status === 'accepted'
                        ? 'default'
                        : proposal.status === 'rejected'
                          ? 'destructive'
                          : 'secondary'
                    }
                    className="shrink-0"
                  >
                    {t(`organizationPage.status.${proposal.status}`)}
                  </Badge>
                </div>
              </div>
            ))}
            {pendingProposals.length > 5 && (
              <CenteredContent padding="sm">
                <Button variant="outline" size="sm" onClick={() => onNavigate('/matching')}>
                  {t('dashboard.viewAllProposals')}
                </Button>
              </CenteredContent>
            )}
          </div>
        ) : (
          <EmptyState
            type="no-data"
            icon={<Users className="h-12 w-12 opacity-50" />}
            title={t('dashboard.noActiveProposalsTitle')}
            description={t('dashboard.noActiveProposalsDesc')}
            action={{ label: t('dashboard.exploreMap'), onClick: () => onNavigate('/map') }}
          />
        )}
      </CardContent>
    </Card>
  );
};

export default ActiveProposalsSection;