import { z } from 'zod';
import { useForm, UseFormReturn } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState, useCallback } from 'react';
 
// ステップ1: アカウント情報
const step1Schema = z.object({
  name: z.string()
    .min(1, '名前は必須です')
    .max(50, '名前は50文字以内で入力してください'),
  email: z.string()
    .email('有効なメールアドレスを入力してください'),
  password: z.string()
    .min(8, 'パスワードは8文字以上で入力してください')
    .regex(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
      'パスワードは大文字、小文字、数字を含む必要があります'
    ),
  confirmPassword: z.string(),
}).refine(data => data.password === data.confirmPassword, {
  message: 'パスワードが一致しません',
  path: ['confirmPassword'],
});
 
// ステップ2: プロフィール情報
const step2Schema = z.object({
  company: z.string().min(1, '会社名は必須です'),
  role: z.enum(['developer', 'designer', 'manager', 'other'], {
    errorMap: () => ({ message: '役割を選択してください' }),
  }),
  experience: z.coerce
    .number()
    .min(0, '経験年数は0以上で入力してください')
    .max(50, '経験年数は50以下で入力してください'),
  bio: z.string()
    .max(500, '自己紹介は500文字以内で入力してください')
    .optional(),
});
 
// ステップ3: プラン選択
const step3Schema = z.object({
  plan: z.enum(['free', 'pro', 'enterprise'], {
    errorMap: () => ({ message: 'プランを選択してください' }),
  }),
  billingCycle: z.enum(['monthly', 'yearly']).optional(),
  agreed: z.literal(true, {
    errorMap: () => ({ message: '利用規約に同意する必要があります' }),
  }),
});
 
// 全体スキーマ（最終バリデーション用）
const fullSchema = step1Schema
  .merge(step2Schema)
  .merge(step3Schema);
 
type FormData = z.infer<typeof fullSchema>;
 
// ステップ設定の型定義
interface StepConfig {
  title: string;
  description: string;
  schema: z.ZodType;
  fields: (keyof FormData)[];
}
 
const STEPS: StepConfig[] = [
  {
    title: 'アカウント情報',
    description: 'ログインに使用する情報を入力してください',
    schema: step1Schema,
    fields: ['name', 'email', 'password', 'confirmPassword'],
  },
  {
    title: 'プロフィール',
    description: 'あなたの情報を教えてください',
    schema: step2Schema,
    fields: ['company', 'role', 'experience', 'bio'],
  },
  {
    title: 'プラン選択',
    description: 'ご利用プランを選択してください',
    schema: step3Schema,
    fields: ['plan', 'billingCycle', 'agreed'],
  },
];

// カスタムフック: マルチステップフォームのロジック管理
function useMultiStepForm<T extends Record<string, any>>(
  steps: StepConfig[],
  defaultValues: Partial<T>
) {
  const [currentStep, setCurrentStep] = useState(0);
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set());
  const [stepData, setStepData] = useState<Partial<T>[]>(
    steps.map(() => ({}))
  );
 
  const form = useForm<T>({
    resolver: zodResolver(steps[currentStep].schema),
    mode: 'onTouched',
    defaultValues: defaultValues as any,
  });
 
  const isFirstStep = currentStep === 0;
  const isLastStep = currentStep === steps.length - 1;
  const progress = ((currentStep + 1) / steps.length) * 100;
 
  const goToNext = useCallback(async () => {
    // 現在のステップのバリデーション
    const fieldsToValidate = steps[currentStep].fields;
    const isValid = await form.trigger(fieldsToValidate as any);
 
    if (!isValid) return false;
 
    // ステップデータの保存
    const currentValues = form.getValues();
    setStepData(prev => {
      const updated = [...prev];
      updated[currentStep] = currentValues;
      return updated;
    });
 
    // ステップ完了マーク
    setCompletedSteps(prev => new Set(prev).add(currentStep));
 
    if (!isLastStep) {
      setCurrentStep(s => s + 1);
    }
 
    return true;
  }, [currentStep, form, steps, isLastStep]);
 
  const goToPrevious = useCallback(() => {
    if (!isFirstStep) {
      setCurrentStep(s => s - 1);
    }
  }, [isFirstStep]);
 
  const goToStep = useCallback((step: number) => {
    // 完了済みステップか現在のステップの次まで遷移可能
    if (step <= currentStep || completedSteps.has(step - 1)) {
      setCurrentStep(step);
    }
  }, [currentStep, completedSteps]);
 
  const getMergedData = useCallback((): Partial<T> => {
    return stepData.reduce((acc, data) => ({ ...acc, ...data }), {} as Partial<T>);
  }, [stepData]);
 
  return {
    form,
    currentStep,
    isFirstStep,
    isLastStep,
    progress,
    completedSteps,
    goToNext,
    goToPrevious,
    goToStep,
    getMergedData,
    totalSteps: steps.length,
  };
}

