'use client'

import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'

interface MyDevice {
    id: string
    deviceType: string
    deviceName: string
    userAgent: string
    regDate: string
    isSession: boolean
}

export default function MyDevicesTab() {
    const { t } = useTranslation()
    const [devices, setDevices] = useState<MyDevice[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        fetchDevices()
    }, [])

    const fetchDevices = async () => {
        setLoading(true)
        try {
            const response = await fetch('/api/profile/my-devices')
            const data = await response.json()
            if (data.ok) {
                setDevices(data.devices || [])
            }
        } catch (error) {
            console.error('Failed to fetch my devices:', error)
        } finally {
            setLoading(false)
        }
    }

    const handleRegister = async (deviceId: string) => {
        if (!confirm(t('profile.myDevices.confirmRegister'))) return

        try {
            const response = await fetch('/api/profile/my-devices', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ deviceId }),
            })
            const data = await response.json()
            if (data.ok) {
                fetchDevices()
            } else {
                alert(data.message || t('common.error'))
            }
        } catch (error) {
            console.error('Failed to register device:', error)
            alert(t('common.error'))
        }
    }

    const handleUnregister = async (deviceId: string) => {
        if (!confirm(t('profile.myDevices.confirmUnregister'))) return

        try {
            const response = await fetch('/api/profile/my-devices', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ deviceId }),
            })
            const data = await response.json()
            if (data.ok) {
                fetchDevices()
            } else {
                alert(data.message || t('common.error'))
            }
        } catch (error) {
            console.error('Failed to unregister device:', error)
            alert(t('common.error'))
        }
    }

    const handleUnregisterAll = async () => {
        if (!confirm(t('profile.myDevices.confirmUnregisterAll'))) return

        try {
            const response = await fetch('/api/profile/my-devices', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ all: true }),
            })
            const data = await response.json()
            if (data.ok) {
                fetchDevices()
            } else {
                alert(data.message || t('common.error'))
            }
        } catch (error) {
            console.error('Failed to unregister all devices:', error)
            alert(t('common.error'))
        }
    }

    return (
        <div>
            <div className="mb-6">
                <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                    <li>{t('profile.myDevices.desc1')}</li>
                    <li>{t('profile.myDevices.desc2')}</li>
                </ul>
                <div className="flex justify-end">
                    <button
                        onClick={handleUnregisterAll}
                        className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                    >
                        {t('profile.myDevices.unregisterAll')}
                    </button>
                </div>
            </div>

            {loading ? (
                <div className="text-center py-8 text-gray-500">{t('common.loading')}</div>
            ) : devices.length === 0 ? (
                <div className="text-center py-8 text-gray-500">{t('profile.myDevices.noDevices')}</div>
            ) : (
                <>
                    <table className="w-full border-collapse border-b border-gray-200 dark:border-gray-700">
                        <thead>
                            <tr className="bg-gray-50 dark:bg-neutral-900 border-t border-b border-gray-300 dark:border-gray-600">
                                <th className="py-3 px-4 text-left text-xs font-medium text-gray-600 dark:text-gray-400">
                                    {t('profile.myDevices.table.os')}
                                </th>
                                <th className="py-3 px-4 text-left text-xs font-medium text-gray-600 dark:text-gray-400">
                                    {t('profile.myDevices.table.type')}
                                </th>
                                <th className="py-3 px-4 text-left text-xs font-medium text-gray-600 dark:text-gray-400">
                                    {t('profile.myDevices.table.regDate')}
                                </th>
                                <th className="py-3 px-4 text-left text-xs font-medium text-gray-600 dark:text-gray-400">
                                    {t('profile.myDevices.table.manage')}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {devices.map((device) => (
                                <tr key={device.id} className="border-b border-gray-100 dark:border-gray-800">
                                    <td className="py-4 px-4 text-sm text-black dark:text-gray-300">
                                        {device.deviceType}
                                        <br />
                                        {device.deviceName}
                                    </td>
                                    <td className="py-4 px-4 text-sm text-black dark:text-gray-300">
                                        {device.userAgent || '-'}
                                    </td>
                                    <td className="py-4 px-4 text-sm text-black dark:text-gray-300">
                                        {device.regDate}
                                    </td>
                                    <td className="py-4 px-4 text-sm">
                                        {device.isSession ? (
                                            <button
                                                onClick={() => handleRegister(device.id)}
                                                className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                                            >
                                                {t('profile.myDevices.register')}
                                            </button>
                                        ) : (
                                            <button
                                                onClick={() => handleUnregister(device.id)}
                                                className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                                            >
                                                {t('profile.myDevices.unregister')}
                                            </button>
                                        )}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>

                    <dl className="mt-6 text-sm">
                        <dt className="font-medium text-black dark:text-white mb-2">
                            {t('profile.myDevices.notice.title')}
                        </dt>
                        <dd>
                            <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
                                <li>{t('profile.myDevices.notice.item1')}</li>
                            </ul>
                        </dd>
                    </dl>
                </>
            )}
        </div>
    )
}