import React, { useState } from 'react';
import {
  Card,
  CardContent,
  Typography,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  TextField,
  Box,
} from '@mui/material';
import { axiosInstance } from '../../../../../axiosApi';

import axios from 'axios';
import { BidAPI } from 'types';

interface VendorBidCardProps {
  bid: BidAPI;
  onResponseSubmitted: () => void;
}

export const VendorBidCard: React.FC<VendorBidCardProps> = ({ bid, onResponseSubmitted }) => {
  const [openResponseDialog, setOpenResponseDialog] = useState(false);
  const [responseDescription, setResponseDescription] = useState('');
  const [responsePrice, setResponsePrice] = useState('');

  const myResponse = bid.responses.find((res) => res.vendor.user.id === 'current_user_id'); // Replace with actual user ID logic

  const handleSubmitResponse = async () => {
    try {
      await axiosInstance.post('/bid-responses/', {
        bid: bid.id,
        description: responseDescription,
        price: responsePrice,
      });
      onResponseSubmitted();
      setOpenResponseDialog(false);
    } catch (error) {
      console.error('Failed to submit response', error);
    }
  };

  return (
    <Card variant="outlined">
      <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}
                alt="Bid"
                style={{ height: 100, marginRight: 8 }}
              />
            ))}
          </Box>
        )}

        {myResponse ? (
          <Box sx={{ mt: 2 }}>
            <Typography variant="subtitle1">Your Response:</Typography>
            <Typography variant="body2">
              <strong>Price</strong>: ${myResponse.price}
            </Typography>
            <Typography variant="body2">
              <strong>Description</strong>: {myResponse.description}
            </Typography>
            <Typography variant="body2">
              <strong>Status</strong>: {myResponse.status}
            </Typography>
          </Box>
        ) : (
          <Button variant="contained" onClick={() => setOpenResponseDialog(true)}>
            Submit Response
          </Button>
        )}
      </CardContent>

      <Dialog open={openResponseDialog} onClose={() => setOpenResponseDialog(false)}>
        <DialogTitle>Submit Response</DialogTitle>
        <DialogContent>
          <TextField
            label="Price"
            type="number"
            value={responsePrice}
            onChange={(e) => setResponsePrice(e.target.value)}
            fullWidth
            margin="normal"
          />
          <TextField
            label="Description"
            multiline
            rows={4}
            value={responseDescription}
            onChange={(e) => setResponseDescription(e.target.value)}
            fullWidth
            margin="normal"
          />
          <Button variant="contained" onClick={handleSubmitResponse}>
            Submit
          </Button>
        </DialogContent>
      </Dialog>
    </Card>
  );
};