function MultiStepForm() {
  const {
    form,
    currentStep,
    isFirstStep,
    isLastStep,
    progress,
    completedSteps,
    goToNext,
    goToPrevious,
    goToStep,
    getMergedData,
    totalSteps,
  } = useMultiStepForm<FormData>(STEPS, {
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
    company: '',
    role: undefined,
    experience: 0,
    bio: '',
    plan: undefined,
    billingCycle: 'monthly',
    agreed: false as any,
  });
 
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
 
  const handleNext = async () => {
    const success = await goToNext();
    if (success && !isLastStep) {
      // ドラフト保存
      const data = getMergedData();
      await saveDraft(data);
    }
  };
 
  const onSubmit = async (data: FormData) => {
    setIsSubmitting(true);
    setSubmitError(null);
 
    try {
      // 全ステップのデータをマージ
      const mergedData = { ...getMergedData(), ...data };
 
      // 最終バリデーション
      const result = fullSchema.safeParse(mergedData);
      if (!result.success) {
        const firstError = result.error.errors[0];
        setSubmitError(`入力エラー: ${firstError.message}`);
        return;
      }
 
      await api.register(result.data);
      router.push('/registration/complete');
    } catch (error) {
      setSubmitError(
        error instanceof Error
          ? error.message
          : '登録に失敗しました。もう一度お試しください。'
      );
    } finally {
      setIsSubmitting(false);
    }
  };
 
  return (
    <div className="max-w-2xl mx-auto p-6">
      {/* プログレスバー */}
      <div className="mb-8">
        <div className="flex justify-between mb-2">
          {STEPS.map((step, i) => (
            <button
              key={i}
              type="button"
              onClick={() => goToStep(i)}
              className={`flex items-center gap-2 text-sm font-medium
                ${i === currentStep ? 'text-blue-600' : ''}
                ${completedSteps.has(i) ? 'text-green-600 cursor-pointer' : 'text-gray-400'}
              `}
              disabled={!completedSteps.has(i) && i !== currentStep}
            >
              <span className={`w-8 h-8 rounded-full flex items-center justify-center text-xs
                ${i === currentStep ? 'bg-blue-600 text-white' : ''}
                ${completedSteps.has(i) ? 'bg-green-600 text-white' : 'bg-gray-200'}
              `}>
                {completedSteps.has(i) ? '✓' : i + 1}
              </span>
              <span className="hidden sm:inline">{step.title}</span>
            </button>
          ))}
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div
            className="bg-blue-600 h-2 rounded-full transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>
 
      {/* ステップヘッダー */}
      <div className="mb-6">
        <h2 className="text-xl font-bold">{STEPS[currentStep].title}</h2>
        <p className="text-gray-500 mt-1">{STEPS[currentStep].description}</p>
      </div>
 
      {/* フォーム本体 */}
      <form onSubmit={form.handleSubmit(onSubmit)}>
        {currentStep === 0 && <Step1Fields form={form} />}
        {currentStep === 1 && <Step2Fields form={form} />}
        {currentStep === 2 && <Step3Fields form={form} />}
 
        {/* エラーメッセージ */}
        {submitError && (
          <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-red-600 text-sm">{submitError}</p>
          </div>
        )}
 
        {/* ナビゲーション */}
        <div className="flex justify-between mt-8">
          <button
            type="button"
            onClick={goToPrevious}
            disabled={isFirstStep}
            className={`px-6 py-2 rounded-lg border
              ${isFirstStep ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}
            `}
          >
            戻る
          </button>
 
          {isLastStep ? (
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg
                hover:bg-blue-700 disabled:opacity-50"
            >
              {isSubmitting ? '送信中...' : '登録する'}
            </button>
          ) : (
            <button
              type="button"
              onClick={handleNext}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
            >
              次へ
            </button>
          )}
        </div>
      </form>
    </div>
  );
}

