ftdl/app/download/SearchForm.tsx

'use client';

import { useState } from 'react';
import useSWR from 'swr';
import { formatVersion } from '@/lib/utils';

const fetcher = async (url: string) => {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`HTTP error: ${res.status}`);
  }
  return res.json();
};

interface Project {
  name: string;
  displayName: string;
}

interface SearchFormProps {
  onSearch: (project: string, version: string, commitId: string) => void;
}

export default function SearchForm({ onSearch }: SearchFormProps) {
  const [selectedProject, setSelectedProject] = useState('');
  const [selectedVersion, setSelectedVersion] = useState('');
  const [commitId, setCommitId] = useState('');

  // 获取项目列表
  const { data: projects, isLoading: loadingProjects } = useSWR<Project[]>(
    '/api/projects',
    fetcher
  );

  // 获取版本列表
  const { data: versions, isLoading: loadingVersions } = useSWR<string[]>(
    selectedProject ? `/api/versions?project=${selectedProject}` : null,
    fetcher
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (selectedProject && selectedVersion) {
      onSearch(selectedProject, selectedVersion, commitId);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label htmlFor="project" className="block text-sm font-medium text-gray-700 mb-2">
          项目
        </label>
        <select
          id="project"
          value={selectedProject}
          onChange={(e) => {
            setSelectedProject(e.target.value);
            setSelectedVersion('');
          }}
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        >
          <option value="">选择项目</option>
          {loadingProjects ? (
            <option disabled>加载中...</option>
          ) : (
            projects?.map((project) => (
              <option key={project.name} value={project.name}>
                {project.displayName}
              </option>
            ))
          )}
        </select>
      </div>

      <div>
        <label htmlFor="version" className="block text-sm font-medium text-gray-700 mb-2">
          版本
        </label>
        <select
          id="version"
          value={selectedVersion}
          onChange={(e) => setSelectedVersion(e.target.value)}
          disabled={!selectedProject}
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
          required
        >
          <option value="">选择版本</option>
          {loadingVersions ? (
            <option disabled>加载中...</option>
          ) : (
            versions?.map((version) => (
              <option key={version} value={version}>
                {formatVersion(version)}
              </option>
            ))
          )}
        </select>
      </div>

      <div>
        <label htmlFor="commit" className="block text-sm font-medium text-gray-700 mb-2">
          Commit ID (可选)
        </label>
        <input
          type="text"
          id="commit"
          value={commitId}
          onChange={(e) => setCommitId(e.target.value)}
          placeholder="输入 commit id..."
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <button
        type="submit"
        disabled={!selectedProject || !selectedVersion}
        className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
      >
        查询
      </button>
    </form>
  );
}