import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Organization, Proposal } from '@/types.ts';
import { CheckCircle, Clock, XCircle } from 'lucide-react';
import Badge from '@/components/ui/Badge.tsx';
import Button from '@/components/ui/Button.tsx';

interface ProposalCardProps {
  proposal: Proposal;
  partner: Organization;
  type: 'incoming' | 'outgoing';
  onStatusUpdate: (proposalId: string, status: Proposal['status']) => void;
}

const statusConfig = {
  pending: {
    labelKey: 'organizationPage.status.pending',
    icon: <Clock className="h-3 h-4 mr-1.5 text-current w-3 w-4" />,
    classes: 'border-warning/30 bg-warning/10 text-warning-foreground',
  },
  accepted: {
    labelKey: 'organizationPage.status.accepted',
    icon: <CheckCircle className="h-3 h-4 mr-1.5 text-current w-3 w-4" />,
    classes: 'border-success/30 bg-success/10 text-success',
  },
  rejected: {
    labelKey: 'organizationPage.status.rejected',
    icon: <XCircle className="h-3 h-4 mr-1.5 text-current w-3 w-4" />,
    classes: 'border-destructive/30 bg-destructive/10 text-destructive',
  },
};

const ProposalCard = ({ proposal, partner, type, onStatusUpdate }: ProposalCardProps) => {
  const { t } = useTranslation();
  const config = statusConfig[proposal.status];

  return (
    <div className="p-4 rounded-lg border bg-background">
      <div className="flex justify-between items-start">
        <div>
          <p className="text-xs text-muted-foreground">
            {t(
              type === 'incoming'
                ? 'organizationPage.partnershipHub.proposalFrom'
                : 'organizationPage.partnershipHub.proposalTo'
            )}
          </p>
          <p className="font-semibold">{partner.name}</p>
        </div>
        <Badge variant="outline" className={config.classes}>
          {config.icon}
          {t(config.labelKey)}
        </Badge>
      </div>

      <div className="mt-3 pt-3 border-t">
        <p className="text-xs text-muted-foreground">
          {t('organizationPage.partnershipHub.regarding')}
        </p>
        <p className="font-medium text-sm text-primary">{proposal.resourceName}</p>
        {proposal.message && (
          <blockquote className="mt-2 text-sm text-muted-foreground border-l-2 pl-3 italic">
            &ldquo;{proposal.message}&rdquo;
          </blockquote>
        )}
      </div>

      {type === 'incoming' && proposal.status === 'pending' && (
        <div className="flex gap-2 mt-4">
          <Button
            size="sm"
            className="flex-1 bg-success hover:bg-success/90"
            onClick={() => onStatusUpdate(proposal.id, 'accepted')}
          >
            <CheckCircle className="h-4 mr-2 text-current w-4" />
            {t('organizationPage.partnershipHub.accept')}
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="flex-1"
            onClick={() => onStatusUpdate(proposal.id, 'rejected')}
          >
            <XCircle className="h-4 mr-2 text-current w-4" />
            {t('organizationPage.partnershipHub.reject')}
          </Button>
        </div>
      )}
    </div>
  );
};

export default React.memo(ProposalCard);