import { Popover } from '@base-ui/react/popover';
import { CheckIcon, ChevronDownIcon, CodeIcon, CopyIcon } from 'lucide-react';
import { useState } from 'react';
import { Button } from '#/components/atoms/button.jsx';
import { account, repoRecord } from '#/lib/git.js';
import { cn } from '#/lib/utils.js';

/**
 * The clone URLs this repository answers on, behind a Code button. The
 * atproto remote always works wherever the helper is installed. The https
 * remote appears only where the deploy found the read-only smart HTTP
 * endpoint switched on, and never for a repository in a space, which the
 * read-only surface does not serve.
 */
export function CodeMenu({ repo, httpClone, space }) {
  const [copied, setCopied] = useState('');
  const record = repoRecord(repo, space);

  const remotes = [];
  if (httpClone && !space) {
    remotes.push({
      label: 'HTTPS',
      url: `${account.pds}/git/${account.handle}/${repo}`,
      note: 'stock git, read only',
    });
  }
  remotes.push({
    label: 'atproto',
    url:
      typeof record?.cloneUrl === 'string'
        ? record.cloneUrl
        : `atproto://${account.handle}/${repo}`,
    note: space
      ? 'push and fetch with the helper, as someone added to it'
      : 'push and fetch with the helper',
  });

  return (
    <Popover.Root>
      {/* The same control the ref picker is. Cloning is the one thing this
          page offers, but a filled button for it would be the only loud
          surface on a page of flat panels. */}
      <Popover.Trigger
        className={cn(
          'inline-flex h-9 cursor-pointer items-center gap-2 rounded-xl border border-input bg-background px-3 text-[13px] outline-none transition-colors',
          'hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
        )}
      >
        <CodeIcon className="size-3.5 shrink-0 text-faint" />
        {/* The word goes where the bar is short, so the tabs beside it keep
            their room. The icon still says what it opens. */}
        <span className="hidden sm:inline">Clone</span>
        <ChevronDownIcon className="size-3.5 shrink-0 text-faint" />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner className="z-50" sideOffset={6} align="end">
          <Popover.Popup className="w-[min(22rem,calc(100vw-2rem))] rounded-2xl border border-border bg-card p-3 shadow-lg outline-none">
            <Popover.Title className="mb-2 font-semibold text-[13px]">
              Clone this repository
            </Popover.Title>
            <div className="flex flex-col gap-3">
              {remotes.map((remote) => (
                <div key={remote.url}>
                  <div className="mb-1 flex items-baseline justify-between gap-2">
                    <span className="font-semibold text-[11.5px] text-muted-foreground uppercase tracking-wide">
                      {remote.label}
                    </span>
                    <span className="text-[11px] text-faint">
                      {remote.note}
                    </span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <code className="min-w-0 flex-1 truncate rounded-lg border border-border bg-muted px-2.5 py-1.5 font-mono text-[11.5px] text-muted-foreground">
                      git clone {remote.url}
                    </code>
                    <Button
                      variant="outline"
                      size="icon-sm"
                      aria-label={`Copy the ${remote.label} clone command`}
                      onClick={async () => {
                        await navigator.clipboard.writeText(
                          `git clone ${remote.url}`,
                        );
                        setCopied(remote.url);
                        setTimeout(() => setCopied(''), 1600);
                      }}
                    >
                      {copied === remote.url ? <CheckIcon /> : <CopyIcon />}
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}