import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { useAuth } from '@/contexts/AuthContext';
import { useTranslation } from '@/hooks/useI18n';
import type { BackendResourceFlow } from '@/schemas/backend/resource-flow';
import { Search } from 'lucide-react';
import React from 'react';
import { formatQualityInfo, formatQuantity } from './utils';

interface ResourceFlowCardProps {
  resourceFlow: BackendResourceFlow;
  onViewMatches?: (resourceId: string) => void;
}

const ResourceFlowCard: React.FC<ResourceFlowCardProps> = ({ resourceFlow, onViewMatches }) => {
  const { t } = useTranslation();
  const { isAuthenticated } = useAuth();

  // use shared format helpers
  const formattedQuantity = formatQuantity(resourceFlow.Quantity);
  const formattedQuality = formatQualityInfo(resourceFlow.Quality);

  const getTypeLabel = () => {
    return t(`resourceTypes.${resourceFlow.Type}`) || resourceFlow.Type;
  };

  return (
    <Card className="shadow-none">
      <div className="p-4 space-y-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <Badge variant={resourceFlow.Direction === 'input' ? 'destructive' : 'default'}>
                {resourceFlow.Direction === 'input'
                  ? t('resourceFlows.input')
                  : t('resourceFlows.output')}
              </Badge>
              <Badge variant="outline">{getTypeLabel()}</Badge>
              {resourceFlow.PrecisionLevel && (
                <Badge variant="outline" className="text-xs">
                  {resourceFlow.PrecisionLevel}
                </Badge>
              )}
            </div>
            <h4 className="font-semibold text-base mb-1">{getTypeLabel()}</h4>
            <p className="text-sm text-muted-foreground mb-2">{formattedQuantity}</p>
            {formattedQuality && (
              <p className="text-xs text-muted-foreground">{formattedQuality}</p>
            )}
            {resourceFlow.EconomicData && (
              <div className="mt-2 text-xs text-muted-foreground">
                {resourceFlow.EconomicData.cost_out !== undefined && (
                  <span>Cost: €{resourceFlow.EconomicData.cost_out.toFixed(2)}</span>
                )}
              </div>
            )}
          </div>
        </div>
        {onViewMatches && resourceFlow.Direction === 'output' && isAuthenticated && (
          <div className="flex gap-2 pt-2 border-t">
            <Button
              variant="outline"
              size="sm"
              onClick={() => onViewMatches(resourceFlow.ID)}
              className="flex-1"
            >
              <Search className="h-4 w-4 mr-2" />
              {t('resourceFlows.findMatches')}
            </Button>
          </div>
        )}
      </div>
    </Card>
  );
};

export default React.memo(ResourceFlowCard);