<!-- 基本的なファイル入力 -->
<input type="file" name="document" />
 
<!-- 複数ファイル選択を許可 -->
<input type="file" name="photos" multiple />
 
<!-- 受け入れるファイルタイプを制限 -->
<input type="file" accept=".pdf,.doc,.docx" />
<input type="file" accept="image/*" />
<input type="file" accept="image/jpeg,image/png,image/webp" />
<input type="file" accept="video/*" />
<input type="file" accept="audio/*" />
 
<!-- カメラを直接起動（モバイル） -->
<input type="file" accept="image/*" capture="environment" />
<input type="file" accept="image/*" capture="user" />
<input type="file" accept="video/*" capture="environment" />
 
<!-- ディレクトリ選択（Chrome/Edge） -->
<input type="file" webkitdirectory />

// accept 属性で指定可能な形式一覧
const acceptFormats = {
  // MIME タイプによる指定
  'image/jpeg': 'JPEG画像',
  'image/png': 'PNG画像',
  'image/webp': 'WebP画像',
  'image/gif': 'GIF画像',
  'image/svg+xml': 'SVG画像',
  'application/pdf': 'PDFファイル',
  'application/json': 'JSONファイル',
  'text/csv': 'CSVファイル',
  'text/plain': 'テキストファイル',
  'application/zip': 'ZIPアーカイブ',
  'video/mp4': 'MP4動画',
  'audio/mpeg': 'MP3音声',
 
  // ワイルドカードによる指定
  'image/*': 'すべての画像形式',
  'video/*': 'すべての動画形式',
  'audio/*': 'すべての音声形式',
 
  // 拡張子による指定
  '.pdf': 'PDFファイル',
  '.xlsx': 'Excelファイル',
  '.docx': 'Wordファイル',
  '.pptx': 'PowerPointファイル',
};

// File オブジェクトのプロパティ
interface FileInfo {
  name: string;            // ファイル名（例: "photo.jpg"）
  size: number;            // ファイルサイズ（バイト）
  type: string;            // MIME タイプ（例: "image/jpeg"）
  lastModified: number;    // 最終更新日時（UNIXタイムスタンプ）
  webkitRelativePath: string; // webkitdirectory使用時の相対パス
}
 
// FileList の操作
function handleFileInput(event: Event) {
  const input = event.target as HTMLInputElement;
  const files = input.files; // FileList オブジェクト
 
  if (!files || files.length === 0) {
    console.log('ファイルが選択されていません');
    return;
  }
 
  // FileList は配列ではないが、イテラブル
  // Array.from() で配列に変換可能
  const fileArray = Array.from(files);
 
  fileArray.forEach(file => {
    console.log(`名前: ${file.name}`);
    console.log(`サイズ: ${formatFileSize(file.size)}`);
    console.log(`タイプ: ${file.type}`);
    console.log(`最終更新: ${new Date(file.lastModified).toLocaleString()}`);
  });
}
 
// ファイルサイズのフォーマット関数
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}

// FileReader の読み取りメソッド一覧
class FileReaderExample {
  // テキストファイルを読み取り
  readAsText(file: File, encoding = 'UTF-8'): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = () => reject(reader.error);
      reader.readAsText(file, encoding);
    });
  }
 
  // 画像をData URLとして読み取り（プレビュー用）
  readAsDataURL(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = () => reject(reader.error);
      reader.readAsDataURL(file);
    });
  }
 
  // バイナリデータとして読み取り
  readAsArrayBuffer(file: File): Promise<ArrayBuffer> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as ArrayBuffer);
      reader.onerror = () => reject(reader.error);
      reader.readAsArrayBuffer(file);
    });
  }
 
  // 進捗付き読み取り
  readWithProgress(
    file: File,
    onProgress: (percent: number) => void
  ): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
 
      reader.onprogress = (event) => {
        if (event.lengthComputable) {
          const percent = Math.round((event.loaded / event.total) * 100);
          onProgress(percent);
        }
      };
 
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = () => reject(reader.error);
      reader.readAsDataURL(file);
    });
  }
}

// Blob の生成と操作
class BlobOperations {
  // テキストからBlobを生成
  createTextBlob(content: string, type = 'text/plain'): Blob {
    return new Blob([content], { type });
  }
 
  // JSONからBlobを生成
  createJsonBlob(data: unknown): Blob {
    const json = JSON.stringify(data, null, 2);
    return new Blob([json], { type: 'application/json' });
  }
 
  // Blob をスライス（部分的に読み取り）
  sliceBlob(blob: Blob, start: number, end: number): Blob {
    return blob.slice(start, end, blob.type);
  }
 
  // Blob から File に変換
  blobToFile(blob: Blob, filename: string): File {
    return new File([blob], filename, {
      type: blob.type,
      lastModified: Date.now(),
    });
  }
 
  // Blob URLの生成と解放
  createObjectURL(blob: Blob): string {
    return URL.createObjectURL(blob);
  }
 
  revokeObjectURL(url: string): void {
    URL.revokeObjectURL(url);
  }
 
