'use client'

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useParams, useRouter } from 'next/navigation'
import axios from 'axios'
import { formatCurrency, fmtDate } from '@/lib/utils'
import { ChevronLeft, Users, Plus, X, Edit2, Trash2, Calendar, PiggyBank, Settings2, BarChart2, Check, Minus, AlertTriangle } from 'lucide-react'
import { Card, CardHeader, CardTitle, CardContent, Badge, Button, Tabs, InfoRow, InfoGrid, Amount, LoadingSpinner, Input, StatCard } from '@/components/ui/components'
import { useState } from 'react'
import { toast } from 'sonner'

export default function GroupDetailPage() {
  const { id } = useParams<{ id: string }>()
  const router = useRouter()
  const qc = useQueryClient()
  const [tab, setTab] = useState('overview')
  const [showEdit, setShowEdit] = useState(false)
  const [showAddMember, setShowAddMember] = useState(false)
  const [editForm, setEditForm] = useState<any>({})
  const [addMemberId, setAddMemberId] = useState('')
  const [addMemberRole, setAddMemberRole] = useState('MEMBER')
  const [changingRoles, setChangingRoles] = useState<Record<string, boolean>>({})

  const [showNewMeeting, setShowNewMeeting] = useState(false)
  const [meetingForm, setMeetingForm] = useState({ meetingDate: '', agenda: '', notes: '' })
  const [meetingAttendance, setMeetingAttendance] = useState<Record<string, { attended: boolean; contribution: string }>>({})
  const [expandedMeeting, setExpandedMeeting] = useState<string | null>(null)

  const [showSettings, setShowSettings] = useState(false)
  const [settingsForm, setSettingsForm] = useState<any>({})
  const [reportSub, setReportSub] = useState('summary')

  const { data, isLoading } = useQuery({
    queryKey: ['group', id],
    queryFn: () => axios.get(`/api/groups/${id}`).then(r => r.data.data),
  })

  const { data: meetingsData, isLoading: meetingsLoading, isError: meetingsError } = useQuery({
    queryKey: ['group-meetings', id],
    queryFn: () => axios.get(`/api/groups/${id}/meetings?pageSize=50`).then(r => r.data),
    enabled: tab === 'attendance',
  })

  const { data: savingsData, isLoading: savingsLoading } = useQuery({
    queryKey: ['group-savings', id],
    queryFn: () => axios.get(`/api/groups/${id}/savings`).then(r => r.data.data),
    enabled: tab === 'savings',
  })

  const { data: reportsData, isLoading: reportsLoading } = useQuery({
    queryKey: ['group-reports', id, reportSub],
    queryFn: () => axios.get(`/api/groups/${id}/reports?sub=${reportSub}`).then(r => r.data.data),
    enabled: tab === 'reports',
  })

  const updateMutation = useMutation({
    mutationFn: (d: any) => axios.post(`/api/groups/${id}`, { action: 'update', ...d }),
    onSuccess: () => { toast.success('Group updated'); setShowEdit(false); qc.invalidateQueries({ queryKey: ['group', id] }) },
    onError: (e: any) => {
      const msg = e.response?.data?.error ?? 'Failed to update'
      const details = e.response?.data?.details
      const full = details ? Object.entries(details).map(([k, v]: any) => `${k}: ${v?.join?.(', ') ?? v}`).join('; ') : ''
      toast.error(full ? `${msg}: ${full}` : msg)
    },
  })

  const addMemberMutation = useMutation({
    mutationFn: (d: { memberId: string; role: string }) => axios.post(`/api/groups/${id}/members`, d),
    onSuccess: () => { toast.success('Member added'); setShowAddMember(false); setAddMemberId(''); setAddMemberRole('MEMBER'); qc.invalidateQueries({ queryKey: ['group', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to add member'),
  })

  const removeMemberMutation = useMutation({
    mutationFn: (memberId: string) => axios.delete(`/api/groups/${id}/members/${memberId}`),
    onSuccess: () => { toast.success('Member removed'); qc.invalidateQueries({ queryKey: ['group', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to remove member'),
  })

  const updateMemberRoleMutation = useMutation({
    mutationFn: ({ memberId, role }: { memberId: string; role: string }) => axios.patch(`/api/groups/${id}/members/${memberId}`, { role }),
    onSuccess: () => { toast.success('Role updated'); qc.invalidateQueries({ queryKey: ['group', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to update role'),
    onSettled: () => setChangingRoles({}),
  })

  const createMeetingMutation = useMutation({
    mutationFn: (d: any) => axios.post(`/api/groups/${id}/meetings`, d),
    onSuccess: () => { toast.success('Meeting recorded'); setShowNewMeeting(false); qc.invalidateQueries({ queryKey: ['group-meetings', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to record meeting'),
  })

  const deleteMeetingMutation = useMutation({
    mutationFn: (meetingId: string) => axios.delete(`/api/groups/${id}/meetings/${meetingId}`),
    onSuccess: () => { toast.success('Meeting deleted'); qc.invalidateQueries({ queryKey: ['group-meetings', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to delete meeting'),
  })

  const postSavingsMutation = useMutation({
    mutationFn: (meetingId: string) => axios.post(`/api/groups/${id}/meetings/${meetingId}/post-savings`),
    onSuccess: (r: any) => { toast.success(r.data?.message ?? 'Contributions posted to savings'); qc.invalidateQueries({ queryKey: ['group-meetings', id] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to post to savings'),
  })

  const updateSettingsMutation = useMutation({
    mutationFn: (d: any) => axios.post(`/api/groups/${id}`, { action: 'update', ...d }),
    onSuccess: () => { toast.success('Settings saved'); setShowSettings(false); qc.invalidateQueries({ queryKey: ['group', id] }) },
    onError: (e: any) => {
      const msg = e.response?.data?.error ?? 'Failed to save settings'
      const details = e.response?.data?.details
      const full = details ? Object.entries(details).map(([k, v]: any) => `${k}: ${v?.join?.(', ') ?? v}`).join('; ') : ''
      toast.error(full ? `${msg}: ${full}` : msg)
    },
  })

  const deleteMutation = useMutation({
    mutationFn: () => axios.delete(`/api/groups/${id}`),
    onSuccess: () => { toast.success('Group deleted'); router.push('/groups') },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to delete group'),
  })

  const { data: membersList } = useQuery({
    queryKey: ['members-select'],
    queryFn: () => axios.get('/api/members?status=ACTIVE&pageSize=500').then(r => r.data.data),
    enabled: showAddMember,
  })

  if (isLoading) return <LoadingSpinner message="Loading group…" />
  if (!data) return <div className="p-8 text-center text-muted-foreground">Group not found.</div>

  const g = data
  const allMembers = membersList ?? []
  const currentMemberIds = g.members?.map((m: any) => m.memberId) ?? []
  const availableMembers = allMembers.filter((m: any) => !currentMemberIds.includes(m.id))

  function openEdit() {
    setEditForm({
      name: g.name, groupType: g.groupType, meetingFrequency: g.meetingFrequency, meetingDay: g.meetingDay,
      meetingVenue: g.meetingVenue, phone: g.phone, email: g.email, description: g.description,
      formationDate: g.formationDate ? new Date(g.formationDate).toISOString().split('T')[0] : '',
      isActive: g.isActive,
    })
    setShowEdit(true)
  }

  function openSettings() {
    setSettingsForm({
      registrationNo: g.registrationNo ?? '', jointLiability: g.jointLiability ?? false,
      loanIssuanceMode: g.loanIssuanceMode ?? 'INDIVIDUAL', minActiveMembers: g.minActiveMembers ?? 3,
      maxMembers: g.maxMembers ?? null, minSavingsFrequency: g.minSavingsFrequency ?? 1,
      savingsMultiplier: g.savingsMultiplier ? Number(g.savingsMultiplier) : 0,
      allMustBeActive: g.allMustBeActive ?? false, notes: g.notes ?? '',
    })
    setShowSettings(true)
  }

  function openNewMeeting() {
    const today = new Date().toISOString().split('T')[0]
    setMeetingForm({ meetingDate: today, agenda: '', notes: '' })
    const att: Record<string, { attended: boolean; contribution: string }> = {}
    g.members?.filter((m: any) => m.isActive).forEach((m: any) => { att[m.memberId] = { attended: true, contribution: '' } })
    setMeetingAttendance(att)
    setShowNewMeeting(true)
  }

  function submitMeeting() {
    const attendance = Object.entries(meetingAttendance).map(([memberId, val]) => ({ memberId, attended: val.attended, contribution: parseFloat(val.contribution) || 0 }))
    createMeetingMutation.mutate({ ...meetingForm, attendance })
  }

  const tabs = [
    { id: 'overview', label: 'Overview' }, { id: 'members', label: 'Members', count: g.members?.length ?? 0 },
    { id: 'loans', label: 'Group Loans' }, { id: 'attendance', label: 'Attendance' },
    { id: 'savings', label: 'Savings' }, { id: 'settings-tab', label: 'Settings' }, { id: 'reports', label: 'Reports' },
  ]

  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">
      <div className="flex items-center justify-between">
        <Button variant="ghost" size="sm" icon={<ChevronLeft className="w-4 h-4" />} onClick={() => router.back()}>Groups</Button>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" icon={<Edit2 className="w-4 h-4" />} onClick={openEdit}>Edit</Button>
          <Button variant="outline" size="sm" icon={<Settings2 className="w-4 h-4" />} onClick={openSettings}>Settings</Button>
          <Button variant="outline" size="sm" icon={<Trash2 className="w-4 h-4" />} className="text-red-600 border-red-200 hover:bg-red-50"
            onClick={() => { if (confirm(`Delete group "${g.name}"? This cannot be undone.`)) deleteMutation.mutate() }}>Delete</Button>
        </div>
      </div>

      {/* Edit Dialog */}
      {showEdit && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowEdit(false)}>
          <div className="bg-card rounded-xl shadow-xl p-6 w-full max-w-lg mx-4 space-y-4" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between"><h3 className="text-lg font-semibold">Edit Group</h3><button onClick={() => setShowEdit(false)}><X className="w-5 h-5"/></button></div>
            <Input label="Name" value={editForm.name ?? ''} onChange={e => setEditForm({ ...editForm, name: e.target.value })} />
            <div><label className="block text-sm font-medium mb-1.5">Type</label>
              <select className="w-full border rounded-lg px-3 py-2 text-sm bg-background" value={editForm.groupType} onChange={e => setEditForm({ ...editForm, groupType: e.target.value })}>
                <option value="CHAMA">Chama</option><option value="SOLIDARITY">Solidarity</option><option value="ORGANISATIONAL">Organisational</option><option value="COOPERATIVE">Cooperative</option>
              </select>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Input label="Meeting Frequency" value={editForm.meetingFrequency ?? ''} onChange={e => setEditForm({ ...editForm, meetingFrequency: e.target.value })} />
              <Input label="Meeting Day" value={editForm.meetingDay ?? ''} onChange={e => setEditForm({ ...editForm, meetingDay: e.target.value })} />
            </div>
            <Input label="Meeting Venue" value={editForm.meetingVenue ?? ''} onChange={e => setEditForm({ ...editForm, meetingVenue: e.target.value })} />
            <Input label="Formation Date" type="date" value={editForm.formationDate ?? ''} onChange={e => setEditForm({ ...editForm, formationDate: e.target.value })} />
            <div className="grid grid-cols-2 gap-3">
              <Input label="Phone" value={editForm.phone ?? ''} onChange={e => setEditForm({ ...editForm, phone: e.target.value })} />
              <Input label="Email" value={editForm.email ?? ''} onChange={e => setEditForm({ ...editForm, email: e.target.value })} />
            </div>
            <div><label className="block text-sm font-medium mb-1.5">Description</label>
              <textarea className="w-full border rounded-lg px-3 py-2 text-sm bg-background" rows={3} value={editForm.description ?? ''} onChange={e => setEditForm({ ...editForm, description: e.target.value })} />
            </div>
            <div className="flex items-center justify-between pt-2">
              <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={editForm.isActive ?? true} onChange={e => setEditForm({ ...editForm, isActive: e.target.checked })} className="w-4 h-4"/> Active</label>
              <div className="flex gap-2"><Button variant="outline" onClick={() => setShowEdit(false)}>Cancel</Button><Button loading={updateMutation.isPending} onClick={() => updateMutation.mutate(editForm)}>Save</Button></div>
            </div>
          </div>
        </div>
      )}

      {/* Settings Dialog */}
      {showSettings && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowSettings(false)}>
          <div className="bg-card rounded-xl shadow-xl p-6 w-full max-w-2xl mx-4 space-y-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between"><h3 className="text-lg font-semibold">Group Settings & Terms</h3><button onClick={() => setShowSettings(false)}><X className="w-5 h-5"/></button></div>
            <div className="grid grid-cols-2 gap-3">
              <Input label="Registration No." value={settingsForm.registrationNo ?? ''} onChange={e => setSettingsForm({ ...settingsForm, registrationNo: e.target.value })} />
                <Input label="Savings Multiplier" type="number" step="0.01" value={settingsForm.savingsMultiplier ?? ''} onChange={e => setSettingsForm({ ...settingsForm, savingsMultiplier: e.target.value === '' ? '' : parseFloat(e.target.value) })} hint="e.g. 3 = member can borrow 3x savings" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div><label className="block text-sm font-medium mb-1.5">Loan Issuance Mode</label>
                <select className="w-full border rounded-lg px-3 py-2 text-sm bg-background" value={settingsForm.loanIssuanceMode ?? 'INDIVIDUAL'} onChange={e => setSettingsForm({ ...settingsForm, loanIssuanceMode: e.target.value })}>
                  <option value="INDIVIDUAL">Individual</option><option value="GROUP">Group</option>
                </select>
              </div>
              <Input label="Min Savings (months)" type="number" value={settingsForm.minSavingsFrequency ?? 1} onChange={e => setSettingsForm({ ...settingsForm, minSavingsFrequency: parseInt(e.target.value) || 0 })} />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Input label="Min Active Members" type="number" value={settingsForm.minActiveMembers ?? 3} onChange={e => setSettingsForm({ ...settingsForm, minActiveMembers: parseInt(e.target.value) || 1 })} />
              <Input label="Max Members" type="number" value={settingsForm.maxMembers ?? ''} onChange={e => setSettingsForm({ ...settingsForm, maxMembers: e.target.value ? parseInt(e.target.value) : null })} />
            </div>
            <div className="space-y-3">
              <label className="flex items-center gap-3 text-sm cursor-pointer">
                <input type="checkbox" checked={settingsForm.jointLiability ?? false} onChange={e => setSettingsForm({ ...settingsForm, jointLiability: e.target.checked })} className="w-4 h-4" />
                <div><p className="font-medium">Joint Liability</p><p className="text-xs text-muted-foreground">Members jointly liable for group loans</p></div>
              </label>
              <label className="flex items-center gap-3 text-sm cursor-pointer">
                <input type="checkbox" checked={settingsForm.allMustBeActive ?? false} onChange={e => setSettingsForm({ ...settingsForm, allMustBeActive: e.target.checked })} className="w-4 h-4" />
                <div><p className="font-medium">All Members Must Be Active</p><p className="text-xs text-muted-foreground">All members must be active for group loans</p></div>
              </label>
            </div>
            <div><label className="block text-sm font-medium mb-1.5">Notes</label>
              <textarea className="w-full border rounded-lg px-3 py-2 text-sm bg-background" rows={3} value={settingsForm.notes ?? ''} onChange={e => setSettingsForm({ ...settingsForm, notes: e.target.value })} />
            </div>
            <div className="flex justify-end gap-2 pt-2"><Button variant="outline" onClick={() => setShowSettings(false)}>Cancel</Button><Button loading={updateSettingsMutation.isPending} onClick={() => updateSettingsMutation.mutate(settingsForm)}>Save Settings</Button></div>
          </div>
        </div>
      )}

      {/* New Meeting Dialog */}
      {showNewMeeting && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowNewMeeting(false)}>
          <div className="bg-card rounded-xl shadow-xl p-6 w-full max-w-lg mx-4 space-y-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between"><h3 className="text-lg font-semibold">Record Meeting</h3><button onClick={() => setShowNewMeeting(false)}><X className="w-5 h-5"/></button></div>
            <Input label="Meeting Date" type="date" value={meetingForm.meetingDate} onChange={e => setMeetingForm({ ...meetingForm, meetingDate: e.target.value })} required />
            <Input label="Agenda (optional)" value={meetingForm.agenda} onChange={e => setMeetingForm({ ...meetingForm, agenda: e.target.value })} />
            <Input label="Notes (optional)" value={meetingForm.notes} onChange={e => setMeetingForm({ ...meetingForm, notes: e.target.value })} />
            <div><label className="block text-sm font-medium mb-2">Attendance & Contributions</label>
              <div className="max-h-64 overflow-y-auto space-y-1 border rounded-lg p-2">
                {Object.keys(meetingAttendance).length === 0 && <p className="text-xs text-muted-foreground p-2">No active members</p>}
                {Object.keys(meetingAttendance).map(memberId => {
                  const m = g.members?.find((gm: any) => gm.memberId === memberId)
                  if (!m) return null
                  return (
                    <div key={memberId} className="flex items-center gap-2 p-1.5 rounded hover:bg-muted/50">
                      <button onClick={() => setMeetingAttendance({ ...meetingAttendance, [memberId]: { ...meetingAttendance[memberId], attended: !meetingAttendance[memberId].attended } })}
                        className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 ${meetingAttendance[memberId].attended ? 'bg-green-500 text-white' : 'bg-red-100 text-red-500'}`}>
                        {meetingAttendance[memberId].attended ? <Check className="w-4 h-4"/> : <Minus className="w-4 h-4"/>}
                      </button>
                      <span className="text-sm flex-1 truncate">{m.member?.fullName}</span>
                      <input type="number" step="0.01" placeholder="Contrib." className="w-24 text-xs border rounded px-2 py-1 text-right bg-background"
                        value={meetingAttendance[memberId].contribution}
                        onChange={e => setMeetingAttendance({ ...meetingAttendance, [memberId]: { ...meetingAttendance[memberId], contribution: e.target.value } })} />
                    </div>
                  )
                })}
              </div>
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="outline" onClick={() => setShowNewMeeting(false)}>Cancel</Button>
              <Button loading={createMeetingMutation.isPending} onClick={submitMeeting} disabled={!meetingForm.meetingDate}>Save Meeting</Button>
            </div>
          </div>
        </div>
      )}

      {/* Add Member Dialog */}
      {showAddMember && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowAddMember(false)}>
          <div className="bg-card rounded-xl shadow-xl p-6 w-full max-w-lg mx-4 space-y-4" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between"><h3 className="text-lg font-semibold">Add Member to Group</h3><button onClick={() => setShowAddMember(false)}><X className="w-5 h-5"/></button></div>
            <div><label className="block text-sm font-medium mb-1.5">Select Member</label>
              <select className="w-full border rounded-lg px-3 py-2 text-sm bg-background" value={addMemberId} onChange={e => setAddMemberId(e.target.value)}>
                <option value="">-- Choose a member --</option>
                {availableMembers.map((m: any) => (<option key={m.id} value={m.id}>{m.fullName} ({m.memberNo})</option>))}
              </select>
            </div>
            <div><label className="block text-sm font-medium mb-1.5">Role</label>
              <select className="w-full border rounded-lg px-3 py-2 text-sm bg-background" value={addMemberRole} onChange={e => setAddMemberRole(e.target.value)}>
                <option value="MEMBER">Member</option><option value="CHAIRPERSON">Chairperson</option><option value="SECRETARY">Secretary</option><option value="TREASURER">Treasurer</option>
              </select>
            </div>
            <div className="flex justify-end gap-2 pt-2"><Button variant="outline" onClick={() => setShowAddMember(false)}>Cancel</Button><Button loading={addMemberMutation.isPending} onClick={() => addMemberMutation.mutate({ memberId: addMemberId, role: addMemberRole })} disabled={!addMemberId}>Add Member</Button></div>
          </div>
        </div>
      )}

      {/* Header */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-start gap-4">
            <div className="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0"><Users className="w-7 h-7" /></div>
            <div className="flex-1">
              <div className="flex items-center gap-3 flex-wrap">
                <h2 className="text-xl font-semibold">{g.name}</h2>
                <Badge variant={g.isActive ? 'success' : 'default'}>{g.isActive ? 'ACTIVE' : 'INACTIVE'}</Badge>
                <Badge variant="info">{g.groupType?.replace(/_/g, ' ')}</Badge>
              </div>
              <p className="text-sm text-muted-foreground mt-1">{g.groupNo} · {g.members?.length ?? 0} members · {g.organisation?.name}</p>
              <div className="grid grid-cols-2 sm:grid-cols-5 gap-4 mt-4 pt-4 border-t">
                <div><p className="text-xs text-muted-foreground">Total Savings</p><p className="font-bold text-blue-600">{formatCurrency(g.totalSavings ?? 0)}</p></div>
                <div><p className="text-xs text-muted-foreground">Loan Balance</p><p className="font-bold text-amber-600">{formatCurrency(g.totalLoanBalance ?? 0)}</p></div>
                <div><p className="text-xs text-muted-foreground">Meeting Day</p><p className="font-medium">{g.meetingDay ?? '—'}</p></div>
                <div><p className="text-xs text-muted-foreground">Formed</p><p className="font-medium">{fmtDate(g.formationDate)}</p></div>
                <div><p className="text-xs text-muted-foreground">Multiplier</p><p className="font-bold text-purple-600">×{g.savingsMultiplier ? Number(g.savingsMultiplier) : 0}</p></div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Tabs tabs={tabs} active={tab} onChange={setTab} />

      {/* Tab: Overview */}
      {tab === 'overview' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          <Card><CardHeader><CardTitle>Group Information</CardTitle></CardHeader>
            <CardContent>
              <InfoGrid cols={1}>
                <InfoRow label="Group Name" value={g.name} /><InfoRow label="Group Number" value={g.groupNo} />
                <InfoRow label="Group Type" value={g.groupType?.replace(/_/g, ' ')} /><InfoRow label="Organisation" value={g.organisation?.name} />
                <InfoRow label="Meeting Day" value={g.meetingDay} /><InfoRow label="Meeting Frequency" value={g.meetingFrequency} />
                <InfoRow label="Meeting Location" value={g.meetingVenue} /><InfoRow label="Registration No." value={g.registrationNo} />
                <InfoRow label="Phone" value={g.phone} /><InfoRow label="Email" value={g.email} />
                <InfoRow label="Formed On" value={fmtDate(g.formationDate)} /><InfoRow label="Description" value={g.description} />
              </InfoGrid>
            </CardContent>
          </Card>
          <Card><CardHeader><CardTitle>Leadership</CardTitle></CardHeader>
            <CardContent>
              {g.members?.filter((m: any) => ['CHAIRPERSON', 'SECRETARY', 'TREASURER'].includes(m.role)).map((m: any) => (
                <div key={m.id} className="flex items-center justify-between py-2 border-b last:border-0">
                  <div><p className="font-medium text-sm">{m.member?.fullName}</p><p className="text-xs text-muted-foreground">{m.member?.phone}</p></div>
                  <Badge variant="info">{m.role}</Badge>
                </div>
              ))}
              {!g.members?.some((m: any) => ['CHAIRPERSON', 'SECRETARY', 'TREASURER'].includes(m.role)) && (
                <p className="text-sm text-muted-foreground">No leaders assigned</p>
              )}
            </CardContent>
          </Card>
        </div>
      )}

      {/* Tab: Members */}
      {tab === 'members' && (
        <Card><CardHeader><CardTitle>Group Members ({g.members?.length ?? 0})</CardTitle><Button variant="outline" size="sm" icon={<Plus className="w-4 h-4" />} onClick={() => setShowAddMember(true)}>Add Member</Button></CardHeader>
          <div className="overflow-x-auto">
            <table className="table-lms w-full">
              <thead><tr><th>Member</th><th>Role</th><th>Joined</th><th>Active Loans</th><th>Savings</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {g.members?.map((m: any) => (
                  <tr key={m.id}>
                    <td className="cursor-pointer" onClick={() => router.push(`/members/${m.memberId}`)}>
                      <p className="font-medium text-sm">{m.member?.fullName}</p>
                      <p className="text-xs text-muted-foreground">{m.member?.memberNo} · {m.member?.phone}</p>
                    </td>
                    <td>
                      <select className="text-xs border rounded px-2 py-1 bg-background" defaultValue={m.role} disabled={!!changingRoles[m.id]}
                        onChange={e => { setChangingRoles({ ...changingRoles, [m.id]: true }); updateMemberRoleMutation.mutate({ memberId: m.memberId, role: e.target.value }) }}>
                        <option value="MEMBER">MEMBER</option><option value="CHAIRPERSON">CHAIRPERSON</option><option value="SECRETARY">SECRETARY</option><option value="TREASURER">TREASURER</option>
                      </select>
                    </td>
                    <td className="text-xs text-muted-foreground">{fmtDate(m.joinedAt)}</td>
                    <td className="text-center text-sm">{m.member?.loans?.filter((l: any) => l.status === 'ACTIVE').length ?? 0}</td>
                    <td><Amount value={m.member?.savingsAccounts?.reduce((s: number, a: any) => s + Number(a.balance ?? 0), 0)} size="sm" /></td>
                    <td><Badge variant={m.isActive ? 'success' : 'default'}>{m.isActive ? 'ACTIVE' : 'EXITED'}</Badge></td>
                    <td><button className="text-red-500 hover:text-red-700" onClick={() => { if (confirm('Remove this member?')) removeMemberMutation.mutate(m.memberId) }}><Trash2 className="w-4 h-4"/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {/* Tab: Loans */}
      {tab === 'loans' && (
        <Card><CardHeader><CardTitle>Group Loans</CardTitle></CardHeader>
          <div className="overflow-x-auto">
            <table className="table-lms w-full">
              <thead><tr><th>Loan Ref</th><th>Member</th><th>Product</th><th>Amount</th><th>Outstanding</th><th>Status</th></tr></thead>
              <tbody>
                {!g.loans?.length ? <tr><td colSpan={6} className="text-center py-8 text-muted-foreground">No group loans on record</td></tr>
                : g.loans.map((l: any) => (
                  <tr key={l.id} className="cursor-pointer" onClick={() => router.push(`/loans/${l.id}`)}>
                    <td className="font-mono text-sm text-primary">{l.loanRef}</td>
                    <td className="text-sm">{l.member?.fullName}</td>
                    <td className="text-sm">{l.product?.name}</td>
                    <td><Amount value={l.principalAmount} size="sm" /></td>
                    <td><Amount value={l.outstandingBalance} size="sm" /></td>
                    <td><Badge variant={l.status==='ACTIVE'?'success':l.status==='CLOSED'?'default':'warning'}>{l.status}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {/* Tab: Attendance */}
      {tab === 'attendance' && (
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-semibold">Meeting Attendance</h3>
            <Button size="sm" icon={<Calendar className="w-4 h-4" />} onClick={openNewMeeting}>Record Meeting</Button>
          </div>
          <Card>
            <div className="overflow-x-auto">
              <table className="table-lms w-full">
                <thead><tr><th>Date</th><th>Agenda</th><th>Attended</th><th>Collected</th><th></th></tr></thead>
                <tbody>
                  {meetingsLoading ? Array.from({length:3}).map((_,i)=><tr key={i}>{Array.from({length:5}).map((_,j)=><td key={j}><div className="h-4 bg-muted rounded animate-pulse"/></td>)}</tr>)
                  : meetingsError ? <tr><td colSpan={5} className="text-center py-8 text-red-500">Failed to load meetings</td></tr>
                  : !meetingsData?.data?.length ? <tr><td colSpan={5} className="text-center py-8 text-muted-foreground">No meetings recorded</td></tr>
                  : meetingsData.data.map((m: any) => (
                    <><tr key={m.id} className="cursor-pointer" onClick={() => setExpandedMeeting(expandedMeeting === m.id ? null : m.id)}>
                      <td className="text-sm font-medium">{fmtDate(m.meetingDate)}</td>
                      <td className="text-sm text-muted-foreground max-w-[200px] truncate">{m.agenda || '—'}</td>
                      <td className="text-sm">{m.attendanceCount ?? 0} / {m.attendance?.length ?? 0}</td>
                      <td><Amount value={m.collectedAmount} size="sm" /></td>
                      <td>
                        <div className="flex gap-1 items-center">
                          {m.collectedAmount > 0 && !m.savingsPosted && (
                            <button className="text-green-600 hover:text-green-800 text-xs font-medium" onClick={e => { e.stopPropagation(); postSavingsMutation.mutate(m.id) }} title="Post to FOSA savings">Post FOSA</button>
                          )}
                          {m.savingsPosted && <span className="text-xs text-green-600 font-medium">Posted</span>}
                          <button className="text-red-500 hover:text-red-700 text-xs" onClick={e => { e.stopPropagation(); if (confirm('Delete this meeting?')) deleteMeetingMutation.mutate(m.id) }}>Delete</button>
                        </div>
                      </td>
                    </tr>
                    {expandedMeeting === m.id && m.attendance?.length > 0 && (
                      <tr key={`${m.id}-detail`}><td colSpan={5} className="bg-muted/30 p-3">
                        <table className="w-full text-xs"><thead><tr className="text-muted-foreground"><th className="text-left pb-1">Member</th><th className="pb-1">Attended</th><th className="pb-1 text-right">Contribution</th></tr></thead>
                          <tbody>{m.attendance.map((a: any) => (
                            <tr key={a.id}><td className="py-0.5">{a.member?.fullName}</td><td className="text-center">{a.attended ? <Check className="w-3.5 h-3.5 inline text-green-600"/> : <Minus className="w-3.5 h-3.5 inline text-red-400"/>}</td><td className="text-right">{a.contribution ? formatCurrency(Number(a.contribution)) : '—'}</td></tr>
                          ))}</tbody>
                        </table>
                      </td></tr>
                    )}</>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      )}

      {/* Tab: Savings */}
      {tab === 'savings' && (
        <div className="space-y-4">
          {savingsLoading ? <LoadingSpinner message="Loading savings…" /> : savingsData && (
            <><div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
              <StatCard label="Total Group Savings" value={formatCurrency(savingsData.totals.totalSavings)} icon={<PiggyBank className="w-5 h-5"/>} color="blue"/>
              <StatCard label="Total Borrowing Power" value={formatCurrency(savingsData.totals.totalPotentialLoanSize)} icon={<BarChart2 className="w-5 h-5"/>} color="green"/>
              <StatCard label="Current Loans" value={formatCurrency(savingsData.totals.totalActiveLoanBalance)} icon={<BarChart2 className="w-5 h-5"/>} color="amber"/>
              <StatCard label="Net Capacity" value={formatCurrency(savingsData.totals.totalNetBorrowingPower)} icon={<BarChart2 className="w-5 h-5"/>} color="purple"/>
            </div>
            {savingsData.totals.savingsMultiplier > 0 && <p className="text-xs text-muted-foreground">Borrowing power: ×{savingsData.totals.savingsMultiplier} of savings (minus active loans).</p>}
            <Card><div className="overflow-x-auto">
              <table className="table-lms w-full">
                <thead><tr><th>Member</th><th>FOSA Accounts</th><th>Total Savings</th><th>Borrowing Power</th><th>Active Loans</th><th>Net Capacity</th></tr></thead>
                <tbody>
                  {savingsData.members?.length === 0 ? <tr><td colSpan={6} className="text-center py-8 text-muted-foreground">No members with savings</td></tr>
                  : savingsData.members.map((m: any) => (
                    <tr key={m.memberId}>
                      <td className="cursor-pointer" onClick={() => router.push(`/members/${m.memberId}`)}><p className="font-medium text-sm">{m.fullName}</p><p className="text-xs text-muted-foreground">{m.memberNo}</p></td>
                      <td>{m.savingsAccounts?.length === 0 ? <span className="text-xs text-muted-foreground">None</span> : m.savingsAccounts.map((a: any) => <div key={a.id} className="text-xs"><span className="font-mono">{a.accountNo}</span> <span className="text-muted-foreground">({a.accountType?.replace(/_/g,' ')})</span></div>)}</td>
                      <td><Amount value={m.totalSavings} size="sm" /></td>
                      <td><Amount value={m.potentialLoanSize} size="sm" /></td>
                      <td><Amount value={m.activeLoanBalance} size="sm" /></td>
                      <td><Amount value={m.netBorrowingPower} size="sm" /></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div></Card>
          </>)}
        </div>
      )}

      {/* Tab: Settings */}
      {tab === 'settings-tab' && (
        <Card><CardHeader><CardTitle>Group Settings & Terms</CardTitle><Button variant="outline" size="sm" icon={<Settings2 className="w-4 h-4" />} onClick={openSettings}>Edit Settings</Button></CardHeader>
          <CardContent>
            <InfoGrid cols={2}>
              <InfoRow label="Registration No." value={g.registrationNo || '—'} />
              <InfoRow label="Loan Issuance Mode" value={g.loanIssuanceMode} />
              <InfoRow label="Joint Liability" value={g.jointLiability ? 'Yes' : 'No'} />
              <InfoRow label="All Must Be Active" value={g.allMustBeActive ? 'Yes' : 'No'} />
              <InfoRow label="Min Active Members" value={String(g.minActiveMembers)} />
              <InfoRow label="Max Members" value={g.maxMembers ? String(g.maxMembers) : 'Unlimited'} />
              <InfoRow label="Min Savings Frequency" value={`${g.minSavingsFrequency} month(s)`} />
              <InfoRow label="Savings Multiplier" value={g.savingsMultiplier ? `×${Number(g.savingsMultiplier)}` : 'Not set'} />
              <InfoRow label="Notes" value={g.notes || '—'} />
            </InfoGrid>
          </CardContent>
        </Card>
      )}

      {/* Tab: Reports */}
      {tab === 'reports' && (
        <div className="space-y-4">
          <div className="flex gap-2 border-b pb-2">
            {(['summary', 'attendance', 'savings', 'loans'] as const).map(s => (
              <button key={s} onClick={() => setReportSub(s)}
                className={`text-sm px-3 py-1.5 rounded-md font-medium transition-colors ${reportSub === s ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
              >{s.charAt(0).toUpperCase() + s.slice(1)}</button>
            ))}
          </div>
          {reportsLoading ? <LoadingSpinner message="Loading report…" /> : reportsData && (
            <>{reportSub === 'summary' && (
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <StatCard label="Total Members" value={String(reportsData.totalMembers ?? 0)} sub={`${reportsData.activeMembers ?? 0} active`} icon={<Users className="w-5 h-5"/>} color="blue"/>
                <StatCard label="Meetings Held" value={String(reportsData.totalMeetings ?? 0)} sub={`Collected: ${formatCurrency(reportsData.totalCollected ?? 0)}`} icon={<Calendar className="w-5 h-5"/>} color="green"/>
                <StatCard label="Total Contributions" value={formatCurrency(reportsData.totalContributions ?? 0)} icon={<PiggyBank className="w-5 h-5"/>} color="purple"/>
                <StatCard label="Total Loans" value={String(reportsData.totalLoans ?? 0)} sub={`${reportsData.activeLoans ?? 0} active`} icon={<BarChart2 className="w-5 h-5"/>} color="amber"/>
                <StatCard label="Total Principal" value={formatCurrency(reportsData.totalPrincipal ?? 0)} sub={`Outstanding: ${formatCurrency(reportsData.totalOutstanding ?? 0)}`} icon={<BarChart2 className="w-5 h-5"/>} color="red"/>
                <StatCard label="Savings Multiplier" value={`×${reportsData.savingsMultiplier ?? 0}`} sub={`Mode: ${reportsData.loanIssuanceMode ?? 'INDIVIDUAL'}`} icon={<Settings2 className="w-5 h-5"/>} color="info"/>
              </div>
            )}
            {reportSub === 'attendance' && (
              <><p className="text-sm text-muted-foreground">Total meetings: {reportsData.totalMeetings ?? 0}</p>
              <Card><div className="overflow-x-auto"><table className="table-lms w-full"><thead><tr><th>Member</th><th>Attended</th><th>Missed</th><th>Rate</th><th>Contributions</th></tr></thead>
                <tbody>{!reportsData.memberAttendance?.length ? <tr><td colSpan={5} className="text-center py-8 text-muted-foreground">No data</td></tr>
                  : reportsData.memberAttendance.map((m: any) => (
                    <tr key={m.memberId}><td className="text-sm font-medium">{m.fullName}<span className="text-xs text-muted-foreground"> · {m.memberNo}</span></td>
                      <td className="text-sm text-green-600 font-medium">{m.attended}</td><td className="text-sm text-red-500">{m.missed}</td>
                      <td><span className={`text-sm font-medium ${parseFloat(m.attendanceRate) >= 80 ? 'text-green-600' : parseFloat(m.attendanceRate) >= 50 ? 'text-amber-600' : 'text-red-500'}`}>{m.attendanceRate}%</span></td>
                      <td><Amount value={m.totalContributions} size="sm" /></td>
                    </tr>
                  ))}</tbody></table></div></Card></>
            )}
            {reportSub === 'savings' && (
              <><div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
                <StatCard label="Members with Savings" value={String(reportsData.summary?.totalMembers ?? 0)} icon={<Users className="w-5 h-5"/>} color="blue"/>
                <StatCard label="Total Savings" value={formatCurrency(reportsData.summary?.totalSavings ?? 0)} icon={<PiggyBank className="w-5 h-5"/>} color="green"/>
                <StatCard label="Avg Savings/Member" value={formatCurrency(reportsData.summary?.averageSavings ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="purple"/>
                <StatCard label="Total Loan Capacity" value={formatCurrency(reportsData.summary?.totalPotentialLoanCapacity ?? 0)} sub={`×${reportsData.summary?.multiplier ?? 0} multiplier`} icon={<BarChart2 className="w-5 h-5"/>} color="amber"/>
              </div>
              <Card><div className="overflow-x-auto"><table className="table-lms w-full"><thead><tr><th>Member</th><th>Accounts</th><th>Total Savings</th><th>Loan Capacity</th></tr></thead>
                <tbody>{!reportsData.members?.length ? <tr><td colSpan={4} className="text-center py-8 text-muted-foreground">No data</td></tr>
                  : reportsData.members.map((m: any) => (<tr key={m.memberNo}><td className="text-sm font-medium">{m.fullName}</td><td className="text-xs text-muted-foreground">{m.accounts?.map((a: any) => a.accountNo).join(', ') || 'None'}</td><td><Amount value={m.totalSavings} size="sm" /></td><td><Amount value={m.potentialLoanSize} size="sm" /></td></tr>))}
                </tbody></table></div></Card></>
            )}
            {reportSub === 'loans' && (
              <><div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
                <StatCard label="Total Loans" value={String(reportsData.counts?.total ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="blue"/>
                <StatCard label="Active" value={String(reportsData.counts?.active ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="green"/>
                <StatCard label="Closed" value={String(reportsData.counts?.closed ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="default"/>
                <StatCard label="Defaulted" value={String(reportsData.counts?.defaulted ?? 0)} icon={<AlertTriangle className="w-5 h-5"/>} color="red"/>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <StatCard label="Total Disbursed" value={formatCurrency(reportsData.totals?.disbursed ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="amber"/>
                <StatCard label="Outstanding" value={formatCurrency(reportsData.totals?.outstanding ?? 0)} icon={<BarChart2 className="w-5 h-5"/>} color="red"/>
              </div>
              <Card><div className="overflow-x-auto"><table className="table-lms w-full"><thead><tr><th>Loan Ref</th><th>Member</th><th>Product</th><th>Amount</th><th>Outstanding</th><th>Status</th></tr></thead>
                <tbody>{!reportsData.loans?.length ? <tr><td colSpan={6} className="text-center py-8 text-muted-foreground">No loans</td></tr>
                  : reportsData.loans.map((l: any) => (<tr key={l.id} className="cursor-pointer" onClick={() => router.push(`/loans/${l.id}`)}>
                    <td className="font-mono text-xs text-primary">{l.loanRef}</td><td className="text-sm">{l.member?.fullName}</td><td className="text-xs text-muted-foreground">{l.product?.name}</td>
                    <td><Amount value={l.principalAmount} size="sm" /></td><td><Amount value={l.outstandingBalance} size="sm" /></td>
                    <td><Badge variant={l.status==='ACTIVE'?'success':l.status==='CLOSED'?'default':'warning'}>{l.status}</Badge></td>
                  </tr>))}</tbody></table></div></Card></>
            )}</>
          )}
        </div>
      )}
    </div>
  )
}