import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { Card, Col, Container, Form, Row } from 'react-bootstrap';
import Layout from '../../../Layouts';

interface Props {
    usuario: any;
}

const Ver = ({ usuario }: Props) => {
    return (
        <React.Fragment>
            <Head title="Ver Usuario" />
            <div className="page-content">
                <Container fluid>
                    <Row>
                        <Col lg={12}>
                            <Card>
                                <Card.Header className="d-flex justify-content-between align-items-center">
                                    <h4 className="card-title mb-0">Detalles del Usuario: {usuario.name}</h4>
                                    <Link href={route('users.index')} className="btn btn-secondary btn-sm">
                                        Volver
                                    </Link>
                                </Card.Header>
                                <Card.Body>
                                    <Form>
                                        <Row>
                                            <Col md={6} className="mb-3">
                                                <Form.Group>
                                                    <Form.Label>Nombre</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        value={usuario.name}
                                                        disabled
                                                        readOnly
                                                        className="bg-light"
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6} className="mb-3">
                                                <Form.Group>
                                                    <Form.Label>Email</Form.Label>
                                                    <Form.Control
                                                        type="email"
                                                        value={usuario.email}
                                                        disabled
                                                        readOnly
                                                        className="bg-light"
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6} className="mb-3">
                                                <Form.Group>
                                                    <Form.Label>Rol</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        value={usuario.role}
                                                        disabled
                                                        readOnly
                                                        className="bg-light"
                                                        style={{ textTransform: 'capitalize' }}
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6} className="mb-3 d-flex align-items-center">
                                                <Form.Check
                                                    type="switch"
                                                    id="custom-switch"
                                                    label="Usuario Activo"
                                                    checked={usuario.is_active === 1 || usuario.is_active === true}
                                                    disabled
                                                />
                                            </Col>

                                            <Col md={6} className="mb-3">
                                                <Form.Group>
                                                    <Form.Label>Creado el</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        value={new Date(usuario.created_at).toLocaleString()}
                                                        disabled
                                                        readOnly
                                                        className="bg-light"
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6} className="mb-3">
                                                <Form.Group>
                                                    <Form.Label>Última actualización</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        value={new Date(usuario.updated_at).toLocaleString()}
                                                        disabled
                                                        readOnly
                                                        className="bg-light"
                                                    />
                                                </Form.Group>
                                            </Col>
                                        </Row>
                                        <div className="d-flex justify-content-end gap-2 mt-3">
                                            <Link href={route('users.index')} className="btn btn-primary">
                                                Volver al Listado
                                            </Link>
                                        </div>
                                    </Form>
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        </React.Fragment>
    );
};

Ver.layout = (page: any) => <Layout children={page} />;
export default Ver;