// ステップ1: アカウント情報
function Step1Fields({ form }: { form: UseFormReturn<FormData> }) {
  const { register, formState: { errors } } = form;
 
  return (
    <div className="space-y-4">
      <div>
        <label htmlFor="name" className="block text-sm font-medium mb-1">
          名前 <span className="text-red-500">*</span>
        </label>
        <input
          id="name"
          {...register('name')}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="山田 太郎"
          aria-invalid={!!errors.name}
          aria-describedby={errors.name ? 'name-error' : undefined}
        />
        {errors.name && (
          <p id="name-error" className="mt-1 text-sm text-red-500" role="alert">
            {errors.name.message}
          </p>
        )}
      </div>
 
      <div>
        <label htmlFor="email" className="block text-sm font-medium mb-1">
          メールアドレス <span className="text-red-500">*</span>
        </label>
        <input
          id="email"
          type="email"
          {...register('email')}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="taro@example.com"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : undefined}
        />
        {errors.email && (
          <p id="email-error" className="mt-1 text-sm text-red-500" role="alert">
            {errors.email.message}
          </p>
        )}
      </div>
 
      <div>
        <label htmlFor="password" className="block text-sm font-medium mb-1">
          パスワード <span className="text-red-500">*</span>
        </label>
        <input
          id="password"
          type="password"
          {...register('password')}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="8文字以上"
          aria-invalid={!!errors.password}
          aria-describedby={errors.password ? 'password-error' : 'password-hint'}
        />
        <p id="password-hint" className="mt-1 text-xs text-gray-400">
          大文字、小文字、数字を含む8文字以上
        </p>
        {errors.password && (
          <p id="password-error" className="mt-1 text-sm text-red-500" role="alert">
            {errors.password.message}
          </p>
        )}
      </div>
 
      <div>
        <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">
          パスワード確認 <span className="text-red-500">*</span>
        </label>
        <input
          id="confirmPassword"
          type="password"
          {...register('confirmPassword')}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="パスワードを再入力"
          aria-invalid={!!errors.confirmPassword}
        />
        {errors.confirmPassword && (
          <p className="mt-1 text-sm text-red-500" role="alert">
            {errors.confirmPassword.message}
          </p>
        )}
      </div>
    </div>
  );
}
 
// ステップ2: プロフィール情報
function Step2Fields({ form }: { form: UseFormReturn<FormData> }) {
  const { register, formState: { errors } } = form;
 
  return (
    <div className="space-y-4">
      <div>
        <label htmlFor="company" className="block text-sm font-medium mb-1">
          会社名 <span className="text-red-500">*</span>
        </label>
        <input
          id="company"
          {...register('company')}
          className="w-full px-3 py-2 border rounded-lg"
          placeholder="株式会社サンプル"
        />
        {errors.company && (
          <p className="mt-1 text-sm text-red-500">{errors.company.message}</p>
        )}
      </div>
 
      <div>
        <label htmlFor="role" className="block text-sm font-medium mb-1">
          役割 <span className="text-red-500">*</span>
        </label>
        <select
          id="role"
          {...register('role')}
          className="w-full px-3 py-2 border rounded-lg"
        >
          <option value="">選択してください</option>
          <option value="developer">開発者</option>
          <option value="designer">デザイナー</option>
          <option value="manager">マネージャー</option>
          <option value="other">その他</option>
        </select>
        {errors.role && (
          <p className="mt-1 text-sm text-red-500">{errors.role.message}</p>
        )}
      </div>
 
      <div>
        <label htmlFor="experience" className="block text-sm font-medium mb-1">
          経験年数
        </label>
        <input
          id="experience"
          type="number"
          {...register('experience')}
          className="w-full px-3 py-2 border rounded-lg"
          min={0}
          max={50}
        />
        {errors.experience && (
          <p className="mt-1 text-sm text-red-500">{errors.experience.message}</p>
        )}
      </div>
 
      <div>
        <label htmlFor="bio" className="block text-sm font-medium mb-1">
          自己紹介
        </label>
        <textarea
          id="bio"
          {...register('bio')}
          className="w-full px-3 py-2 border rounded-lg"
          rows={4}
          placeholder="自由に記入してください（500文字以内）"
        />
        {errors.bio && (
          <p className="mt-1 text-sm text-red-500">{errors.bio.message}</p>
        )}
      </div>
    </div>
  );
}

import { AnimatePresence, motion } from 'framer-motion';
 
const stepVariants = {
  enter: (direction: number) => ({
    x: direction > 0 ? 300 : -300,
    opacity: 0,
  }),
  center: {
    x: 0,
    opacity: 1,
  },
  exit: (direction: number) => ({
    x: direction < 0 ? 300 : -300,
    opacity: 0,
  }),
};
 
function AnimatedStep({
  children,
  direction,
  stepKey,
}: {
  children: React.ReactNode;
  direction: number;
  stepKey: number;
}) {
  return (
    <AnimatePresence mode="wait" custom={direction}>
      <motion.div
        key={stepKey}
        custom={direction}
        variants={stepVariants}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          x: { type: 'spring', stiffness: 300, damping: 30 },
          opacity: { duration: 0.2 },
        }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}
 
// 使用例
function MultiStepFormWithAnimation() {
  const [direction, setDirection] = useState(0);
  // ... useMultiStepForm
 
  const handleNext = async () => {
    setDirection(1);
    await goToNext();
  };
 
  const handlePrev = () => {
    setDirection(-1);
    goToPrevious();
  };
 
  return (
    <form>
      <AnimatedStep direction={direction} stepKey={currentStep}>
        {currentStep === 0 && <Step1Fields form={form} />}
        {currentStep === 1 && <Step2Fields form={form} />}
        {currentStep === 2 && <Step3Fields form={form} />}
      </AnimatedStep>
    </form>
  );
}

