import { Link, useParams } from 'react-router';
import { ExternalLink, GitBranch, Plug } from 'lucide-react';

// The panel header, which is where the settings live.
//
// They were floating buttons over the top-right of the iframe first, and that was wrong twice: they sit
// on top of Gitea's own controls, and an overlay on an application that fills its panel is invisible
// until you already know it is there. The header is the platform's own furniture — always present, never
// competing with the content underneath.

const FRAME_SRC = '/api/gitea/_web/';

export const GiteaViewHeader = () => {
  const { section } = useParams();
  const onConnection = section === 'connection';

  return (
    <>
      <GitBranch className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">{onConnection ? 'Gitea — connection' : 'Gitea'}</span>

      {/* Real links, so they are cmd-clickable like any other navigation. */}
      <Link
        to={onConnection ? '/gitea' : '/gitea/connection'}
        title={onConnection ? 'Back to Gitea' : 'Connection settings'}
        className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
      >
        <Plug className="h-3.5 w-3.5" />
      </Link>
      <a
        href={FRAME_SRC}
        target="_blank"
        rel="noopener"
        title="Open Gitea in a new tab"
        className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
      >
        <ExternalLink className="h-3.5 w-3.5" />
      </a>
    </>
  );
};