import React, { useState, useEffect } from 'react';
import { 
  FaChevronLeft, 
  FaChevronRight, 
  FaFastBackward, 
  FaFastForward, 
  FaSort, 
  FaSortUp, 
  FaSortDown,  
  FaEdit, 
  FaEye, 
  FaTrash 
} from 'react-icons/fa'; // Icons for sorting
import { NoAvailable } from '../../../assets/icon';

// Pagination Component
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const handlePrev = () => {
      if (currentPage > 1) {
          onPageChange(currentPage - 1);
      }
  };

  const handleNext = () => {
      if (currentPage < totalPages) {
          onPageChange(currentPage + 1);
      }
  };

  const handleFirst = () => {
      onPageChange(1); // Go to first page
  };

  const handleLast = () => {
      onPageChange(totalPages); // Go to last page
  };

  // Logic to display only 3 pages in pagination
  const getPaginationRange = () => {
      const range = [];
      const totalPagesCount = totalPages;

      let start = currentPage - 1;
      let end = currentPage + 1;

      // Adjust start and end if near the boundaries
      if (currentPage === 1) {
          start = 1;
          end = Math.min(3, totalPagesCount);
      } else if (currentPage === totalPages) {
          start = Math.max(totalPagesCount - 2, 1);
          end = totalPagesCount;
      }

      for (let i = start; i <= end; i++) {
          range.push(i);
      }

      return range;
  };

  const pageRange = getPaginationRange();

  return (
      <div className="pagination-container d-flex justify-content-end mt-4">
          {/* First Page Button */}
          <button
              className="btn"
              onClick={handleFirst}
              disabled={currentPage === 1}
          >
              <FaFastBackward /> {/* Double Arrow Left */}
          </button>

          <button
              className="btn"
              onClick={handlePrev}
              disabled={currentPage === 1}
          >
              <FaChevronLeft /> {/* Single Arrow Left */}
          </button>

          {/* Page Numbers */}
          {pageRange.map((pageNum) => (
              <button
                  key={pageNum}
                  className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
                  onClick={() => onPageChange(pageNum)}
              >
                  {pageNum}
              </button>
          ))}

          <button
              className="btn"
              onClick={handleNext}
              disabled={currentPage === totalPages}
          >
              <FaChevronRight /> {/* Single Arrow Right */}
          </button>

          {/* Last Page Button */}
          <button
              className="btn"
              onClick={handleLast}
              disabled={currentPage === totalPages}
          >
              <FaFastForward /> {/* Double Arrow Right */}
          </button>
      </div>
  );
};

