import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { TerminalComponent } from "../components/terminal";
import { MobileTerminalWrapper } from "../components/mobile-terminal-wrapper";
import { useMobileViewport } from "../hooks/use-mobile-viewport";

export const TerminalPage: React.FC = () => {
  const { instanceId } = useParams<{ instanceId: string }>();
  const navigate = useNavigate();
  const isMobile = useMobileViewport();

  if (!instanceId) {
    return (
      <section className="stack">
        <h1>Terminal</h1>
        <p className="muted">No instance ID provided.</p>
      </section>
    );
  }

  if (isMobile) {
    return (
      <MobileTerminalWrapper
        instanceId={instanceId}
        onBack={() => navigate(-1)}
        onClose={() => navigate(-1)}
      />
    );
  }

  return (
    <section className="terminal-page">
      <div className="terminal-page-header">
        <button
          className="secondary-button"
          onClick={() => navigate(-1)}
          type="button"
        >
          Back
        </button>
        <h1>Terminal</h1>
      </div>
      <TerminalComponent
        instanceId={instanceId}
        onClose={() => navigate(-1)}
        isMobile={false}
      />
    </section>
  );
};