import React, { useState } from 'react';
import { Table, Row, Col, Nav, Tab, Button, Form, Card, Modal, Spinner } from 'react-bootstrap';
import useProgress from '../hooks/useProgress';
import TablePaginate from '../../../../components/ui/TablePaginate';
import { Link } from 'react-router-dom';

const Monitoring = () => {
    const { 
        students, 
        classes,
        loading, 
        error, 

        totalPagesStudent,
        totalDataStudent,
        setSearchStudent,
        pageStudent, 
        handlePageChangeStudents,
        handleLimitsChangeStudents,
        handleSearchChangeStudents,

        totalPagesClass,
        totalDataClass,
        setSearchClass,
        pageClass, 
        handlePageChangeClasses,
        handleLimitsChangeClasses,
        handleSearchChangeClasses,
        
        selectedId,
        selected,
        show,
        loadingModal,
        handleShow,
        handleClose,
     } = useProgress();

    if (error) {
        <>{error}</>
    }

    return (
        <div className='admin-students'>
            <h2 className='page-title'>Stay updated on student progress!</h2>
            <p className='page-desc'>Closely track student activity and monitor their English learning journey.</p>
            <Tab.Container id="left-tabs-example" defaultActiveKey="student">
                <Row className='mb-45'>
                    <Col xs={12}>
                        <Nav variant="pills" className='col-tabs'>
                            <Nav.Item>
                                <Nav.Link eventKey="student">Student</Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link eventKey="class">Class</Nav.Link>
                            </Nav.Item>
                        </Nav>
                    </Col>
                </Row>
                <Row className='mb-45'>
                    <Col xs={12} className='col-tabs-content'>
                        <Tab.Content>
                            <Tab.Pane eventKey="student">
                                <div className="cards">
                                    <div className="cards-title">
                                        <h4>Student List</h4>
                                    </div>
                                    <div className="cards-body">
                                        <Form className="mb-3 d-flex align-items-strech" onSubmit={(e) => { e.preventDefault(); handleSearchChangeStudents(); }}>
                                            <Form.Control type='search'
                                                aria-label="Large"
                                                aria-describedby="inputGroup-sizing-sm"
                                                placeholder='Search'
                                                className='table-input-search mb-0 me-2 rounded-3'
                                                onChange={(e) => { setSearchStudent(e.target.value); }}
                                            />
                                            <Button type='submit' variant='blue rounded-3'>Search</Button>
                                        </Form>
                                        <Table hover>
                                            <thead>
                                            <tr>
                                                <th className='text-start'>NISN</th>
                                                <th>Full Name</th>
                                                <th className='text-center'>Class</th>
                                                <th>Section</th>
                                                <th>Topic</th>
                                                <th>Level</th>
                                                <th className='text-center'>Score</th>
                                                <th className='text-center'>Review</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {loading?(
                                                    <tr>
                                                        <td colSpan={8} 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>
                                                ):(
                                                    students.length > 0?(
                                                        students.map((data, index) => (
                                                            <tr key={data.ID_STUDENT_LEARNING}>
                                                                <td className='text-start'>{data.NISN}</td>
                                                                <td>{data.NAME_USERS}</td>
                                                                <td className='text-center'>{data.NAME_CLASS ? data.NAME_CLASS : '-'}</td>
                                                                <td>{data.NAME_SECTION}</td>
                                                                <td>{data.NAME_TOPIC}</td>
                                                                <td>{data.NAME_LEVEL}</td>
                                                                <td className='text-center'>{data.SCORE}</td>
                                                                <td className='text-center action-col'>
                                                                    <Link className='btn btn-sm btn-view' to={`s/${data.ID_STUDENT_LEARNING}`}><i className="bi bi-eye"></i></Link>
                                                                </td>
                                                            </tr>
                                                        ))
                                                    ):( 
                                                        <tr>
                                                            <td colSpan={8} style={{height:'20vh'}}>
                                                                <h3>Empty Data</h3>
                                                            </td>
                                                        </tr>
                                                    )
                                                )}
                                            </tbody>
                                        </Table>
                                        <div className="mt-2 w-100 d-flex justify-content-between align-items-center">
                                            <div className='d-flex align-items-center'>
                                                <small className="me-2">Item per page</small>
                                                <Form.Select 
                                                    size='sm' 
                                                    className='py-0 px-1 me-2' 
                                                    aria-label="Default select example" 
                                                    defaultValue='7' 
                                                    onChange={handleLimitsChangeStudents}
                                                    style={{ width: '50px' }} 
                                                >
                                                    <option value="20">20</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </Form.Select>
                                                <small>of {totalDataStudent}</small>
                                            </div>
                                            <TablePaginate
                                                totalPages={totalPagesStudent}
                                                currentPage={pageStudent}
                                                onPageChange={handlePageChangeStudents}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Tab.Pane>
                            <Tab.Pane eventKey="class">
                                <div className="cards">
                                    <div className="cards-title">
                                        <h4>Class List</h4>
                                    </div>
                                    <div className="cards-body">
                                        <Form className="mb-3 d-flex align-items-strech" onSubmit={(e) => { e.preventDefault(); handleSearchChangeClasses(); }}>
                                            <Form.Control type='search'
                                                aria-label="Large"
                                                aria-describedby="inputGroup-sizing-sm"
                                                placeholder='Search'
                                                className='table-input-search mb-0 me-2 rounded-3'
                                                onChange={(e) => { setSearchClass(e.target.value); }}
                                            />
                                            <Button type='submit' variant='blue rounded-3'>Search</Button>
                                        </Form>
                                        <Row>
                                            {loading?(
                                                <div className='d-flex justify-content-center align-items-center' 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" />
                                                </div>
                                            ):(
                                                classes.map((data, index) => (
                                                    <Col xs={6} lg={4} xxl={3} className='mb-3' key={index}>
                                                        <Card className='h-100'>
                                                            <Card.Body>
                                                            <Card.Title as='h2'>{data.NAME_CLASS}</Card.Title>
                                                                <Card.Text className='mb-4 fs-14p'>
                                                                {data.STUDENTS < data.TOTAL_STUDENT?(
                                                                    <>
                                                                    <span className='fw-bold'>{data.STUDENTS} </span>
                                                                    out of {data.TOTAL_STUDENT} students
                                                                    </>
                                                                ):(
                                                                    `${data.STUDENTS} students`
                                                                )}
                                                                </Card.Text>
                                                                <Button as={Link} to={`c/${data.ID_CLASS}`} variant="warning" className='py-2 w-100 rounded-35'>See Details</Button>
                                                                {/* <Button onClick={() => {handleShow(data.ID_CLASS);}} variant="warning" className='py-2 w-100 rounded-35'>See Details</Button> */}
                                                            </Card.Body>
                                                        </Card>
                                                    </Col>
                                                ))
                                            )}
                                        </Row>
                                    </div>
                                </div>
                            </Tab.Pane>
                        </Tab.Content>
                    </Col>
                </Row>
            </Tab.Container>

            <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
                <Modal.Header closeButton>
                    <Modal.Title>Select Topic</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {loadingModal?(
                        <div className='d-flex justify-content-center align-items-center' 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" />
                        </div>
                    ):(
                        selected.length > 0?(
                            <Row>
                                {selected.map((data, index) => (
                                    <Col xs={6} lg={4} xxl={3} className='mb-3' key={index}>
                                        <Card className='h-100'>
                                            <Card.Body>
                                            <Card.Title as='h3'>{data.NAME_SECTION}</Card.Title>
                                                <Card.Text className='mb-4 fs-14p'>
                                                    {data.NAME_TOPIC}
                                                </Card.Text>
                                            <Button as={Link} to={`c/${selectedId}&${data.ID_TOPIC}`} variant="warning" className='py-2 w-100 rounded-35'>See Details</Button>
                                            </Card.Body>
                                        </Card>
                                    </Col>
                                ))}
                            </Row>
                        ):(
                            <h2 className='my-3 text-center'>No Progress from this class</h2>
                        )
                    )}
                </Modal.Body>
            </Modal>
        </div>
    );
};

export default Monitoring;
