// 各ライブラリでの同等スキーマ定義の比較
 
// === Zod ===
import { z } from 'zod';
const zodSchema = z.object({
  name: z.string().min(1).max(100),
  age: z.number().int().min(0).max(150),
  email: z.string().email(),
});
type ZodUser = z.infer<typeof zodSchema>;
 
// === Yup ===
import * as yup from 'yup';
const yupSchema = yup.object({
  name: yup.string().required().min(1).max(100),
  age: yup.number().integer().min(0).max(150).required(),
  email: yup.string().email().required(),
});
type YupUser = yup.InferType<typeof yupSchema>;
 
// === Valibot ===
import * as v from 'valibot';
const valibotSchema = v.object({
  name: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
  age: v.pipe(v.number(), v.integer(), v.minValue(0), v.maxValue(150)),
  email: v.pipe(v.string(), v.email()),
});
type ValibotUser = v.InferOutput<typeof valibotSchema>;
 
// === ArkType ===
import { type } from 'arktype';
const arkSchema = type({
  name: 'string>=1<=100',
  age: 'integer>=0<=150',
  email: 'string.email',
});
type ArkUser = typeof arkSchema.infer;

// Zodの最大の利点: スキーマから型を自動生成
const userSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1),
  email: z.string().email(),
  age: z.number().int().positive(),
  role: z.enum(['admin', 'user', 'moderator']),
  createdAt: z.date(),
});
 
// スキーマから型を自動推論 - 手動でinterface定義する必要がない
type User = z.infer<typeof userSchema>;
// => {
//   id: string;
//   name: string;
//   email: string;
//   age: number;
//   role: 'admin' | 'user' | 'moderator';
//   createdAt: Date;
// }
 
// 部分型も簡単に生成
type UserUpdate = z.infer<typeof userSchema.partial()>;
type UserCreate = z.infer<typeof userSchema.omit({ id: true, createdAt: true })>;

import { z } from 'zod';
 
// 文字列のバリデーション
const stringSchemas = {
  // 基本
  required: z.string().min(1, '必須項目です'),
 
  // 長さ制約
  username: z.string()
    .min(3, '3文字以上で入力してください')
    .max(20, '20文字以下で入力してください'),
 
  // 正規表現パターン
  alphanumeric: z.string()
    .regex(/^[a-zA-Z0-9]+$/, '英数字のみ使用可能です'),
 
  // 組み込みバリデーション
  email: z.string().email('有効なメールアドレスを入力してください'),
  url: z.string().url('有効なURLを入力してください'),
  uuid: z.string().uuid('有効なUUID形式で入力してください'),
  cuid: z.string().cuid(),
  datetime: z.string().datetime(),
  ip: z.string().ip(),
 
  // トリム + 変換
  trimmed: z.string().trim().min(1, '空白のみは不可です'),
  lowercase: z.string().toLowerCase(),
  uppercase: z.string().toUpperCase(),
 
  // 日本語対応: 全角文字のバリデーション
  japaneseName: z.string()
    .min(1, '名前を入力してください')
    .max(50, '50文字以下で入力してください')
    .regex(/^[ぁ-んァ-ヶー一-龠々\s]+$/, '日本語で入力してください'),
 
  // 電話番号（日本）
  phoneJP: z.string()
    .regex(/^0\d{1,4}-?\d{1,4}-?\d{3,4}$/, '有効な電話番号を入力してください'),
 
  // 郵便番号（日本）
  postalCodeJP: z.string()
    .regex(/^\d{3}-?\d{4}$/, '有効な郵便番号を入力してください'),
};
 
// 数値のバリデーション
const numberSchemas = {
  // 基本
  positive: z.number().positive('正の数を入力してください'),
  nonNegative: z.number().nonnegative('0以上の数を入力してください'),
  integer: z.number().int('整数を入力してください'),
 
  // 範囲
  age: z.number()
    .int('整数を入力してください')
    .min(0, '0以上で入力してください')
    .max(150, '150以下で入力してください'),
 
  // 小数桁数
  price: z.number()
    .nonnegative('0以上で入力してください')
    .multipleOf(0.01, '小数点以下2桁まで入力可能です'),
 
  // 文字列からの変換（フォーム入力値対応）
  fromString: z.coerce.number()
    .int('整数を入力してください')
    .min(1, '1以上で入力してください'),
};
 
// 日付のバリデーション
const dateSchemas = {
  // 基本
  date: z.coerce.date(),
 
  // 範囲
  pastDate: z.coerce.date()
    .max(new Date(), '未来の日付は指定できません'),
 
  futureDate: z.coerce.date()
    .min(new Date(), '過去の日付は指定できません'),
 
  // カスタム範囲
  dateRange: z.coerce.date()
    .min(new Date('2020-01-01'), '2020年1月1日以降の日付を指定してください')
    .max(new Date('2030-12-31'), '2030年12月31日以前の日付を指定してください'),
};
 