  // ArrayBuffer から Blob へ変換
  arrayBufferToBlob(buffer: ArrayBuffer, type: string): Blob {
    return new Blob([buffer], { type });
  }
 
  // Blob をダウンロード
  downloadBlob(blob: Blob, filename: string): void {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
}

import { useForm, SubmitHandler } from 'react-hook-form';
import { useState, useCallback } from 'react';
 
// フォームの型定義
interface UploadFormData {
  title: string;
  description: string;
  category: string;
  file: FileList;
}
 
// バリデーションルール
const FILE_VALIDATION = {
  maxSize: 5 * 1024 * 1024, // 5MB
  allowedTypes: ['image/jpeg', 'image/png', 'image/webp'] as const,
  allowedExtensions: ['.jpg', '.jpeg', '.png', '.webp'] as const,
};
 
function FileUploadForm() {
  const [preview, setPreview] = useState<string | null>(null);
  const [uploadStatus, setUploadStatus] = useState<
    'idle' | 'uploading' | 'success' | 'error'
  >('idle');
 
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    watch,
    reset,
    setError,
  } = useForm<UploadFormData>();
 
  // ファイル変更を監視してプレビュー生成
  const watchFile = watch('file');
 
  React.useEffect(() => {
    if (watchFile?.[0]) {
      const file = watchFile[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        setPreview(e.target?.result as string);
      };
      reader.readAsDataURL(file);
    } else {
      setPreview(null);
    }
  }, [watchFile]);
 
  const onSubmit: SubmitHandler<UploadFormData> = async (data) => {
    try {
      setUploadStatus('uploading');
      const formData = new FormData();
      formData.append('file', data.file[0]);
      formData.append('title', data.title);
      formData.append('description', data.description);
      formData.append('category', data.category);
 
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
        // Content-Type ヘッダーは設定しない
        // ブラウザが自動的に multipart/form-data を設定する
      });
 
      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'アップロードに失敗しました');
      }
 
      const result = await response.json();
      setUploadStatus('success');
      reset();
      setPreview(null);
      console.log('Upload successful:', result);
    } catch (error) {
      setUploadStatus('error');
      setError('root', {
        message: error instanceof Error ? error.message : 'アップロードエラー',
      });
    }
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      {/* タイトル入力 */}
      <div>
        <label htmlFor="title" className="block text-sm font-medium">
          タイトル
        </label>
        <input
          id="title"
          type="text"
          {...register('title', {
            required: 'タイトルは必須です',
            maxLength: { value: 100, message: '100文字以内で入力してください' },
          })}
          className="mt-1 block w-full border rounded-md px-3 py-2"
        />
        {errors.title && (
          <p className="mt-1 text-sm text-red-600">{errors.title.message}</p>
        )}
      </div>
 
      {/* 説明入力 */}
      <div>
        <label htmlFor="description" className="block text-sm font-medium">
          説明
        </label>
        <textarea
          id="description"
          rows={3}
          {...register('description', {
            maxLength: { value: 500, message: '500文字以内で入力してください' },
          })}
          className="mt-1 block w-full border rounded-md px-3 py-2"
        />
        {errors.description && (
          <p className="mt-1 text-sm text-red-600">{errors.description.message}</p>
        )}
      </div>
 
      {/* カテゴリ選択 */}
      <div>
        <label htmlFor="category" className="block text-sm font-medium">
          カテゴリ
        </label>
        <select
          id="category"
          {...register('category', { required: 'カテゴリを選択してください' })}
          className="mt-1 block w-full border rounded-md px-3 py-2"
        >
          <option value="">選択してください</option>
          <option value="profile">プロフィール画像</option>
          <option value="document">ドキュメント</option>
          <option value="gallery">ギャラリー</option>
        </select>
        {errors.category && (
          <p className="mt-1 text-sm text-red-600">{errors.category.message}</p>
        )}
      </div>
 
      {/* ファイル入力 */}
      <div>
        <label htmlFor="file" className="block text-sm font-medium">
          ファイル
        </label>
        <input
          id="file"
          type="file"
          accept="image/jpeg,image/png,image/webp"
          {...register('file', {
            required: 'ファイルを選択してください',
            validate: {
              size: (files) =>
                !files[0] ||
                files[0].size <= FILE_VALIDATION.maxSize ||
                `ファイルサイズは${formatFileSize(FILE_VALIDATION.maxSize)}以下にしてください`,
              type: (files) =>
                !files[0] ||
                (FILE_VALIDATION.allowedTypes as readonly string[]).includes(
                  files[0].type
                ) ||
                'JPEG、PNG、WebP形式のみ対応しています',
              notEmpty: (files) =>
                !files[0] ||
                files[0].size > 0 ||
                '空のファイルはアップロードできません',
            },
          })}
          className="mt-1 block w-full text-sm file:mr-4 file:py-2 file:px-4
            file:rounded-md file:border-0 file:text-sm file:font-semibold
            file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
        />
        {errors.file && (
          <p className="mt-1 text-sm text-red-600">{errors.file.message}</p>
        )}
        <p className="mt-1 text-xs text-gray-500">
          JPEG, PNG, WebP（最大5MB）
        </p>
      </div>
 
      {/* プレビュー表示 */}
      {preview && (
        <div className="mt-4">
          <p className="text-sm font-medium mb-2">プレビュー:</p>
          <img
            src={preview}
            alt="プレビュー"
            className="max-w-xs max-h-48 object-contain rounded-lg border"
          />
        </div>
      )}
 
      {/* エラーメッセージ */}
      {errors.root && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-md">
          <p className="text-sm text-red-600">{errors.root.message}</p>
        </div>
      )}
 
      {/* 送信ボタン */}
      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full py-2 px-4 bg-blue-600 text-white rounded-md
          hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isSubmitting ? 'アップロード中...' : 'アップロード'}
      </button>
 
      {/* ステータス表示 */}
      {uploadStatus === 'success' && (
        <p className="text-sm text-green-600">アップロードが完了しました</p>
      )}
    </form>
  );
}