// 最終確認ステップ
function ConfirmationStep({ data }: { data: FormData }) {
  const sections = [
    {
      title: 'アカウント情報',
      items: [
        { label: '名前', value: data.name },
        { label: 'メールアドレス', value: data.email },
        { label: 'パスワード', value: '********' },
      ],
    },
    {
      title: 'プロフィール',
      items: [
        { label: '会社名', value: data.company },
        { label: '役割', value: ROLE_LABELS[data.role] },
        { label: '経験年数', value: `${data.experience}年` },
        { label: '自己紹介', value: data.bio || '未入力' },
      ],
    },
    {
      title: 'プラン',
      items: [
        { label: 'プラン', value: PLAN_LABELS[data.plan] },
        { label: '請求サイクル', value: data.billingCycle === 'monthly' ? '月払い' : '年払い' },
      ],
    },
  ];
 
  return (
    <div className="space-y-6">
      <h3 className="text-lg font-bold">入力内容の確認</h3>
      {sections.map((section) => (
        <div key={section.title} className="bg-gray-50 rounded-lg p-4">
          <h4 className="font-medium text-gray-700 mb-3">{section.title}</h4>
          <dl className="space-y-2">
            {section.items.map((item) => (
              <div key={item.label} className="flex">
                <dt className="w-32 text-gray-500 text-sm">{item.label}</dt>
                <dd className="text-sm font-medium">{item.value}</dd>
              </div>
            ))}
          </dl>
        </div>
      ))}
    </div>
  );
}
 
const ROLE_LABELS: Record<string, string> = {
  developer: '開発者',
  designer: 'デザイナー',
  manager: 'マネージャー',
  other: 'その他',
};
 
const PLAN_LABELS: Record<string, string> = {
  free: 'フリープラン',
  pro: 'プロプラン',
  enterprise: 'エンタープライズ',
};

import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
 
// 商品マスタの型定義
interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
}
 
// 注文スキーマ
const orderItemSchema = z.object({
  productId: z.string().min(1, '商品を選択してください'),
  quantity: z.coerce
    .number()
    .min(1, '数量は1以上で入力してください')
    .max(999, '数量は999以下で入力してください'),
  unitPrice: z.coerce.number().min(0),
  discount: z.coerce
    .number()
    .min(0, '割引率は0以上で入力してください')
    .max(100, '割引率は100以下で入力してください')
    .optional()
    .default(0),
  note: z.string().max(200, 'メモは200文字以内で入力してください').optional(),
});
 
const orderSchema = z.object({
  customerName: z.string().min(1, '顧客名は必須です'),
  customerEmail: z.string().email('有効なメールアドレスを入力してください'),
  shippingAddress: z.string().min(1, '配送先住所は必須です'),
  items: z
    .array(orderItemSchema)
    .min(1, '1つ以上の商品を追加してください')
    .max(50, '一度に注文できるのは50商品までです'),
  notes: z.string().optional(),
  priority: z.enum(['normal', 'urgent', 'express']).default('normal'),
});
 
type OrderFormData = z.infer<typeof orderSchema>;
 
// 合計金額計算コンポーネント
function OrderSummary({ control }: { control: any }) {
  const items = useWatch({ control, name: 'items' });
 
  const summary = useMemo(() => {
    if (!items || !Array.isArray(items)) {
      return { subtotal: 0, discountTotal: 0, total: 0, itemCount: 0 };
    }
 
    return items.reduce(
      (acc, item) => {
        const lineTotal = (item.unitPrice || 0) * (item.quantity || 0);
        const discountAmount = lineTotal * ((item.discount || 0) / 100);
        return {
          subtotal: acc.subtotal + lineTotal,
          discountTotal: acc.discountTotal + discountAmount,
          total: acc.total + (lineTotal - discountAmount),
          itemCount: acc.itemCount + (item.quantity || 0),
        };
      },
      { subtotal: 0, discountTotal: 0, total: 0, itemCount: 0 }
    );
  }, [items]);
 
  return (
    <div className="bg-gray-50 rounded-lg p-4 mt-4">
      <h4 className="font-medium mb-3">注文サマリー</h4>
      <dl className="space-y-1 text-sm">
        <div className="flex justify-between">
          <dt className="text-gray-500">商品数</dt>
          <dd>{summary.itemCount}点</dd>
        </div>
        <div className="flex justify-between">
          <dt className="text-gray-500">小計</dt>
          <dd>{summary.subtotal.toLocaleString()}円</dd>
        </div>
        <div className="flex justify-between text-red-500">
          <dt>割引合計</dt>
          <dd>-{summary.discountTotal.toLocaleString()}円</dd>
        </div>
        <div className="flex justify-between font-bold text-lg border-t pt-2 mt-2">
          <dt>合計</dt>
          <dd>{summary.total.toLocaleString()}円</dd>
        </div>
      </dl>
    </div>
  );
}
 