// 真偽値のバリデーション
const booleanSchemas = {
  // 利用規約同意（trueのみ許可）
  agreeToTerms: z.literal(true, {
    errorMap: () => ({ message: '利用規約に同意してください' }),
  }),
 
  // チェックボックス（フォーム値の変換）
  checkbox: z.coerce.boolean(),
};
 
// 列挙型のバリデーション
const enumSchemas = {
  // Zodのenum
  role: z.enum(['admin', 'user', 'moderator'], {
    errorMap: () => ({ message: '有効な権限を選択してください' }),
  }),
 
  // TypeScriptのenumとの連携
  // enum Status { Active = 'active', Inactive = 'inactive' }
  status: z.nativeEnum({ Active: 'active', Inactive: 'inactive' } as const),
};

import { z } from 'zod';
 
// ユーザー登録フォームスキーマ
const registerSchema = z.object({
  // ユーザー名
  username: z.string()
    .min(3, '3文字以上で入力してください')
    .max(20, '20文字以下で入力してください')
    .regex(/^[a-zA-Z0-9_]+$/, '英数字とアンダースコアのみ使用可能')
    .refine(
      (val) => !['admin', 'root', 'system', 'null', 'undefined'].includes(val.toLowerCase()),
      '予約語は使用できません'
    ),
 
  // メールアドレス
  email: z.string()
    .email('有効なメールアドレスを入力してください')
    .max(254, 'メールアドレスが長すぎます'),
 
  // パスワード
  password: z.string()
    .min(8, '8文字以上で入力してください')
    .max(100, '100文字以下で入力してください')
    .regex(/[A-Z]/, '大文字を1文字以上含めてください')
    .regex(/[a-z]/, '小文字を1文字以上含めてください')
    .regex(/[0-9]/, '数字を1文字以上含めてください')
    .regex(/[^A-Za-z0-9]/, '記号を1文字以上含めてください'),
 
  // パスワード確認
  confirmPassword: z.string(),
 
  // 生年月日
  birthDate: z.coerce.date()
    .max(new Date(), '未来の日付は指定できません')
    .refine(
      (date) => {
        const age = Math.floor(
          (Date.now() - date.getTime()) / (365.25 * 24 * 60 * 60 * 1000)
        );
        return age >= 13;
      },
      '13歳以上である必要があります'
    ),
 
  // Webサイト（オプショナル）
  website: z.string()
    .url('有効なURLを入力してください')
    .optional()
    .or(z.literal('')),
 
  // 自己紹介（オプショナル）
  bio: z.string()
    .max(500, '500文字以下で入力してください')
    .optional()
    .or(z.literal('')),
 
  // 利用規約同意
  agreeToTerms: z.literal(true, {
    errorMap: () => ({ message: '利用規約に同意してください' }),
  }),
 
  // プライバシーポリシー同意
  agreeToPrivacy: z.literal(true, {
    errorMap: () => ({ message: 'プライバシーポリシーに同意してください' }),
  }),
 
}).refine(
  (data) => data.password === data.confirmPassword,
  {
    message: 'パスワードが一致しません',
    path: ['confirmPassword'],
  }
).refine(
  (data) => {
    // パスワードにユーザー名が含まれていないかチェック
    if (data.username && data.password) {
      return !data.password.toLowerCase().includes(data.username.toLowerCase());
    }
    return true;
  },
  {
    message: 'パスワードにユーザー名を含めることはできません',
    path: ['password'],
  }
);
 
// 型の自動推論
type RegisterFormData = z.infer<typeof registerSchema>;

// 支払い方法に応じて異なるフィールドを要求するパターン
const creditCardSchema = z.object({
  paymentMethod: z.literal('credit_card'),
  cardNumber: z.string()
    .regex(/^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$/, 'カード番号の形式が不正です')
    .transform((val) => val.replace(/[\s-]/g, '')),
  expiryMonth: z.number().int().min(1).max(12),
  expiryYear: z.number().int().min(new Date().getFullYear()),
  cvv: z.string().regex(/^\d{3,4}$/, 'CVVは3〜4桁の数字です'),
  cardholderName: z.string().min(1, 'カード名義人を入力してください'),
});
 
const bankTransferSchema = z.object({
  paymentMethod: z.literal('bank_transfer'),
  bankName: z.string().min(1, '銀行名を入力してください'),
  branchName: z.string().min(1, '支店名を入力してください'),
  accountType: z.enum(['普通', '当座']),
  accountNumber: z.string()
    .regex(/^\d{7}$/, '口座番号は7桁の数字です'),
  accountHolder: z.string().min(1, '口座名義人を入力してください'),
});
 
const digitalWalletSchema = z.object({
  paymentMethod: z.literal('digital_wallet'),
  walletType: z.enum(['paypay', 'linepay', 'merpay']),
  walletId: z.string().min(1, 'ウォレットIDを入力してください'),
});
 
