import {JSX} from 'react';
import {useAppDispatch, useAppSelector} from '../hooks/store';
import {selectCredentials, selectSessionInfo, authenticationActions} from '../store/slices/Authentication.slice';
import {useNavigate} from 'react-router-dom';
import {Navigation} from '../components';

export function DashboardView(): JSX.Element {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const credentials = useAppSelector(selectCredentials);
  const sessionInfo = useAppSelector(selectSessionInfo);

  const handleLogout = () => {
    dispatch(authenticationActions.signout());  
    navigate('/login', {replace: true});
  };

  return (
    <>
      <Navigation />
      <div
        style={{
          padding: '2rem',
          maxWidth: '1200px',
          margin: '0 auto'
        }}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '2rem'
          }}>
          <h1>Dashboard</h1>
          <button
            onClick={handleLogout}
            style={{
              padding: '0.5rem 1rem',
              background: '#dc3545',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}>
            Logout
          </button>
        </div>

        <div
          style={{
            background: '#222',
            padding: '1rem',
            borderRadius: '8px',
            marginBottom: '2rem'
          }}>
          <h3>Welcome!</h3>
          <p>You are successfully authenticated.</p>
          <p>
            <strong>Application ID:</strong> {credentials.applicationId || 'N/A'}
          </p>
          <p>
            <strong>Session ID:</strong> {sessionInfo.sessionId || 'N/A'}
          </p>
          <p>
            <strong>Roles:</strong> {sessionInfo.roles.length > 0 ? sessionInfo.roles.join(', ') : 'None'}
          </p>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: '1rem'
          }}>
          <div
            style={{
              background: 'white',
              padding: '1rem',
              borderRadius: '8px',
              border: '1px solid #ddd'
            }}>
            <h4>Quick Actions</h4>
            <ul>
              <li>View Channels</li>
              <li>Check Analytics</li>
              <li>Monitor QoS</li>
              <li>Manage Rooms</li>
            </ul>
          </div>

          <div
            style={{
              background: 'white',
              padding: '1rem',
              borderRadius: '8px',
              border: '1px solid #ddd'
            }}>
            <h4>Recent Activity</h4>
            <p>No recent activity to display.</p>
          </div>
        </div>
      </div>
    </>
  );
}