// 注文フォーム本体
function OrderForm({ products }: { products: Product[] }) {
  const form = useForm<OrderFormData>({
    resolver: zodResolver(orderSchema),
    defaultValues: {
      customerName: '',
      customerEmail: '',
      shippingAddress: '',
      items: [{ productId: '', quantity: 1, unitPrice: 0, discount: 0, note: '' }],
      notes: '',
      priority: 'normal',
    },
  });
 
  const { fields, append, remove, move, insert } = useFieldArray({
    control: form.control,
    name: 'items',
  });
 
  const handleProductChange = (index: number, productId: string) => {
    const product = products.find(p => p.id === productId);
    if (product) {
      form.setValue(`items.${index}.unitPrice`, product.price);
      form.setValue(`items.${index}.productId`, productId);
    }
  };
 
  const handleDuplicate = (index: number) => {
    const currentItem = form.getValues(`items.${index}`);
    insert(index + 1, { ...currentItem });
  };
 
  const onSubmit = async (data: OrderFormData) => {
    try {
      await api.orders.create(data);
      toast.success('注文を作成しました');
      form.reset();
    } catch (error) {
      toast.error('注文の作成に失敗しました');
    }
  };
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
      {/* 顧客情報 */}
      <fieldset className="border rounded-lg p-4">
        <legend className="text-lg font-medium px-2">顧客情報</legend>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
          <div>
            <label className="block text-sm font-medium mb-1">顧客名</label>
            <input {...form.register('customerName')} className="w-full border rounded px-3 py-2" />
            {form.formState.errors.customerName && (
              <p className="text-red-500 text-sm mt-1">
                {form.formState.errors.customerName.message}
              </p>
            )}
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">メールアドレス</label>
            <input
              type="email"
              {...form.register('customerEmail')}
              className="w-full border rounded px-3 py-2"
            />
          </div>
          <div className="md:col-span-2">
            <label className="block text-sm font-medium mb-1">配送先住所</label>
            <input
              {...form.register('shippingAddress')}
              className="w-full border rounded px-3 py-2"
            />
          </div>
        </div>
      </fieldset>
 
      {/* 商品明細 */}
      <fieldset className="border rounded-lg p-4">
        <legend className="text-lg font-medium px-2">
          商品明細 ({fields.length}件)
        </legend>
 
        {form.formState.errors.items?.message && (
          <p className="text-red-500 text-sm mb-2">
            {form.formState.errors.items.message}
          </p>
        )}
 
        <div className="space-y-3 mt-2">
          {fields.map((field, index) => (
            <div
              key={field.id}
              className="flex flex-wrap gap-2 items-start p-3 bg-gray-50 rounded-lg"
            >
              <span className="text-gray-400 text-sm self-center w-6">
                {index + 1}.
              </span>
 
              <div className="flex-1 min-w-[200px]">
                <select
                  {...form.register(`items.${index}.productId`)}
                  onChange={(e) => handleProductChange(index, e.target.value)}
                  className="w-full border rounded px-2 py-1.5 text-sm"
                >
                  <option value="">商品を選択</option>
                  {products.map(p => (
                    <option key={p.id} value={p.id}>
                      {p.name} ({p.price.toLocaleString()}円)
                    </option>
                  ))}
                </select>
              </div>
 
              <div className="w-24">
                <input
                  type="number"
                  {...form.register(`items.${index}.quantity`)}
                  className="w-full border rounded px-2 py-1.5 text-sm"
                  placeholder="数量"
                  min={1}
                />
              </div>
 
              <div className="w-24">
                <input
                  type="number"
                  {...form.register(`items.${index}.discount`)}
                  className="w-full border rounded px-2 py-1.5 text-sm"
                  placeholder="割引%"
                  min={0}
                  max={100}
                />
              </div>
 
              <div className="flex-1 min-w-[150px]">
                <input
                  {...form.register(`items.${index}.note`)}
                  className="w-full border rounded px-2 py-1.5 text-sm"
                  placeholder="メモ"
                />
              </div>
 
              <div className="flex gap-1">
                {index > 0 && (
                  <button
                    type="button"
                    onClick={() => move(index, index - 1)}
                    className="p-1.5 text-gray-400 hover:text-gray-600"
                    title="上に移動"
                  >
                    ↑
                  </button>
                )}
                {index < fields.length - 1 && (
                  <button
                    type="button"
                    onClick={() => move(index, index + 1)}
                    className="p-1.5 text-gray-400 hover:text-gray-600"
                    title="下に移動"
                  >
                    ↓
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => handleDuplicate(index)}
                  className="p-1.5 text-gray-400 hover:text-blue-600"
                  title="複製"
                >
                  複製
                </button>
                {fields.length > 1 && (
                  <button
                    type="button"
                    onClick={() => remove(index)}
                    className="p-1.5 text-gray-400 hover:text-red-600"
                    title="削除"
                  >
                    削除
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
 
        <button
          type="button"
          onClick={() => append({ productId: '', quantity: 1, unitPrice: 0, discount: 0, note: '' })}
          className="mt-3 px-4 py-2 border-2 border-dashed border-gray-300
            rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-500
            transition-colors w-full"
          disabled={fields.length >= 50}
        >
          + 商品を追加
        </button>
      </fieldset>
 
      {/* 注文サマリー */}
      <OrderSummary control={form.control} />
 
      {/* 送信ボタン */}
      <button
        type="submit"
        disabled={form.formState.isSubmitting}
        className="w-full py-3 bg-blue-600 text-white rounded-lg
          hover:bg-blue-700 disabled:opacity-50 font-medium"
      >
        {form.formState.isSubmitting ? '注文処理中...' : '注文を確定する'}
      </button>
    </form>
  );
}

// 請求書フォーム: セクション > 明細行 のネスト構造
const invoiceSectionSchema = z.object({
  sectionTitle: z.string().min(1, 'セクション名は必須です'),
  items: z.array(z.object({
    description: z.string().min(1, '説明は必須です'),
    quantity: z.coerce.number().min(1),
    unitPrice: z.coerce.number().min(0),
    taxRate: z.coerce.number().min(0).max(100).default(10),
  })).min(1, '1つ以上の明細を追加してください'),
});
 
const invoiceSchema = z.object({
  invoiceNumber: z.string().min(1),
  clientName: z.string().min(1),
  issueDate: z.string().min(1),
  dueDate: z.string().min(1),
  sections: z.array(invoiceSectionSchema).min(1),
});
 
type InvoiceFormData = z.infer<typeof invoiceSchema>;
 
function InvoiceForm() {
  const form = useForm<InvoiceFormData>({
    resolver: zodResolver(invoiceSchema),
    defaultValues: {
      invoiceNumber: '',
      clientName: '',
      issueDate: new Date().toISOString().split('T')[0],
      dueDate: '',
      sections: [
        {
          sectionTitle: 'サービス',
          items: [{ description: '', quantity: 1, unitPrice: 0, taxRate: 10 }],
        },
      ],
    },
  });
 
  const { fields: sectionFields, append: appendSection, remove: removeSection } =
    useFieldArray({
      control: form.control,
      name: 'sections',
    });
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      {sectionFields.map((section, sectionIndex) => (
        <InvoiceSection
          key={section.id}
          form={form}
          sectionIndex={sectionIndex}
          onRemove={() => removeSection(sectionIndex)}
          canRemove={sectionFields.length > 1}
        />
      ))}
 
      <button
        type="button"
        onClick={() =>
          appendSection({
            sectionTitle: '',
            items: [{ description: '', quantity: 1, unitPrice: 0, taxRate: 10 }],
          })
        }
      >
        + セクションを追加
      </button>
    </form>
  );
}
 
// ネストした明細行コンポーネント
function InvoiceSection({
  form,
  sectionIndex,
  onRemove,
  canRemove,
}: {
  form: UseFormReturn<InvoiceFormData>;
  sectionIndex: number;
  onRemove: () => void;
  canRemove: boolean;
}) {
  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: `sections.${sectionIndex}.items`,
  });
 
  return (
    <div className="border rounded-lg p-4 mb-4">
      <div className="flex justify-between items-center mb-4">
        <input
          {...form.register(`sections.${sectionIndex}.sectionTitle`)}
          className="text-lg font-medium border-b border-transparent
            hover:border-gray-300 focus:border-blue-500 outline-none"
          placeholder="セクション名"
        />
        {canRemove && (
          <button type="button" onClick={onRemove} className="text-red-500">
            セクション削除
          </button>
        )}
      </div>
 
      <table className="w-full">
        <thead>
          <tr className="text-left text-sm text-gray-500">
            <th className="pb-2">説明</th>
            <th className="pb-2 w-24">数量</th>
            <th className="pb-2 w-32">単価</th>
            <th className="pb-2 w-24">税率</th>
            <th className="pb-2 w-32">小計</th>
            <th className="pb-2 w-16"></th>
          </tr>
        </thead>
        <tbody>
          {fields.map((field, itemIndex) => (
            <InvoiceLineItem
              key={field.id}
              form={form}
              sectionIndex={sectionIndex}
              itemIndex={itemIndex}
              onRemove={() => remove(itemIndex)}
              canRemove={fields.length > 1}
            />
          ))}
        </tbody>
      </table>
 
      <button
        type="button"
        onClick={() => append({ description: '', quantity: 1, unitPrice: 0, taxRate: 10 })}
        className="mt-2 text-sm text-blue-500 hover:text-blue-700"
      >
        + 明細を追加
      </button>
    </div>
  );
}

import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
 
// ソート可能な行コンポーネント
function SortableItem({
  id,
  children,
}: {
  id: string;
  children: React.ReactNode;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });
 
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    zIndex: isDragging ? 1 : 0,
  };
 
  return (
    <div ref={setNodeRef} style={style} className="relative">
      <div
        {...attributes}
        {...listeners}
        className="absolute left-0 top-0 bottom-0 w-8 flex items-center
          justify-center cursor-grab active:cursor-grabbing text-gray-400
          hover:text-gray-600"
      >
        ⋮⋮
      </div>
      <div className="pl-8">{children}</div>
    </div>
  );
}
 