// Discriminated Unionで統合
const paymentSchema = z.discriminatedUnion('paymentMethod', [
  creditCardSchema,
  bankTransferSchema,
  digitalWalletSchema,
]);
 
type PaymentData = z.infer<typeof paymentSchema>;
 
// 使用例: フォームでの切り替え
function PaymentForm() {
  const [paymentMethod, setPaymentMethod] = useState<
    'credit_card' | 'bank_transfer' | 'digital_wallet'
  >('credit_card');
 
  const form = useForm<PaymentData>({
    resolver: zodResolver(paymentSchema),
    defaultValues: {
      paymentMethod: 'credit_card',
    },
  });
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <select
        value={paymentMethod}
        onChange={(e) => {
          const method = e.target.value as PaymentData['paymentMethod'];
          setPaymentMethod(method);
          form.setValue('paymentMethod', method);
          // 支払い方法が変更されたらフォームをリセット
          form.clearErrors();
        }}
      >
        <option value="credit_card">クレジットカード</option>
        <option value="bank_transfer">銀行振込</option>
        <option value="digital_wallet">電子マネー</option>
      </select>
 
      {paymentMethod === 'credit_card' && <CreditCardFields form={form} />}
      {paymentMethod === 'bank_transfer' && <BankTransferFields form={form} />}
      {paymentMethod === 'digital_wallet' && <DigitalWalletFields form={form} />}
    </form>
  );
}

// superRefineを使った複雑なクロスフィールドバリデーション
const eventSchema = z.object({
  title: z.string().min(1, 'タイトルを入力してください'),
  startDate: z.coerce.date(),
  endDate: z.coerce.date(),
  startTime: z.string().regex(/^\d{2}:\d{2}$/, '時刻の形式が不正です'),
  endTime: z.string().regex(/^\d{2}:\d{2}$/, '時刻の形式が不正です'),
  isAllDay: z.boolean(),
  maxParticipants: z.number().int().positive().optional(),
  currentParticipants: z.number().int().nonnegative().default(0),
  isOnline: z.boolean(),
  venue: z.string().optional(),
  meetingUrl: z.string().url().optional(),
}).superRefine((data, ctx) => {
  // 開始日と終了日の整合性チェック
  if (data.endDate < data.startDate) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: '終了日は開始日以降にしてください',
      path: ['endDate'],
    });
  }
 
  // 同日の場合、終了時刻が開始時刻より後であることを確認
  if (
    data.startDate.toDateString() === data.endDate.toDateString() &&
    !data.isAllDay
  ) {
    if (data.endTime <= data.startTime) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: '終了時刻は開始時刻より後にしてください',
        path: ['endTime'],
      });
    }
  }
 
  // 参加人数の整合性
  if (data.maxParticipants !== undefined && data.currentParticipants > data.maxParticipants) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: '現在の参加者数が定員を超えています',
      path: ['maxParticipants'],
    });
  }
 
  // オンライン/オフラインに応じた必須フィールド
  if (data.isOnline && !data.meetingUrl) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'オンラインイベントの場合はミーティングURLが必要です',
      path: ['meetingUrl'],
    });
  }
 
  if (!data.isOnline && !data.venue) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'オフラインイベントの場合は会場を入力してください',
      path: ['venue'],
    });
  }
});

// 基本スキーマの定義
const baseUserSchema = z.object({
  name: z.string().min(1, '名前を入力してください').max(100),
  email: z.string().email('有効なメールアドレスを入力してください'),
});
 
const addressSchema = z.object({
  postalCode: z.string().regex(/^\d{3}-?\d{4}$/, '有効な郵便番号を入力してください'),
  prefecture: z.string().min(1, '都道府県を選択してください'),
  city: z.string().min(1, '市区町村を入力してください'),
  street: z.string().min(1, '番地を入力してください'),
  building: z.string().optional(),
});
 
const phoneSchema = z.object({
  phoneNumber: z.string()
    .regex(/^0\d{1,4}-?\d{1,4}-?\d{3,4}$/, '有効な電話番号を入力してください'),
  phoneType: z.enum(['mobile', 'home', 'work']),
});
 
// extend: フィールドを追加
const createUserSchema = baseUserSchema.extend({
  password: z.string().min(8, '8文字以上で入力してください'),
  role: z.enum(['admin', 'user']).default('user'),
});
 
// merge: 複数のスキーマを統合
const fullUserSchema = baseUserSchema
  .merge(addressSchema)
  .merge(phoneSchema);
 
// pick: 特定のフィールドだけ取得
const loginSchema = baseUserSchema.pick({
  email: true,
}).extend({
  password: z.string().min(1, 'パスワードを入力してください'),
});
 
// omit: 特定のフィールドを除外
const publicUserSchema = fullUserSchema.omit({
  phoneNumber: true,
  phoneType: true,
});
 
// partial: 全フィールドをオプショナルに（更新APIに最適）
const updateUserSchema = baseUserSchema.partial();
 