// FormData の高度な使い方
class FormDataBuilder {
  private formData: FormData;
 
  constructor() {
    this.formData = new FormData();
  }
 
  // 単一ファイルの追加
  addFile(key: string, file: File): this {
    this.formData.append(key, file, file.name);
    return this;
  }
 
  // 複数ファイルの追加（同じキーに複数）
  addFiles(key: string, files: File[]): this {
    files.forEach(file => {
      this.formData.append(key, file, file.name);
    });
    return this;
  }
 
  // Blobの追加（ファイル名を指定）
  addBlob(key: string, blob: Blob, filename: string): this {
    this.formData.append(key, blob, filename);
    return this;
  }
 
  // テキストデータの追加
  addField(key: string, value: string | number | boolean): this {
    this.formData.append(key, String(value));
    return this;
  }
 
  // JSONデータをフィールドとして追加
  addJson(key: string, data: unknown): this {
    this.formData.append(key, JSON.stringify(data));
    return this;
  }
 
  // FormData の内容をログ出力（デバッグ用）
  debug(): void {
    for (const [key, value] of this.formData.entries()) {
      if (value instanceof File) {
        console.log(`${key}: [File] ${value.name} (${formatFileSize(value.size)})`);
      } else {
        console.log(`${key}: ${value}`);
      }
    }
  }
 
  build(): FormData {
    return this.formData;
  }
}
 
// 使用例
async function uploadWithMetadata(
  files: File[],
  metadata: { userId: string; tags: string[] }
) {
  const formData = new FormDataBuilder()
    .addFiles('files', files)
    .addField('userId', metadata.userId)
    .addJson('tags', metadata.tags)
    .addField('uploadedAt', new Date().toISOString())
    .build();
 
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
    // 注意: Content-Type は設定しない
    // ブラウザが boundary パラメータ付きで自動設定する
  });
 
  return response.json();
}

// Fetch API によるアップロード
// メリット: モダンなPromiseベースAPI、シンプルなコード
// デメリット: アップロード進捗を標準ではサポートしない
async function uploadWithFetch(file: File): Promise<UploadResult> {
  const formData = new FormData();
  formData.append('file', file);
 
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
    signal: AbortSignal.timeout(60000), // 60秒タイムアウト
  });
 
  if (!response.ok) {
    throw new Error(`Upload failed: ${response.status} ${response.statusText}`);
  }
 
  return response.json();
}
 
// XMLHttpRequest によるアップロード
// メリット: アップロード進捗イベントをサポート
// デメリット: コールバックベース、やや冗長
function uploadWithXHR(
  file: File,
  options: {
    onProgress?: (percent: number) => void;
    onComplete?: (result: UploadResult) => void;
    onError?: (error: Error) => void;
    timeout?: number;
  }
): { abort: () => void } {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);
 
  // アップロード進捗
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percent = Math.round((event.loaded / event.total) * 100);
      options.onProgress?.(percent);
    }
  });
 
  // 完了
  xhr.addEventListener('load', () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      const result = JSON.parse(xhr.responseText);
      options.onComplete?.(result);
    } else {
      options.onError?.(new Error(`Upload failed: ${xhr.status}`));
    }
  });
 
  // エラー
  xhr.addEventListener('error', () => {
    options.onError?.(new Error('Network error during upload'));
  });
 
  // タイムアウト
  xhr.addEventListener('timeout', () => {
    options.onError?.(new Error('Upload timeout'));
  });
 
  xhr.timeout = options.timeout ?? 60000;
  xhr.open('POST', '/api/upload');
  xhr.send(formData);
 
  return { abort: () => xhr.abort() };
}
 
