vibn-frontend/components/project-creation/MigrateSetup.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { JM } from "./modal-theme";
import { SetupHeader, FieldLabel, TextInput, PrimaryButton, type SetupProps } from "./setup-shared";

const HOSTING_OPTIONS = [
  { value: "", label: "Select hosting provider" },
  { value: "vercel", label: "Vercel" },
  { value: "aws", label: "AWS (EC2 / ECS / Elastic Beanstalk)" },
  { value: "heroku", label: "Heroku" },
  { value: "digitalocean", label: "DigitalOcean (Droplet / App Platform)" },
  { value: "gcp", label: "Google Cloud Platform" },
  { value: "azure", label: "Microsoft Azure" },
  { value: "railway", label: "Railway" },
  { value: "render", label: "Render" },
  { value: "netlify", label: "Netlify" },
  { value: "self-hosted", label: "Self-hosted / VPS" },
  { value: "other", label: "Other" },
];

export function MigrateSetup({ workspace, onClose, onBack }: SetupProps) {
  const router = useRouter();
  const [name, setName] = useState("");
  const [repoUrl, setRepoUrl] = useState("");
  const [liveUrl, setLiveUrl] = useState("");
  const [hosting, setHosting] = useState("");
  const [pat, setPat] = useState("");
  const [loading, setLoading] = useState(false);

  const isValidRepo = repoUrl.trim().startsWith("http");
  const isValidLive = liveUrl.trim().startsWith("http");
  const canCreate = name.trim().length > 0 && (isValidRepo || isValidLive);

  const handleCreate = async () => {
    if (!canCreate) return;
    setLoading(true);
    try {
      const res = await fetch("/api/projects/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          projectName: name.trim(),
          projectType: "web-app",
          slug: name.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
          product: { name: name.trim() },
          creationMode: "migration",
          githubRepoUrl: repoUrl.trim() || undefined,
          githubToken: pat.trim() || undefined,
          sourceData: {
            liveUrl: liveUrl.trim() || undefined,
            hosting: hosting || undefined,
          },
        }),
      });
      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}/overview`);
    } catch {
      toast.error("Something went wrong");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: 28 }}>
      <SetupHeader
        icon="⇢" label="Migrate Product" tagline="Move an existing product"
        accent="#4a2a5a" onBack={onBack} onClose={onClose}
      />

      <FieldLabel>Product name</FieldLabel>
      <TextInput
        value={name}
        onChange={setName}
        placeholder="What is this product called?"
        autoFocus
      />

      <FieldLabel>
        Repository URL{" "}
        <span style={{ color: JM.muted, fontWeight: 400 }}>(recommended)</span>
      </FieldLabel>
      <TextInput
        value={repoUrl}
        onChange={setRepoUrl}
        placeholder="https://github.com/yourorg/your-repo"
      />

      <FieldLabel>
        Live URL{" "}
        <span style={{ color: JM.muted, fontWeight: 400 }}>(optional)</span>
      </FieldLabel>
      <TextInput
        value={liveUrl}
        onChange={setLiveUrl}
        placeholder="https://yourproduct.com"
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 4 }}>
        <div>
          <FieldLabel>Hosting provider</FieldLabel>
          <select
            value={hosting}
            onChange={e => setHosting(e.target.value)}
            style={{
              width: "100%", padding: "10px 13px", marginBottom: 16,
              borderRadius: 8, border: `1px solid ${JM.border}`,
              background: JM.inputBg, fontSize: 13,
              fontFamily: JM.fontSans, color: hosting ? JM.ink : JM.muted,
              outline: "none", boxSizing: "border-box", appearance: "none",
              backgroundImage: `url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E")`,
              backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center",
            }}
            onFocus={e => (e.currentTarget.style.borderColor = JM.indigo)}
            onBlur={e => (e.currentTarget.style.borderColor = JM.border)}
          >
            {HOSTING_OPTIONS.map(o => (
              <option key={o.value} value={o.value}>{o.label}</option>
            ))}
          </select>
        </div>
        <div>
          <FieldLabel>
            PAT{" "}<span style={{ color: JM.muted, fontWeight: 400 }}>(private repos)</span>
          </FieldLabel>
          <input
            type="password"
            value={pat}
            onChange={e => setPat(e.target.value)}
            placeholder="ghp_…"
            style={{
              width: "100%", padding: "10px 13px", marginBottom: 16,
              borderRadius: 8, border: `1px solid ${JM.border}`,
              background: JM.inputBg, fontSize: 14,
              fontFamily: JM.fontSans, color: JM.ink,
              outline: "none", boxSizing: "border-box",
            }}
            onFocus={e => (e.currentTarget.style.borderColor = JM.indigo)}
            onBlur={e => (e.currentTarget.style.borderColor = JM.border)}
          />
        </div>
      </div>

      <div style={{
        fontSize: 12, color: JM.mid, marginBottom: 20, lineHeight: 1.5,
        padding: "12px 14px", background: JM.cream, borderRadius: 8,
        border: `1px solid ${JM.border}`, fontFamily: JM.fontSans,
      }}>
        <strong style={{ color: "#5B21B6" }}>Non-destructive.</strong> Vibn builds a full audit and migration plan. Your existing product stays live throughout the entire migration process.
      </div>

      <PrimaryButton onClick={handleCreate} disabled={!canCreate} loading={loading}>
        Start migration plan →
      </PrimaryButton>
    </div>
  );
}