import { formatDateID, formatIDR } from '@/lib/formatters';
import { type MemberDetailProps } from '@/types';
import {
    Banknote,
    Cake,
    FileText,
    IdCard,
    Mail,
    MapPin,
    Phone,
    User,
    VenusAndMars,
} from 'lucide-react';
import InfoField from './Components/InfoField';
import InfoSection from './Components/InfoSection';

/**
 * Member detail view component
 * Displays personal information, contact, employment, and additional info
 */
export default function MemberDetail({ member }: MemberDetailProps) {
    const fullAddress = [
        member.address,
        member.village_relation?.name,
        member.district_relation?.name,
        member.regency_relation?.name,
        member.province_relation?.name,
        member.postal_code,
    ]
        .filter(Boolean)
        .join(', ');
    const gender = member.gender === 'male' ? 'Laki-laki' : 'Perempuan';
    const maritalStatus =
        member.marital_status === 'single' ? 'Belum Menikah' : 'Menikah';
    const birthPlace = member.birth_place ? `${member.birth_place}, ` : '';
    const dob = member.birth_date
        ? `${birthPlace} ${formatDateID(member.birth_date)}`
        : '-';
    return (
        <div className="grid grid-cols-3 gap-4">
            {/* Personal Information */}
            <InfoSection
                title="Informasi Pribadi"
                description="Informasi identitas dan kontak anggota"
                className="col-span-2"
            >
                <div className="grid grid-cols-2 gap-4">
                    <div className="flex flex-col gap-2 space-y-4">
                        <InfoField
                            icon={User}
                            label="Nama Lengkap"
                            value={member.name}
                        />
                        <InfoField
                            icon={IdCard}
                            label="Nomor KTP"
                            value={member.id_number || '-'}
                        />

                        {member.birth_date && (
                            <InfoField
                                icon={Cake}
                                label="Tanggal Lahir"
                                value={dob}
                            />
                        )}
                        {member.marital_status && (
                            <InfoField
                                icon={Cake}
                                label="Status Pernikahan"
                                value={maritalStatus}
                            />
                        )}
                    </div>
                    <div className="flex flex-col gap-2 space-y-4">
                        {member.gender && (
                            <InfoField
                                icon={VenusAndMars}
                                label="Jenis Kelamin"
                                value={gender}
                            />
                        )}

                        <InfoField
                            icon={Phone}
                            label="Telepon"
                            value={member.phone || '-'}
                        />

                        {member.address && (
                            <InfoField
                                label="Alamat Lengkap"
                                icon={MapPin}
                                value={fullAddress}
                            />
                        )}
                    </div>
                </div>
            </InfoSection>

            {/* Additional Information */}
            <InfoSection
                title="Informasi Tambahan"
                description="Detail alamat, pekerjaan, dan informasi lainnya"
            >
                {member.email && (
                    <InfoField icon={Mail} label="Email" value={member.email} />
                )}

                {member.postal_code && (
                    <InfoField
                        label="Kode Pos"
                        icon={MapPin}
                        value={member.postal_code}
                    />
                )}

                {member.occupation && (
                    <InfoField
                        label="Pekerjaan"
                        icon={MapPin}
                        value={member.occupation}
                    />
                )}

                {member.employer_name && (
                    <InfoField
                        label="Nama Perusahaan"
                        icon={MapPin}
                        value={member.employer_name}
                    />
                )}

                {member.monthly_income && (
                    <InfoField
                        label="Pendapatan Bulanan"
                        icon={Banknote}
                        value={formatIDR(member.monthly_income)}
                    />
                )}

                {member.npwp && (
                    <InfoField label="NPWP" icon={MapPin} value={member.npwp} />
                )}

                {member.notes && (
                    <InfoField
                        label="Catatan"
                        icon={FileText}
                        value={<span className="text-sm">{member.notes}</span>}
                    />
                )}
            </InfoSection>
        </div>
    );
}