// Fetch API + ReadableStream でプログレスを取得する方法（ダウンロードのみ）
// 注意: Fetch API ではアップロードの進捗は取得できないが、
// レスポンスのダウンロード進捗は取得可能
async function fetchWithDownloadProgress(url: string): Promise<Blob> {
  const response = await fetch(url);
  const contentLength = Number(response.headers.get('content-length'));
  const reader = response.body!.getReader();
  const chunks: Uint8Array[] = [];
  let receivedLength = 0;
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
 
    chunks.push(value);
    receivedLength += value.length;
 
    if (contentLength) {
      const percent = Math.round((receivedLength / contentLength) * 100);
      console.log(`Download progress: ${percent}%`);
    }
  }
 
  return new Blob(chunks);
}

// 素のHTML5 Drag and Drop APIでの実装
function createDropZone(element: HTMLElement) {
  // ドラッグイベントの処理
  // 重要: dragover と dragenter で preventDefault() を呼ぶ必要がある
  // これをしないと drop イベントが発火しない
 
  let dragCounter = 0; // ネストされた子要素での dragenter/dragleave 対策
 
  element.addEventListener('dragenter', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter++;
    element.classList.add('drag-active');
  });
 
  element.addEventListener('dragleave', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter--;
    if (dragCounter === 0) {
      element.classList.remove('drag-active');
    }
  });
 
  element.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // dropEffect を設定してカーソルを変更
    if (e.dataTransfer) {
      e.dataTransfer.dropEffect = 'copy';
    }
  });
 
  element.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter = 0;
    element.classList.remove('drag-active');
 
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      handleFiles(Array.from(files));
    }
  });
 
  // ウィンドウ全体でのドラッグ防止（ブラウザのデフォルト動作を抑止）
  window.addEventListener('dragover', (e) => e.preventDefault());
  window.addEventListener('drop', (e) => e.preventDefault());
}
 
function handleFiles(files: File[]) {
  files.forEach(file => {
    console.log(`Dropped: ${file.name} (${formatFileSize(file.size)})`);
  });
}

import { useDropzone, FileRejection, DropEvent } from 'react-dropzone';
import { useState, useCallback, useMemo, useEffect } from 'react';
 
// アップロードファイルの型定義
interface UploadFile {
  id: string;
  file: File;
  preview: string;
  status: 'pending' | 'uploading' | 'success' | 'error';
  progress: number;
  error?: string;
  url?: string;
}
 
// Dropzone の設定型
interface DropzoneConfig {
  maxFiles: number;
  maxSize: number;
  acceptedTypes: Record<string, string[]>;
  onUpload: (files: File[]) => Promise<void>;
}
 
