import React from 'react';
import { Card, CardContent, Typography, Button, Box, Grid } from '@mui/material';

import axios from 'axios';
import { axiosInstance } from '../../../../../axiosApi';
import { BidAPI } from 'types';

interface BidCardProps {
  bid: BidAPI;
  onDelete: (bidId: number) => void;
  isOwner: boolean;
}

export const BidCard: React.FC<BidCardProps> = ({ bid, onDelete, isOwner }) => {
  const handleSelectResponse = async (responseId: number) => {
    try {
      await axiosInstance.post(`/bids/${bid.id}/select_response/`, { response_id: responseId });
      // You might want to refresh the parent component's state here
      window.location.reload();
    } catch (error) {
      console.error('Failed to select response', error);
    }
  };

  return (
    <Card variant="outlined" sx={{ mb: 2 }}>
      <CardContent>
        <Typography variant="h6">Bid for {bid.bid_type}</Typography>
        <Typography color="text.secondary">Location: {bid.location}</Typography>
        <Typography variant="body2" paragraph>
          {bid.description}
        </Typography>
        {bid.images.length > 0 && (
          <Box sx={{ display: 'flex', overflowX: 'auto', mb: 2 }}>
            {bid.images.map((image) => (
              <img
                key={image.id}
                src={image.image_url}
                alt="Bid"
                style={{ height: 100, marginRight: 8 }}
              />
            ))}
          </Box>
        )}
        {isOwner && (
          <Button variant="outlined" color="error" onClick={() => onDelete(bid.id)}>
            Delete Bid
          </Button>
        )}
        {/* Responses Section */}
        {bid.responses.length > 0 && (
          <Box sx={{ mt: 2 }}>
            <Typography variant="subtitle1">Responses:</Typography>
            {bid.responses.map((response) => (
              <Card key={response.id} variant="outlined" sx={{ mt: 1, p: 1 }}>
                <Typography variant="body2">
                  <strong>Vendor</strong>: {response.vendor.business_name}
                </Typography>
                <Typography variant="body2">
                  <strong>Price</strong>: ${response.price}
                </Typography>
                <Typography variant="body2">
                  <strong>Description</strong>: {response.description}
                </Typography>
                <Typography variant="body2">
                  <strong>Status</strong>: {response.status}
                </Typography>
                {isOwner && response.status !== 'selected' && (
                  <Button
                    variant="contained"
                    size="small"
                    onClick={() => handleSelectResponse(response.id)}
                  >
                    Select Response
                  </Button>
                )}
                {isOwner && response.status === 'selected' && (
                  <Button variant="contained" size="small" disabled>
                    Selected
                  </Button>
                )}
              </Card>
            ))}
          </Box>
        )}
      </CardContent>
    </Card>
  );
};
