import { useState } from "react";
import { API_URL } from "../config/api.ts";
import type { Playlist, RawPlaylist } from "../model.ts";
import { deserializePlaylist } from "../model.ts";
import { useAuth } from "../hooks/useAuth.ts";

interface PlaylistCreateFormProps {
  /** If provided, the new playlist will have this dump added to it. */
  dumpId?: string;
  onCreated: (playlist: Playlist) => void;
  onCancel: () => void;
}

export function PlaylistCreateForm(
  { dumpId, onCreated, onCancel }: PlaylistCreateFormProps,
) {
  const { authFetch } = useAuth();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [isPublic, setIsPublic] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await authFetch(`${API_URL}/api/playlists`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: title.trim(),
          description: description.trim() || undefined,
          isPublic,
        }),
      });
      const body = await res.json();
      if (!body.success) {
        setError(body.error?.message ?? "Failed to create playlist");
        return;
      }
      const playlist = deserializePlaylist(body.data as RawPlaylist);
      if (dumpId) {
        await authFetch(
          `${API_URL}/api/playlists/${playlist.id}/dumps/${dumpId}`,
          { method: "POST" },
        );
      }
      onCreated(playlist);
    } catch {
      setError("Failed to create playlist");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form className="modal-new-playlist-form" onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        autoFocus
        required
      />
      <textarea
        placeholder="Description (optional)"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        rows={3}
      />
      <div className="dump-mode-toggle">
        <button
          type="button"
          className={isPublic ? "active" : ""}
          onClick={() => setIsPublic(true)}
        >
          Public
        </button>
        <button
          type="button"
          className={!isPublic ? "active" : ""}
          onClick={() => setIsPublic(false)}
        >
          Private
        </button>
      </div>
      {error && <p className="form-error">{error}</p>}
      <div className="form-actions">
        <div className="form-actions-right">
          <button
            type="button"
            className="btn-secondary"
            onClick={onCancel}
          >
            Cancel
          </button>
          <button
            type="submit"
            className="btn-primary"
            disabled={submitting}
          >
            {submitting ? "Creating…" : dumpId ? "Create & Add" : "Create"}
          </button>
        </div>
      </div>
    </form>
  );
}