import React, { useState, useEffect } from 'react';
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Row,
  Col,
  Input,
  Label
} from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp, faThumbsDown, faSpinner } from '@fortawesome/free-solid-svg-icons';

const JKSessionLeaveModal = ({ isOpen, toggle, onSubmit, loading = false }) => {
  const [rating, setRating] = useState(null); // null, 'thumbsUp', 'thumbsDown'
  const [comments, setComments] = useState('');

  // Reset form when modal opens
  useEffect(() => {
    if (isOpen) {
      setRating(null);
      setComments('');
    }
  }, [isOpen]);

  const handleRatingClick = (newRating) => {
    setRating(rating === newRating ? null : newRating);
  };

  const handleSubmit = () => {
    // Convert rating to backend format
    let ratingValue = 0; // No rating
    if (rating === 'thumbsUp') ratingValue = 1;
    else if (rating === 'thumbsDown') ratingValue = -1;

    onSubmit({
      rating: ratingValue,
      comments: comments.trim()
    });
  };

  const canSubmit = rating !== null || comments.trim().length > 0;

  return (
    <Modal isOpen={isOpen} toggle={toggle} modalClassName="theme-modal" contentClassName="border" size="md">
      <ModalHeader toggle={toggle} className="bg-light d-flex flex-between-center border-bottom-0">
        Rate Your Session
      </ModalHeader>
      <ModalBody>
        <div className="mb-3">
          <p className="mb-4">Thank you for using JamKazam! Your feedback helps us improve the experience for everyone.</p>

          <Row className="mb-3">
            <Col xs="3">
              <Label className="form-label">Rating:</Label>
            </Col>
            <Col>
              <div className="d-flex gap-3">
                <Button
                  color={rating === 'thumbsUp' ? 'success' : 'outline-success'}
                  onClick={() => handleRatingClick('thumbsUp')}
                  className="d-flex align-items-center justify-content-center"
                  style={{ width: '50px', height: '50px' }}
                  data-cy="thumbs-up-btn"
                >
                  <FontAwesomeIcon icon={faThumbsUp} size="lg" />
                </Button>
                <Button
                  color={rating === 'thumbsDown' ? 'danger' : 'outline-danger'}
                  onClick={() => handleRatingClick('thumbsDown')}
                  className="d-flex align-items-center justify-content-center"
                  style={{ width: '50px', height: '50px' }}
                  data-cy="thumbs-down-btn"
                >
                  <FontAwesomeIcon icon={faThumbsDown} size="lg" />
                </Button>
              </div>
            </Col>
          </Row>

          <Row>
            <Col xs="3">
              <Label className="form-label">Comments:</Label>
            </Col>
            <Col>
              <Input
                type="textarea"
                placeholder="Optional feedback..."
                value={comments}
                onChange={(e) => setComments(e.target.value)}
                rows={4}
                data-cy="comments-textarea"
              />
            </Col>
          </Row>
        </div>
      </ModalBody>
      <ModalFooter>
        <Button color="secondary" onClick={toggle} data-cy="cancel-btn">
          Cancel
        </Button>
        <Button
          color="primary"
          onClick={handleSubmit}
          disabled={!canSubmit || loading}
          data-cy="send-feedback-btn"
        >
          {loading ? (
            <>
              <FontAwesomeIcon icon={faSpinner} spin className="me-2" />
              Sending...
            </>
          ) : (
            'Send Feedback'
          )}
        </Button>
      </ModalFooter>
    </Modal>
  );
};

export default JKSessionLeaveModal;
