Genarrative/src/components/common/CreativeAudioInputPanel.tsx

import { Mic, Pause, Upload } from 'lucide-react';
import { useRef, useState } from 'react';

import {
  type CreativeAudioAsset,
  readCreativeAudioFileAsAsset,
} from './creativeAudioFileAsset';
import { PlatformActionButton } from './PlatformActionButton';
import { PlatformPillBadge } from './PlatformPillBadge';
import { PlatformSubpanel } from './PlatformSubpanel';

type CreativeAudioInputPanelProps<TAsset extends CreativeAudioAsset> = {
  disabled?: boolean;
  title: string;
  defaultLabel: string;
  limitLabel?: string;
  asset: TAsset | null;
  buildRecordedFileName: () => string;
  onAssetChange: (asset: TAsset | null) => void;
  onError: (message: string | null) => void;
  readFileAsAsset?: (
    file: File,
    source: 'uploaded' | 'recorded',
  ) => Promise<TAsset>;
};

export function CreativeAudioInputPanel<TAsset extends CreativeAudioAsset>({
  disabled = false,
  title,
  defaultLabel,
  limitLabel,
  asset,
  buildRecordedFileName,
  onAssetChange,
  onError,
  readFileAsAsset = readCreativeAudioFileAsAsset,
}: CreativeAudioInputPanelProps<TAsset>) {
  const [isRecording, setIsRecording] = useState(false);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<BlobPart[]>([]);

  const startRecording = async () => {
    if (disabled || isRecording) {
      return;
    }

    try {
      if (
        typeof navigator === 'undefined' ||
        !navigator.mediaDevices?.getUserMedia ||
        typeof MediaRecorder === 'undefined'
      ) {
        throw new Error('当前浏览器不支持录音。');
      }
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(stream);
      chunksRef.current = [];
      recorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          chunksRef.current.push(event.data);
        }
      };
      recorder.onstop = () => {
        const blob = new Blob(chunksRef.current, {
          type: recorder.mimeType || 'audio/webm',
        });
        stream.getTracks().forEach((track) => track.stop());
        const file = new File([blob], buildRecordedFileName(), {
          type: blob.type,
        });
        void readFileAsAsset(file, 'recorded')
          .then(onAssetChange)
          .catch((caughtError) => {
            onError(
              caughtError instanceof Error
                ? caughtError.message
                : '录音保存失败。',
            );
          });
      };
      recorderRef.current = recorder;
      recorder.start();
      setIsRecording(true);
      onError(null);
    } catch (caughtError) {
      onError(
        caughtError instanceof Error ? caughtError.message : '录音启动失败。',
      );
    }
  };

  const stopRecording = () => {
    recorderRef.current?.stop();
    recorderRef.current = null;
    setIsRecording(false);
  };

  return (
    <PlatformSubpanel
      title={
        <span className="flex min-w-0 items-center gap-2">
          <span>{title}</span>
          {limitLabel ? (
            <PlatformPillBadge tone="muted" size="xs" className="px-2 py-1">
              {limitLabel}
            </PlatformPillBadge>
          ) : null}
        </span>
      }
      titleVariant="strong"
      actions={
        asset ? (
          <PlatformActionButton
            onClick={() => onAssetChange(null)}
            disabled={disabled}
            tone="ghost"
            size="xs"
            className="min-h-0"
          >
            重置
          </PlatformActionButton>
        ) : null
      }
      bodyClassName="mt-3 flex flex-wrap items-center gap-2"
    >
      <PlatformActionButton
        asChild="label"
        tone="secondary"
        className={`min-h-10 cursor-pointer gap-2 px-3 ${
          disabled ? 'pointer-events-none opacity-55' : ''
        }`}
      >
        <Upload className="h-4 w-4" />
        上传
        <input
          type="file"
          accept="audio/*"
          disabled={disabled}
          className="sr-only"
          onChange={(event) => {
            const file = event.currentTarget.files?.[0] ?? null;
            event.currentTarget.value = '';
            if (!file) {
              return;
            }
            void readFileAsAsset(file, 'uploaded')
              .then((nextAsset) => {
                onError(null);
                onAssetChange(nextAsset);
              })
              .catch((caughtError) => {
                onError(
                  caughtError instanceof Error
                    ? caughtError.message
                    : '音频读取失败。',
                );
              });
          }}
        />
      </PlatformActionButton>
      <PlatformActionButton
        disabled={disabled}
        onClick={() => {
          if (isRecording) {
            stopRecording();
            return;
          }
          void startRecording();
        }}
        tone="ghost"
        className="min-h-10 gap-2 px-3"
      >
        {isRecording ? (
          <Pause className="h-4 w-4" />
        ) : (
          <Mic className="h-4 w-4" />
        )}
        {isRecording ? '停止' : '录音'}
      </PlatformActionButton>
      {asset?.audioSrc ? (
        <audio controls src={asset.audioSrc} className="h-10 max-w-full" />
      ) : (
        <div className="text-xs font-bold text-[var(--platform-text-soft)]">
          {asset ? '音效已选择' : defaultLabel}
        </div>
      )}
    </PlatformSubpanel>
  );
}

export default CreativeAudioInputPanel;