import React, { useState, useEffect } from 'react';
import {
  Extract,
  Quality,
  AsyncIcon,
  QualityAsync,
  Transaction
} from '../../../assets/icon';

const Summary = () => {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [application, setApplication] = useState('');
  const [isMobile, setIsMobile] = useState(false);

  const menuData = [
    { id: 1, value: '150', label: 'Total Transaction', icon: Transaction },
    { id: 2, value: '4', label: 'Total Extract', icon: Extract },
    { id: 3, value: '65', label: 'Total Quality', icon: Quality },
    { id: 6, value: '900', label: 'Total Extract Async', icon: AsyncIcon },
    { id: 4, value: '22', label: 'Total Quality Async', icon: QualityAsync },
  ];

  const handleApply = () => {
    console.log({ startDate, endDate, application });
  };

  const handleCancel = () => {
    setStartDate('');
    setEndDate('');
    setApplication('');
  };

  // Detect if the device is mobile based on window width
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
    };

    // Initialize on component mount
    handleResize();

    // Add event listener to update state on resize
    window.addEventListener('resize', handleResize);

    // Cleanup event listener on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div style={styles.container}>
      {/* Welcome Message */}
      <div
        className="row-card border-left border-primary shadow mb-4"
        style={{ backgroundColor: '#E2FBEA' }}
      >
        <div className="d-flex flex-column justify-content-start align-items-start p-4">
          <div>
            <h4 className="mb-3 text-start">
              <i className="fas fa-warning fa-bold me-3"></i>Alert
            </h4>
            <p className="mb-0 text-start">
              Get started now by creating an Application ID and explore all the demo services available on the dashboard.
              Experience the ease and flexibility of trying out all our features firsthand.
            </p>
          </div>
        </div>
      </div>

      <div style={styles.summaryContainer}>
        <div style={isMobile ? styles.filtersMobile : styles.filters}>
          {/* Row 1: Start Date and End Date */}
          <div style={styles.filterRow}>
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              style={styles.filterInput}
              placeholder="Start Date"
            />
            <input
              type="date"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
              style={styles.filterInput}
              placeholder="End Date"
            />
          </div>

          {/* Row 2: Application Select */}
          <div style={styles.filterRow}>
            <select
              value={application}
              onChange={(e) => setApplication(e.target.value)}
              style={styles.filterInput}
            >
              <option value="">Application</option>
              <option value="App1">App1</option>
              <option value="App2">App2</option>
            </select>
          </div>

          {/* Row 3: Apply and Cancel Buttons */}
          <div style={styles.filterRow}>
            <button style={styles.applyButton} onClick={handleApply}>
              Apply
            </button>
            <button style={styles.cancelButton} onClick={handleCancel}>
              Cancel
            </button>
          </div>
        </div>

        <div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
          {menuData.map((item) => (
            <div key={item.id} style={styles.card}>
              <div style={styles.textContainer}>
                <h2 style={styles.cardTitle}>{item.value}</h2>
                <p style={styles.cardText}>{item.label}</p>
              </div>
              <div style={styles.iconContainer}>
                <img src={item.icon} alt={item.label} style={styles.icon} />
              </div>
            </div>
          ))}
        </div>


      </div>
    </div>
  );
};

const styles = {
  container: {
    margin: '3rem',
  },
  filters: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '20px',
    flexDirection: 'row', // Horizontal layout on desktop
    gap: '10px',
  },
  filtersMobile: {
    display: 'flex',
    flexDirection: 'column', // Vertical layout on mobile
    gap: '15px',
  },
  filterRow: {
    display: 'flex',
    justifyContent: 'space-between',
    gap: '10px',
    width: '100%',
  },
  filterInput: {
    padding: '10px',
    border: '1px solid #ccc',
    borderRadius: '5px',
    fontSize: '16px',
    width: '48%', // Adjust width to take up 48% of the row for input elements
  },
  applyButton: {
    backgroundColor: '#0542cc',
    color: '#fff',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    width: '48%', // Adjust button width to take half of the row
  },
  cancelButton: {
    backgroundColor: '#fff',
    color: '#000',
    padding: '10px 20px',
    border: '1px solid gray',
    borderRadius: '5px',
    cursor: 'pointer',
    width: '48%', // Adjust button width to take half of the row
  },
  summaryContainer: {
    padding: '20px',
    border: '0.1px solid rgba(0, 0, 0, 0.2)',
    borderLeft: '4px solid #0542cc',
    borderRadius: '10px',
    width: '100%',
  },
  summaryCards: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
    gap: '20px',
    marginTop: '20px',
  },
  summaryCardsMobile: {
    display: 'grid',
    gridTemplateColumns: '1fr', // 1 column on mobile (full width)
    gap: '15px',
    marginTop: '20px',
  },
  card: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '15px', // Reduced padding for a more compact card
    backgroundColor: 'white',
    borderRadius: '8px', // Slightly smaller border-radius for a sharper look
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
    textAlign: 'left',
    minWidth: '200px', // Ensure minimum width for mobile responsiveness
    maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
    width: '100%',
    transition: 'transform 0.3s ease', // Smooth transition for hover effects
  },
  cardHover: {
    transform: 'scale(1.05)', // Slight zoom on hover for interactivity
  },
  iconContainer: {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  textContainer: {
    display: 'flex',
    flexDirection: 'column',
  },
  icon: {
    width: '36px', // Smaller icon size for a more compact card
    height: '36px', // Matching height for the icon
  },
  cardTitle: {
    fontSize: '18px', // Smaller font size for title to prevent overflow
    margin: '0',
    fontWeight: 'bold',
  },
  cardText: {
    fontSize: '12px', // Smaller text size for description to keep it balanced
    color: '#555',
  },

  // Optional: Hover effect for the cards to enhance interactivity
  cardHover: {
    transform: 'scale(1.05)', // Slight zoom effect when hovering over card
  },

  // Media query for smaller screens (e.g., phones in portrait mode)
  "@media (max-width: 768px)": {
    summaryCards: {
      gridTemplateColumns: '1fr', // 1 column on mobile screens
    },
    card: {
      padding: '10px', // Smaller padding for smaller screens
      minWidth: '180px', // Adjust min width for mobile devices
      maxWidth: '250px', // Adjust max width for mobile devices
    },
    icon: {
      width: '30px', // Slightly smaller icon size for mobile
      height: '30px', // Matching height for mobile icon
    },
    cardTitle: {
      fontSize: '16px', // Smaller font size for the card title
    },
    cardText: {
      fontSize: '10px', // Smaller font size for card description
    },
  },
};

export default Summary;