// deepPartial: ネストされたオブジェクトも含めて全てオプショナルに
const deepUpdateSchema = fullUserSchema.deepPartial();
 
// required: オプショナルフィールドを必須に
const strictSchema = updateUserSchema.required();
 
// passthrough: 未知のプロパティを保持
const flexibleSchema = baseUserSchema.passthrough();
 
// strict: 未知のプロパティでエラー
const strictUserSchema = baseUserSchema.strict();
 
// 配列スキーマ
const usersSchema = z.array(baseUserSchema)
  .min(1, '最低1人のユーザーが必要です')
  .max(100, 'ユーザー数は100人までです');
 
// レコードスキーマ
const settingsSchema = z.record(
  z.string(),
  z.union([z.string(), z.number(), z.boolean()])
);

// transform: バリデーション後にデータを変換
const formSchema = z.object({
  // 文字列をトリムして正規化
  name: z.string()
    .transform((val) => val.trim())
    .pipe(z.string().min(1, '名前を入力してください')),
 
  // カンマ区切りの文字列を配列に変換
  tags: z.string()
    .transform((val) => val.split(',').map((s) => s.trim()).filter(Boolean))
    .pipe(z.array(z.string()).min(1, 'タグを1つ以上入力してください')),
 
  // 電話番号のハイフンを除去
  phone: z.string()
    .transform((val) => val.replace(/-/g, ''))
    .pipe(z.string().regex(/^0\d{9,10}$/, '有効な電話番号を入力してください')),
 
  // 郵便番号の正規化
  postalCode: z.string()
    .transform((val) => {
      const digits = val.replace(/[^\d]/g, '');
      return digits.length === 7 ? `${digits.slice(0, 3)}-${digits.slice(3)}` : val;
    })
    .pipe(z.string().regex(/^\d{3}-\d{4}$/, '有効な郵便番号を入力してください')),
 
  // 金額の変換（カンマ除去 → 数値化）
  amount: z.string()
    .transform((val) => Number(val.replace(/,/g, '')))
    .pipe(z.number().positive('正の金額を入力してください')),
});
 
// preprocess: バリデーション前にデータを前処理
const preprocessedSchema = z.object({
  // 空文字列をundefinedに変換（オプショナルフィールド対応）
  website: z.preprocess(
    (val) => (val === '' ? undefined : val),
    z.string().url('有効なURLを入力してください').optional()
  ),
 
  // チェックボックスの値を真偽値に変換
  isActive: z.preprocess(
    (val) => val === 'on' || val === 'true' || val === true,
    z.boolean()
  ),
 
  // 文字列の数値を数値型に変換
  quantity: z.preprocess(
    (val) => (typeof val === 'string' ? Number(val) : val),
    z.number().int().positive()
  ),
});
 
// coerceの活用（FormDataからの自動変換）
const formDataSchema = z.object({
  name: z.string().min(1),
  age: z.coerce.number().int().min(0),     // string → number
  isAdmin: z.coerce.boolean(),              // string → boolean
  createdAt: z.coerce.date(),               // string → Date
  score: z.coerce.bigint(),                 // string → Bigint
});

// フィールドレベルのカスタムエラーメッセージ
const detailedSchema = z.object({
  username: z.string({
    required_error: 'ユーザー名は必須です',
    invalid_type_error: 'ユーザー名は文字列で入力してください',
  })
    .min(3, { message: '3文字以上で入力してください' })
    .max(20, { message: '20文字以下で入力してください' }),
 
  age: z.number({
    required_error: '年齢は必須です',
    invalid_type_error: '年齢は数値で入力してください',
  })
    .int({ message: '整数で入力してください' })
    .min(0, { message: '0以上で入力してください' }),
});
 
// グローバルエラーマップ
const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  // デフォルトのエラーメッセージをカスタマイズ
  switch (issue.code) {
    case z.ZodIssueCode.invalid_type:
      if (issue.expected === 'string') {
        return { message: 'テキストを入力してください' };
      }
      if (issue.expected === 'number') {
        return { message: '数値を入力してください' };
      }
      break;
    case z.ZodIssueCode.too_small:
      if (issue.type === 'string') {
        return { message: `${issue.minimum}文字以上で入力してください` };
      }
      if (issue.type === 'number') {
        return { message: `${issue.minimum}以上の値を入力してください` };
      }
      break;
    case z.ZodIssueCode.too_big:
      if (issue.type === 'string') {
        return { message: `${issue.maximum}文字以下で入力してください` };
      }
      break;
    case z.ZodIssueCode.invalid_string:
      if (issue.validation === 'email') {
        return { message: '有効なメールアドレスを入力してください' };
      }
      if (issue.validation === 'url') {
        return { message: '有効なURLを入力してください' };
      }
      break;
  }
  return { message: ctx.defaultError };
};
 
// グローバルに設定
z.setErrorMap(customErrorMap);
 
// 特定のスキーマにのみ適用
const schemaWithCustomErrors = z.string().min(1).describe('ユーザー名');

