import { useTranslation } from '@/hooks/use-translation';
import React, { useMemo, useState, useEffect } from 'react';
import { Head, Link, useForm, router } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Save, X, Search, Trash2, UserPlus } from 'lucide-react';
import { type Member, type BreadcrumbItem } from '@/types';
import ParentSelector from '@/components/parent-selector';
import { Badge } from '@/components/ui/badge';

interface Props {
  member: Member;
  relationshipTypes: Record<string, string>;
}

interface MemberForm {
  member_type: 'member' | 'contact' | 'prospect' | 'former';
  first_name: string;
  last_name: string;
  middle_name: string;
  title: string;
  email: string;
  phone1: string;
  phone2: string;
  address_line_1: string;
  address_line_2: string;
  city: string;
  state: string;
  zip: string;
  country: string;
  dob: string;
  gender: string;
  parent_id: string;
  aliyah: boolean;
  bnaimitzvahdate: Date | null;
  chazanut: boolean;
  tribe: string;
  dvartorah: boolean;
  deceased: boolean;
  father_hebrew_name: string;
  mother_hebrew_name: string;
  hebrew_name: string;
  brianbatorah: boolean;
  maftir: boolean;
  anniversary_date: Date | null;
}

export default function MembersEdit({ member, relationshipTypes }: Readonly<Props>) {
    const { t } = useTranslation();
  const [memberSearch, setMemberSearch] = useState('');
  const [memberSearchResults, setMemberSearchResults] = useState<Member[]>([]);
  const [selectedMember, setSelectedMember] = useState<Member | null>(null);
  const [relationshipType, setRelationshipType] = useState('child');

  // Search for members
  useEffect(() => {
    if (memberSearch.length >= 2) {
      const timer = setTimeout(() => {
        fetch(`/api/admin/members/search?q=${encodeURIComponent(memberSearch)}`)
          .then(res => res.json())
          .then(data => setMemberSearchResults(data.filter((m: Member) => m.id !== member.id)))
          .catch(err => console.error('Failed to search members:', err));
      }, 300);
      return () => clearTimeout(timer);
    } else {
      setMemberSearchResults([]);
    }
  }, [memberSearch, member.id]);

  const handleAddRelationship = () => {
    if (!selectedMember) return;
    
    router.post(`/admin/members/${member.id}/relationships`, {
      related_member_id: selectedMember.id,
      relationship_type: relationshipType,
    }, {
      preserveScroll: true,
      onSuccess: () => {
        setSelectedMember(null);
        setMemberSearch('');
        setRelationshipType('child');
      },
    });
  };

  const handleRemoveRelationship = (relationshipId: number) => {
    if (confirm('Are you sure you want to remove this relationship?')) {
      router.delete(`/admin/members/${member.id}/relationships`, {
        data: { relationship_id: relationshipId },
        preserveScroll: true,
        preserveState: true,
      });
    }
  };

  // Format date for HTML date input (YYYY-MM-DD)
  const formatDateForInput = (dateValue: any): string => {
    if (!dateValue) return '';
    if (typeof dateValue === 'string') {
      return dateValue.split('T')[0];
    }
    return '';
  };

  const { data, setData, put, processing, errors } = useForm<MemberForm>({
    member_type: member.member_type || 'member',
    first_name: member.first_name || '',
    last_name: member.last_name || '',
    middle_name: member.middle_name || '',
    title: member.title || '',
    email: member.email || '',
    phone1: member.phone1 || '',
    phone2: member.phone2 || '',
    address_line_1: member.address_line_1 || '',
    address_line_2: member.address_line_2 || '',
    city: member.city || '',
    state: member.state || '',
    zip: member.zip || '',
    country: member.country || '',
    dob: formatDateForInput(member.dob),
    gender: member.gender || '',
    parent_id: member.parent_id?.toString() || '',
    aliyah: (member as any).aliyah || false,
    bnaimitzvahdate: (member as any).bnaimitzvahdate ? new Date((member as any).bnaimitzvahdate) : null,
    chazanut: (member as any).chazanut || false,
    tribe: (member as any).tribe || '',
    dvartorah: (member as any).dvartorah || false,
    deceased: (member as any).deceased || false,
    father_hebrew_name: (member as any).father_hebrew_name || '',
    mother_hebrew_name: (member as any).mother_hebrew_name || '',
    hebrew_name: (member as any).hebrew_name || '',
    brianbatorah: (member as any).brianbatorah || false,
    maftir: (member as any).maftir || false,
    anniversary_date: (member as any).anniversary_date ? new Date((member as any).anniversary_date) : null,
  });

  const breadcrumbs: BreadcrumbItem[] = useMemo(() => [
    {
      title: 'Dashboard',
      href: '/dashboard',
    },
    {
      title: 'Members',
      href: '/admin/members',
    },
    {
      title: `Edit ${member.first_name} ${member.last_name}`,
      href: `/admin/members/${member.id}/edit`,
    }
  ],[member.first_name, member.last_name, member.id]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    put(`/admin/members/${member.id}`);
  };

  return (
    <AppLayout breadcrumbs={breadcrumbs}>
      <Head title={`Edit ${member.first_name} ${member.last_name}`} />

      <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
        <div className="flex items-center gap-4">
          <div>
            <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
              Edit {member.first_name} {member.last_name}
            </h1>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {t('Update member information')}
            </p>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="space-y-8">
          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Personal Information')}
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <Label htmlFor="member_type">Type *</Label>
                <Select value={data.member_type} onValueChange={(value: any) => setData('member_type', value)}>
                  <SelectTrigger>
                    <SelectValue placeholder={t('Select type')} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="member">{t('Member')}</SelectItem>
                    <SelectItem value="contact">{t('Contact')}</SelectItem>
                    <SelectItem value="prospect">{t('Prospect')}</SelectItem>
                    <SelectItem value="former">{t('Former Member')}</SelectItem>
                  </SelectContent>
                </Select>
                {errors.member_type && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.member_type}</p>
                )}
              </div>

              <div>
                <Label htmlFor="title">{t('Title')}</Label>
                <Input
                  id="title"
                  type="text"
                  placeholder={t('Mr., Mrs., Dr., Rabbi, etc.')}
                  value={data.title}
                  onChange={(e) => setData('title', e.target.value)}
                />
                {errors.title && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.title}</p>
                )}
              </div>

              <div>
                <Label htmlFor="first_name">First Name *</Label>
                <Input
                  id="first_name"
                  type="text"
                  value={data.first_name}
                  onChange={(e) => setData('first_name', e.target.value)}
                  required
                />
                {errors.first_name && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.first_name}</p>
                )}
              </div>

              <div>
                <Label htmlFor="middle_name">{t('Middle Name')}</Label>
                <Input
                  id="middle_name"
                  type="text"
                  value={data.middle_name}
                  onChange={(e) => setData('middle_name', e.target.value)}
                />
                {errors.middle_name && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.middle_name}</p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <div>
                <Label htmlFor="last_name">Last Name *</Label>
                <Input
                  id="last_name"
                  type="text"
                  value={data.last_name}
                  onChange={(e) => setData('last_name', e.target.value)}
                  required
                />
                {errors.last_name && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.last_name}</p>
                )}
              </div>

              <div>
                <Label htmlFor="gender">{t('Gender')}</Label>
                <Select value={data.gender} onValueChange={(value) => setData('gender', value)}>
                  <SelectTrigger>
                    <SelectValue placeholder={t('Select gender')} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="male">{t('Male')}</SelectItem>
                    <SelectItem value="female">{t('Female')}</SelectItem>
                    <SelectItem value="other">{t('Other')}</SelectItem>
                  </SelectContent>
                </Select>
                {errors.gender && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.gender}</p>
                )}
              </div>
            </div>

            <div className="mt-6">
              <Label htmlFor="dob">{t('Date of Birth')}</Label>
              <Input
                id="dob"
                type="date"
                value={data.dob}
                onChange={(e) => setData('dob', e.target.value)}
              />
              {errors.dob && (
                <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.dob}</p>
              )}
            </div>

            <div className="mt-6">
              <Label htmlFor="parent_id">{t('Parent Account')}</Label>
              <ParentSelector
                value={data.parent_id}
                onChange={(value) => setData('parent_id', value)}
                error={errors.parent_id}
              />
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                {t('Optional - link this member to a parent account')}
              </p>
            </div>
          </div>

          {/* Relationships Section */}
          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Relationships')}
            </h2>

            {/* Relationships TO this member (related_by) */}
            {member.related_by && member.related_by.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{t('Related By')}</h3>
                <div className="space-y-2">
                  {member.related_by.map((relatedMember) => (
                    <div key={relatedMember.id} className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-gray-900 dark:text-gray-100">
                          {relatedMember.first_name} {relatedMember.last_name}
                        </span>
                        <Badge variant="outline" className="text-xs capitalize">
                          {relatedMember.pivot.relationship_type}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Existing relationships FROM this member */}
            {member.related_members && member.related_members.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{t('Current Relationships')}</h3>
                <div className="space-y-2">
                  {member.related_members.map((relatedMember) => (
                    <div key={relatedMember.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-gray-900 dark:text-gray-100">
                          {relatedMember.first_name} {relatedMember.last_name}
                        </span>
                        <Badge variant="default" className="text-xs capitalize">
                          {relatedMember.pivot.relationship_type}
                        </Badge>
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => handleRemoveRelationship(relatedMember.pivot.id)}
                      >
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Add new relationship */}
            <div className="space-y-4">
              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('Add New Relationship')}</h3>
              
              {selectedMember ? (
                <div className="space-y-3">
                  <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md">
                    <div className="flex items-center justify-between mb-3">
                      <div>
                        <p className="font-medium text-gray-900 dark:text-gray-100">
                          {selectedMember.first_name} {selectedMember.last_name}
                        </p>
                        {selectedMember.email && (
                          <p className="text-sm text-gray-500 dark:text-gray-400">{selectedMember.email}</p>
                        )}
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          setSelectedMember(null);
                          setMemberSearch('');
                        }}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                    <div>
                      <Label htmlFor="relationship_type">{t('Relationship Type')}</Label>
                      <Select value={relationshipType} onValueChange={setRelationshipType}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {Object.entries(relationshipTypes).map(([value, label]) => (
                            <SelectItem key={value} value={value}>
                              {label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <Button
                      type="button"
                      onClick={handleAddRelationship}
                      className="w-full mt-3"
                    >
                      <UserPlus className="h-4 w-4 me-2" />
                      {t('Add Relationship')}
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="relative">
                  <div className="relative">
                    <Search className="absolute start-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                    <Input
                      type="text"
                      placeholder={t('Search for member...')}
                      value={memberSearch}
                      onChange={(e) => setMemberSearch(e.target.value)}
                      className="ps-10"
                    />
                  </div>
                  {memberSearchResults.length > 0 && (
                    <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-auto">
                      {memberSearchResults.map((result) => (
                        <button
                          key={result.id}
                          type="button"
                          onClick={() => {
                            setSelectedMember(result);
                            setMemberSearch('');
                            setMemberSearchResults([]);
                          }}
                          className="w-full text-start px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-700 last:border-0"
                        >
                          <p className="font-medium text-gray-900 dark:text-gray-100">
                            {result.first_name} {result.last_name}
                          </p>
                          {result.email && (
                            <p className="text-sm text-gray-500 dark:text-gray-400">{result.email}</p>
                          )}
                          {result.city && result.state && (
                            <p className="text-xs text-gray-400 dark:text-gray-500">
                              {result.city}, {result.state}
                            </p>
                          )}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>

          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Contact Information')}
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <Label htmlFor="email">{t('Email Address')}</Label>
                <Input
                  id="email"
                  type="email"
                  value={data.email}
                  onChange={(e) => setData('email', e.target.value)}
                  placeholder={t('Optional - needed for user account')}
                />
                {errors.email && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.email}</p>
                )}
              </div>

              <div>
                <Label htmlFor="phone1">{t('Primary Phone')}</Label>
                <Input
                  id="phone1"
                  type="tel"
                  value={data.phone1}
                  onChange={(e) => setData('phone1', e.target.value)}
                />
                {errors.phone1 && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.phone1}</p>
                )}
              </div>
            </div>

            <div className="mt-6">
              <Label htmlFor="phone2">{t('Secondary Phone')}</Label>
              <Input
                id="phone2"
                type="tel"
                value={data.phone2}
                onChange={(e) => setData('phone2', e.target.value)}
              />
              {errors.phone2 && (
                <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.phone2}</p>
              )}
            </div>
          </div>

          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Address Information')}
            </h2>
            
            <div className="space-y-6">
              <div>
                <Label htmlFor="address_line_1">Address Line 1</Label>
                <Input
                  id="address_line_1"
                  type="text"
                  placeholder={t('Street address')}
                  value={data.address_line_1}
                  onChange={(e) => setData('address_line_1', e.target.value)}
                />
                {errors.address_line_1 && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.address_line_1}</p>
                )}
              </div>

              <div>
                <Label htmlFor="address_line_2">Address Line 2</Label>
                <Input
                  id="address_line_2"
                  type="text"
                  placeholder={t('Apartment, suite, etc.')}
                  value={data.address_line_2}
                  onChange={(e) => setData('address_line_2', e.target.value)}
                />
                {errors.address_line_2 && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.address_line_2}</p>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <Label htmlFor="city">{t('City')}</Label>
                  <Input
                    id="city"
                    type="text"
                    value={data.city}
                    onChange={(e) => setData('city', e.target.value)}
                  />
                  {errors.city && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.city}</p>
                  )}
                </div>

                <div>
                  <Label htmlFor="state">{t('State/Province')}</Label>
                  <Input
                    id="state"
                    type="text"
                    value={data.state}
                    onChange={(e) => setData('state', e.target.value)}
                  />
                  {errors.state && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.state}</p>
                  )}
                </div>

                <div>
                  <Label htmlFor="zip">{t('ZIP/Postal Code')}</Label>
                  <Input
                    id="zip"
                    type="text"
                    value={data.zip}
                    onChange={(e) => setData('zip', e.target.value)}
                  />
                  {errors.zip && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.zip}</p>
                  )}
                </div>
              </div>

              <div>
                <Label htmlFor="country">{t('Country')}</Label>
                <Input
                  id="country"
                  type="text"
                  placeholder={t('United States')}
                  value={data.country}
                  onChange={(e) => setData('country', e.target.value)}
                />
                {errors.country && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.country}</p>
                )}
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Hebrew/Jewish Information')}
            </h2>
            
            <div className="space-y-6">
              <div>
                <Label htmlFor="hebrew_name">{t('Hebrew Name')}</Label>
                <Input
                  id="hebrew_name"
                  type="text"
                  placeholder={t('Hebrew name')}
                  value={data.hebrew_name}
                  onChange={(e) => setData('hebrew_name', e.target.value)}
                />
                {errors.hebrew_name && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.hebrew_name}</p>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="father_hebrew_name">{t("Father's Hebrew Name")}</Label>
                  <Input
                    id="father_hebrew_name"
                    type="text"
                    placeholder={t("Father's Hebrew name")}
                    value={data.father_hebrew_name}
                    onChange={(e) => setData('father_hebrew_name', e.target.value)}
                  />
                  {errors.father_hebrew_name && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.father_hebrew_name}</p>
                  )}
                </div>

                <div>
                  <Label htmlFor="mother_hebrew_name">{t("Mother's Hebrew Name")}</Label>
                  <Input
                    id="mother_hebrew_name"
                    type="text"
                    placeholder={t("Mother's Hebrew name")}
                    value={data.mother_hebrew_name}
                    onChange={(e) => setData('mother_hebrew_name', e.target.value)}
                  />
                  {errors.mother_hebrew_name && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.mother_hebrew_name}</p>
                  )}
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="tribe">{t('Tribe')}</Label>
                  <Select value={data.tribe} onValueChange={(value) => setData('tribe', value)}>
                    <SelectTrigger>
                      <SelectValue placeholder={t('Select tribe')} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="israel">{t('Israel')}</SelectItem>
                      <SelectItem value="kohein">{t('Kohein')}</SelectItem>
                      <SelectItem value="levi">{t('Levi')}</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.tribe && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.tribe}</p>
                  )}
                </div>

                <div>
                  <Label htmlFor="bnaimitzvahdate">{t("B'nai Mitzvah Date")}</Label>
                  <Input
                    id="bnaimitzvahdate"
                    type="date"
                    value={data.bnaimitzvahdate ? new Date(data.bnaimitzvahdate).toISOString().split('T')[0] : ''}
                    onChange={(e) => setData('bnaimitzvahdate', e.target.value ? new Date(e.target.value) : null)}
                  />
                  {errors.bnaimitzvahdate && (
                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.bnaimitzvahdate}</p>
                  )}
                </div>
              </div>

              <div>
                <Label htmlFor="anniversary_date">{t('Anniversary Date')}</Label>
                <Input
                  id="anniversary_date"
                  type="date"
                  value={data.anniversary_date ? new Date(data.anniversary_date).toISOString().split('T')[0] : ''}
                  onChange={(e) => setData('anniversary_date', e.target.value ? new Date(e.target.value) : null)}
                />
                {errors.anniversary_date && (
                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{errors.anniversary_date}</p>
                )}
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
              {t('Religious Roles & Capabilities')}
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <input
                    id="aliyah"
                    type="checkbox"
                    checked={data.aliyah}
                    onChange={(e) => setData('aliyah', e.target.checked)}
                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="aliyah" className="text-sm font-medium">
                    {t('Aliyah')}
                  </Label>
                </div>

                <div className="flex items-center space-x-2">
                  <input
                    id="chazanut"
                    type="checkbox"
                    checked={data.chazanut}
                    onChange={(e) => setData('chazanut', e.target.checked)}
                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="chazanut" className="text-sm font-medium">
                    Chazanut (Cantorial)
                  </Label>
                </div>

                <div className="flex items-center space-x-2">
                  <input
                    id="dvartorah"
                    type="checkbox"
                    checked={data.dvartorah}
                    onChange={(e) => setData('dvartorah', e.target.checked)}
                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="dvartorah" className="text-sm font-medium">
                    {t("D'var Torah")}
                  </Label>
                </div>
              </div>

              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <input
                    id="brianbatorah"
                    type="checkbox"
                    checked={data.brianbatorah}
                    onChange={(e) => setData('brianbatorah', e.target.checked)}
                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="brianbatorah" className="text-sm font-medium">
                    {t("Bri'an BaTorah")}
                  </Label>
                </div>

                <div className="flex items-center space-x-2">
                  <input
                    id="maftir"
                    type="checkbox"
                    checked={data.maftir}
                    onChange={(e) => setData('maftir', e.target.checked)}
                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="maftir" className="text-sm font-medium">
                    {t('Maftir')}
                  </Label>
                </div>

                <div className="flex items-center space-x-2">
                  <input
                    id="deceased"
                    type="checkbox"
                    checked={data.deceased}
                    onChange={(e) => setData('deceased', e.target.checked)}
                    className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
                  />
                  <Label htmlFor="deceased" className="text-sm font-medium">
                    {t('Deceased')}
                  </Label>
                </div>
              </div>
            </div>
          </div>

          <div className="flex justify-end gap-4">
            <Link href="/admin/members">
              <Button type="button" variant="outline">
                {t('Cancel')}
              </Button>
            </Link>
            <Button type="submit" disabled={processing}>
              {processing ? (
                <>{t('Updating...')}</>
              ) : (
                <>
                  <Save className="h-4 w-4 me-2" />
                  {t('Update Member')}
                </>
              )}
            </Button>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}