"use client";

import { useEffect, useRef, useState } from "react";
import { Chip, GlassFace, IconButton, Tooltip } from "@unlocalhosted/metalui";
import { MorphIcon } from "./icons";

/**
 * The landing page's terminal: MetalUI's code card look (a glass bezel round a dark screen, a glass tag
 * with the code LED) holding a first push, with a copy key for the two commands.
 */
export function HomeTerminal({ sshUrl }: { sshUrl: string }) {
  const snippet = `git remote add origin ${sshUrl}\ngit push -u origin main`;
  const [copied, setCopied] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);

  return (
    <GlassFace className="mx-auto w-full max-w-3xl text-left">
      <GlassFace.Screen className="!recipe-code-card-screen px-5 pt-12 pb-6 md:px-7">
        <Chip variant="glass" className="!absolute top-code-card-chip-inset left-code-card-chip-inset">
          <Chip.Lead led="code" />
          <Chip.Text>Terminal · zsh · ~/project</Chip.Text>
        </Chip>
        <div className="absolute top-1.5 right-1.5">
          <Tooltip label={copied ? "Copied" : "Copy commands"}>
            <IconButton
              label="Copy commands"
              icon={<MorphIcon name={copied ? "check" : "duplicate"} />}
              className={`${copied ? "text-code-card-tint-string!" : "text-code-card-tint-comment!"} hover:bg-white/10! hover:text-code-card-code-ink!`}
              onClick={async () => {
                await navigator.clipboard.writeText(snippet);
                setCopied(true);
                clearTimeout(timer.current);
                timer.current = setTimeout(() => setCopied(false), 1500);
              }}
            />
          </Tooltip>
        </div>
        <pre className="m-0 overflow-x-auto font-mono text-[12.5px] leading-[1.85] tracking-[-0.01em] text-code-card-code-ink">
          <span className="text-code-card-tint-keyword">❯</span> git remote add origin {sshUrl}
          {"\n"}
          <span className="text-code-card-tint-keyword">❯</span> git push -u origin main
          {"\n"}
          <span className="text-code-card-tint-comment">Enumerating objects: 42, done.</span>
          {"\n"}
          <span className="text-code-card-tint-comment">Writing objects: 100% (42/42), 8.13 KiB | 8.13 MiB/s, done.</span>
          {"\n"}
          <span className="text-code-card-tint-comment">To {sshUrl.replace("git@", "")}</span>
          {"\n"}
          <span className="text-code-card-tint-string"> * [new branch]      main → main</span>
        </pre>
      </GlassFace.Screen>
    </GlassFace>
  );
}