import { useForm, FormProvider, useFormContext } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
 
// スキーマ定義
const contactSchema = z.object({
  firstName: z.string().min(1, '名を入力してください'),
  lastName: z.string().min(1, '姓を入力してください'),
  email: z.string().email('有効なメールアドレスを入力してください'),
  phone: z.string()
    .regex(/^0\d{1,4}-?\d{1,4}-?\d{3,4}$/, '有効な電話番号を入力してください')
    .optional()
    .or(z.literal('')),
  subject: z.enum(['inquiry', 'support', 'feedback', 'other'], {
    errorMap: () => ({ message: 'お問い合わせ種別を選択してください' }),
  }),
  message: z.string()
    .min(10, '10文字以上で入力してください')
    .max(2000, '2000文字以下で入力してください'),
  agreeToTerms: z.literal(true, {
    errorMap: () => ({ message: '利用規約に同意してください' }),
  }),
});
 
type ContactFormData = z.infer<typeof contactSchema>;
 
// フォームコンポーネント
function ContactForm() {
  const form = useForm<ContactFormData>({
    resolver: zodResolver(contactSchema),
    mode: 'onSubmit',
    reValidateMode: 'onChange',
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      subject: undefined,
      message: '',
      agreeToTerms: false as unknown as true,
    },
  });
 
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isValid, isDirty, touchedFields },
    watch,
    reset,
    setError,
    clearErrors,
  } = form;
 
  const onSubmit = async (data: ContactFormData) => {
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
 
      if (!response.ok) {
        const errorData = await response.json();
        // サーバーエラーをフォームにマッピング
        if (errorData.fieldErrors) {
          Object.entries(errorData.fieldErrors).forEach(([field, messages]) => {
            setError(field as keyof ContactFormData, {
              type: 'server',
              message: (messages as string[])[0],
            });
          });
          return;
        }
        throw new Error(errorData.message || '送信に失敗しました');
      }
 
      // 成功時の処理
      reset();
      alert('お問い合わせを送信しました');
    } catch (error) {
      setError('root', {
        type: 'server',
        message: error instanceof Error ? error.message : '送信に失敗しました',
      });
    }
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      {/* ルートエラー表示 */}
      {errors.root && (
        <div role="alert" className="bg-red-50 border border-red-200 p-4 rounded">
          <p className="text-red-700">{errors.root.message}</p>
        </div>
      )}
 
      <div className="grid grid-cols-2 gap-4">
        <FormField
          label="姓"
          error={errors.lastName?.message}
          required
        >
          <input
            {...register('lastName')}
            aria-invalid={!!errors.lastName}
            aria-describedby={errors.lastName ? 'lastName-error' : undefined}
            className={errors.lastName ? 'border-red-500' : 'border-gray-300'}
          />
        </FormField>
 
        <FormField
          label="名"
          error={errors.firstName?.message}
          required
        >
          <input
            {...register('firstName')}
            aria-invalid={!!errors.firstName}
            className={errors.firstName ? 'border-red-500' : 'border-gray-300'}
          />
        </FormField>
      </div>
 
      <FormField label="メールアドレス" error={errors.email?.message} required>
        <input
          type="email"
          {...register('email')}
          aria-invalid={!!errors.email}
        />
      </FormField>
 
      <FormField label="電話番号" error={errors.phone?.message}>
        <input
          type="tel"
          {...register('phone')}
          aria-invalid={!!errors.phone}
        />
      </FormField>
 
      <FormField label="お問い合わせ種別" error={errors.subject?.message} required>
        <select {...register('subject')}>
          <option value="">選択してください</option>
          <option value="inquiry">お問い合わせ</option>
          <option value="support">サポート</option>
          <option value="feedback">フィードバック</option>
          <option value="other">その他</option>
        </select>
      </FormField>
 
      <FormField label="メッセージ" error={errors.message?.message} required>
        <textarea
          {...register('message')}
          rows={5}
          aria-invalid={!!errors.message}
        />
        <p className="text-sm text-gray-500">
          {watch('message')?.length || 0}/2000文字
        </p>
      </FormField>
 
      <FormField error={errors.agreeToTerms?.message}>
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            {...register('agreeToTerms')}
          />
          <span>利用規約に同意する</span>
        </label>
      </FormField>
 
      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-blue-600 text-white py-2 px-4 rounded disabled:opacity-50"
      >
        {isSubmitting ? '送信中...' : '送信する'}
      </button>
    </form>
  );
}
 
