citywalk-stamp/packages/web/src/admin/MusicForm.tsx

import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { adminFetch } from "./adminApi";

type Music = {
  id: string;
  title: string;
  subtitle: string | null;
  audioFile: string;
  sortOrder: number;
  enabled: boolean;
};

export default function MusicForm() {
  const { id } = useParams();
  const navigate = useNavigate();
  const isEdit = !!id;

  const [title, setTitle] = useState("");
  const [subtitle, setSubtitle] = useState("");
  const [audioFile, setAudioFile] = useState("");
  const [sortOrder, setSortOrder] = useState(0);
  const [enabled, setEnabled] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!id) return;
    adminFetch<Music[]>("/music").then((list) => {
      const item = list.find((m) => m.id === id);
      if (item) {
        setTitle(item.title);
        setSubtitle(item.subtitle || "");
        setAudioFile(item.audioFile);
        setSortOrder(item.sortOrder);
        setEnabled(item.enabled);
      }
    });
  }, [id]);

  const handleUpload = async (file: File) => {
    if (!id) {
      setError("请先保存后再上传音频");
      return;
    }
    setError("");
    setUploading(true);
    try {
      const formData = new FormData();
      formData.append("audio", file);
      const data = await adminFetch<{ path: string }>(`/music/${id}/upload`, {
        method: "POST",
        body: formData,
      });
      setAudioFile(data.path);
    } catch (e) {
      setError(e instanceof Error ? e.message : "上传失败");
    } finally {
      setUploading(false);
    }
  };

  const handleSave = async () => {
    setError("");
    if (!title.trim()) {
      setError("请输入标题");
      return;
    }
    setSaving(true);
    try {
      const payload = {
        title: title.trim(),
        subtitle: subtitle.trim() || undefined,
        sortOrder,
        enabled,
      };
      if (isEdit) {
        await adminFetch(`/music/${id}`, {
          method: "PUT",
          body: JSON.stringify(payload),
        });
      } else {
        const music = await adminFetch<Music>("/music", {
          method: "POST",
          body: JSON.stringify(payload),
        });
        navigate(`/admin/music/${music.id}/edit`, { replace: true });
        return;
      }
      navigate("/admin/music");
    } catch (e) {
      setError(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="max-w-xl">
      <h2 className="text-lg font-semibold text-gray-800 mb-4">
        {isEdit ? "编辑音乐" : "添加音乐"}
      </h2>

      <div className="bg-white rounded-lg border border-gray-200 p-5 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">标题</label>
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="如：朝天宫之歌"
            className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm
              focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">副标题</label>
          <input
            value={subtitle}
            onChange={(e) => setSubtitle(e.target.value)}
            placeholder="选填，如：金陵千年韵"
            className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm
              focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">排序</label>
            <input
              type="number"
              value={sortOrder}
              onChange={(e) => setSortOrder(Number(e.target.value))}
              className="w-24 px-3 py-2 border border-gray-300 rounded-md text-sm
                focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
          <div className="flex items-center pt-6">
            <label className="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                checked={enabled}
                onChange={(e) => setEnabled(e.target.checked)}
              />
              启用
            </label>
          </div>
        </div>

        {isEdit && (
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              音频文件
              <span className="text-xs text-gray-400 font-normal ml-2">
                支持 MP3 / M4A / WAV，≤ 20 MB
              </span>
            </label>
            {audioFile && (
              <audio src={audioFile} controls preload="metadata" className="w-full mb-2" />
            )}
            <input
              type="file"
              accept="audio/*,.mp3,.m4a,.wav,.ogg"
              onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
              disabled={uploading}
              className="text-xs text-gray-500"
            />
            {uploading && <p className="text-xs text-gray-500 mt-1">上传中…</p>}
          </div>
        )}

        {!isEdit && (
          <p className="text-xs text-gray-400">保存后可上传音频文件</p>
        )}

        {error && <p className="text-sm text-red-500">{error}</p>}

        <div className="flex gap-3 pt-2">
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md
              hover:bg-blue-700 disabled:opacity-50"
          >
            {saving ? "保存中..." : "保存"}
          </button>
          <button
            onClick={() => navigate("/admin/music")}
            className="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-md hover:bg-gray-50"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  );
}