import { Button } from "@code/ui/components/button";
import { FolderGit2, LoaderCircle } from "lucide-react";

import type { WorkspaceState } from "@/lib/workspace/types";

export const ProjectConnectForm = ({
  workspace,
}: {
  readonly workspace: WorkspaceState;
}) => (
  <main className="grid min-h-svh place-items-center bg-[#f2f0e7] px-5 text-[#20201d]">
    <form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault();
        void workspace.connectRepository();
      }}
    >
      <span className="grid size-11 place-items-center bg-[#20201d] text-white">
        <FolderGit2 className="size-5" />
      </span>
      <h1 className="mt-6 text-2xl font-semibold">Connect a project</h1>
      <p className="mt-2 text-sm leading-6 text-[#68665e]">
        Turn actionable project conversation into proposed Work with exact
        provenance.
      </p>
      <input
        aria-label="Public Git repository URL"
        className="mt-6 h-12 w-full border border-[#c9c5b9] bg-[#fffefa] px-3 text-sm outline-none focus:border-[#55564e]"
        onChange={(event) => workspace.setRepository(event.target.value)}
        placeholder="https://github.com/owner/repository"
        required
        value={workspace.repository}
      />
      {workspace.error ? (
        <p className="mt-2 text-xs text-red-700">{workspace.error.message}</p>
      ) : null}
      <Button
        className="mt-3 h-12 w-full"
        disabled={workspace.pending}
        type="submit"
      >
        {workspace.pending ? (
          <LoaderCircle className="size-4 animate-spin" />
        ) : null}
        {workspace.pending ? "Connecting" : "Connect project"}
      </Button>
    </form>
  </main>
);