const Profile = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
    const [transactionData, setTransactionData] = useState([]);
    const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
    const dataPerPage = 10; // Data per page (10 data per page)

    const buttonData = [
      { label: 'Copy', enabled: true },
      { label: 'CSV', enabled: true },
      { label: 'Excel', enabled: true },
      { label: 'PDF', enabled: true },
      { label: 'Print', enabled: true },
      { label: 'Column Visibility', enabled: true },
    ];
  

    // Generate 691 dummy transactions
    const generateDummyData = (numOfItems) => {
      const transactionData = [];
      
      for (let i = 1; i <= numOfItems; i++) {
        transactionData.push({
          channelName: `Channel ${Math.floor(Math.random() * 5) + 1}`, // Random channel name (e.g., Channel 1, Channel 2, ...)
          channelId: `CH${String(i).padStart(3, '0')}`, // Random channel ID (e.g., CH001, CH002, ...)
          phoneNumber: `+1${Math.floor(Math.random() * 1000000000)}`, // Random phone number (e.g., +1234567890)
          status: ['Active', 'Inactive', 'Suspended'][Math.floor(Math.random() * 3)], // Random status
          creationDate: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random date
          officialBusinessAccount: `Business ${Math.floor(Math.random() * 5) + 1}`, // Random business account (e.g., Business 1, Business 2, ...)
        });      
      }
      
      return transactionData;
    };


    // Set the generated transaction data
    useEffect(() => {
        setTransactionData(generateDummyData(52)); // count data dummy transactions
    }, []);

    // Sorting function
    const sortData = (data, config) => {
      const { key, direction } = config;
      return [...data].sort((a, b) => {
          if (a[key] < b[key]) {
              return direction === 'asc' ? -1 : 1;
          }
          if (a[key] > b[key]) {
              return direction === 'asc' ? 1 : -1;
          }
          return 0;
      });
    };

    // Handle column header sort click
    const handleSort = (key) => {
        let direction = 'asc';
        if (sortConfig.key === key && sortConfig.direction === 'asc') {
            direction = 'desc'; // Toggle direction if the same column is clicked
        }
        setSortConfig({ key, direction });
    };

    // Get the paginated data
    const getPaginatedData = (data, page, perPage) => {
        const sortedData = sortData(data, sortConfig);
        const startIndex = (page - 1) * perPage;
        const endIndex = startIndex + perPage;
        return sortedData.slice(startIndex, endIndex);
    };

    // Handle page change
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    // Calculate total pages based on the data and data per page
    const totalPages = Math.ceil(transactionData.length / dataPerPage);

    // Paginated data
    const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);

    // Detect screen size and update isMobile state
    useEffect(() => {
        const handleResize = () => {
            setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
        };

        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    // Define your handle functions
    const handleEdit = (transactionId) => {
      console.log(`Edit transaction with ID: ${transactionId}`);
      // Add your edit logic here
    };

    const handleShow = (transactionId) => {
        console.log(`Show transaction with ID: ${transactionId}`);
        // Add your show logic here
    };

    const handleDelete = (transactionId) => {
        console.log(`Delete transaction with ID: ${transactionId}`);
        // Add your delete logic here
    };

    return (
        <div className="container mt-5">
            {/* 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.contentContainer}>
                {/* Filter Form */}
                <div className="card p-3 mb-4">
                  <div className="row d-flex justify-content-arround">  {/* Menggunakan Flexbox */}
                    {/* Dropdown: Business Account */}
                    <div className={`col-sm-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
                        <select className="form-control">
                            <option>Select Business Account</option>
                            <option>Account 1</option>
                            <option>Account 2</option>
                            <option>Account 3</option>
                            <option>Account 4</option>
                            <option>Account 5</option>
                        </select>
                    </div>

                    {/* Input: Business Account Name */}
                    <div className={`col-sm-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
                        <input type="text" className="form-control" placeholder="Enter Business Account Name" />
                    </div>

                    {/* Dropdown: Meta Manager ID */}
                    <div className={`col-sm-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
                        <select className="form-control">
                            <option>Select Meta Manager</option>
                            <option>Manager 1</option>
                            <option>Manager 2</option>
                            <option>Manager 3</option>
                            <option>Manager 4</option>
                            <option>Manager 5</option>
                        </select>
                    </div>

                    {/* Dropdown: WABA ID */}
                    <div className={`col-sm-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
                        <select className="form-control">
                            <option>Select WABA ID</option>
                            <option>WABA 1</option>
                            <option>WABA 2</option>
                            <option>WABA 3</option>
                            <option>WABA 4</option>
                            <option>WABA 5</option>
                        </select>
                    </div>
                  </div>
                </div>


                {/* Action Buttons */}
                <div className="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        {buttonData.map((button, index) =>
                            button.enabled ? (
                                <button
                                    key={index}
                                    className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
                                    style={styles.actionButton}
                                >
                                    {button.label}
                                </button>
                            ) : null
                        )}
                    </div>

                    {/* Search Bar with Icon */}
                    <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                        <input
                            type="text"
                            placeholder="Search..."
                            className="form-control"
                        />
                        <span className="input-group-text">
                            <i className="fas fa-search"></i> {/* FontAwesome search icon */}
                        </span>
                    </div>
                </div>


                {/* Table */}
                <div className="table-responsive">
                  <table className="table table-bordered" style={styles.tableContainer}>
                      <thead>
                          <tr>
                              <th>No.</th> {/* Kolom untuk Nomor Urut */}
                              <th>
                                <button className="btn" onClick={() => handleSort('channelName')} style={styles.buttonStyle}>
                                  <span>Channel Name</span>
                                  {sortConfig.key === 'channelName' && 
                                      (sortConfig.direction === 'asc' ? 
                                        <FaSortUp style={styles.iconMarginLeft} /> : 
                                        <FaSortDown style={styles.iconMarginLeft} />
                                      )
                                  }
                                  {sortConfig.key !== 'channelName' && <FaSort style={styles.iconMarginLeft} />}
                                </button>
                              </th>
                              <th>
                                  <button className="btn" onClick={() => handleSort('channelId')} style={styles.buttonStyle}>
                                      Channel ID
                                      {sortConfig.key === 'channelId' && 
                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
                                      }
                                      {sortConfig.key !== 'channelId' && <FaSort style={styles.iconMarginLeft} />}
                                  </button>
                              </th>
                              <th>
                                  <button className="btn" onClick={() => handleSort('phoneNumber')} style={styles.buttonStyle}>
                                      Phone Number
                                      {sortConfig.key === 'phoneNumber' && 
                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
                                      }
                                      {sortConfig.key !== 'phoneNumber' && <FaSort style={styles.iconMarginLeft} />}
                                  </button>
                              </th>
                              <th>
                                  <button className="btn" onClick={() => handleSort('status')} style={styles.buttonStyle}>
                                      Status
                                      {sortConfig.key === 'status' && 
                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
                                      }
                                      {sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
                                  </button>
                              </th>
                              <th>
                                  <button className="btn" onClick={() => handleSort('creationDate')} style={styles.buttonStyle}>
                                      Creation Date
                                      {sortConfig.key === 'creationDate' && 
                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
                                      }
                                      {sortConfig.key !== 'creationDate' && <FaSort style={styles.iconMarginLeft} />}
                                  </button>
                              </th>
                              <th>
                                  <button className="btn" onClick={() => handleSort('officialBusinessAccount')} style={styles.buttonStyle}>
                                      Official Business Account
                                      {sortConfig.key === 'officialBusinessAccount' && 
                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
                                      }
                                      {sortConfig.key !== 'officialBusinessAccount' && <FaSort style={styles.iconMarginLeft} />}
                                  </button>
                              </th>
                              <th style={{ textAlign: 'center', verticalAlign: 'middle' }}>Action</th>
                          </tr>
                      </thead>

                      <tbody>
                          {paginatedData.length > 0 ? (
                              paginatedData.map((transaction, index) => (
                                  <tr key={index}>
                                      {/* Kolom Nomor Urut */}
                                      <td>{(currentPage - 1) * dataPerPage + index + 1}</td> {/* Nomor urut berdasarkan halaman dan index */}
                                      <td>{transaction.channelName}</td>
                                      <td>{transaction.channelId}</td>
                                      <td>{transaction.phoneNumber}</td>
                                      <td>{transaction.status}</td>
                                      <td>{transaction.creationDate}</td>
                                      <td>{transaction.officialBusinessAccount}</td>
                                      <td style={{ textAlign: 'center' }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
                                            <button
                                                className="btn btn-warning"
                                                style={{ display: 'flex', alignItems: 'center' }}
                                                onClick={() => handleEdit(transaction.transactionId)}
                                            >
                                                <FaEdit style={{ marginRight: '5px' }} />
                                                Edit
                                            </button>

                                            <button
                                                className="btn btn-success"
                                                style={{ display: 'flex', alignItems: 'center' }}
                                                onClick={() => handleShow(transaction.transactionId)}
                                            >
                                                <FaEye style={{ marginRight: '5px' }} />
                                                Show
                                            </button>

                                            <button
                                                className="btn btn-danger"
                                                style={{ display: 'flex', alignItems: 'center' }}
                                                onClick={() => handleDelete(transaction.transactionId)}
                                            >
                                                <FaTrash style={{ marginRight: '5px' }} />
                                                Delete
                                            </button>
                                        </div>
                                      </td>
                                  </tr>
                              ))
                          ) : (
                              <tr>
                                  <td colSpan="7" className="text-center">
                                      <div className="d-flex flex-column align-items-center mt-5">
                                          <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
                                          <p>Data not available</p>
                                      </div>
                                  </td>
                              </tr>
                          )}
                      </tbody>
                  </table>
                </div>

                {/* Pagination */}
                <Pagination
                    currentPage={currentPage}
                    totalPages={totalPages}
                    onPageChange={handlePageChange}
                />
            </div>
        </div>
    );
};

export default Profile;

const styles = {
  contentContainer: {
      padding: '20px',
      border: '0.1px solid rgba(0, 0, 0, 0.2)',
      borderLeft: '4px solid #0542cc',
      borderRadius: '10px',
      width: '100%',
  },
  tableContainer: {
      minHeight: '300px',
      maxHeight: '1500px',
      overflowY: 'auto',
  },
  iconStyle: {
      width: '50px',
      height: '50px',
  },
  // Add margin-left style for icons
  iconMarginLeft: {
    marginLeft: '0.5rem',
    verticalAlign: 'middle', 
  },
  buttonStyle: {
    display: 'inline-flex',         
    justifyContent: 'flex-start',   
    alignItems: 'center',           
    padding: '0.5rem 1rem',          
  },
};

