"use client"

import { useTranslations } from "next-intl"

import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import type { ChildRow } from "@/modules/onboarding/types"

interface ParentChildrenFormProps {
  /** 当前已填写的子女行（受控）。注意：避免使用 `children` 作为 prop 名，与 React 保留字冲突 */
  childRows: ChildRow[]
  /** 是否正在提交（用于禁用所有交互按钮） */
  isSubmitting: boolean
  /** 更新第 idx 行的字段 */
  onUpdate: (idx: number, patch: Partial<ChildRow>) => void
  /** 新增一行空子女记录 */
  onAdd: () => void
  /** 删除第 idx 行（保留至少 1 行） */
  onRemove: (idx: number) => void
}

/**
 * 家长 Onboarding 第 2 步：子女绑定子表单。
 *
 * 设计目标（P1-2 拆分）：
 * - 将原 onboarding-stepper.tsx 中最大的子表单（~80 行）抽取为独立组件
 * - 纯受控组件，状态由父级管理，便于复用与测试
 * - 不直接调用任何 Server Action / Toast，所有副作用通过 props 回调上抛
 */
export function ParentChildrenForm({
  childRows,
  isSubmitting,
  onUpdate,
  onAdd,
  onRemove,
}: ParentChildrenFormProps) {
  const t = useTranslations("onboarding")
  const tCommon = useTranslations("common.actions")

  return (
    <div className="grid gap-4">
      <div className="rounded-md border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground">
        {t("parent.bindHint")}
      </div>

      {childRows.map((row, idx) => (
        <div key={idx} className="grid gap-3 rounded-md border p-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">{t("parent.childN", { index: idx + 1 })}</span>
            {childRows.length > 1 ? (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => onRemove(idx)}
                disabled={isSubmitting}
              >
                {tCommon("remove")}
              </Button>
            ) : null}
          </div>

          <div className="grid gap-2">
            <Label htmlFor={`onb_child_email_${idx}`}>{t("parent.childEmail")} *</Label>
            <Input
              id={`onb_child_email_${idx}`}
              type="email"
              value={row.childEmail}
              onChange={(e) => onUpdate(idx, { childEmail: e.target.value })}
              placeholder="student@example.com"
            />
          </div>

          <div className="grid gap-2 sm:grid-cols-2">
            <div className="grid gap-2">
              <Label htmlFor={`onb_child_birth_${idx}`}>{t("parent.childBirthDate")} *</Label>
              <Input
                id={`onb_child_birth_${idx}`}
                type="date"
                value={row.childBirthDate}
                onChange={(e) => onUpdate(idx, { childBirthDate: e.target.value })}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor={`onb_child_phone_${idx}`}>{t("parent.childPhoneSuffix")} *</Label>
              <Input
                id={`onb_child_phone_${idx}`}
                value={row.childPhoneSuffix}
                onChange={(e) =>
                  onUpdate(idx, {
                    childPhoneSuffix: e.target.value.replace(/\D/g, "").slice(0, 4),
                  })
                }
                placeholder="4 位数字"
                inputMode="numeric"
                maxLength={4}
              />
            </div>
          </div>

          <div className="grid gap-2">
            <Label htmlFor={`onb_child_relation_${idx}`}>{t("parent.childRelation")}</Label>
            <Input
              id={`onb_child_relation_${idx}`}
              value={row.childRelation}
              onChange={(e) => onUpdate(idx, { childRelation: e.target.value })}
              placeholder={t("parent.childRelationPlaceholder")}
              maxLength={50}
            />
          </div>
        </div>
      ))}

      {childRows.length < 10 ? (
        <Button type="button" variant="outline" onClick={onAdd} disabled={isSubmitting}>
          {t("parent.addChild")}
        </Button>
      ) : null}
    </div>
  )
}