function AdvancedFileDropzone({ maxFiles, maxSize, acceptedTypes, onUpload }: DropzoneConfig) {
  const [uploadFiles, setUploadFiles] = useState<UploadFile[]>([]);
 
  // ファイルが追加されたときの処理
  const onDrop = useCallback(
    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
      // 既存ファイル数 + 新規ファイル数がmaxFilesを超えないか確認
      const remainingSlots = maxFiles - uploadFiles.length;
      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
 
      if (acceptedFiles.length > remainingSlots) {
        toast.warning(
          `最大${maxFiles}ファイルまでです。${acceptedFiles.length - remainingSlots}ファイルが除外されました。`
        );
      }
 
      // 承認されたファイルをステートに追加
      const newUploadFiles: UploadFile[] = filesToAdd.map(file => ({
        id: crypto.randomUUID(),
        file,
        preview: file.type.startsWith('image/')
          ? URL.createObjectURL(file)
          : '',
        status: 'pending' as const,
        progress: 0,
      }));
 
      setUploadFiles(prev => [...prev, ...newUploadFiles]);
 
      // 拒否されたファイルのエラー表示
      rejectedFiles.forEach(({ file, errors }) => {
        const messages = errors.map(e => {
          switch (e.code) {
            case 'file-too-large':
              return `${file.name}: ファイルサイズが大きすぎます（最大${formatFileSize(maxSize)}）`;
            case 'file-invalid-type':
              return `${file.name}: サポートされていないファイル形式です`;
            case 'too-many-files':
              return `ファイル数が上限を超えています`;
            default:
              return `${file.name}: ${e.message}`;
          }
        });
        messages.forEach(msg => toast.error(msg));
      });
    },
    [uploadFiles.length, maxFiles, maxSize]
  );
 
  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
    isFocused,
    open,
  } = useDropzone({
    accept: acceptedTypes,
    maxSize,
    maxFiles: maxFiles - uploadFiles.length,
    onDrop,
    noClick: false,
    noKeyboard: false,
    preventDropOnDocument: true,
    // ドラッグ&ドロップのカスタムバリデーション
    validator: (file) => {
      // ファイル名に特殊文字が含まれていないか確認
      const invalidChars = /[<>:"/\\|?*\x00-\x1F]/;
      if (invalidChars.test(file.name)) {
        return {
          code: 'invalid-filename',
          message: 'ファイル名に使用できない文字が含まれています',
        };
      }
      return null;
    },
  });
 
  // ドロップゾーンのスタイル
  const dropzoneStyle = useMemo(() => {
    let className = 'border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-200 ';
    if (isDragReject) {
      className += 'border-red-500 bg-red-50 ';
    } else if (isDragAccept) {
      className += 'border-green-500 bg-green-50 ';
    } else if (isDragActive) {
      className += 'border-blue-500 bg-blue-50 ';
    } else if (isFocused) {
      className += 'border-blue-400 bg-blue-25 ';
    } else {
      className += 'border-gray-300 hover:border-gray-400 ';
    }
    return className;
  }, [isDragActive, isDragAccept, isDragReject, isFocused]);
 
  // ファイルの削除
  const removeFile = useCallback((id: string) => {
    setUploadFiles(prev => {
      const file = prev.find(f => f.id === id);
      if (file?.preview) {
        URL.revokeObjectURL(file.preview);
      }
      return prev.filter(f => f.id !== id);
    });
  }, []);
 
  // すべてのファイルをアップロード
  const uploadAll = useCallback(async () => {
    const pendingFiles = uploadFiles.filter(f => f.status === 'pending');
    if (pendingFiles.length === 0) return;
 
    for (const uploadFile of pendingFiles) {
      setUploadFiles(prev =>
        prev.map(f =>
          f.id === uploadFile.id ? { ...f, status: 'uploading' as const } : f
        )
      );
 
      try {
        await onUpload([uploadFile.file]);
        setUploadFiles(prev =>
          prev.map(f =>
            f.id === uploadFile.id
              ? { ...f, status: 'success' as const, progress: 100 }
              : f
          )
        );
      } catch (error) {
        setUploadFiles(prev =>
          prev.map(f =>
            f.id === uploadFile.id
              ? {
                  ...f,
                  status: 'error' as const,
                  error: error instanceof Error ? error.message : 'アップロードに失敗しました',
                }
              : f
          )
        );
      }
    }
  }, [uploadFiles, onUpload]);
 
  // メモリリーク防止: コンポーネントのアンマウント時にObject URLを解放
  useEffect(() => {
    return () => {
      uploadFiles.forEach(file => {
        if (file.preview) {
          URL.revokeObjectURL(file.preview);
        }
      });
    };
  }, [uploadFiles]);
 
  return (
    <div className="space-y-4">
      {/* ドロップゾーン */}
      <div {...getRootProps()} className={dropzoneStyle}>
        <input {...getInputProps()} />
        <div className="space-y-3">
          {/* アイコン */}
          <svg
            className="mx-auto h-12 w-12 text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
            />
          </svg>
 
          {isDragReject ? (
            <p className="text-red-600 font-medium">
              このファイル形式はサポートされていません
            </p>
          ) : isDragActive ? (
            <p className="text-blue-600 font-medium">ここにドロップしてください</p>
          ) : (
            <>
              <p className="text-gray-600">
                ファイルをドラッグ&ドロップ、または
                <button
                  type="button"
                  onClick={open}
                  className="text-blue-600 hover:text-blue-700 font-medium mx-1"
                >
                  クリックして選択
                </button>
              </p>
              <p className="text-xs text-gray-500">
                JPEG, PNG, WebP（最大{formatFileSize(maxSize)}、最大{maxFiles}ファイル）
              </p>
            </>
          )}
        </div>
      </div>
 
      {/* ファイルリスト */}
      {uploadFiles.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <h4 className="text-sm font-medium">
              ファイル一覧 ({uploadFiles.length}/{maxFiles})
            </h4>
            <button
              type="button"
              onClick={uploadAll}
              disabled={!uploadFiles.some(f => f.status === 'pending')}
              className="text-sm text-blue-600 hover:text-blue-700 disabled:text-gray-400"
            >
              すべてアップロード
            </button>
          </div>
 
          {uploadFiles.map(uploadFile => (
            <FileListItem
              key={uploadFile.id}
              file={uploadFile}
              onRemove={() => removeFile(uploadFile.id)}
            />
          ))}
        </div>
      )}
    </div>
  );
}
 