// 再利用可能なフォームフィールドコンポーネント
function FormField({
  label,
  error,
  required,
  children,
}: {
  label?: string;
  error?: string;
  required?: boolean;
  children: React.ReactNode;
}) {
  return (
    <div className="mb-4">
      {label && (
        <label className="block text-sm font-medium text-gray-700 mb-1">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      {children}
      {error && (
        <p className="text-red-500 text-sm mt-1" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

// 大規模フォームをコンポーネントに分割するパターン
const orderSchema = z.object({
  // 個人情報
  personal: z.object({
    name: z.string().min(1, '名前を入力してください'),
    email: z.string().email('有効なメールアドレスを入力してください'),
    phone: z.string().regex(/^0\d{1,4}-?\d{1,4}-?\d{3,4}$/),
  }),
  // 配送先住所
  shipping: z.object({
    postalCode: z.string().regex(/^\d{3}-?\d{4}$/),
    prefecture: z.string().min(1),
    city: z.string().min(1),
    street: z.string().min(1),
    building: z.string().optional(),
  }),
  // 注文内容
  items: z.array(z.object({
    productId: z.string(),
    quantity: z.number().int().min(1).max(99),
  })).min(1, '商品を1つ以上選択してください'),
  // 備考
  notes: z.string().max(500).optional(),
});
 
type OrderFormData = z.infer<typeof orderSchema>;
 
// 親コンポーネント
function OrderForm() {
  const methods = useForm<OrderFormData>({
    resolver: zodResolver(orderSchema),
    defaultValues: {
      personal: { name: '', email: '', phone: '' },
      shipping: { postalCode: '', prefecture: '', city: '', street: '' },
      items: [],
      notes: '',
    },
  });
 
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <PersonalInfoSection />
        <ShippingAddressSection />
        <OrderItemsSection />
        <NotesSection />
        <SubmitButton />
      </form>
    </FormProvider>
  );
}
 
// 子コンポーネント（useFormContextで親のフォーム状態にアクセス）
function PersonalInfoSection() {
  const {
    register,
    formState: { errors },
  } = useFormContext<OrderFormData>();
 
  return (
    <fieldset>
      <legend className="text-lg font-bold">お客様情報</legend>
      <input
        {...register('personal.name')}
        placeholder="お名前"
      />
      {errors.personal?.name && (
        <span className="text-red-500">{errors.personal.name.message}</span>
      )}
      <input
        type="email"
        {...register('personal.email')}
        placeholder="メールアドレス"
      />
      {errors.personal?.email && (
        <span className="text-red-500">{errors.personal.email.message}</span>
      )}
      <input
        type="tel"
        {...register('personal.phone')}
        placeholder="電話番号"
      />
      {errors.personal?.phone && (
        <span className="text-red-500">{errors.personal.phone.message}</span>
      )}
    </fieldset>
  );
}
 
// 配送先住所セクション
function ShippingAddressSection() {
  const {
    register,
    setValue,
    formState: { errors },
  } = useFormContext<OrderFormData>();
 
  // 郵便番号から住所を自動入力
  const handlePostalCodeChange = async (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const postalCode = e.target.value.replace(/-/g, '');
    if (postalCode.length === 7) {
      try {
        const res = await fetch(
          `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${postalCode}`
        );
        const data = await res.json();
        if (data.results?.[0]) {
          const result = data.results[0];
          setValue('shipping.prefecture', result.address1);
          setValue('shipping.city', result.address2 + result.address3);
        }
      } catch {
        // 住所検索APIのエラーは無視（ユーザーが手動入力可能）
      }
    }
  };
 
  return (
    <fieldset>
      <legend className="text-lg font-bold">配送先</legend>
      <input
        {...register('shipping.postalCode')}
        onChange={(e) => {
          register('shipping.postalCode').onChange(e);
          handlePostalCodeChange(e);
        }}
        placeholder="郵便番号（例: 100-0001）"
      />
      {errors.shipping?.postalCode && (
        <span className="text-red-500">{errors.shipping.postalCode.message}</span>
      )}
      {/* 他のフィールドも同様 */}
    </fieldset>
  );
}

import { useForm, useFieldArray } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
 
// 複数の連絡先を管理するスキーマ
const contactListSchema = z.object({
  contacts: z.array(
    z.object({
      name: z.string().min(1, '名前を入力してください'),
      email: z.string().email('有効なメールアドレスを入力してください'),
      relationship: z.enum(['family', 'friend', 'colleague', 'other']),
      isPrimary: z.boolean().default(false),
    })
  )
    .min(1, '連絡先を1件以上追加してください')
    .max(10, '連絡先は10件までです')
    .refine(
      (contacts) => contacts.filter((c) => c.isPrimary).length <= 1,
      '主要連絡先は1件のみ設定可能です'
    ),
});
 
type ContactListData = z.infer<typeof contactListSchema>;
 
function ContactListForm() {
  const form = useForm<ContactListData>({
    resolver: zodResolver(contactListSchema),
    defaultValues: {
      contacts: [{ name: '', email: '', relationship: 'friend', isPrimary: false }],
    },
  });
 
  const { fields, append, remove, move, swap, insert } = useFieldArray({
    control: form.control,
    name: 'contacts',
  });
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id} className="border p-4 mb-4 rounded">
          <div className="flex justify-between items-center mb-2">
            <h3>連絡先 #{index + 1}</h3>
            <div className="flex gap-2">
              {index > 0 && (
                <button type="button" onClick={() => move(index, index - 1)}>
                  上に移動
                </button>
              )}
              {index < fields.length - 1 && (
                <button type="button" onClick={() => move(index, index + 1)}>
                  下に移動
                </button>
              )}
              {fields.length > 1 && (
                <button
                  type="button"
                  onClick={() => remove(index)}
                  className="text-red-500"
                >
                  削除
                </button>
              )}
            </div>
          </div>
 
          <input
            {...form.register(`contacts.${index}.name`)}
            placeholder="名前"
          />
          {form.formState.errors.contacts?.[index]?.name && (
            <span className="text-red-500">
              {form.formState.errors.contacts[index]?.name?.message}
            </span>
          )}
 
          <input
            type="email"
            {...form.register(`contacts.${index}.email`)}
            placeholder="メールアドレス"
          />
          {form.formState.errors.contacts?.[index]?.email && (
            <span className="text-red-500">
              {form.formState.errors.contacts[index]?.email?.message}
            </span>
          )}
 
          <select {...form.register(`contacts.${index}.relationship`)}>
            <option value="family">家族</option>
            <option value="friend">友人</option>
            <option value="colleague">同僚</option>
            <option value="other">その他</option>
          </select>
 
          <label className="flex items-center gap-2 mt-2">
            <input
              type="checkbox"
              {...form.register(`contacts.${index}.isPrimary`)}
            />
            主要連絡先に設定
          </label>
        </div>
      ))}
 
      {/* 配列レベルのエラー */}
      {form.formState.errors.contacts?.root && (
        <p className="text-red-500">{form.formState.errors.contacts.root.message}</p>
      )}
 
      <button
        type="button"
        onClick={() =>
          append({ name: '', email: '', relationship: 'friend', isPrimary: false })
        }
        disabled={fields.length >= 10}
        className="mb-4"
      >
        連絡先を追加
      </button>
 
      <button type="submit">保存</button>
    </form>
  );
}

