import PropTypes from 'prop-types';
import { Accordion } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const ApiDocs = ({ json }) => {
  if (!json) return <p className="text-muted">No hay documentación disponible.</p>;

  const renderEndpoints = (endpoints) => (
    <Accordion className='overflow-auto'>
      {endpoints.map((ep, index) => (
        <Accordion.Item eventKey={index.toString()} key={index}>
          <Accordion.Header className='d-flex align-items-center flex-wrap'>
            <span className={`badge bg-${getMethodColor(ep.method)} me-2 text-uppercase`}>{ep.method}</span>
            <code className='text-break flex-grow-1'>{ep.path}</code>
          </Accordion.Header>
          <Accordion.Body>
            {ep.description && <p className="mb-2">{ep.description}</p>}

            {ep.params?.length > 0 && (
              <div className="d-flex flex-column gap-2 mt-3">
                {ep.params.map((param, i) => (
                  <div key={i} className="bg-light border rounded px-3 py-2">
                    <div className="d-flex justify-content-between flex-wrap mb-1">
                      <strong>{param.name}</strong>
                      <span className="badge bg-secondary">{param.in}</span>
                    </div>
                    <div className="small text-muted">
                      <div><strong>Tipo:</strong> {param.type}</div>
                      <div><strong>¿Requerido?:</strong> {param.required ? 'Sí' : 'No'}</div>
                      {param.description && <div><strong>Descripción:</strong> {param.description}</div>}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Accordion.Body>
        </Accordion.Item>
      ))}
    </Accordion>
  );

  return (
    <div className="container p-4 bg-white rounded-4 border">
      <h1 className="fw-bold mb-5 text-dark">{json.name} <small className="text-muted fs-5">v{json.version}</small></h1>

      <h3 className="mb-3 text-dark">API de Lógica</h3>
      {renderEndpoints(json.logic_api)}

      <h3 className="mb-3 text-dark mt-5">API de Datos (Raw)</h3>
      {renderEndpoints(json.raw_api)}
    </div>
  );
};

const getMethodColor = (method) => {
  switch (method.toUpperCase()) {
    case 'GET': return 'success';
    case 'POST': return 'primary';
    case 'PUT': return 'warning';
    case 'DELETE': return 'danger';
    default: return 'secondary';
  }
};

ApiDocs.propTypes = {
  json: PropTypes.shape({
    name: PropTypes.string.isRequired,
    version: PropTypes.string.isRequired,
    logic_api: PropTypes.array,
    raw_api: PropTypes.array
  }).isRequired
};

export default ApiDocs;