// ファイルリストの各アイテム
function FileListItem({
  file,
  onRemove,
}: {
  file: UploadFile;
  onRemove: () => void;
}) {
  return (
    <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
      {/* プレビュー */}
      {file.preview ? (
        <img
          src={file.preview}
          alt={file.file.name}
          className="w-12 h-12 object-cover rounded"
        />
      ) : (
        <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
          <span className="text-xs text-gray-500">FILE</span>
        </div>
      )}
 
      {/* ファイル情報 */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{file.file.name}</p>
        <p className="text-xs text-gray-500">{formatFileSize(file.file.size)}</p>
 
        {/* プログレスバー */}
        {file.status === 'uploading' && (
          <div className="mt-1 w-full bg-gray-200 rounded-full h-1.5">
            <div
              className="bg-blue-500 h-1.5 rounded-full transition-all"
              style={{ width: `${file.progress}%` }}
            />
          </div>
        )}
 
        {/* エラーメッセージ */}
        {file.status === 'error' && (
          <p className="text-xs text-red-600 mt-1">{file.error}</p>
        )}
      </div>
 
      {/* ステータスアイコン / 削除ボタン */}
      <div className="flex-shrink-0">
        {file.status === 'success' ? (
          <span className="text-green-500">完了</span>
        ) : file.status === 'uploading' ? (
          <span className="text-blue-500">アップロード中...</span>
        ) : (
          <button
            type="button"
            onClick={onRemove}
            className="text-gray-400 hover:text-red-500 transition-colors"
            aria-label="ファイルを削除"
          >
            &times;
          </button>
        )}
      </div>
    </div>
  );
}

import { useState, useEffect, useCallback, useRef } from 'react';
 
// ページ全体のドラッグ&ドロップを検知するカスタムフック
function usePageDragDrop(onFilesDropped: (files: File[]) => void) {
  const [isDragging, setIsDragging] = useState(false);
  const dragCounterRef = useRef(0);
 
  const handleDragEnter = useCallback((e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounterRef.current++;
 
    // ファイルがドラッグされているか確認
    if (e.dataTransfer?.types.includes('Files')) {
      setIsDragging(true);
    }
  }, []);
 
  const handleDragLeave = useCallback((e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounterRef.current--;
 
    if (dragCounterRef.current === 0) {
      setIsDragging(false);
    }
  }, []);
 
  const handleDragOver = useCallback((e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);
 
  const handleDrop = useCallback(
    (e: DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      dragCounterRef.current = 0;
      setIsDragging(false);
 
      const files = e.dataTransfer?.files;
      if (files && files.length > 0) {
        onFilesDropped(Array.from(files));
      }
    },
    [onFilesDropped]
  );
 
  useEffect(() => {
    document.addEventListener('dragenter', handleDragEnter);
    document.addEventListener('dragleave', handleDragLeave);
    document.addEventListener('dragover', handleDragOver);
    document.addEventListener('drop', handleDrop);
 
    return () => {
      document.removeEventListener('dragenter', handleDragEnter);
      document.removeEventListener('dragleave', handleDragLeave);
      document.removeEventListener('dragover', handleDragOver);
      document.removeEventListener('drop', handleDrop);
    };
  }, [handleDragEnter, handleDragLeave, handleDragOver, handleDrop]);
 
  return isDragging;
}
 
// ドラッグ&ドロップオーバーレイコンポーネント
function DragDropOverlay({ onFilesDropped }: { onFilesDropped: (files: File[]) => void }) {
  const isDragging = usePageDragDrop(onFilesDropped);
 
  if (!isDragging) return null;
 
  return (
    <div className="fixed inset-0 z-50 bg-blue-500/20 backdrop-blur-sm flex items-center justify-center">
      <div className="bg-white rounded-2xl p-12 shadow-2xl border-2 border-dashed border-blue-500">
        <div className="text-center space-y-4">
          <svg
            className="mx-auto h-16 w-16 text-blue-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
            />
          </svg>
          <p className="text-xl font-semibold text-blue-700">
            ファイルをここにドロップしてアップロード
          </p>
          <p className="text-sm text-blue-500">
            対応形式: JPEG, PNG, WebP, PDF
          </p>
        </div>
      </div>
    </div>
  );
}

import { useState, useRef, useCallback } from 'react';
 
// アップロード状態の型定義
interface UploadState {
  status: 'idle' | 'uploading' | 'processing' | 'success' | 'error' | 'cancelled';
  progress: number;      // 0-100
  loaded: number;        // アップロード済みバイト数
  total: number;         // 合計バイト数
  speed: number;         // バイト/秒
  remainingTime: number; // 残り秒数
  error?: string;
  result?: UploadResult;
}
 
interface UploadResult {
  url: string;
  key: string;
  size: number;
  mimeType: string;
}
 
// 高度なファイルアップロードフック
function useFileUpload(uploadUrl: string) {
  const [state, setState] = useState<UploadState>({
    status: 'idle',
    progress: 0,
    loaded: 0,
    total: 0,
    speed: 0,
    remainingTime: 0,
  });
 
  const xhrRef = useRef<XMLHttpRequest | null>(null);
  const startTimeRef = useRef<number>(0);
  const lastLoadedRef = useRef<number>(0);
  const lastTimeRef = useRef<number>(0);
 
  const upload = useCallback(
    async (file: File): Promise<UploadResult> => {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhrRef.current = xhr;
        startTimeRef.current = Date.now();
        lastLoadedRef.current = 0;
        lastTimeRef.current = Date.now();
 
        // アップロード進捗イベント
        xhr.upload.addEventListener('progress', (event) => {
          if (!event.lengthComputable) return;
 
          const now = Date.now();
          const elapsedSinceLastUpdate = (now - lastTimeRef.current) / 1000;
 
          // 速度計算（移動平均）
          let speed = 0;
          if (elapsedSinceLastUpdate > 0) {
            const bytesInPeriod = event.loaded - lastLoadedRef.current;
            speed = bytesInPeriod / elapsedSinceLastUpdate;
          }
 
          // 残り時間計算
          const remaining = event.total - event.loaded;
          const remainingTime = speed > 0 ? remaining / speed : 0;
 
          setState({
            status: 'uploading',
            progress: Math.round((event.loaded / event.total) * 100),
            loaded: event.loaded,
            total: event.total,
            speed,
            remainingTime,
          });
 
          lastLoadedRef.current = event.loaded;
          lastTimeRef.current = now;
        });
 
        // アップロード完了後のサーバー処理待ち
        xhr.upload.addEventListener('load', () => {
          setState(prev => ({
            ...prev,
            status: 'processing',
            progress: 100,
          }));
        });
 
        // レスポンス受信完了
        xhr.addEventListener('load', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            const result = JSON.parse(xhr.responseText) as UploadResult;
            setState(prev => ({
              ...prev,
              status: 'success',
              result,
            }));
            resolve(result);
          } else {
            const errorMessage = `アップロード失敗: ${xhr.status} ${xhr.statusText}`;
            setState(prev => ({
              ...prev,
              status: 'error',
              error: errorMessage,
            }));
            reject(new Error(errorMessage));
          }
        });
 
        // ネットワークエラー
        xhr.addEventListener('error', () => {
          const errorMessage = 'ネットワークエラーが発生しました';
          setState(prev => ({
            ...prev,
            status: 'error',
            error: errorMessage,
          }));
          reject(new Error(errorMessage));
        });
 
        // キャンセル
        xhr.addEventListener('abort', () => {
          setState(prev => ({
            ...prev,
            status: 'cancelled',
          }));
          reject(new Error('アップロードがキャンセルされました'));
        });
 
        // タイムアウト
        xhr.addEventListener('timeout', () => {
          const errorMessage = 'アップロードがタイムアウトしました';
          setState(prev => ({
            ...prev,
            status: 'error',
            error: errorMessage,
          }));
          reject(new Error(errorMessage));
        });
 
        // FormData を構築
        const formData = new FormData();
        formData.append('file', file);
 
        // リクエスト設定
        xhr.timeout = 5 * 60 * 1000; // 5分
        xhr.open('POST', uploadUrl);
        xhr.send(formData);
      });
    },
    [uploadUrl]
  );
 
  // キャンセル機能
  const cancel = useCallback(() => {
    if (xhrRef.current) {
      xhrRef.current.abort();
      xhrRef.current = null;
    }
  }, []);
 
  // リセット機能
  const reset = useCallback(() => {
    cancel();
    setState({
      status: 'idle',
      progress: 0,
      loaded: 0,
      total: 0,
      speed: 0,
      remainingTime: 0,
    });
  }, [cancel]);
 
  return { state, upload, cancel, reset };
}

