import { CopyCommand } from '#/components/molecules/copy-command.jsx';
import { account } from '#/lib/git.js';

/**
 * What an empty repository opens to, the way a forge lays it out: the clone
 * address for someone who has done this before, then the commands that make
 * a repository and push it, then the ones that push a repository that
 * exists. The instructions stay until the first push fills the repository,
 * so closing this page loses nothing. A repository in a space carries its
 * space's clone URL, which is what the server listed for it.
 * @param {{record: Record<string, unknown>, space?: string}} props
 */
export function QuickSetup({ record, space }) {
  const cloneUrl =
    typeof record.cloneUrl === 'string'
      ? record.cloneUrl
      : `atproto://${account.handle}/${record.name}`;
  const remote = `git remote add origin ${cloneUrl}`;

  return (
    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <section className="border-border border-b bg-muted px-5 py-5">
        <h2 className="font-semibold text-[16px] text-foreground">
          Quick setup, if you have done this before
        </h2>
        <CopyCommand
          command={cloneUrl}
          label="Copy the clone address"
          className="mt-3"
        />
        <p className="mt-3 text-[12.5px] text-muted-foreground">
          {space
            ? 'This repository is private. Only the people added to it can read it and push to it.'
            : 'Pushing needs the git helper.'}{' '}
          Install it with{' '}
          <code className="font-mono">npm install -g @pdsjs/git</code>, then{' '}
          <code className="font-mono">
            git-remote-atproto login {account.handle}
          </code>
          .
        </p>
      </section>

      <section className="border-border border-b px-5 py-5">
        <h2 className="font-semibold text-[16px] text-foreground">
          …or create a new repository on the command line
        </h2>
        <CopyCommand
          className="mt-3"
          label="Copy the create-and-push commands"
          lines={[
            `echo "# ${record.name}" >> README.md`,
            'git init',
            'git add README.md',
            'git commit -m "first commit"',
            'git branch -M main',
            remote,
            'git push -u origin main',
          ]}
        />
      </section>

      <section className="px-5 py-5">
        <h2 className="font-semibold text-[16px] text-foreground">
          …or push an existing repository from the command line
        </h2>
        <CopyCommand
          className="mt-3"
          label="Copy the push commands"
          lines={[remote, 'git branch -M main', 'git push -u origin main']}
        />
      </section>
    </div>
  );
}