@extends('layouts.admin')

@section('title', 'Shared Information & Family Links')
@section('header_title', 'Shared Contact Discovery & Family Links')

@section('header_badge')
    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 border border-slate-200">
        {{ count($clusters) }} Clusters Identified
    </span>
@endsection

@section('content')
<div class="space-y-6">

    <!-- Explanatory Header Box -->
    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-3">
        <div class="flex items-start gap-3.5">
            <div class="w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center shrink-0 font-bold text-lg">
                <i class="fa-solid fa-people-roof"></i>
            </div>
            <div>
                <h3 class="text-base font-bold text-slate-900">Family & Household Contact Sharing Discovery</h3>
                <p class="text-xs text-slate-600 leading-relaxed mt-0.5">
                    This directory analyzes and clusters members who legitimately share household details such as primary family mobile numbers, home addresses, or surnames.
                </p>
                <div class="mt-2.5 flex flex-wrap gap-2 text-xs">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-emerald-50 text-emerald-800 border border-emerald-200 font-medium">
                        <i class="fa-solid fa-check text-emerald-600"></i> Individual Member IDs & Codes Preserved
                    </span>
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-teal-50 text-teal-800 border border-teal-200 font-medium">
                        <i class="fa-solid fa-check text-teal-600"></i> Non-Blocking Shared Contact Architecture
                    </span>
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-blue-50 text-blue-800 border border-blue-200 font-medium">
                        <i class="fa-solid fa-check text-blue-600"></i> Independent Photograph & KYC Decisions
                    </span>
                </div>
            </div>
        </div>

        <!-- Tab Pills -->
        <div class="pt-4 border-t border-slate-100 flex items-center gap-2">
            <a href="{{ route('admin.shared_info.index', ['tab' => 'mobile']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-bold transition {{ $tab === 'mobile' ? 'bg-teal-600 text-white shadow-sm' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                <i class="fa-solid fa-phone mr-1.5"></i> Shared Mobile Numbers
            </a>
            <a href="{{ route('admin.shared_info.index', ['tab' => 'address']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-bold transition {{ $tab === 'address' ? 'bg-teal-600 text-white shadow-sm' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                <i class="fa-solid fa-house mr-1.5"></i> Shared Addresses
            </a>
            <a href="{{ route('admin.shared_info.index', ['tab' => 'name']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-bold transition {{ $tab === 'name' ? 'bg-teal-600 text-white shadow-sm' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                <i class="fa-solid fa-users mr-1.5"></i> Duplicate Names (Separate Individuals)
            </a>
        </div>
    </div>

    <!-- Cluster Cards -->
    <div class="space-y-5">
        @forelse($clusters as $c)
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
                <!-- Cluster Header -->
                <div class="p-4 bg-slate-50 border-b border-slate-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-navy-900 text-teal-400 flex items-center justify-center shrink-0 font-bold text-xs">
                            {{ $c['count'] }}
                        </div>
                        <div>
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">{{ $c['type'] }}</span>
                            <h4 class="font-bold text-slate-800 text-sm font-mono">{{ $c['identifier'] }}</h4>
                        </div>
                    </div>

                    <span class="text-xs font-semibold text-slate-600">
                        {{ $c['count'] }} Distinct Members Associated
                    </span>
                </div>

                <!-- Cluster Members Grid -->
                <div class="p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                    @foreach($c['members'] as $m)
                        <div class="p-3.5 rounded-xl border border-slate-200 bg-white hover:border-teal-300 transition shadow-2xs flex flex-col justify-between">
                            <div>
                                <div class="flex items-center justify-between mb-1.5">
                                    <span class="font-bold text-slate-900 text-xs">{{ $m->full_name }}</span>
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold border {{ $m->status_badge_class }}">
                                        {{ $m->status_label }}
                                    </span>
                                </div>
                                <p class="text-[11px] font-mono text-slate-500">{{ $m->member_code }}</p>
                                <p class="text-[11px] text-slate-400 mt-0.5">{{ $m->association?->name }}</p>
                                <p class="text-[11px] text-slate-500 mt-1">Mobile: <strong class="text-slate-700 font-mono">{{ $m->masked_mobile }}</strong></p>
                            </div>

                            <div class="pt-3 mt-3 border-t border-slate-100 flex items-center justify-between text-xs">
                                <a href="{{ route('admin.members.show', $m) }}" class="font-semibold text-teal-600 hover:text-teal-800">
                                    Profile →
                                </a>
                                <a href="{{ route('admin.members.reuse', $m) }}" class="font-medium text-slate-600 hover:text-slate-900">
                                    Copy Info
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @empty
            <div class="bg-white p-12 rounded-2xl border border-slate-200 text-center text-slate-400">
                <i class="fa-solid fa-people-arrows text-4xl mb-3 text-slate-300"></i>
                <p class="font-bold text-slate-700 text-sm">No clusters found under this category.</p>
                <p class="text-xs text-slate-400 mt-1">Check another category tab above.</p>
            </div>
        @endforelse
    </div>

</div>
@endsection