// 詳細なプログレス表示コンポーネント
function UploadProgressDisplay({ state }: { state: UploadState }) {
  if (state.status === 'idle') return null;
 
  const getStatusColor = () => {
    switch (state.status) {
      case 'uploading': return 'bg-blue-500';
      case 'processing': return 'bg-yellow-500';
      case 'success': return 'bg-green-500';
      case 'error': return 'bg-red-500';
      case 'cancelled': return 'bg-gray-500';
      default: return 'bg-gray-300';
    }
  };
 
  const getStatusMessage = () => {
    switch (state.status) {
      case 'uploading':
        return `アップロード中... ${state.progress}%`;
      case 'processing':
        return 'サーバーで処理中...';
      case 'success':
        return 'アップロード完了';
      case 'error':
        return state.error || 'エラーが発生しました';
      case 'cancelled':
        return 'キャンセルされました';
      default:
        return '';
    }
  };
 
  const formatSpeed = (bytesPerSecond: number): string => {
    if (bytesPerSecond === 0) return '計算中...';
    return `${formatFileSize(bytesPerSecond)}/s`;
  };
 
  const formatTime = (seconds: number): string => {
    if (seconds <= 0 || !isFinite(seconds)) return '計算中...';
    if (seconds < 60) return `残り ${Math.ceil(seconds)} 秒`;
    if (seconds < 3600) return `残り ${Math.ceil(seconds / 60)} 分`;
    return `残り ${Math.ceil(seconds / 3600)} 時間`;
  };
 
  return (
    <div className="space-y-2 p-4 bg-gray-50 rounded-lg">
      {/* ステータスメッセージ */}
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">{getStatusMessage()}</span>
        {state.status === 'uploading' && (
          <span className="text-gray-500">
            {formatFileSize(state.loaded)} / {formatFileSize(state.total)}
          </span>
        )}
      </div>
 
      {/* プログレスバー */}
      <div className="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
        <div
          className={`h-2.5 rounded-full transition-all duration-300 ${getStatusColor()}`}
          style={{ width: `${state.progress}%` }}
        />
      </div>
 
      {/* 詳細情報 */}
      {state.status === 'uploading' && (
        <div className="flex justify-between text-xs text-gray-500">
          <span>速度: {formatSpeed(state.speed)}</span>
          <span>{formatTime(state.remainingTime)}</span>
        </div>
      )}
 
      {/* 処理中アニメーション */}
      {state.status === 'processing' && (
        <div className="flex items-center gap-2 text-xs text-yellow-600">
          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
            <circle
              cx="12" cy="12" r="10"
              stroke="currentColor" strokeWidth="4"
              fill="none" opacity="0.25"
            />
            <path
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
          <span>画像の最適化・リサイズを実行中...</span>
        </div>
      )}
    </div>
  );
}
 
