import React, { useState } from 'react';
import './NotificationSettings.css';

const NotificationSettings = () => {
  const [activeTab, setActiveTab] = useState('search');
  const [userType, setUserType] = useState('');

  const handleSearch = (e) => {
    e.preventDefault();
    console.log('Searching for user type:', userType);
    alert('Search functionality will filter users by: ' + (userType || 'All Types'));
  };

  const users = [
    { id: 1, name: 'Rajesh Kumar', country: 'India', site: 'BPSL-Jharsuguda', userType: 'Admin', green: false, yellow: true, red: false },
    { id: 2, name: 'Priya Sharma', country: 'India', site: 'BPSL-Jharsuguda', userType: 'User', green: true, yellow: true, red: false },
    { id: 3, name: 'Amit Patel', country: 'India', site: 'BPSL-Jharsuguda', userType: 'Support', green: true, yellow: true, red: true }
  ];

  return (
    <div className="notification-settings-page">
      <div className="tab-navigation">
        <button className={`tab-btn ${activeTab === 'search' ? 'active' : ''}`} onClick={() => setActiveTab('search')} data-tab="search">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M21 21L16.65 16.65" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span>Search Users</span>
        </button>
        <button className={`tab-btn ${activeTab === 'allusers' ? 'active' : ''}`} onClick={() => setActiveTab('allusers')} data-tab="allusers">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45768C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span>All User Details</span>
        </button>
      </div>

      {activeTab === 'search' && (
        <div className="tab-content active">
          <div className="search-section">
            <div className="form-header">
              <h1>Safety Audit Notification Settings</h1>
            </div>
            <form className="search-form" onSubmit={handleSearch}>
              <div className="input-group">
                <label htmlFor="userType" className="input-label">User Type</label>
                <select id="userType" name="userType" className="input-field select-field" value={userType} onChange={(e) => setUserType(e.target.value)}>
                  <option value="">Select User Type</option>
                  <option value="admin">Admin</option>
                  <option value="user">User</option>
                  <option value="support">Support</option>
                </select>
              </div>
              <button type="submit" className="btn-search">Search</button>
            </form>
          </div>
        </div>
      )}

      {activeTab === 'allusers' && (
        <div className="tab-content active">
          <div className="table-section">
            <div className="table-header">
              <h2>All User Details</h2>
            </div>
            <div className="table-container">
              <table className="user-table">
                <thead>
                  <tr>
                    <th>SI No</th>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Site Name</th>
                    <th>User Type</th>
                    <th>Green</th>
                    <th>Yellow</th>
                    <th>Red</th>
                  </tr>
                </thead>
                <tbody>
                  {users.map(user => (
                    <tr key={user.id}>
                      <td>{user.id}</td>
                      <td>{user.name}</td>
                      <td>{user.country}</td>
                      <td>{user.site}</td>
                      <td>{user.userType}</td>
                      <td><span className={`status-icon ${user.green ? 'green' : 'red'}`}>{user.green ? '✓' : '✗'}</span></td>
                      <td><span className={`status-icon ${user.yellow ? 'green' : 'red'}`}>{user.yellow ? '✓' : '✗'}</span></td>
                      <td><span className={`status-icon ${user.red ? 'green' : 'red'}`}>{user.red ? '✓' : '✗'}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default NotificationSettings;

