import React from 'react';
import { Table, Row, Col, Card, Button, Spinner } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import useDashboard from '../hooks/useDashboard';

function validName(text) {
  const words = text.trim().split(" ");
  return words.slice(0, 2).join(" ");
}

const AdminDashboard = () => {
  const { username } = JSON.parse(localStorage.getItem('userData'));
  const { 
    error,
    totalStudent,
    totalTeacher,
    reports,
    activity,
    loadingActivity,
    loadingReports,
    formatLocalDate
  } = useDashboard();
  return (
    <div className='admin-dashboard'>
      <h2 className='page-title'>Hi, {validName(username)}!</h2>
      <p className='page-desc'>Together, we can make every learning journey smarter and more adaptive.</p>
      <Row className='mb-45'>
        <Col md={4} xxl={2}>
          <div className="mini-cards p-4 mb-3">
            <h4 className='m-0'>All Student</h4>
            <hr />
            <h1 className='m-0 fw-bold text-blue'>{totalStudent}</h1>
          </div>
          <div className="mini-cards p-4">
            <h4 className='m-0'>All Teacher</h4>
            <hr />
            <h1 className='m-0 fw-bold text-blue'>{totalTeacher}</h1>
          </div>
        </Col>
        <Col md={8} xxl={10}>
          <div className="cards">
            <div className="cards-title">
              <h4>Recent Student Activities</h4>
            </div>
            <div className="cards-body">
              <Table hover>
                <thead>
                  <tr>
                    <th>No</th>
                    <th>NISN</th>
                    <th>Name</th>
                    <th>Section</th>
                    <th>Topic</th>
                  </tr>
                </thead>
                <tbody>
                  {loadingActivity?(
                      <tr>
                          <td colSpan={5} style={{height:"20vh"}}>
                              <Spinner animation="grow" variant="primary" />
                              <Spinner animation="grow" variant="secondary" />
                              <Spinner animation="grow" variant="success" />
                              <Spinner animation="grow" variant="danger" />
                              <Spinner animation="grow" variant="warning" />
                              <Spinner animation="grow" variant="info" />
                          </td>
                      </tr>
                  ):(
                      activity.length > 0?(
                          activity.map((data, index) => (
                              <tr index>
                                  <td>{index + 1}</td>
                                  <td>{data.NISN}</td>
                                  <td>{data.NAME_USERS}</td>
                                  <td>{data.NAME_SECTION}</td>
                                  <td>{data.NAME_TOPIC}</td>
                              </tr>
                          ))
                      ):( 
                          <tr>
                              <td colSpan={5} style={{height:'20vh'}}>
                                  <h3>Empty Data</h3>
                              </td>
                          </tr>
                      )
                  )}
                </tbody>
              </Table>
            </div>
          </div>
        </Col>
      </Row>
      <Row className='mb-45'>
        <Col sm={12}>
          <div className="cards">
            <div className="cards-title d-flex justify-content-between align-items-center">
              <h4>Issue Reports</h4>
              <NavLink to="/admin/report" className="text-blue">See more</NavLink>
            </div>
            <div className="cards-body">
              <Table hover>
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Email Address</th>
                    <th>Full Name</th>
                    <th>Report</th>
                    <th>Time</th>
                  </tr>
                </thead>
                <tbody>
                  {loadingReports?(
                      <tr>
                          <td colSpan={5} style={{height:"20vh"}}>
                              <Spinner animation="grow" variant="primary" />
                              <Spinner animation="grow" variant="secondary" />
                              <Spinner animation="grow" variant="success" />
                              <Spinner animation="grow" variant="danger" />
                              <Spinner animation="grow" variant="warning" />
                              <Spinner animation="grow" variant="info" />
                          </td>
                      </tr>
                  ):(
                      reports.length > 0?(
                          reports.map((data, index) => (
                              <tr key={index}>
                                  <td>{index + 1}</td>
                                  <td>{data.USER_EMAIL}</td>
                                  <td>{data.USER_EMAIL}</td>
                                  <td>{data.REPORTS}</td>
                                  <td>{formatLocalDate(data.TIME_REPORT)}</td>
                              </tr>
                          ))
                      ):( 
                          <tr>
                              <td colSpan={5} style={{height:'20vh'}}>
                                  <h3>Empty Data</h3>
                              </td>
                          </tr>
                      )
                  )}
                </tbody>
              </Table>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default AdminDashboard;