kanban-dev-webapp/src/components/admin/project-form.tsx

"use client";

import { useState, useTransition } from "react";
import { Plus } from "lucide-react";

import { createProject } from "@/app/actions/projects";
import type { ClientRecord } from "@/lib/pb/types";

export function NewProjectForm({ clients }: { clients: ClientRecord[] }) {
  const [open, setOpen] = useState(false);
  const [clientId, setClientId] = useState(clients[0]?.id ?? "");
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [repoOwner, setRepoOwner] = useState("");
  const [repoName, setRepoName] = useState("");
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  if (clients.length === 0) {
    return (
      <p className="text-xs text-text-muted">Create a client first.</p>
    );
  }

  function submit(event: React.FormEvent) {
    event.preventDefault();
    if (!name.trim() || !clientId) return;
    setError(null);

    startTransition(async () => {
      try {
        await createProject({
          clientId,
          name,
          description,
          repoOwner,
          repoName,
          color: "#2f6dad",
        });
        setName("");
        setDescription("");
        setRepoOwner("");
        setRepoName("");
        setOpen(false);
      } catch (e) {
        setError(e instanceof Error ? e.message : "Could not create that project");
      }
    });
  }

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg transition-colors hover:bg-brand-hover"
      >
        <Plus size={14} strokeWidth={2} />
        New project
      </button>
    );
  }

  const field =
    "w-full rounded-lg border border-border-subtle bg-panel px-3 py-2 text-sm text-text-primary outline-none focus:border-brand";

  return (
    <form
      onSubmit={submit}
      className="w-full space-y-3 rounded-[var(--radius-tile)] border border-border-subtle bg-surface p-4"
    >
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="space-y-1">
          <span className="text-xs text-text-muted">Client</span>
          <select
            value={clientId}
            onChange={(event) => setClientId(event.target.value)}
            className={field}
          >
            {clients.map((client) => (
              <option key={client.id} value={client.id}>
                {client.name}
              </option>
            ))}
          </select>
        </label>

        <label className="space-y-1">
          <span className="text-xs text-text-muted">Project name</span>
          <input
            autoFocus
            value={name}
            onChange={(event) => setName(event.target.value)}
            className={field}
          />
        </label>
      </div>

      <label className="block space-y-1">
        <span className="text-xs text-text-muted">Description</span>
        <textarea
          rows={2}
          value={description}
          onChange={(event) => setDescription(event.target.value)}
          className={field}
        />
      </label>

      <div className="grid gap-3 sm:grid-cols-2">
        <label className="space-y-1">
          <span className="text-xs text-text-muted">
            Repository owner{" "}
            <span className="text-text-muted">(used from Phase 2)</span>
          </span>
          <input
            value={repoOwner}
            onChange={(event) => setRepoOwner(event.target.value)}
            placeholder="David"
            className={field}
          />
        </label>

        <label className="space-y-1">
          <span className="text-xs text-text-muted">Repository name</span>
          <input
            value={repoName}
            onChange={(event) => setRepoName(event.target.value)}
            placeholder="WFDASH-WEBAPP"
            className={field}
          />
        </label>
      </div>

      {error && (
        <p role="alert" className="text-xs text-accent">
          {error}
        </p>
      )}

      <div className="flex items-center gap-2">
        <button
          type="submit"
          disabled={pending || !name.trim()}
          className="rounded-lg bg-brand px-3 py-2 text-sm font-medium text-brand-fg disabled:opacity-50"
        >
          {pending ? "Creating…" : "Create project"}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="px-2 py-2 text-sm text-text-muted hover:text-text-secondary"
        >
          Cancel
        </button>
      </div>
    </form>
  );
}