// ドラッグ&ドロップ対応の動的フィールド
function DraggableFieldArray() {
  const form = useForm({ /* ... */ });
  const { fields, move } = useFieldArray({
    control: form.control,
    name: 'items',
  });
 
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
 
    const oldIndex = fields.findIndex(f => f.id === active.id);
    const newIndex = fields.findIndex(f => f.id === over.id);
 
    if (oldIndex !== -1 && newIndex !== -1) {
      move(oldIndex, newIndex);
    }
  };
 
  return (
    <DndContext
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext
        items={fields.map(f => f.id)}
        strategy={verticalListSortingStrategy}
      >
        {fields.map((field, index) => (
          <SortableItem key={field.id} id={field.id}>
            {/* フィールドの内容 */}
            <input {...form.register(`items.${index}.name`)} />
          </SortableItem>
        ))}
      </SortableContext>
    </DndContext>
  );
}

// アンチパターン: 全フィールドの再レンダリング
function BadExample() {
  const { fields } = useFieldArray({ control, name: 'items' });
  // watch() で全体を監視すると、1フィールドの変更で全行が再レンダリング
  const allValues = form.watch('items'); // 非推奨
 
  return fields.map((field, i) => (
    <div key={field.id}>
      <input {...form.register(`items.${i}.name`)} />
      <span>合計: {allValues[i].price * allValues[i].quantity}</span>
    </div>
  ));
}
 
