import CustomContainer from "@/components/layout/CustomContainer";
import { Col, Row, Modal } from "react-bootstrap";
import { useState } from "react";
import ContentWrapper from "../layout/ContentWrapper";

const Inicio = () => {
  const [modalShown, setModalShown] = useState(false);

  const copiarIP = () => {
    navigator.clipboard.writeText('miarma.net');
    setModalShown(true);
  };

  return (
    <CustomContainer>
      <ContentWrapper>
        <h1 className="text-center mt3 mb-5">Pasos para unirse al servidor</h1>

        <Row className="g-4 align-items-stretch mb-5">
          {[1, 2, 3].map((step) => (
            <Col key={step} sm={12} md={4} className="d-flex">
              <div className="minecraft-card flex-fill d-flex flex-column">

                {/* —— Contenido “arriba” ————————————————————— */}
                <h1 className="header text-center">
                  Paso {step}
                </h1>

                <div className="card-body">
                  {step === 1 && (
                    <>
                      <p>Necesitas tener el juego para entrar en el servidor así que tienes dos opciones:
                      </p>
                      <ul>
                        <li className="text-start">Descargar el launcher PrismLauncher (recomendado, launcher <a href="https://en.wikipedia.org/wiki/Open-source_software" target="_blank" rel="noopener noreferrer">OSS</a>).</li>
                        <li className="text-start">Comprarlo en la página oficial.</li>
                      </ul>
                    </>
                  )}

                  {step === 2 && (
                    <>
                    <p>
                      El servidor se encuentra en la version <b>1.21.10</b>, así que tendrás que seleccionar esa versión en el launcher. Permitimos <b>mods</b> client-side que no den ventaja sobre otros jugadores (como shaders, Mouse-Tweaks, etc).
                    </p>
                    </>
                  )}

                  {step === 3 && (
                    <p>Por último solamente te queda copiar la dirección del servidor e introducirla en el juego para conectarte y jugar :D
                    </p>
                  )}
                </div>

                {/* —— Footer con el hr + botones ————————————————— */}
                <div className="card-footer mt-auto d-flex flex-column align-items-center gap-2">
                  <hr className="minecraft-hr w-100" />
                  {step === 1 && (
                    <div className="d-flex flex-column gap-2">
                      <button onClick={() => { window.open("https://minecraft.net/", "_blank"); }} className="minecraft-btn">Comprar Minecraft</button>
                      <button onClick={() => { window.open("https://github.com/PrismLauncher/PrismLauncher/releases/latest", "_blank"); }} className="minecraft-btn danger">Descargar Prism Launcher</button>
                    </div>
                  )}
                  {step === 2 && (
                    <>
                    </>
                  )}
                  {step === 3 && (
                    <button
                      onClick={() => { copiarIP(); setModalShown(true); }}
                      className="minecraft-btn"
                    >
                      COPIAR IP
                    </button>
                  )}
                </div>

              </div>
            </Col>
          ))}
        </Row>


        <Modal show={modalShown} onHide={() => setModalShown(false)}>
          <Modal.Body className="text-center">
            <h1>IP COPIADA</h1>
            <p>Nos vemos dentro del server.</p>
            <button onClick={() => setModalShown(false)} className="minecraft-btn">
              Cerrar
            </button>
          </Modal.Body>
        </Modal>
      </ContentWrapper>
    </CustomContainer>
  );
};

export default Inicio;