master-ai/vibn-frontend/components/project-creation/OssSetup.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { JM } from "./modal-theme";
import { DEFAULT_DESIGN_KIT_ID } from "@/lib/design-kits/types";
import {
  SetupHeader, FieldLabel, TextInput, TextArea, AudienceSelector,
  DesignKitSelector,
  PrimaryButton, SecondaryButton, SegmentedTabs, StepDots,
  type SetupProps, type Audience,
} from "./setup-shared";

/**
 * "Run an open source tool" — three-step setup.
 *   Step 0: project name + audience.
 *   Step 1: design system starter kit.
 *   Step 2: either paste a link to the OSS repo (e.g. github.com/twentyhq/twenty)
 *           OR describe the tool you want and let Vibn find one.
 *           Both produce a free-text "what do you want to do with it?" seed
 *           that we hand to the AI on first chat.
 */
export function OssSetup({ workspace, onClose, onBack }: SetupProps) {
  const router = useRouter();
  const [step, setStep] = useState(0);
  const [name, setName] = useState("");
  const [audience, setAudience] = useState<Audience>("team");
  const [designKitId, setDesignKitId] = useState(DEFAULT_DESIGN_KIT_ID);

  const [tab, setTab] = useState<"link" | "describe">("link");
  const [repoUrl, setRepoUrl] = useState("");
  const [needs, setNeeds] = useState("");

  const [loading, setLoading] = useState(false);

  const totalSteps = 3;

  const canContinue0 = name.trim().length > 0;
  const isValidUrl = /^https?:\/\//i.test(repoUrl.trim());
  const canCreate =
    (tab === "link" && isValidUrl) ||
    (tab === "describe" && needs.trim().length > 4);

  const handleBack = () => {
    if (step === 0) onBack();
    else setStep(step - 1);
  };

  const handleCreate = async () => {
    if (!canCreate) return;
    setLoading(true);
    try {
      const seed = tab === "link"
        ? `Install and host this open-source project: ${repoUrl.trim()}`
        : `Find and install an open-source tool that fits this need: ${needs.trim()}`;
      const res = await fetch("/api/projects/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          projectName: name.trim(),
          projectType: "service",
          slug: name.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
          vision: seed,
          product: { name: name.trim() },
          audience,
          designKitId,
          creationMode: "oss",
          sourceData: {
            audience,
            designKitId,
            ...(tab === "link"
              ? { kind: "link", repoUrl: repoUrl.trim() }
              : { kind: "describe", description: needs.trim() }),
          },
        }),
      });
      if (!res.ok) {
        const err = await res.json();
        toast.error(err.error || "Failed to create project");
        return;
      }
      const data = await res.json();
      onClose();
      router.push(`/${workspace}/project/${data.projectId}/product`);
    } catch {
      toast.error("Something went wrong");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: 28 }}>
      <SetupHeader
        icon="◇" label="Run an open source tool" tagline="Install ready-made"
        accent="#059669" onBack={handleBack} onClose={onClose}
      />

      {step === 0 && (
        <>
          <FieldLabel>Project name</FieldLabel>
          <TextInput
            value={name}
            onChange={setName}
            placeholder="e.g. My CRM"
            onKeyDown={e => { if (e.key === "Enter" && canContinue0) setStep(1); }}
            autoFocus
          />

          <AudienceSelector value={audience} onChange={setAudience} />

          <FlowFooter step={0} total={totalSteps} primary={
            <PrimaryButton onClick={() => setStep(1)} disabled={!canContinue0}>
              Next →
            </PrimaryButton>
          } />
        </>
      )}

      {step === 1 && (
        <>
          <DesignKitSelector value={designKitId} onChange={setDesignKitId} />
          <FlowFooter
            step={1}
            total={totalSteps}
            secondary={<SecondaryButton onClick={() => setStep(0)}>← Back</SecondaryButton>}
            primary={<PrimaryButton onClick={() => setStep(2)}>Next →</PrimaryButton>}
          />
        </>
      )}

      {step === 2 && (
        <>
          <SegmentedTabs<"link" | "describe">
            value={tab}
            onChange={setTab}
            options={[
              { id: "link", label: "I have a link" },
              { id: "describe", label: "Help me find one" },
            ]}
          />

          {tab === "link" ? (
            <>
              <FieldLabel>Link to the open source project</FieldLabel>
              <TextInput
                value={repoUrl}
                onChange={setRepoUrl}
                placeholder="https://github.com/twentyhq/twenty"
                autoFocus
              />
              <p style={{ fontSize: 12, color: JM.muted, marginTop: -8, marginBottom: 18, lineHeight: 1.5 }}>
                Paste a GitHub link. Vibn will check it works and host it for you.
              </p>
            </>
          ) : (
            <>
              <FieldLabel>What kind of tool are you looking for?</FieldLabel>
              <TextArea
                value={needs}
                onChange={setNeeds}
                placeholder="A simple CRM where my sales team can track deals and notes on customers."
                rows={6}
                autoFocus
              />
              <p style={{ fontSize: 12, color: JM.muted, marginTop: -8, marginBottom: 18, lineHeight: 1.5 }}>
                Vibn will suggest open-source projects that match and let you pick.
              </p>
            </>
          )}

          <FlowFooter
            step={2}
            total={totalSteps}
            secondary={<SecondaryButton onClick={() => setStep(1)}>← Back</SecondaryButton>}
            primary={
              <PrimaryButton onClick={handleCreate} disabled={!canCreate} loading={loading}>
                {tab === "link" ? "Install →" : "Find tools →"}
              </PrimaryButton>
            }
          />
        </>
      )}
    </div>
  );
}

function FlowFooter({
  step, total, primary, secondary,
}: {
  step: number; total: number;
  primary: React.ReactNode; secondary?: React.ReactNode;
}) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 6 }}>
      <StepDots step={step} total={total} />
      <div style={{ flex: 1 }} />
      {secondary}
      <div style={{ minWidth: 160 }}>{primary}</div>
    </div>
  );
}