"use client"

import type React from "react"

import { useState, useEffect } from "react"
import type { FamilyMember, FamilyPhoto } from "@/types/family"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { CalendarIcon, User, Scroll, Users, Images, BookOpen } from "lucide-react"
import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle, ChineseCardDescription } from "@/components/ui/chinese-card"
import { Switch } from "@/components/ui/switch"
import { ImageUpload } from "@/components/ui/image-upload"
import { PhotoGallery } from "./photo-gallery"
import { StoryManager } from "./story-manager"
import { DateInputWithLunar } from "@/components/ui/date-input-with-lunar"
import { MemberNameWithStatus } from "@/components/member-name-with-status"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface MemberFormProps {
  initialData?: Partial<FamilyMember>
  existingMembers?: FamilyMember[]
  onSubmit: (data: FamilyMember) => void
  onCancel: () => void
  isFounder?: boolean
  hideTabs?: boolean
  activeTab?: string
}

export function MemberForm({ initialData, existingMembers = [], onSubmit, onCancel, isFounder = false, hideTabs = false, activeTab = "basic" }: MemberFormProps) {
  // 计算最大世系
  const maxGeneration = existingMembers.length > 0 
    ? Math.max(...existingMembers.map(m => m.generation || 1))
    : 1
  
  // 获取始祖的姓氏（第1世成员）
  const ancestorSurname = existingMembers.find(m => m.generation === 1)?.surname || ""
  
  // 始祖专用样式
  const founderCardClass = isFounder ? "border-2 border-amber-400 shadow-md" : ""
  
  // 生成兼容的UUID
  const generateUUID = () => {
    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
      return crypto.randomUUID()
    }
    // 降级方案：生成简单的UUID
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = Math.random() * 16 | 0
      const v = c === 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }

  // Initialize state with default values or initialData
  const [formData, setFormData] = useState<Partial<FamilyMember>>(() => {
    const defaults = {
      id: generateUUID(),
      surname: ancestorSurname,
      givenName: "",
      fullName: "",
      gender: "MALE" as "MALE" | "FEMALE",
      generation: maxGeneration,
      spouseIds: [],
      childrenIds: [],
      tags: [],
      photos: [] as FamilyPhoto[],
      photoIds: [] as string[],
    }
    
    if (!initialData) return defaults
    
    const normalizedPhotos: FamilyPhoto[] = initialData.photos && initialData.photos.length > 0
      ? initialData.photos
      : (initialData.photoIds || []).map((url) => ({
          url,
          uploadedAt: initialData.updatedAt || new Date().toISOString(),
        }))

    return {
      ...defaults,
      ...initialData,
      gender: (initialData.gender || "MALE").toUpperCase() as "MALE" | "FEMALE",
      spouseIds: initialData.spouseIds || [],
      childrenIds: initialData.childrenIds || [],
      tags: initialData.tags || [],
      fatherId: initialData.fatherId || undefined,
      motherId: initialData.motherId || undefined,
      photos: normalizedPhotos,
      photoIds: initialData.photoIds || normalizedPhotos.map((photo) => photo.url),
    }
  })

  const [errors, setErrors] = useState<string[]>([])

  const handleChange = (field: keyof FamilyMember, value: any) => {
    setFormData((prev) => {
      const newData = { ...prev, [field]: value }
      
      // 自动更新全名
      if (field === "surname" || field === "givenName") {
        newData.fullName = `${newData.surname || ""}${newData.givenName || ""}`
      }
      
      // 自动设置母亲从父亲
      if (field === "fatherId" && value) {
        const father = existingMembers.find(m => m.id === value)
        if (father && father.spouseIds && father.spouseIds.length > 0) {
          const motherId = father.spouseIds[0]
          if (!newData.motherId) {
            newData.motherId = motherId
          }
        }
      }
      
      // 自动设置父亲从母亲
      if (field === "motherId" && value) {
        const mother = existingMembers.find(m => m.id === value)
        if (mother && mother.spouseIds && mother.spouseIds.length > 0) {
          const fatherId = mother.spouseIds[0]
          if (!newData.fatherId) {
            newData.fatherId = fatherId
          }
        }
      }
      
      return newData
    })
  }

  const handlePhotosChange = (photos: FamilyPhoto[]) => {
    setFormData((prev) => ({
      ...prev,
      photos,
      photoIds: photos.map(p => p.url),
    }))
  }

  const handleSpouseAdd = (spouseId: string) => {
    if (spouseId === "none") return
    setFormData((prev) => ({
      ...prev,
      spouseIds: [...(prev.spouseIds || []), spouseId],
    }))
  }

  const handleSpouseRemove = (spouseId: string) => {
    setFormData((prev) => ({
      ...prev,
      spouseIds: (prev.spouseIds || []).filter((id) => id !== spouseId),
    }))
  }

  const handleChildAdd = (childId: string) => {
    if (childId === "none") return
    setFormData((prev) => ({
      ...prev,
      childrenIds: [...(prev.childrenIds || []), childId],
    }))
  }

  const handleChildRemove = (childId: string) => {
    setFormData((prev) => ({
      ...prev,
      childrenIds: (prev.childrenIds || []).filter((id) => id !== childId),
    }))
  }

  const validateForm = (): boolean => {
    const newErrors: string[] = []
    
    if (!formData.surname?.trim()) {
      newErrors.push("请填写姓氏")
    }
    
    if (!formData.givenName?.trim()) {
      newErrors.push("请填写名字")
    }
    
    if (!formData.gender) {
      newErrors.push("请选择性别")
    }
    
    if (!formData.generation || formData.generation < 1) {
      newErrors.push("请填写正确的世系")
    }

    // 注：允许孤立成员存在，可以后续通过族谱关联功能建立关系
    // 这样可以修正错误的关系设置
    
    setErrors(newErrors)
    return newErrors.length === 0
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!validateForm()) {
      return
    }
    
    // 确保所有必填字段都有值
    // 注意：fatherId/motherId 需要显式设为 null 而不是 undefined，
    // 否则 JSON.stringify 会忽略 undefined 值，导致后端收不到更新
    const memberData: FamilyMember = {
      id: formData.id || generateUUID(),
      surname: formData.surname || "",
      givenName: formData.givenName || "",
      fullName: formData.fullName || `${formData.surname || ""}${formData.givenName || ""}`,
      gender: formData.gender as "MALE" | "FEMALE",
      generation: formData.generation || 1,
      spouseIds: formData.spouseIds || [],
      childrenIds: formData.childrenIds || [],
      tags: formData.tags || [],
      photos: formData.photos || [],
      photoIds: formData.photoIds || [],
      fatherId: formData.fatherId,
      motherId: formData.motherId,
      spouseFatherName: formData.spouseFatherName,
      spouseMotherName: formData.spouseMotherName,
      phone: formData.phone,
      telephone: formData.telephone,
      email: formData.email,
      occupation: formData.occupation,
      courtesyName: formData.courtesyName,
      artName: formData.artName,
      generationName: formData.generationName,
      posthumousName: formData.posthumousName,
      birthDate: formData.birthDate,
      deathDate: formData.deathDate,
      isLunarDate: formData.isLunarDate || false,
      ancestralHome: formData.ancestralHome,
      birthPlace: formData.birthPlace,
      deathPlace: formData.deathPlace,
      burialPlace: formData.burialPlace,
      address: formData.address,
      bio: formData.bio,
      avatarUrl: formData.avatarUrl,
      stories: formData.stories || [],
      createdAt: formData.createdAt || new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }
    
    onSubmit(memberData)
  }

  const potentialRelatives = existingMembers.filter((m) => m.id !== formData.id)

  return (
    <form onSubmit={handleSubmit} className="w-full">
      {errors.length > 0 && (
        <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md border border-destructive/20 mb-6">
          <p className="font-bold mb-1">请检查以下问题：</p>
          <ul className="list-disc list-inside text-sm">
            {errors.map((err, index) => (
              <li key={index}>{err}</li>
            ))}
          </ul>
        </div>
      )}

      <Tabs defaultValue="info" value={hideTabs ? activeTab : undefined} className="w-full flex flex-col h-full">
        {!hideTabs && (
          <div className="flex-shrink-0">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="info">基本信息</TabsTrigger>
              <TabsTrigger value="details">详细资料</TabsTrigger>
              <TabsTrigger value="photos">生平影像</TabsTrigger>
              <TabsTrigger value="stories">家族故事</TabsTrigger>
            </TabsList>
          </div>
        )}

        <div className="flex-1 overflow-y-auto">
          {/* 基本信息Tab - 包含基本信息和家庭关系 */}
          <TabsContent value="info" className="space-y-6 mt-6 w-full">
            {/* 基本信息卡片 */}
            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <User className="h-5 w-5" />
                  基本信息
                </ChineseCardTitle>
              </ChineseCardHeader>
              <ChineseCardContent className="space-y-6">
                {/* 头像和基本信息两栏布局 */}
                <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-8">
                  {/* 左侧：头像 */}
                  <div className="flex flex-col items-center">
                    <ImageUpload
                      value={formData.avatarUrl}
                      onChange={(imageUrl) => handleChange("avatarUrl", imageUrl || null)}
                    />
                  </div>
                  
                  {/* 右侧：表单 */}
                  <div className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="surname">
                          姓氏 <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="surname"
                          value={formData.surname || ""}
                          onChange={(e) => handleChange("surname", e.target.value)}
                          placeholder="例如：李"
                          className={errors.includes("surname") ? "border-red-500" : ""}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="givenName">
                          名字 <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="givenName"
                          value={formData.givenName || ""}
                          onChange={(e) => handleChange("givenName", e.target.value)}
                          placeholder="例如：明"
                          className={errors.includes("givenName") ? "border-red-500" : ""}
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label>性别</Label>
                      <RadioGroup
                        value={formData.gender}
                        onValueChange={(val) => handleChange("gender", val)}
                        className="flex space-x-4"
                      >
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="MALE" id="male" />
                          <Label htmlFor="male">男</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="FEMALE" id="female" />
                          <Label htmlFor="female">女</Label>
                        </div>
                      </RadioGroup>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="generation">世代 (第几世)</Label>
                      <div className="flex items-center gap-4">
                        <Input
                          id="generation"
                          type="number"
                          value={formData.generation || ""}
                          onChange={(e) => handleChange("generation", parseInt(e.target.value) || 0)}
                          className="w-32"
                          min={1}
                        />
                        <span className="text-sm text-muted-foreground">世</span>
                      </div>
                    </div>
                  </div>
                </div>
              </ChineseCardContent>
            </ChineseCard>

            {/* 家庭关系 - 左右两个独立卡片 */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 左栏：父母 */}
              <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
                <ChineseCardHeader>
                  <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                    <Users className="h-5 w-5" />
                    父母
                  </ChineseCardTitle>
                  {!isFounder && (
                    <ChineseCardDescription className="text-xs">
                      需关联父母或配偶以连接至家族树
                    </ChineseCardDescription>
                  )}
                </ChineseCardHeader>
                <ChineseCardContent>
                  <div className="space-y-3">
                    <div className="space-y-2">
                      <Label htmlFor="fatherId">父亲</Label>
                      {isFounder ? (
                        <div className="space-y-2">
                          <Input
                            placeholder="填写父亲姓名"
                            value={formData.spouseFatherName || ""}
                            onChange={(e) => handleChange("spouseFatherName", e.target.value)}
                          />
                          <p className="text-xs text-muted-foreground">始祖为第一世，父母信息仅记录姓名</p>
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <Select
                            value={formData.fatherId || "none"}
                            onValueChange={(val) => {
                              const newValue = val === "none" ? undefined : val
                              handleChange("fatherId", newValue)
                            }}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="选择父亲" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="none">无</SelectItem>
                              {potentialRelatives
                                .filter((m) => {
                                  if (m.id === formData.fatherId) return true
                                  return m.gender === "MALE" && m.generation === (formData.generation || 1) - 1
                                })
                                .map((m) => (
                                  <SelectItem key={m.id} value={m.id}>
                                    <MemberNameWithStatus 
                                      name={m.fullName}
                                      isDead={!!m.deathDate}
                                    /> ({m.generation}世)
                                  </SelectItem>
                                ))}
                            </SelectContent>
                          </Select>
                          {!formData.fatherId && (
                            <Input
                              placeholder="或填写姓名"
                              value={formData.spouseFatherName || ""}
                              onChange={(e) => handleChange("spouseFatherName", e.target.value)}
                              className="w-32"
                            />
                          )}
                        </div>
                      )}
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="motherId">母亲</Label>
                      {isFounder ? (
                        <div className="space-y-2">
                          <Input
                            placeholder="填写母亲姓名"
                            value={formData.spouseMotherName || ""}
                            onChange={(e) => handleChange("spouseMotherName", e.target.value)}
                          />
                          <p className="text-xs text-muted-foreground">始祖为第一世，父母信息仅记录姓名</p>
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <Select
                            value={formData.motherId || "none"}
                            onValueChange={(val) => {
                              const newValue = val === "none" ? undefined : val
                              handleChange("motherId", newValue)
                            }}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="选择母亲" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="none">无</SelectItem>
                              {potentialRelatives
                                .filter((m) => {
                                  if (m.id === formData.motherId) return true
                                  return m.gender === "FEMALE" && m.generation === (formData.generation || 1) - 1
                                })
                                .map((m) => (
                                  <SelectItem key={m.id} value={m.id}>
                                    <MemberNameWithStatus 
                                      name={m.fullName}
                                      isDead={!!m.deathDate}
                                    /> ({m.generation}世)
                                  </SelectItem>
                                ))}
                            </SelectContent>
                          </Select>
                          {!formData.motherId && (
                            <Input
                              placeholder="或填写姓名"
                              value={formData.spouseMotherName || ""}
                              onChange={(e) => handleChange("spouseMotherName", e.target.value)}
                              className="w-32"
                            />
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                </ChineseCardContent>
              </ChineseCard>

              {/* 右栏：配偶和子女 */}
              <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
                <ChineseCardHeader>
                  <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                    <Users className="h-5 w-5" />
                    配偶与子女
                  </ChineseCardTitle>
                  {!isFounder && (
                    <ChineseCardDescription className="text-xs">
                      需关联父母或配偶以连接至家族树
                    </ChineseCardDescription>
                  )}
                </ChineseCardHeader>
                <ChineseCardContent>
                  <div className="space-y-3">
                    <div className="space-y-2">
                      <Label htmlFor="spouseId">配偶</Label>
                      <Select value="none" onValueChange={handleSpouseAdd}>
                        <SelectTrigger>
                          <SelectValue placeholder="添加配偶..." />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">选择配偶</SelectItem>
                          {potentialRelatives
                            .filter((m) => {
                              if (formData.spouseIds?.includes(m.id)) return false
                              if (formData.fatherId === m.id || formData.motherId === m.id) return false
                              if (formData.childrenIds?.includes(m.id)) return false
                              if (m.generation !== (formData.generation || 1)) return false
                              if (m.gender === formData.gender) return false
                              return true
                            })
                            .map((m) => (
                              <SelectItem key={m.id} value={m.id}>
                                <MemberNameWithStatus 
                                  name={m.fullName}
                                  isDead={!!m.deathDate}
                                /> ({m.generation}世)
                              </SelectItem>
                            ))}
                        </SelectContent>
                      </Select>
                      
                      {formData.spouseIds && formData.spouseIds.length > 0 && (
                        <div className="mt-2 space-y-1">
                          {formData.spouseIds.map((spouseId, index) => {
                            const spouse = existingMembers.find(m => m.id === spouseId)
                            if (!spouse) return null
                            
                            return (
                              <div key={spouseId} className="flex items-center justify-between p-2 bg-muted rounded text-sm">
                                <span>
                                  {index + 1}. <MemberNameWithStatus 
                                    name={spouse.fullName}
                                    isDead={!!spouse.deathDate}
                                  />
                                </span>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleSpouseRemove(spouseId)}
                                  className="h-6 w-6 p-0 hover:bg-destructive hover:text-destructive-foreground"
                                >
                                  ×
                                </Button>
                              </div>
                            )
                          })}
                        </div>
                      )}
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="childId">子女</Label>
                      <Select value="none" onValueChange={handleChildAdd}>
                        <SelectTrigger>
                          <SelectValue placeholder="添加子女..." />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">选择子女</SelectItem>
                          {potentialRelatives
                            .filter((m) => {
                              if (m.generation !== (formData.generation || 1) + 1) return false
                              if (formData.childrenIds?.includes(m.id)) return false
                              if (formData.spouseIds?.includes(m.id)) return false
                              const isSpouse = !m.fatherId && !m.motherId && m.spouseIds && m.spouseIds.length > 0
                              if (isSpouse) return false
                              if (formData.gender === 'MALE') {
                                if (m.fatherId) return false
                              } else if (formData.gender === 'FEMALE') {
                                if (m.motherId) return false
                              }
                              return true
                            })
                            .map((m) => (
                              <SelectItem key={m.id} value={m.id}>
                                <MemberNameWithStatus 
                                  name={m.fullName}
                                  isDead={!!m.deathDate}
                                /> ({m.generation}世)
                              </SelectItem>
                            ))}
                        </SelectContent>
                      </Select>
                      
                      {formData.childrenIds && formData.childrenIds.length > 0 && (
                        <div className="mt-2 space-y-1">
                          {formData.childrenIds.map((childId, index) => {
                            const child = existingMembers.find(m => m.id === childId)
                            if (!child) return null
                            
                            return (
                              <div key={childId} className="flex items-center justify-between p-2 bg-muted rounded text-sm">
                                <span>
                                  {index + 1}. <MemberNameWithStatus 
                                    name={child.fullName}
                                    isDead={!!child.deathDate}
                                  />
                                </span>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleChildRemove(childId)}
                                  className="h-6 w-6 p-0 hover:bg-destructive hover:text-destructive-foreground"
                                >
                                  ×
                                </Button>
                              </div>
                            )
                          })}
                        </div>
                      )}
                    </div>
                  </div>
                </ChineseCardContent>
              </ChineseCard>
            </div>
          </TabsContent>

          {/* 详细资料Tab */}
          <TabsContent value="details" className="space-y-6 mt-6 w-full">
          {/* 使用两列布局放置两个卡片 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <Scroll className="h-5 w-5" />
                  传统称谓
                </ChineseCardTitle>
              </ChineseCardHeader>
              <ChineseCardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="courtesyName">字</Label>
                    <Input
                      id="courtesyName"
                      value={formData.courtesyName || ""}
                      onChange={(e) => handleChange("courtesyName", e.target.value)}
                      placeholder="例如：伯虎"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="artName">号</Label>
                    <Input
                      id="artName"
                      value={formData.artName || ""}
                      onChange={(e) => handleChange("artName", e.target.value)}
                      placeholder="例如：六如居士"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="generationName">字辈</Label>
                    <Input
                      id="generationName"
                      value={formData.generationName || ""}
                      onChange={(e) => handleChange("generationName", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="posthumousName">谥号</Label>
                    <Input
                      id="posthumousName"
                      value={formData.posthumousName || ""}
                      onChange={(e) => handleChange("posthumousName", e.target.value)}
                    />
                  </div>
                </div>
              </ChineseCardContent>
            </ChineseCard>

            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <CalendarIcon className="h-5 w-5" />
                  生平日期
                </ChineseCardTitle>
              </ChineseCardHeader>
              <ChineseCardContent className="space-y-4">
                <div className="grid grid-cols-1 gap-4">
                  <DateInputWithLunar
                  id="birthDate"
                  label="出生日期"
                  value={formData.birthDate || ""}
                  isLunar={formData.isLunarDate || false}
                  onChange={(value) => handleChange("birthDate", value)}
                  onLunarChange={(isLunar) => handleChange("isLunarDate", isLunar)}
                  showLunarToggle={true}
                />
                <DateInputWithLunar
                  id="deathDate"
                  label="逝世日期"
                  value={formData.deathDate || ""}
                  isLunar={formData.isLunarDate || false}
                  onChange={(value) => handleChange("deathDate", value)}
                  onLunarChange={(isLunar) => handleChange("isLunarDate", isLunar)}
                  showLunarToggle={true}
                />
              </div>
            </ChineseCardContent>
          </ChineseCard>
          </div>

          {/* 地点和简介卡片 */}
          <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
            <ChineseCardHeader>
              <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                <Scroll className="h-5 w-5" />
                地点与简介
              </ChineseCardTitle>
            </ChineseCardHeader>
            <ChineseCardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="ancestralHome">籍贯</Label>
                  <Input
                    id="ancestralHome"
                    value={formData.ancestralHome || ""}
                    onChange={(e) => handleChange("ancestralHome", e.target.value)}
                    placeholder="请输入籍贯"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="birthPlace">出生地</Label>
                  <Input
                    id="birthPlace"
                    value={formData.birthPlace || ""}
                    onChange={(e) => handleChange("birthPlace", e.target.value)}
                    placeholder="请输入出生地"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="address">居住地</Label>
                  <Input
                    id="address"
                    value={formData.address || ""}
                    onChange={(e) => handleChange("address", e.target.value)}
                    placeholder="请输入居住地"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="deathPlace">逝世地</Label>
                  <Input
                    id="deathPlace"
                    value={formData.deathPlace || ""}
                    onChange={(e) => handleChange("deathPlace", e.target.value)}
                    placeholder="请输入逝世地"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="burialPlace">安葬地</Label>
                  <Input
                    id="burialPlace"
                    value={formData.burialPlace || ""}
                    onChange={(e) => handleChange("burialPlace", e.target.value)}
                    placeholder="请输入安葬地"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="occupation">职业</Label>
                  <Input
                    id="occupation"
                    value={formData.occupation || ""}
                    onChange={(e) => handleChange("occupation", e.target.value)}
                    placeholder="请输入职业"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="phone">手机号</Label>
                  <Input
                    id="phone"
                    value={formData.phone || ""}
                    onChange={(e) => handleChange("phone", e.target.value)}
                    placeholder="请输入手机号"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="telephone">固定电话</Label>
                  <Input
                    id="telephone"
                    value={formData.telephone || ""}
                    onChange={(e) => handleChange("telephone", e.target.value)}
                    placeholder="请输入固定电话"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">电子邮箱</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email || ""}
                    onChange={(e) => handleChange("email", e.target.value)}
                    placeholder="请输入电子邮箱"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="bio">个人简介</Label>
                <Textarea
                  id="bio"
                  value={formData.bio || ""}
                  onChange={(e) => handleChange("bio", e.target.value)}
                  placeholder="请输入个人简介"
                  rows={4}
                />
              </div>
            </ChineseCardContent>
          </ChineseCard>
        </TabsContent>

          {/* 生平影像Tab */}
          <TabsContent value="photos" className="space-y-6 mt-6 w-full">
            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <Images className="h-5 w-5" />
                  照片墙
                </ChineseCardTitle>
                <ChineseCardDescription>上传多张照片记录珍贵时刻</ChineseCardDescription>
              </ChineseCardHeader>
              <ChineseCardContent>
                <PhotoGallery
                  photos={formData.photos}
                  photoIds={formData.photoIds}
                  onChange={handlePhotosChange}
                />
              </ChineseCardContent>
            </ChineseCard>
          </TabsContent>

          {/* 家族故事Tab */}
          <TabsContent value="stories" className="space-y-6 mt-6 w-full">
            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <BookOpen className="h-5 w-5" />
                  家族故事
                </ChineseCardTitle>
                <ChineseCardDescription>记录与此成员相关的家族故事</ChineseCardDescription>
              </ChineseCardHeader>
              <ChineseCardContent>
                <StoryManager
                  stories={formData.stories || []}
                  onChange={(stories) => handleChange("stories", stories)}
                />
              </ChineseCardContent>
            </ChineseCard>

            <ChineseCard variant="default" cornerOrnament className="shadow-sm w-full">
              <ChineseCardHeader>
                <ChineseCardTitle className="flex items-center gap-2 text-lg font-serif">
                  <Scroll className="h-5 w-5" />
                  标签
                </ChineseCardTitle>
                <ChineseCardDescription>添加标签以便分类和搜索（按回车添加）</ChineseCardDescription>
              </ChineseCardHeader>
              <ChineseCardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="flex gap-2">
                    <Input
                      placeholder="输入标签，按回车添加..."
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          e.preventDefault()
                          const input = e.currentTarget
                          const value = input.value.trim()
                          if (value && !(formData.tags || []).includes(value)) {
                            handleChange('tags', [...(formData.tags || []), value])
                            input.value = ''
                          }
                        }
                      }}
                    />
                  </div>
                  {formData.tags && formData.tags.length > 0 && (
                    <div className="flex flex-wrap gap-2">
                      {formData.tags.map((tag, index) => (
                        <span
                          key={index}
                          className="inline-flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary text-sm rounded-md border border-primary/20"
                        >
                          {tag}
                          <button
                            type="button"
                            onClick={() => {
                              const newTags = formData.tags?.filter((_, i) => i !== index) || []
                              handleChange('tags', newTags)
                          }}
                          className="ml-1 hover:text-destructive"
                        >
                          ×
                        </button>
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </ChineseCardContent>
          </ChineseCard>
          </TabsContent>
        </div>
      </Tabs>
    </form>
  )
}