// 推奨パターン: 行ごとに useWatch を使用
function OptimizedRow({
  index,
  control,
  register,
}: {
  index: number;
  control: any;
  register: any;
}) {
  // この行のデータのみを監視 → この行だけが再レンダリング
  const item = useWatch({ control, name: `items.${index}` });
 
  const lineTotal = useMemo(
    () => (item.price || 0) * (item.quantity || 0),
    [item.price, item.quantity]
  );
 
  return (
    <div>
      <input {...register(`items.${index}.name`)} />
      <input type="number" {...register(`items.${index}.price`)} />
      <input type="number" {...register(`items.${index}.quantity`)} />
      <span>小計: {lineTotal.toLocaleString()}円</span>
    </div>
  );
}
 
function GoodExample() {
  const { fields } = useFieldArray({ control: form.control, name: 'items' });
 
  return fields.map((field, i) => (
    <OptimizedRow
      key={field.id}
      index={i}
      control={form.control}
      register={form.register}
    />
  ));
}

// 通知設定: タイプによって異なるフィールドとバリデーション
const emailNotificationSchema = z.object({
  type: z.literal('email'),
  email: z.string().email('有効なメールアドレスを入力してください'),
  frequency: z.enum(['daily', 'weekly', 'monthly'], {
    errorMap: () => ({ message: '配信頻度を選択してください' }),
  }),
  format: z.enum(['html', 'text']).default('html'),
  categories: z.array(z.string()).min(1, '1つ以上のカテゴリを選択してください'),
});
 
const smsNotificationSchema = z.object({
  type: z.literal('sms'),
  phone: z.string()
    .regex(/^\+?\d{10,15}$/, '有効な電話番号を入力してください'),
  maxMessages: z.coerce
    .number()
    .min(1)
    .max(100)
    .default(10),
});
 
const webhookNotificationSchema = z.object({
  type: z.literal('webhook'),
  url: z.string().url('有効なURLを入力してください'),
  secret: z.string()
    .min(16, 'シークレットキーは16文字以上で入力してください'),
  events: z.array(z.string()).min(1, '1つ以上のイベントを選択してください'),
  retryCount: z.coerce.number().min(0).max(5).default(3),
  timeout: z.coerce.number().min(1000).max(30000).default(5000),
});
 
const slackNotificationSchema = z.object({
  type: z.literal('slack'),
  webhookUrl: z.string().url('有効なWebhook URLを入力してください'),
  channel: z.string().min(1, 'チャンネル名は必須です'),
  username: z.string().optional(),
  iconEmoji: z.string().optional(),
});
 
const notificationSchema = z.discriminatedUnion('type', [
  emailNotificationSchema,
  smsNotificationSchema,
  webhookNotificationSchema,
  slackNotificationSchema,
]);
 
type NotificationFormData = z.infer<typeof notificationSchema>;