// パターン1: 標準的なフォーム（最も推奨）
const standardForm = useForm<FormData>({
  resolver: zodResolver(schema),
  mode: 'onSubmit',           // 初回はSubmit時
  reValidateMode: 'onChange', // 再検証はリアルタイム
  defaultValues: {
    // 全フィールドにデフォルト値を設定
  },
});
 
// パターン2: 段階的フィードバック（中〜大規模フォーム）
const progressiveForm = useForm<FormData>({
  resolver: zodResolver(schema),
  mode: 'onBlur',             // フォーカスアウト時にチェック
  reValidateMode: 'onChange', // 修正中はリアルタイムチェック
  defaultValues: {},
});
 
// パターン3: リアルタイム検索/フィルター
const realtimeForm = useForm<FilterData>({
  resolver: zodResolver(filterSchema),
  mode: 'onChange',           // 即座にチェック
  defaultValues: {},
});
 
// パターン4: ウィザード形式の場合（ステップごとに検証）
const wizardForm = useForm<WizardData>({
  resolver: zodResolver(currentStepSchema),
  mode: 'onSubmit',           // 「次へ」ボタン押下時に検証
  reValidateMode: 'onChange',
  defaultValues: {},
});

// triggerを使った手動バリデーション
function StepForm() {
  const form = useForm<FormData>({
    resolver: zodResolver(schema),
    mode: 'onSubmit',
  });
 
  const [step, setStep] = useState(1);
 
  // 特定のフィールドだけバリデーション
  const handleNextStep = async () => {
    let isValid = false;
 
    switch (step) {
      case 1:
        isValid = await form.trigger(['name', 'email']); // Step1のフィールドのみ
        break;
      case 2:
        isValid = await form.trigger(['address', 'phone']); // Step2のフィールドのみ
        break;
      case 3:
        isValid = await form.trigger(); // 全フィールド
        break;
    }
 
    if (isValid) {
      if (step < 3) {
        setStep(step + 1);
      } else {
        form.handleSubmit(onSubmit)();
      }
    }
  };
 
  return (
    <form>
      {step === 1 && <Step1 form={form} />}
      {step === 2 && <Step2 form={form} />}
      {step === 3 && <Step3 form={form} />}
 
      <div className="flex justify-between mt-4">
        {step > 1 && (
          <button type="button" onClick={() => setStep(step - 1)}>
            前へ
          </button>
        )}
        <button type="button" onClick={handleNextStep}>
          {step < 3 ? '次へ' : '送信'}
        </button>
      </div>
 
      {/* ステップインジケーター */}
      <div className="flex justify-center gap-2 mt-4">
        {[1, 2, 3].map((s) => (
          <div
            key={s}
            className={`w-8 h-8 rounded-full flex items-center justify-center ${
              s === step
                ? 'bg-blue-600 text-white'
                : s < step
                ? 'bg-green-500 text-white'
                : 'bg-gray-200 text-gray-500'
            }`}
          >
            {s < step ? '✓' : s}
          </div>
        ))}
      </div>
    </form>
  );
}

