"use client"

import { useRouter } from "next/navigation"
import { useFamily } from "@/context/family-context"
import { SiteHeader } from "@/components/site-header"
import { MemberForm } from "@/components/members/member-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import type { FamilyMember } from "@/types/family"

export default function NewMemberPage() {
  const { addMember, treeData } = useFamily()
  const router = useRouter()

  const existingMembers = Object.values(treeData.members)

  const handleSave = async (newMember: FamilyMember) => {
    try {
      await addMember({
        ...newMember,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      })
      router.push(`/members/${newMember.id}`)
    } catch (error) {
      console.error('添加成员失败:', error)
      alert('添加成员失败: ' + (error as Error).message)
    }
  }

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <div className="container mx-auto py-8">
        <div className="mb-6 flex items-center gap-2">
          <Button variant="ghost" onClick={() => router.back()}>
            <ArrowLeft className="mr-2 h-4 w-4" /> 返回
          </Button>
          <h1 className="text-2xl font-bold font-serif">新增家族成员</h1>
        </div>
        <MemberForm existingMembers={existingMembers} onSubmit={handleSave} onCancel={() => router.back()} />
      </div>
    </div>
  )
}