Genarrative/apps/admin-web/src/pages/AdminDebugHttpPage.tsx

import {
  AdminAlert,
  AdminButton,
  AdminEmptyState,
  AdminField,
  AdminFormRow,
  AdminInfoList,
  AdminPage,
  AdminPageHeading,
  AdminPanel,
} from '@genarrative/shared/components';
import { Plus, Send, Trash2 } from 'lucide-react';
import { FormEvent, useMemo, useState } from 'react';

import { debugAdminHttp } from '../api/adminApiClient';
import type {
  AdminDebugHeaderInput,
  AdminDebugHttpMethod,
  AdminDebugHttpResponse,
} from '../api/adminApiTypes';
import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
import { formatUnknownJson, handlePageError } from './pageUtils';

interface AdminDebugHttpPageProps {
  token: string;
  onUnauthorized: (message?: string) => void;
}

const httpMethods: AdminDebugHttpMethod[] = [
  'GET',
  'POST',
  'PUT',
  'PATCH',
  'DELETE',
];

export function AdminDebugHttpPage({
  token,
  onUnauthorized,
}: AdminDebugHttpPageProps) {
  const [method, setMethod] = useState<AdminDebugHttpMethod>('GET');
  const [path, setPath] = useState('/healthz');
  const [body, setBody] = useState('');
  const [headers, setHeaders] = useState<AdminDebugHeaderInput[]>([]);
  const [result, setResult] = useState<AdminDebugHttpResponse | null>(null);
  const [errorMessage, setErrorMessage] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { confirmWrite, confirmDialog } = useAdminWriteConfirm();

  const jsonPreview = useMemo(
    () => formatUnknownJson(result?.bodyJson),
    [result?.bodyJson],
  );

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (isSubmitting) {
      return;
    }

    setErrorMessage('');
    if (method !== 'GET') {
      const confirmed = await confirmWrite({
        action: `${method} 调试请求`,
        target: path.trim(),
      });
      if (!confirmed) {
        return;
      }
    }

    setIsSubmitting(true);
    try {
      const response = await debugAdminHttp(token, {
        method,
        path: path.trim(),
        headers: headers.filter((header) => header.name.trim()),
        body,
      });
      setResult(response);
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <AdminPage>
      <AdminPageHeading title="API 调试" description="受控同源请求" />

      <div className="admin-two-column">
        <AdminPanel as="form" onSubmit={handleSubmit}>
          <AdminFormRow>
            <AdminField label="Method" compact>
              <select
                value={method}
                onChange={(event) =>
                  setMethod(event.target.value as AdminDebugHttpMethod)
                }
              >
                {httpMethods.map((item) => (
                  <option key={item} value={item}>
                    {item}
                  </option>
                ))}
              </select>
            </AdminField>
            <AdminField label="Path" fill>
              <input
                value={path}
                onChange={(event) => setPath(event.target.value)}
              />
            </AdminField>
          </AdminFormRow>

          <section className="admin-subsection">
            <div className="admin-subsection-heading">
              <span>Headers</span>
              <AdminButton
                variant="ghost"
                type="button"
                onClick={() =>
                  setHeaders((current) => [
                    ...current,
                    {
                      name: '',
                      value: '',
                    },
                  ])
                }
              >
                <Plus size={16} aria-hidden="true" />
              </AdminButton>
            </div>
            <div className="admin-header-editor">
              {headers.map((header, index) => (
                <div className="admin-header-row" key={index}>
                  <input
                    value={header.name}
                    onChange={(event) =>
                      setHeaders((current) =>
                        current.map((item, itemIndex) =>
                          itemIndex === index
                            ? {
                                ...item,
                                name: event.target.value,
                              }
                            : item,
                        ),
                      )
                    }
                  />
                  <input
                    value={header.value}
                    onChange={(event) =>
                      setHeaders((current) =>
                        current.map((item, itemIndex) =>
                          itemIndex === index
                            ? {
                                ...item,
                                value: event.target.value,
                              }
                            : item,
                        ),
                      )
                    }
                  />
                  <AdminButton
                    variant="ghost"
                    title="移除"
                    type="button"
                    onClick={() =>
                      setHeaders((current) =>
                        current.filter((_, itemIndex) => itemIndex !== index),
                      )
                    }
                  >
                    <Trash2 size={16} aria-hidden="true" />
                  </AdminButton>
                </div>
              ))}
            </div>
          </section>

          <AdminField label="Body">
            <textarea
              rows={9}
              value={body}
              onChange={(event) => setBody(event.target.value)}
            />
          </AdminField>

          {errorMessage ? <AdminAlert>{errorMessage}</AdminAlert> : null}

          <AdminButton
            variant="primary"
            disabled={isSubmitting || !path.trim().startsWith('/')}
            type="submit"
          >
            <Send size={17} aria-hidden="true" />
            <span>{isSubmitting ? '发送中' : '发送'}</span>
          </AdminButton>
        </AdminPanel>

        <AdminPanel
          title="结果"
          count={result ? `${result.status} ${result.statusText}` : '-'}
          className="admin-result-panel"
        >
          {result ? (
            <>
              <AdminInfoList
                items={[
                  {
                    label: <>Status</>,
                    value: <>{result.status}</>,
                  },
                  {
                    label: <>Headers</>,
                    value: <>{result.headers.length}</>,
                  },
                ]}
              />
              <pre className="admin-code-block">
                {jsonPreview || result.bodyText || '(empty)'}
              </pre>
            </>
          ) : (
            <AdminEmptyState>暂无结果</AdminEmptyState>
          )}
        </AdminPanel>
      </div>
      {confirmDialog}
    </AdminPage>
  );
}