// 円形プログレス表示
function CircularProgress({
  progress,
  size = 64,
  strokeWidth = 4,
}: {
  progress: number;
  size?: number;
  strokeWidth?: number;
}) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (progress / 100) * circumference;
 
  return (
    <div className="relative inline-flex items-center justify-center">
      <svg width={size} height={size} className="transform -rotate-90">
        {/* 背景円 */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="#e5e7eb"
          strokeWidth={strokeWidth}
        />
        {/* プログレス円 */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="#3b82f6"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          className="transition-all duration-300"
        />
      </svg>
      <span className="absolute text-xs font-semibold">{progress}%</span>
    </div>
  );
}

// 複数ファイルを同時にアップロード（並列数制限あり）
async function uploadFilesWithConcurrency(
  files: File[],
  uploadFn: (file: File) => Promise<UploadResult>,
  options: {
    concurrency?: number;
    onProgress?: (completed: number, total: number) => void;
    onFileComplete?: (file: File, result: UploadResult) => void;
    onFileError?: (file: File, error: Error) => void;
  } = {}
): Promise<Map<string, UploadResult | Error>> {
  const { concurrency = 3, onProgress, onFileComplete, onFileError } = options;
  const results = new Map<string, UploadResult | Error>();
  let completedCount = 0;
 
  // セマフォ実装（同時アップロード数制限）
  const semaphore = {
    count: concurrency,
    queue: [] as (() => void)[],
    acquire(): Promise<void> {
      return new Promise(resolve => {
        if (this.count > 0) {
          this.count--;
          resolve();
        } else {
          this.queue.push(resolve);
        }
      });
    },
    release(): void {
      if (this.queue.length > 0) {
        const next = this.queue.shift()!;
        next();
      } else {
        this.count++;
      }
    },
  };
 
  const uploadWithSemaphore = async (file: File) => {
    await semaphore.acquire();
    try {
      const result = await uploadFn(file);
      results.set(file.name, result);
      onFileComplete?.(file, result);
    } catch (error) {
      const err = error instanceof Error ? error : new Error(String(error));
      results.set(file.name, err);
      onFileError?.(file, err);
    } finally {
      completedCount++;
      onProgress?.(completedCount, files.length);
      semaphore.release();
    }
  };
 
  await Promise.all(files.map(uploadWithSemaphore));
  return results;
}
 
// React で使う並列アップロードフック
function useMultiFileUpload(options: {
  uploadUrl: string;
  concurrency?: number;
}) {
  const [files, setFiles] = useState<Map<string, {
    file: File;
    status: 'pending' | 'uploading' | 'success' | 'error';
    progress: number;
    error?: string;
    result?: UploadResult;
  }>>(new Map());
 
  const [overallProgress, setOverallProgress] = useState(0);
 
  const addFiles = useCallback((newFiles: File[]) => {
    setFiles(prev => {
      const next = new Map(prev);
      newFiles.forEach(file => {
        next.set(file.name, {
          file,
          status: 'pending',
          progress: 0,
        });
      });
      return next;
    });
  }, []);
 
  const uploadAll = useCallback(async () => {
    const pendingFiles = Array.from(files.entries())
      .filter(([, f]) => f.status === 'pending')
      .map(([, f]) => f.file);
 
    if (pendingFiles.length === 0) return;
 
    await uploadFilesWithConcurrency(
      pendingFiles,
      async (file) => {
        setFiles(prev => {
          const next = new Map(prev);
          const entry = next.get(file.name);
          if (entry) {
            entry.status = 'uploading';
          }
          return next;
        });
 
        const formData = new FormData();
        formData.append('file', file);
 
        const response = await fetch(options.uploadUrl, {
          method: 'POST',
          body: formData,
        });
 
        if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
        return response.json();
      },
      {
        concurrency: options.concurrency ?? 3,
        onProgress: (completed, total) => {
          setOverallProgress(Math.round((completed / total) * 100));
        },
        onFileComplete: (file, result) => {
          setFiles(prev => {
            const next = new Map(prev);
            const entry = next.get(file.name);
            if (entry) {
              entry.status = 'success';
              entry.progress = 100;
              entry.result = result;
            }
            return next;
          });
        },
        onFileError: (file, error) => {
          setFiles(prev => {
            const next = new Map(prev);
            const entry = next.get(file.name);
            if (entry) {
              entry.status = 'error';
              entry.error = error.message;
            }
            return next;
          });
        },
      }
    );
  }, [files, options.uploadUrl, options.concurrency]);
 
  return { files, addFiles, uploadAll, overallProgress };
}