function NotificationForm() {
  const form = useForm<NotificationFormData>({
    resolver: zodResolver(notificationSchema),
    defaultValues: { type: 'email' as const },
  });
 
  const notificationType = form.watch('type');
 
  // タイプ変更時にフィールドをリセット
  const handleTypeChange = (newType: NotificationFormData['type']) => {
    // 現在のタイプ固有のフィールドをクリア
    form.reset({ type: newType } as any);
  };
 
  const onSubmit = async (data: NotificationFormData) => {
    try {
      await api.notifications.create(data);
      toast.success('通知設定を保存しました');
    } catch (error) {
      toast.error('保存に失敗しました');
    }
  };
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
      {/* 通知タイプ選択 */}
      <div>
        <label className="block text-sm font-medium mb-2">通知タイプ</label>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {NOTIFICATION_TYPES.map((option) => (
            <label
              key={option.value}
              className={`flex items-center gap-2 p-3 border rounded-lg cursor-pointer
                transition-colors
                ${notificationType === option.value
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-200 hover:border-gray-300'
                }
              `}
            >
              <input
                type="radio"
                value={option.value}
                checked={notificationType === option.value}
                onChange={() => handleTypeChange(option.value)}
                className="sr-only"
              />
              <span className="text-xl">{option.icon}</span>
              <span className="text-sm font-medium">{option.label}</span>
            </label>
          ))}
        </div>
      </div>
 
      {/* 条件分岐フィールド */}
      {notificationType === 'email' && <EmailFields form={form} />}
      {notificationType === 'sms' && <SmsFields form={form} />}
      {notificationType === 'webhook' && <WebhookFields form={form} />}
      {notificationType === 'slack' && <SlackFields form={form} />}
 
      <button
        type="submit"
        disabled={form.formState.isSubmitting}
        className="w-full py-2 bg-blue-600 text-white rounded-lg"
      >
        保存する
      </button>
    </form>
  );
}
 
const NOTIFICATION_TYPES = [
  { value: 'email' as const, label: 'メール', icon: 'M' },
  { value: 'sms' as const, label: 'SMS', icon: 'S' },
  { value: 'webhook' as const, label: 'Webhook', icon: 'W' },
  { value: 'slack' as const, label: 'Slack', icon: 'K' },
];
 
// メール通知フィールド
function EmailFields({ form }: { form: UseFormReturn<any> }) {
  return (
    <div className="space-y-4 p-4 bg-blue-50 rounded-lg">
      <div>
        <label className="block text-sm font-medium mb-1">メールアドレス</label>
        <input
          type="email"
          {...form.register('email')}
          className="w-full border rounded px-3 py-2"
          placeholder="example@company.com"
        />
        {form.formState.errors.email && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.email.message as string}
          </p>
        )}
      </div>
 
      <div>
        <label className="block text-sm font-medium mb-1">配信頻度</label>
        <select {...form.register('frequency')} className="w-full border rounded px-3 py-2">
          <option value="">選択してください</option>
          <option value="daily">毎日</option>
          <option value="weekly">毎週</option>
          <option value="monthly">毎月</option>
        </select>
      </div>
 
      <div>
        <label className="block text-sm font-medium mb-1">フォーマット</label>
        <div className="flex gap-4">
          <label className="flex items-center gap-2">
            <input type="radio" value="html" {...form.register('format')} />
            HTML
          </label>
          <label className="flex items-center gap-2">
            <input type="radio" value="text" {...form.register('format')} />
            テキスト
          </label>
        </div>
      </div>
    </div>
  );
}
 
// Webhook フィールド
function WebhookFields({ form }: { form: UseFormReturn<any> }) {
  const [showSecret, setShowSecret] = useState(false);
 
  return (
    <div className="space-y-4 p-4 bg-purple-50 rounded-lg">
      <div>
        <label className="block text-sm font-medium mb-1">Webhook URL</label>
        <input
          type="url"
          {...form.register('url')}
          className="w-full border rounded px-3 py-2"
          placeholder="https://api.example.com/webhooks"
        />
        {form.formState.errors.url && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.url.message as string}
          </p>
        )}
      </div>
 
      <div>
        <label className="block text-sm font-medium mb-1">シークレットキー</label>
        <div className="relative">
          <input
            type={showSecret ? 'text' : 'password'}
            {...form.register('secret')}
            className="w-full border rounded px-3 py-2 pr-20"
            placeholder="16文字以上のシークレットキー"
          />
          <button
            type="button"
            onClick={() => setShowSecret(s => !s)}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500"
          >
            {showSecret ? '隠す' : '表示'}
          </button>
        </div>
      </div>
 
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">リトライ回数</label>
          <input
            type="number"
            {...form.register('retryCount')}
            className="w-full border rounded px-3 py-2"
            min={0}
            max={5}
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">タイムアウト (ms)</label>
          <input
            type="number"
            {...form.register('timeout')}
            className="w-full border rounded px-3 py-2"
            min={1000}
            max={30000}
            step={1000}
          />
        </div>
      </div>
    </div>
  );
}