import { LoaderCircle, X } from "lucide-react";
import type { FormEvent } from "react";

import type { MobileWorkspaceView } from "./models";

export interface MobileProjectManagerPanelProps {
  readonly data: MobileWorkspaceView;
  readonly onClose: () => void;
  readonly onProjectSelect: (projectId: string) => void;
  readonly onRepositoryChange: (value: string) => void;
  readonly onRepositoryConnect: (event: FormEvent<HTMLFormElement>) => void;
  readonly pendingAction?: string | null;
  readonly repositoryValue: string;
  readonly statusMessage?: string;
}

export const MobileProjectManagerPanel = ({
  data,
  onClose,
  onProjectSelect,
  onRepositoryChange,
  onRepositoryConnect,
  pendingAction,
  repositoryValue,
  statusMessage,
}: MobileProjectManagerPanelProps) => {
  const connecting = pendingAction === "connect";

  return (
    <section
      aria-label="Add project"
      className="absolute inset-0 z-40 flex flex-col bg-[#f7f8f5] text-[#11110f]"
    >
      <header className="flex h-20 shrink-0 items-center border-b border-[#e9eae6] bg-white px-4">
        <div>
          <h2 className="text-[18px] font-semibold">Projects</h2>
          <p className="text-[11px] text-[#807b76]">
            Connect a repository to Zopu.
          </p>
        </div>
        <button
          aria-label="Close projects"
          className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
          onClick={onClose}
          type="button"
        >
          <X className="size-5" />
        </button>
      </header>

      <div className="min-h-0 flex-1 overflow-y-auto p-4">
        <div className="rounded-[24px] bg-white p-4">
          <label
            className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase"
            htmlFor="stack-project-selector"
          >
            Connected project
          </label>
          <select
            className="mt-2 h-11 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[13px] font-semibold outline-none focus-visible:ring-2 focus-visible:ring-[#315dc0]"
            disabled={data.projects.length === 0}
            id="stack-project-selector"
            onChange={(event) => onProjectSelect(event.currentTarget.value)}
            value={data.selectedProjectId ?? ""}
          >
            {data.projects.length === 0 ? (
              <option value="">No connected projects</option>
            ) : (
              data.projects.map((project) => (
                <option key={project.id} value={project.id}>
                  {project.repositoryPath ?? project.name}
                </option>
              ))
            )}
          </select>

          <form className="mt-5" onSubmit={onRepositoryConnect}>
            <label
              className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase"
              htmlFor="stack-repository-url"
            >
              Add project
            </label>
            <input
              aria-label="Git repository URL"
              className="mt-2 h-12 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[12px] outline-none placeholder:text-[#aaa7a3] focus-visible:ring-2 focus-visible:ring-[#315dc0]"
              disabled={connecting}
              id="stack-repository-url"
              onChange={(event) =>
                onRepositoryChange(event.currentTarget.value)
              }
              placeholder="https://git.openputer.com/owner/repo.git"
              required
              type="url"
              value={repositoryValue}
            />
            <button
              className="mt-3 flex h-11 w-full items-center justify-center gap-2 rounded-[14px] bg-[#c8ff00] text-[13px] font-semibold text-black disabled:opacity-50"
              disabled={connecting || !repositoryValue.trim()}
              type="submit"
            >
              {connecting ? (
                <LoaderCircle className="size-4 animate-spin" />
              ) : null}
              {connecting ? "Connecting…" : "Connect project"}
            </button>
          </form>
        </div>

        {statusMessage ? (
          <p className="mt-3 text-center text-[11px] text-[#807b76]">
            {statusMessage}
          </p>
        ) : null}
      </div>
    </section>
  );
};
