import { useTranslation } from '@/hooks/use-translation';
import React, { useMemo, useState } from 'react';
import { Head, Link, router, useForm } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Edit, Mail, Phone, MapPin, Calendar, User, Plus, Trash2, CreditCard, TrendingUp, Users, DollarSign, Award, ShoppingCart, GraduationCap, UserPlus } from 'lucide-react';
import { type Member, type BreadcrumbItem } from '@/types';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface ContributionData {
  boards_count: number;
  committees_count: number;
  dues_total: number;
  donations_total: number;
  other_purchases_total: number;
}

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

export default function MembersShow({ member, contributionData, relationshipTypes }: Readonly<Props>) {
    const { t } = useTranslation();
  const [showAddFamilyMember, setShowAddFamilyMember] = useState(false);
  const [showAddRelationship, setShowAddRelationship] = useState(false);
  const [memberSearch, setMemberSearch] = useState('');
  const [memberSearchResults, setMemberSearchResults] = useState<Member[]>([]);
  const [selectedMember, setSelectedMember] = useState<Member | null>(null);
  
  const { data, setData, post, processing, errors, reset } = useForm({
    member_type: 'member',
    first_name: '',
    last_name: '',
    middle_name: '',
    email: '',
    phone1: '',
    dob: '',
    gender: '',
    title: '',
    hebrew_name: '',
    father_hebrew_name: '',
    mother_hebrew_name: '',
    relationship_type: 'child',
  });

  const relationshipForm = useForm({
    related_member_id: '',
    relationship_type: 'child',
  });

  // Debounced member search
  React.useEffect(() => {
    if (memberSearch.length < 2) {
      setMemberSearchResults([]);
      return;
    }

    const timer = setTimeout(async () => {
      try {
        const response = await fetch(`/api/admin/members/search?q=${encodeURIComponent(memberSearch)}`);
        const data = await response.json();
        // Filter out the current member
        setMemberSearchResults(data.filter((m: Member) => m.id !== member.id));
      } catch (error) {
        console.error('Search error:', error);
      }
    }, 300);

    return () => clearTimeout(timer);
  }, [memberSearch, member.id]);

  const handleSubmitFamilyMember = (e: React.FormEvent) => {
    e.preventDefault();
    post(`/admin/members/${member.id}/family-members`, {
      onSuccess: () => {
        setShowAddFamilyMember(false);
        reset();
      },
    });
  };

  const handleAddRelationship = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedMember) return;
    
    relationshipForm.post(`/admin/members/${member.id}/relationships`, {
      onSuccess: () => {
        setShowAddRelationship(false);
        setSelectedMember(null);
        setMemberSearch('');
        relationshipForm.reset();
      },
    });
  };

  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,
      });
    }
  };

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amount);
  };

  const formatDate = (dateString: string | null) => {
    if (!dateString) return 'N/A';
    
    // Extract just the date part (YYYY-MM-DD) from datetime strings like "2006-06-18T00:00:00.000000Z"
    const datePart = dateString.split('T')[0];
    
    // Check if we have a valid date part
    if (/^\d{4}-\d{2}-\d{2}$/.test(datePart)) {
      // Parse and format manually to avoid any timezone issues
      const [year, month, day] = datePart.split('-');
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                          'July', 'August', 'September', 'October', 'November', 'December'];
      return `${monthNames[parseInt(month) - 1]} ${parseInt(day)}, ${year}`;
    } else {
      // Fallback for unexpected formats
      return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    }
  };

  const getDisplayName = () => {
    const parts = [member.title, member.first_name, member.middle_name, member.last_name].filter(Boolean);
    return parts.join(' ');
  };

  const getFullAddress = () => {
    const addressParts = [
      member.address_line_1,
      member.address_line_2,
      member.city,
      member.state,
      member.zip,
      member.country
    ].filter(Boolean);
    
    if (addressParts.length === 0) return null;
    
    // Format as: Street, City State ZIP, Country
    const street = [member.address_line_1, member.address_line_2].filter(Boolean).join(', ');
    const cityState = [member.city, member.state].filter(Boolean).join(', ');
    const cityStateZip = [cityState, member.zip].filter(Boolean).join(' ');
    const fullAddress = [street, cityStateZip, member.country].filter(Boolean).join(', ');
    
    return fullAddress;
  };

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

  return (
    <AppLayout breadcrumbs={breadcrums}>
      <Head title={getDisplayName()} />

      <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div>
              <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                {getDisplayName()}
              </h1>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Member ID: {member.id}
              </p>
            </div>
          </div>
          <Link href={`/admin/members/${member.id}/edit`}>
            <Button>
              <Edit className="h-4 w-4 me-2" />
              {t('Edit Member')}
            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Personal Information */}
          <div className="lg:col-span-2 space-y-6">
            <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-4 flex items-center">
                <User className="h-5 w-5 me-2" />
                {t('Personal Information')}
              </h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Type')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset capitalize
                      {member.member_type === 'member' ? 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-500/20' : ''}
                      {member.member_type === 'contact' ? 'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-500/20' : ''}
                      {member.member_type === 'prospect' ? 'bg-yellow-50 text-yellow-700 ring-yellow-600/20 dark:bg-yellow-900/20 dark:text-yellow-400 dark:ring-yellow-500/20' : ''}
                      {member.member_type === 'former' ? 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/20 dark:text-gray-400 dark:ring-gray-500/20' : ''}"
                    >
                      {member.member_type === 'former' ? 'Former Member' : member.member_type}
                    </span>
                  </dd>
                </div>

                {member.deceased && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Status')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100">
                      <Badge variant="secondary" className="bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                        {t('Deceased')}
                      </Badge>
                    </dd>
                  </div>
                )}

                {member.title && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Title')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100">{member.title}</dd>
                  </div>
                )}
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('First Name')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">{member.first_name}</dd>
                </div>
                
                {member.middle_name && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Middle Name')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100">{member.middle_name}</dd>
                  </div>
                )}
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Last Name')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">{member.last_name}</dd>
                </div>
                
                {member.gender && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Gender')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100 capitalize">{member.gender}</dd>
                  </div>
                )}
                
                {member.dob && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Date of Birth')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100 flex items-center">
                      <Calendar className="h-4 w-4 me-1" />
                      {formatDate(member.dob)}
                    </dd>
                  </div>
                )}
                
                {member.anniversary_date && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Anniversary Date')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100 flex items-center">
                      <Calendar className="h-4 w-4 me-1" />
                      {formatDate(member.anniversary_date)}
                    </dd>
                  </div>
                )}
                
                {member.parent ? (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Parent Account')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100">
                      <Link 
                        href={`/admin/parents/${member.parent.id}`}
                        className="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
                      >
                        <User className="h-4 w-4 me-1" />
                        {member.parent.first_name} {member.parent.last_name}
                        {member.parent.email && ` (${member.parent.email})`}
                      </Link>
                    </dd>
                  </div>
                ) : (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Parent Account')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100">
                      <form 
                        onSubmit={(e) => {
                          e.preventDefault();
                          if (confirm('Create a parent account from this member\'s information?')) {
                            router.post(`/admin/members/${member.id}/create-parent`);
                          }
                        }}
                        className="inline"
                      >
                        <Button 
                          type="submit" 
                          size="sm" 
                          variant="outline"
                          className="flex items-center gap-1"
                        >
                          <Plus className="h-3 w-3" />
                          {t('Create Parent Account')}
                        </Button>
                      </form>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        {t("Creates a parent account using this member's information")}
                      </p>
                    </dd>
                  </div>
                )}
              </div>
            </div>

            {/* Jewish Details */}
            <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-4">
                {t('Jewish Details')}
              </h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Hebrew Name')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.hebrew_name || <span className="text-gray-400 dark:text-gray-500">{t('Not set')}</span>}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t("Father's Hebrew Name")}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.father_hebrew_name || <span className="text-gray-400 dark:text-gray-500">{t('Not set')}</span>}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t("Mother's Hebrew Name")}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.mother_hebrew_name || <span className="text-gray-400 dark:text-gray-500">{t('Not set')}</span>}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Tribe')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.tribe ? <span className="capitalize">{member.tribe}</span> : <span className="text-gray-400 dark:text-gray-500">{t('Not set')}</span>}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t("B'nai Mitzvah Date")}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.bnaimitzvahdate ? (
                      <span className="flex items-center">
                        <Calendar className="h-4 w-4 me-1" />
                        {formatDate(member.bnaimitzvahdate)}
                      </span>
                    ) : (
                      <span className="text-gray-400 dark:text-gray-500">{t('Not set')}</span>
                    )}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Aliyah')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.aliyah ? (
                      <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">{t('Yes')}</Badge>
                    ) : (
                      <Badge variant="secondary">{t('No')}</Badge>
                    )}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Chazanut')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.chazanut ? (
                      <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">{t('Yes')}</Badge>
                    ) : (
                      <Badge variant="secondary">{t('No')}</Badge>
                    )}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Dvar Torah')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.dvartorah ? (
                      <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">{t('Yes')}</Badge>
                    ) : (
                      <Badge variant="secondary">{t('No')}</Badge>
                    )}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Maftir')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.maftir ? (
                      <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">{t('Yes')}</Badge>
                    ) : (
                      <Badge variant="secondary">{t('No')}</Badge>
                    )}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t("Bria Ba'Torah")}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {member.brianbatorah ? (
                      <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">{t('Yes')}</Badge>
                    ) : (
                      <Badge variant="secondary">{t('No')}</Badge>
                    )}
                  </dd>
                </div>
              </div>
            </div>

            {/* Contact Information */}
            <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-4 flex items-center">
                <Mail className="h-5 w-5 me-2" />
                {t('Contact Information')}
              </h2>
              
              <div className="space-y-4">
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Email Address')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100 flex items-center">
                    <Mail className="h-4 w-4 me-1" />
                    <a href={`mailto:${member.email}`} className="text-blue-600 dark:text-blue-400 hover:underline">
                      {member.email}
                    </a>
                  </dd>
                </div>
                
                {member.phone1 && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Primary Phone')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100 flex items-center">
                      <Phone className="h-4 w-4 me-1" />
                      <a href={`tel:${member.phone1}`} className="text-blue-600 dark:text-blue-400 hover:underline">
                        {member.phone1}
                      </a>
                    </dd>
                  </div>
                )}
                
                {member.phone2 && (
                  <div>
                    <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Secondary Phone')}</dt>
                    <dd className="text-sm text-gray-900 dark:text-gray-100 flex items-center">
                      <Phone className="h-4 w-4 me-1" />
                      <a href={`tel:${member.phone2}`} className="text-blue-600 dark:text-blue-400 hover:underline">
                        {member.phone2}
                      </a>
                    </dd>
                  </div>
                )}
              </div>
            </div>

            {/* Address Information */}
            {getFullAddress() && (
              <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-4 flex items-center">
                  <MapPin className="h-5 w-5 me-2" />
                  {t('Address Information')}
                </h2>
                
                <div className="text-sm text-gray-900 dark:text-gray-100">
                  <div className="flex items-start">
                    <MapPin className="h-4 w-4 me-1 mt-0.5 flex-shrink-0" />
                    <div>
                      {member.address_line_1 && <div>{member.address_line_1}</div>}
                      {member.address_line_2 && <div>{member.address_line_2}</div>}
                      <div>
                        {[member.city, member.state].filter(Boolean).join(', ')}
                        {member.zip && ` ${member.zip}`}
                      </div>
                      {member.country && <div>{member.country}</div>}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Email Contact History */}
            <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-4 flex items-center">
                <Mail className="h-5 w-5 me-2" />
                {t('Email Contact History')}
              </h2>
              
              {member.email_records && member.email_records.length > 0 ? (
                <div className="space-y-3">
                  {member.email_records.map((email: any) => (
                    <div 
                      key={email.id} 
                      className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                    >
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1">
                          <h3 className="font-medium text-gray-900 dark:text-gray-100 text-sm">
                            {email.subject}
                          </h3>
                          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            {formatDate(email.date_sent)}
                          </p>
                        </div>
                      </div>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs mt-3">
                        <div>
                          <span className="font-medium text-gray-500 dark:text-gray-400">{t('From:')}</span>
                          <span className="ms-1 text-gray-900 dark:text-gray-100">{email.from}</span>
                        </div>
                        <div>
                          <span className="font-medium text-gray-500 dark:text-gray-400">{t('To:')}</span>
                          <span className="ms-1 text-gray-900 dark:text-gray-100">{email.to}</span>
                        </div>
                        {email.cc && (
                          <div>
                            <span className="font-medium text-gray-500 dark:text-gray-400">{t('CC:')}</span>
                            <span className="ms-1 text-gray-900 dark:text-gray-100">{email.cc}</span>
                          </div>
                        )}
                        {email.conversation_id && (
                          <div className="md:col-span-2">
                            <span className="font-medium text-gray-500 dark:text-gray-400">{t('Conversation ID:')}</span>
                            <span className="ms-1 text-gray-900 dark:text-gray-100 font-mono text-xs">{email.conversation_id}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                  <Mail className="h-12 w-12 mx-auto mb-2 opacity-50" />
                  <p>{t('No email contact history recorded.')}</p>
                </div>
              )}
            </div>

            {/* Family Members Section */}
            <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 flex items-center">
                  <Users className="h-5 w-5 me-2" />
                  {t('Relationships')}
                  {member.related_members && member.related_members.length > 0 && (
                    <Badge variant="secondary" className="ms-2">
                      {member.related_members.length}
                    </Badge>
                  )}
                </h2>
                <div className="flex gap-2">
                  <Dialog open={showAddFamilyMember} onOpenChange={setShowAddFamilyMember}>
                    <DialogTrigger asChild>
                      <Button size="sm">
                        <Plus className="h-4 w-4 me-2" />
                        {t('Add Family Member')}
                      </Button>
                    </DialogTrigger>
                  <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                    <DialogHeader>
                      <DialogTitle>{t('Add Family Member')}</DialogTitle>
                      <DialogDescription>
                        Add a new family member under {member.first_name} {member.last_name}'s account.
                        The address will be automatically inherited from the primary account.
                      </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={handleSubmitFamilyMember} className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="first_name">First Name *</Label>
                          <Input
                            id="first_name"
                            value={data.first_name}
                            onChange={(e) => setData('first_name', e.target.value)}
                            required
                          />
                          {errors.first_name && <p className="text-red-500 text-sm mt-1">{errors.first_name}</p>}
                        </div>
                        <div>
                          <Label htmlFor="last_name">Last Name *</Label>
                          <Input
                            id="last_name"
                            value={data.last_name}
                            onChange={(e) => setData('last_name', e.target.value)}
                            required
                          />
                          {errors.last_name && <p className="text-red-500 text-sm mt-1">{errors.last_name}</p>}
                        </div>
                        <div>
                          <Label htmlFor="middle_name">{t('Middle Name')}</Label>
                          <Input
                            id="middle_name"
                            value={data.middle_name}
                            onChange={(e) => setData('middle_name', e.target.value)}
                          />
                        </div>
                        <div>
                          <Label htmlFor="title">{t('Title')}</Label>
                          <Input
                            id="title"
                            value={data.title}
                            onChange={(e) => setData('title', e.target.value)}
                            placeholder={t('Mr., Mrs., Dr., etc.')}
                          />
                        </div>
                        <div>
                          <Label htmlFor="email">{t('Email')}</Label>
                          <Input
                            id="email"
                            type="email"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                          />
                          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
                        </div>
                        <div>
                          <Label htmlFor="phone1">{t('Phone')}</Label>
                          <Input
                            id="phone1"
                            value={data.phone1}
                            onChange={(e) => setData('phone1', e.target.value)}
                          />
                        </div>
                        <div>
                          <Label htmlFor="dob">{t('Date of Birth')}</Label>
                          <Input
                            id="dob"
                            type="date"
                            value={data.dob}
                            onChange={(e) => setData('dob', e.target.value)}
                          />
                        </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>
                        </div>
                        <div>
                          <Label htmlFor="member_type">Member Type *</Label>
                          <Select value={data.member_type} onValueChange={(value) => setData('member_type', value)}>
                            <SelectTrigger>
                              <SelectValue />
                            </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')}</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div>
                          <Label htmlFor="relationship_type">Relationship Type *</Label>
                          <Select value={data.relationship_type} onValueChange={(value) => setData('relationship_type', value)}>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {Object.entries(relationshipTypes).map(([value, label]) => (
                                <SelectItem key={value} value={value}>
                                  {label}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      
                      <div className="border-t pt-4">
                        <h3 className="text-sm font-medium mb-3">{t('Jewish Details (Optional)')}</h3>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor="hebrew_name">{t('Hebrew Name')}</Label>
                            <Input
                              id="hebrew_name"
                              value={data.hebrew_name}
                              onChange={(e) => setData('hebrew_name', e.target.value)}
                            />
                          </div>
                          <div>
                            <Label htmlFor="father_hebrew_name">{t("Father's Hebrew Name")}</Label>
                            <Input
                              id="father_hebrew_name"
                              value={data.father_hebrew_name}
                              onChange={(e) => setData('father_hebrew_name', e.target.value)}
                            />
                          </div>
                          <div>
                            <Label htmlFor="mother_hebrew_name">{t("Mother's Hebrew Name")}</Label>
                            <Input
                              id="mother_hebrew_name"
                              value={data.mother_hebrew_name}
                              onChange={(e) => setData('mother_hebrew_name', e.target.value)}
                            />
                          </div>
                        </div>
                      </div>

                      <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => setShowAddFamilyMember(false)}>
                          {t('Cancel')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                          {processing ? 'Adding...' : 'Add Family Member'}
                        </Button>
                      </DialogFooter>
                    </form>
                  </DialogContent>
                </Dialog>
                <Dialog open={showAddRelationship} onOpenChange={setShowAddRelationship}>
                  <DialogTrigger asChild>
                    <Button size="sm" variant="outline">
                      <UserPlus className="h-4 w-4 me-2" />
                      {t('Link Existing Member')}
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>{t('Add Relationship to Existing Member')}</DialogTitle>
                      <DialogDescription>
                        Link {member.first_name} {member.last_name} to an existing member.
                      </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={handleAddRelationship} className="space-y-4">
                      <div>
                        <Label htmlFor="member_search">{t('Search for Member')}</Label>
                        <Input
                          id="member_search"
                          value={memberSearch}
                          onChange={(e) => setMemberSearch(e.target.value)}
                          placeholder={t('Type name to search...')}
                        />
                        {memberSearchResults.length > 0 && (
                          <div className="mt-2 border rounded-md max-h-48 overflow-y-auto">
                            {memberSearchResults.map((searchMember) => (
                              <button
                                key={searchMember.id}
                                type="button"
                                onClick={() => {
                                  setSelectedMember(searchMember);
                                  relationshipForm.setData('related_member_id', searchMember.id.toString());
                                  setMemberSearch(`${searchMember.first_name} ${searchMember.last_name}`);
                                  setMemberSearchResults([]);
                                }}
                                className="w-full px-3 py-2 text-start hover:bg-gray-100 dark:hover:bg-gray-800 border-b last:border-b-0"
                              >
                                <div className="font-medium">{searchMember.first_name} {searchMember.last_name}</div>
                                {searchMember.email && (
                                  <div className="text-sm text-gray-500">{searchMember.email}</div>
                                )}
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                      {selectedMember && (
                        <>
                          <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md">
                            <p className="text-sm font-medium">Selected: {selectedMember.first_name} {selectedMember.last_name}</p>
                          </div>
                          <div>
                            <Label htmlFor="relationship_type_existing">Relationship Type *</Label>
                            <Select 
                              value={relationshipForm.data.relationship_type} 
                              onValueChange={(value) => relationshipForm.setData('relationship_type', value)}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {Object.entries(relationshipTypes).map(([value, label]) => (
                                  <SelectItem key={value} value={value}>
                                    {label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                        </>
                      )}
                      <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => {
                          setShowAddRelationship(false);
                          setSelectedMember(null);
                          setMemberSearch('');
                          relationshipForm.reset();
                        }}>
                          {t('Cancel')}
                        </Button>
                        <Button type="submit" disabled={relationshipForm.processing || !selectedMember}>
                          {relationshipForm.processing ? 'Adding...' : 'Add Relationship'}
                        </Button>
                      </DialogFooter>
                    </form>
                  </DialogContent>
                </Dialog>
              </div>
              </div>

              {/* Show relationships TO this member (related_by) */}
              {member.related_by && member.related_by.length > 0 && (
                <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                  <p className="text-sm font-medium text-blue-900 dark:text-blue-200 mb-2">
                    Related by:
                  </p>
                  <div className="space-y-2">
                    {member.related_by.map((relatedMember) => (
                      <div key={relatedMember.id} className="flex items-center justify-between">
                        <Link 
                          href={`/admin/members/${relatedMember.id}`}
                          className="flex items-center text-blue-600 dark:text-blue-400 hover:underline"
                        >
                          <User className="h-4 w-4 me-2" />
                          <span className="font-medium">
                            {relatedMember.first_name} {relatedMember.last_name}
                          </span>
                          <Badge variant="outline" className="ms-2 text-xs capitalize">
                            {relatedMember.pivot.relationship_type}
                          </Badge>
                        </Link>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Show relationships FROM this member (related_members) */}
              {member.related_members && member.related_members.length > 0 ? (
                <div className="space-y-3">
                  {member.related_members.map((relatedMember) => (
                    <div 
                      key={relatedMember.id} 
                      className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            <Link 
                              href={`/admin/members/${relatedMember.id}`}
                              className="text-base font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
                            >
                              {relatedMember.first_name} {relatedMember.last_name}
                            </Link>
                            <Badge variant="default" className="text-xs capitalize">
                              {relatedMember.pivot.relationship_type}
                            </Badge>
                            <Badge variant="secondary" className="text-xs capitalize">
                              {relatedMember.member_type}
                            </Badge>
                          </div>
                          
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-600 dark:text-gray-400">
                            {relatedMember.email && (
                              <div className="flex items-center">
                                <Mail className="h-3 w-3 me-1" />
                                <a href={`mailto:${relatedMember.email}`} className="hover:underline">
                                  {relatedMember.email}
                                </a>
                              </div>
                            )}
                            {relatedMember.phone1 && (
                              <div className="flex items-center">
                                <Phone className="h-3 w-3 me-1" />
                                <a href={`tel:${relatedMember.phone1}`} className="hover:underline">
                                  {relatedMember.phone1}
                                </a>
                              </div>
                            )}
                            {relatedMember.dob && (
                              <div className="flex items-center">
                                <Calendar className="h-3 w-3 me-1" />
                                {formatDate(relatedMember.dob)}
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="flex gap-2">
                          <Link href={`/admin/members/${relatedMember.id}/edit`}>
                            <Button variant="outline" size="sm">
                              <Edit className="h-4 w-4" />
                            </Button>
                          </Link>
                          <Button 
                            variant="outline" 
                            size="sm"
                            onClick={() => handleRemoveRelationship(relatedMember.pivot.id)}
                          >
                            <Trash2 className="h-4 w-4 text-red-500" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                  <Users className="h-12 w-12 mx-auto mb-2 opacity-50" />
                  <p>{t('No relationships added yet.')}</p>
                  <p className="text-sm mt-1">{t('Add family members or link to existing members to create relationships.')}</p>
                </div>
              )}
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                {t('Member Status')}
              </h3>
              
              <div className="space-y-3">
                <div>
                  <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                    {t('Active Member')}
                  </Badge>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Joined')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {formatDate(member.created_at)}
                  </dd>
                </div>
                
                <div>
                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('Last Updated')}</dt>
                  <dd className="text-sm text-gray-900 dark:text-gray-100">
                    {formatDate(member.updated_at)}
                  </dd>
                </div>
              </div>
            </div>

            <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                {t('Quick Actions')}
              </h3>
              
              <div className="space-y-2">
                <Link href={`/admin/members/${member.id}/edit`} className="block">
                  <Button variant="outline" className="w-full justify-start">
                    <Edit className="h-4 w-4 me-2" />
                    {t('Edit Information')}
                  </Button>
                </Link>
                
                <a href={`mailto:${member.email}`} className="block">
                  <Button variant="outline" className="w-full justify-start">
                    <Mail className="h-4 w-4 me-2" />
                    {t('Send Email')}
                  </Button>
                </a>
                
                {member.phone1 && (
                  <a href={`tel:${member.phone1}`} className="block">
                    <Button variant="outline" className="w-full justify-start">
                      <Phone className="h-4 w-4 me-2" />
                      {t('Call Primary')}
                    </Button>
                  </a>
                )}
                
                <form 
                  onSubmit={(e) => {
                    e.preventDefault();
                    if (confirm(`Convert ${member.first_name} ${member.last_name} to a student?${member.parent ? `\n\nThis will use the parent account from ${member.parent.first_name} ${member.parent.last_name}.` : member.parent_id ? '\n\nThis will use the existing parent account.' : '\n\nNote: No parent account is linked. The student will be created without a parent.'}`))
                    {
                      router.post(`/admin/members/${member.id}/convert-to-student`);
                    }
                  }}
                  className="block"
                >
                  <Button 
                    type="submit" 
                    variant="outline" 
                    className="w-full justify-start"
                  >
                    <GraduationCap className="h-4 w-4 me-2" />
                    {t('Convert to Student')}
                  </Button>
                </form>
              </div>
            </div>
          </div>
        </div>

        {/* Member Value Contribution Chart */}
        <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6 mt-6">
          <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6 flex items-center">
            <TrendingUp className="h-5 w-5 me-2" />
            {t('Member Value Contribution')}
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            {/* Boards Count */}
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
              <div className="flex items-center justify-between mb-3">
                <div className="p-2 bg-blue-500 rounded-lg">
                  <Users className="h-6 w-6 text-white" />
                </div>
                <span className="text-3xl font-bold text-blue-700 dark:text-blue-300">
                  {contributionData.boards_count}
                </span>
              </div>
              <h3 className="text-sm font-medium text-blue-900 dark:text-blue-200">{t('Boards')}</h3>
              <p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
                {t('Board memberships')}
              </p>
            </div>

            {/* Committees Count */}
            <div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-6 border border-purple-200 dark:border-purple-800">
              <div className="flex items-center justify-between mb-3">
                <div className="p-2 bg-purple-500 rounded-lg">
                  <Award className="h-6 w-6 text-white" />
                </div>
                <span className="text-3xl font-bold text-purple-700 dark:text-purple-300">
                  {contributionData.committees_count}
                </span>
              </div>
              <h3 className="text-sm font-medium text-purple-900 dark:text-purple-200">{t('Committees')}</h3>
              <p className="text-xs text-purple-700 dark:text-purple-400 mt-1">
                {t('Committee memberships')}
              </p>
            </div>

            {/* Dues Total */}
            <div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-6 border border-green-200 dark:border-green-800">
              <div className="flex items-center justify-between mb-3">
                <div className="p-2 bg-green-500 rounded-lg">
                  <CreditCard className="h-6 w-6 text-white" />
                </div>
                <span className="text-3xl font-bold text-green-700 dark:text-green-300">
                  {formatCurrency(contributionData.dues_total)}
                </span>
              </div>
              <h3 className="text-sm font-medium text-green-900 dark:text-green-200">{t('Dues')}</h3>
              <p className="text-xs text-green-700 dark:text-green-400 mt-1">
                {t('Total membership dues paid')}
              </p>
            </div>

            {/* Donations Total */}
            <div className="bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 rounded-lg p-6 border border-amber-200 dark:border-amber-800">
              <div className="flex items-center justify-between mb-3">
                <div className="p-2 bg-amber-500 rounded-lg">
                  <DollarSign className="h-6 w-6 text-white" />
                </div>
                <span className="text-3xl font-bold text-amber-700 dark:text-amber-300">
                  {formatCurrency(contributionData.donations_total)}
                </span>
              </div>
              <h3 className="text-sm font-medium text-amber-900 dark:text-amber-200">{t('Donations')}</h3>
              <p className="text-xs text-amber-700 dark:text-amber-400 mt-1">
                {t('Total donations contributed')}
              </p>
            </div>

            {/* Other Purchases Total */}
            <div className="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-lg p-6 border border-indigo-200 dark:border-indigo-800">
              <div className="flex items-center justify-between mb-3">
                <div className="p-2 bg-indigo-500 rounded-lg">
                  <ShoppingCart className="h-6 w-6 text-white" />
                </div>
                <span className="text-3xl font-bold text-indigo-700 dark:text-indigo-300">
                  {formatCurrency(contributionData.other_purchases_total)}
                </span>
              </div>
              <h3 className="text-sm font-medium text-indigo-900 dark:text-indigo-200">{t('Other Purchases')}</h3>
              <p className="text-xs text-indigo-700 dark:text-indigo-400 mt-1">
                {t('Events, products, and services')}
              </p>
            </div>
          </div>
        </div>

        {/* Membership Periods Section */}
        <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6 mt-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <Calendar className="h-5 w-5 me-2" />
              {t('Membership Periods')}
            </h2>
            <Link href={`/admin/members/${member.id}/membership-periods/create`}>
              <Button size="sm">
                <Plus className="h-4 w-4 me-2" />
                {t('Add Period')}
              </Button>
            </Link>
          </div>

          {member.membership_periods && member.membership_periods.length > 0 ? (
            <div className="space-y-4">
              {member.membership_periods.map((period) => {
                const isActive = !period.end_date || new Date(period.end_date) >= new Date();
                
                return (
                  <div 
                    key={period.id} 
                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <Badge variant={isActive ? "default" : "secondary"}>
                            {isActive ? 'Active' : 'Expired'}
                          </Badge>
                          {period.membership_type && (
                            <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
                              {period.membership_type}
                            </span>
                          )}
                        </div>
                        
                        <div className="grid grid-cols-2 gap-3 text-sm">
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('Start Date')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">{formatDate(period.begin_date)}</dd>
                          </div>
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('End Date')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">
                              {period.end_date ? formatDate(period.end_date) : 'Ongoing'}
                            </dd>
                          </div>
                        </div>

                        {period.invoice && (
                          <div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
                            <CreditCard className="h-4 w-4 me-1" />
                            <Link 
                              href={`/admin/invoices/${period.invoice.id}`}
                              className="text-blue-600 dark:text-blue-400 hover:underline"
                            >
                              {period.invoice.invoice_number}
                            </Link>
                            <span className="mx-2">•</span>
                            <span>${period.invoice.total}</span>
                            <span className="mx-2">•</span>
                            <span className="capitalize">{period.invoice.status}</span>
                          </div>
                        )}

                        {period.notes && (
                          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                            {period.notes}
                          </div>
                        )}
                      </div>

                      <div className="flex gap-2 ms-4">
                        <Link href={`/admin/members/${member.id}/membership-periods/${period.id}/edit`}>
                          <Button variant="outline" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                        </Link>
                        <Button 
                          variant="outline" 
                          size="sm"
                          onClick={() => {
                            if (confirm('Are you sure you want to delete this membership period?')) {
                              router.delete(`/admin/members/${member.id}/membership-periods/${period.id}`);
                            }
                          }}
                        >
                          <Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />
                        </Button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              <Calendar className="h-12 w-12 mx-auto mb-2 opacity-50" />
              <p>{t('No membership periods recorded.')}</p>
              <Link href={`/admin/members/${member.id}/membership-periods/create`} className="inline-block mt-2">
                <Button variant="outline" size="sm">
                  <Plus className="h-4 w-4 me-2" />
                  {t('Add First Period')}
                </Button>
              </Link>
            </div>
          )}
        </div>

        {/* Committee Memberships Section */}
        <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6 mt-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <User className="h-5 w-5 me-2" />
              {t('Committee Memberships')}
            </h2>
          </div>

          {member.committees && member.committees.length > 0 ? (
            <div className="space-y-4">
              {member.committees.map((committee) => {
                const isActive = !committee.pivot?.term_end_date || new Date(committee.pivot.term_end_date) >= new Date();
                
                return (
                  <div 
                    key={committee.id} 
                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-medium text-gray-900 dark:text-gray-100">
                            {committee.name}
                          </h3>
                          <Badge variant={isActive ? "default" : "secondary"}>
                            {isActive ? 'Active' : 'Expired'}
                          </Badge>
                        </div>
                        
                        {committee.pivot?.title && (
                          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <span className="font-medium">{t('Position:')}</span> {committee.pivot.title}
                          </div>
                        )}

                        {committee.description && (
                          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                            {committee.description}
                          </div>
                        )}
                        
                        <div className="grid grid-cols-2 gap-3 text-sm">
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('Term Start')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">
                              {committee.pivot?.term_start_date ? formatDate(committee.pivot.term_start_date) : 'N/A'}
                            </dd>
                          </div>
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('Term End')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">
                              {committee.pivot?.term_end_date ? formatDate(committee.pivot.term_end_date) : 'Ongoing'}
                            </dd>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              <User className="h-12 w-12 mx-auto mb-2 opacity-50" />
              <p>{t('No committee memberships recorded.')}</p>
            </div>
          )}
        </div>

        {/* Board Memberships Section */}
        <div className="bg-white dark:bg-black shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6 mt-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <User className="h-5 w-5 me-2" />
              {t('Board Memberships')}
            </h2>
          </div>

          {member.boards && member.boards.length > 0 ? (
            <div className="space-y-4">
              {member.boards.map((board) => {
                const isActive = !board.pivot?.term_end_date || new Date(board.pivot.term_end_date) >= new Date();
                
                return (
                  <div 
                    key={board.id} 
                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-medium text-gray-900 dark:text-gray-100">
                            {board.name}
                          </h3>
                          <Badge variant={isActive ? "default" : "secondary"}>
                            {isActive ? 'Active' : 'Expired'}
                          </Badge>
                        </div>
                        
                        {board.pivot?.title && (
                          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <span className="font-medium">{t('Position:')}</span> {board.pivot.title}
                          </div>
                        )}

                        {board.description && (
                          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                            {board.description}
                          </div>
                        )}
                        
                        <div className="grid grid-cols-2 gap-3 text-sm">
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('Term Start')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">
                              {board.pivot?.term_start_date ? formatDate(board.pivot.term_start_date) : 'N/A'}
                            </dd>
                          </div>
                          <div>
                            <dt className="font-medium text-gray-500 dark:text-gray-400">{t('Term End')}</dt>
                            <dd className="text-gray-900 dark:text-gray-100">
                              {board.pivot?.term_end_date ? formatDate(board.pivot.term_end_date) : 'Ongoing'}
                            </dd>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              <User className="h-12 w-12 mx-auto mb-2 opacity-50" />
              <p>{t('No board memberships recorded.')}</p>
            </div>
          )}
        </div>
      </div>
    </AppLayout>
  );
}