import { useState } from "react";
import { api } from "./api/client";
import "./CreateProfile.css";

// Shown once, right after a brand-new OIDC login, before the account has a
// geniusrun profile at all. The only thing asked for is a display name --
// Garmin credentials and every other tunable are filled in afterward via
// the existing Profile screen, same as a fresh single-user install today.
export function CreateProfile({ onCreated }: { onCreated: (displayName: string) => void }) {
  const [displayName, setDisplayName] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = displayName.trim();
    if (!trimmed) {
      setError("Please enter a display name.");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const result = await api.setup(trimmed);
      onCreated(result.display_name);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
      setSubmitting(false);
    }
  };

  return (
    <div className="create-profile">
      <h1>🧞‍♀️ Welcome to geniusrun</h1>
      <p>Let's set up your profile. You can add your Garmin account afterward.</p>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Display name"
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          disabled={submitting}
          autoFocus
        />
        {error && <p className="create-profile-error">{error}</p>}
        <button type="submit" disabled={submitting}>
          {submitting ? "Creating…" : "Continue"}
        </button>
      </form>
    </div>
  );
}