// メールアドレスの重複チェック（非同期）
const schema = z.object({
  email: z.string().email('有効なメールアドレスを入力してください'),
  username: z.string().min(3, '3文字以上で入力してください'),
});
 
function RegisterForm() {
  const form = useForm({
    resolver: zodResolver(schema),
  });
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <input
        {...form.register('email', {
          validate: async (value) => {
            if (!value) return true;
            // 基本的なフォーマットチェックを先に行う
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) return true; // Zodに任せる
 
            try {
              const response = await fetch(
                `/api/check-email?email=${encodeURIComponent(value)}`
              );
              const data = await response.json();
              return data.available
                ? true
                : 'このメールアドレスは既に使用されています';
            } catch {
              // ネットワークエラー時はバリデーションをスキップ（サーバーで検証）
              return true;
            }
          },
        })}
      />
      {form.formState.errors.email && (
        <span className="text-red-500">
          {form.formState.errors.email.message}
        </span>
      )}
 
      <input
        {...form.register('username', {
          validate: async (value) => {
            if (!value || value.length < 3) return true;
 
            try {
              const response = await fetch(
                `/api/check-username?username=${encodeURIComponent(value)}`
              );
              const data = await response.json();
              return data.available
                ? true
                : 'このユーザー名は既に使用されています';
            } catch {
              return true;
            }
          },
        })}
      />
    </form>
  );
}

import { useState, useCallback, useRef, useEffect } from 'react';
 
// カスタムフック: デバウンス付き非同期バリデーション
function useAsyncValidation(
  validateFn: (value: string) => Promise<string | true>,
  delay = 500
) {
  const [error, setError] = useState<string | null>(null);
  const [isValidating, setIsValidating] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const abortControllerRef = useRef<AbortController | null>(null);
  const lastValueRef = useRef<string>('');
 
  const validate = useCallback(
    (value: string) => {
      lastValueRef.current = value;
 
      // 前のタイマーをクリア
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
 
      // 前のリクエストをキャンセル
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
 
      // 空の値はバリデーションスキップ
      if (!value) {
        setError(null);
        setIsValidating(false);
        return;
      }
 
      setIsValidating(true);
 
      timeoutRef.current = setTimeout(async () => {
        const controller = new AbortController();
        abortControllerRef.current = controller;
 
        try {
          const result = await validateFn(value);
 
          // 最新の値と一致する場合のみ結果を反映
          if (lastValueRef.current === value && !controller.signal.aborted) {
            setError(result === true ? null : result);
          }
        } catch (err) {
          if (err instanceof DOMException && err.name === 'AbortError') {
            // キャンセルされたリクエストは無視
            return;
          }
          // その他のエラーはバリデーションをスキップ
          setError(null);
        } finally {
          if (lastValueRef.current === value) {
            setIsValidating(false);
          }
        }
      }, delay);
    },
    [validateFn, delay]
  );
 
  // クリーンアップ
  useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      if (abortControllerRef.current) abortControllerRef.current.abort();
    };
  }, []);
 
  const reset = useCallback(() => {
    setError(null);
    setIsValidating(false);
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    if (abortControllerRef.current) abortControllerRef.current.abort();
  }, []);
 
  return { error, isValidating, validate, reset };
}
 
// 使用例
function UsernameField() {
  const form = useFormContext();
 
  const checkUsername = useCallback(async (value: string): Promise<string | true> => {
    const response = await fetch(
      `/api/check-username?username=${encodeURIComponent(value)}`
    );
    const data = await response.json();
    return data.available ? true : 'このユーザー名は既に使用されています';
  }, []);
 
  const { error: asyncError, isValidating, validate } = useAsyncValidation(
    checkUsername,
    500
  );
 
  const formError = form.formState.errors.username?.message;
  const displayError = formError || asyncError;
 
  return (
    <div className="relative">
      <input
        {...form.register('username')}
        onChange={(e) => {
          form.register('username').onChange(e); // React Hook FormのonChange
          validate(e.target.value);               // 非同期バリデーション
        }}
        className={displayError ? 'border-red-500' : 'border-gray-300'}
      />
 
      {/* ローディングインジケーター */}
      {isValidating && (
        <div className="absolute right-3 top-1/2 -translate-y-1/2">
          <svg className="animate-spin h-4 w-4 text-gray-400" viewBox="0 0 24 24">
            <circle
              className="opacity-25"
              cx="12" cy="12" r="10"
              stroke="currentColor"
              strokeWidth="4"
              fill="none"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
        </div>
      )}
 
      {/* 成功インジケーター */}
      {!isValidating && !displayError && form.getValues('username') && (
        <div className="absolute right-3 top-1/2 -translate-y-1/2 text-green-500">
          ✓
        </div>
      )}
 
      {displayError && (
        <p className="text-red-500 text-sm mt-1">{displayError as string}</p>
      )}
    </div>
  );
}