'use client'

import { useCallback, useEffect, useState } from 'react'
import type { TFunction } from 'i18next'
import { FiBookOpen, FiX } from 'react-icons/fi'
import { GROUP_LOG_ACTION, type GroupLogAction } from '@/lib/groups/groupLogActions'
import type { GroupLogListItem } from '@/lib/groups/groupLogTypes'
import { formatGroupMemberJoinDateTime } from '@/utils/format'

function resolveLogMessage(
    t: TFunction,
    log: Pick<GroupLogListItem, 'actionContent' | 'actorName' | 'targetName'>
): string {
    const actor = log.actorName
    const target = log.targetName ?? t('familys.logs.unknownMember')
    const action = log.actionContent as GroupLogAction

    switch (action) {
        case GROUP_LOG_ACTION.GROUP_CREATED:
            return t('familys.logs.actions.group_created', { actor })
        case GROUP_LOG_ACTION.MEMBER_APPLIED:
            return t('familys.logs.actions.member_applied', { actor })
        case GROUP_LOG_ACTION.MEMBER_APPLY_CANCELLED:
            return t('familys.logs.actions.member_apply_cancelled', { actor })
        case GROUP_LOG_ACTION.MEMBER_JOIN_APPROVED:
            return t('familys.logs.actions.member_join_approved', { actor, target })
        case GROUP_LOG_ACTION.MEMBER_APPLY_REJECTED:
            return t('familys.logs.actions.member_apply_rejected', { actor, target })
        case GROUP_LOG_ACTION.MEMBER_LEFT:
            return t('familys.logs.actions.member_left', { actor })
        case GROUP_LOG_ACTION.MEMBER_KICKED:
            return t('familys.logs.actions.member_kicked', { actor, target })
        case GROUP_LOG_ACTION.MEMBER_PROMOTED_DEPUTY:
            return t('familys.logs.actions.member_promoted_deputy', { actor, target })
        case GROUP_LOG_ACTION.MEMBER_DEMOTED:
            return t('familys.logs.actions.member_demoted', { actor, target })
        case GROUP_LOG_ACTION.LEADER_TRANSFERRED:
            return t('familys.logs.actions.leader_transferred', { actor, target })
        case GROUP_LOG_ACTION.SETTINGS_NAME:
            return t('familys.logs.actions.settings_name', { actor })
        case GROUP_LOG_ACTION.SETTINGS_APPLICATION:
            return t('familys.logs.actions.settings_application', { actor })
        case GROUP_LOG_ACTION.SETTINGS_AVATAR:
            return t('familys.logs.actions.settings_avatar', { actor })
        case GROUP_LOG_ACTION.SETTINGS_BANNER:
            return t('familys.logs.actions.settings_banner', { actor })
        case GROUP_LOG_ACTION.SETTINGS_BANNER_REMOVED:
            return t('familys.logs.actions.settings_banner_removed', { actor })
        default:
            return t('familys.logs.actions.unknown', { actor, action: log.actionContent })
    }
}

export default function GroupFamilyLogModal({
    isOpen,
    closing,
    entering,
    onClose,
    groupId,
    t,
}: {
    isOpen: boolean
    closing: boolean
    entering: boolean
    onClose: () => void
    groupId: string
    t: TFunction
}) {
    const [logs, setLogs] = useState<GroupLogListItem[]>([])
    const [loading, setLoading] = useState(false)
    const [loadError, setLoadError] = useState('')

    const loadLogs = useCallback(async () => {
        if (!groupId) return
        setLoading(true)
        setLoadError('')
        try {
            const res = await fetch(`/api/group/${encodeURIComponent(groupId)}/logs`, {
                credentials: 'include',
            })
            const json = (await res.json()) as {
                ok?: boolean
                data?: GroupLogListItem[]
                message?: string
            }
            if (!res.ok || !json.ok) {
                setLoadError(json.message || t('familys.logs.loadFailed'))
                setLogs([])
                return
            }
            setLogs(json.data ?? [])
        } catch {
            setLoadError(t('familys.logs.loadFailed'))
            setLogs([])
        } finally {
            setLoading(false)
        }
    }, [groupId, t])

    useEffect(() => {
        if (isOpen) {
            void loadLogs()
        } else {
            setLogs([])
            setLoadError('')
        }
    }, [isOpen, loadLogs])

    if (!isOpen) return null

    return (
        <div
            className={`fixed inset-0 z-[600] flex items-center justify-center p-3 transition-opacity duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] ${closing || entering ? 'pointer-events-none opacity-0' : 'opacity-100'}`}
        >
            <div className="absolute inset-0 bg-black/60" onClick={onClose} aria-hidden />
            <div
                role="dialog"
                aria-modal="true"
                aria-labelledby="group-family-log-title"
                className={`relative flex max-h-[min(85vh,640px)] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] dark:border-gray-800 dark:bg-[#0c0d0e] ${closing || entering ? 'scale-95 opacity-0' : 'scale-100 opacity-100'}`}
            >
                <div className="flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 px-5 py-4 dark:border-white/10">
                    <h3
                        id="group-family-log-title"
                        className="flex min-w-0 items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white"
                    >
                        <FiBookOpen
                            className="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400"
                            aria-hidden
                        />
                        <span className="truncate">{t('familys.logs.modalTitle')}</span>
                    </h3>
                    <button
                        type="button"
                        onClick={onClose}
                        className="inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-[#1a1c21]"
                        aria-label={t('common.close')}
                    >
                        <FiX className="h-4.5 w-4.5" aria-hidden />
                    </button>
                </div>
                <div className="min-h-0 flex-1 overflow-y-auto p-4">
                    {loading ? (
                        <p className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                            {t('common.loading')}
                        </p>
                    ) : loadError ? (
                        <p className="py-8 text-center text-sm text-red-600 dark:text-red-400" role="alert">
                            {loadError}
                        </p>
                    ) : logs.length === 0 ? (
                        <p className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                            {t('familys.logs.emptyList')}
                        </p>
                    ) : (
                        <ul className="space-y-0">
                            {logs.map((log) => (
                                <li
                                    key={log.id}
                                    className="border-b border-gray-100 py-3 last:border-b-0 dark:border-white/10"
                                >
                                    <p className="text-sm text-gray-900 dark:text-gray-100">
                                        {resolveLogMessage(t, log)}
                                    </p>
                                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        {formatGroupMemberJoinDateTime(log.operationAt)}
                                    </p>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            </div>
        </div>
    )
}