'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'
import { FiMessageCircle, FiMail, FiArrowRight } from 'react-icons/fi'
import { formatDateTime } from '@/utils/formatDate'

export default function ServicePage() {
    const { t } = useTranslation()
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const [notices, setNotices] = useState<
        Array<{
            id: string
            title: string
            url: string
            date: string
        }>
    >([])
    const [loadingNotices, setLoadingNotices] = useState(false)
    const [currentNoticeIndex, setCurrentNoticeIndex] = useState(0)
    const [noticePhase, setNoticePhase] = useState<'enter' | 'leave'>('enter')

    useEffect(() => {
        let cancelled = false
        const fetchNotices = async () => {
            try {
                setLoadingNotices(true)
                const res = await fetch('/api/notices')
                const data = await res.json().catch(() => null)
                if (!cancelled && data?.ok && Array.isArray(data.notices)) {
                    const mapped = data.notices.map((n: any) => ({
                        id: String(n.id),
                        title: String(n.title ?? ''),
                        url: String(n.url ?? '#'),
                        date: String(n.date ?? ''),
                    }))
                    setNotices(mapped)
                    setCurrentNoticeIndex(0)
                    setNoticePhase('enter')
                }
            } catch (err) {
                console.error('Failed to fetch notices for service page:', err)
            } finally {
                if (!cancelled) {
                    setLoadingNotices(false)
                }
            }
        }

        fetchNotices()
        return () => {
            cancelled = true
        }
    }, [])

    useEffect(() => {
        if (notices.length <= 1) return
        let intervalId: number | undefined
        let timeoutId: number | undefined
        intervalId = window.setInterval(() => {
            setNoticePhase('leave')
            timeoutId = window.setTimeout(() => {
                setCurrentNoticeIndex((prev) => (prev + 1) % notices.length)
                setNoticePhase('enter')
            }, 260)
        }, 9000)
        return () => {
            if (intervalId) window.clearInterval(intervalId)
            if (timeoutId) window.clearTimeout(timeoutId)
        }
    }, [notices.length])

    return (
        <div className="min-h-screen min-w-[375px] bg-white dark:bg-[#0c0d0e] text-[#17191c] dark:text-gray-50 flex overflow-x-auto transition-colors">
            <Sidebar mode="drawer" isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

            <div className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden">
                <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />

                <main className="pt-[65px] pb-8 bg-white dark:bg-[#0c0d0e]">
                    <div className="w-full h-full px-4 lg:px-6 pt-4 max-w-[1200px] mx-auto space-y-8">
                        <section className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#e5ebff] via-[#f7f7ff] to-[#ffffff] dark:from-[#101321] dark:via-[#111827] dark:to-[#020617] border border-[#d6ddff]/70 dark:border-gray-800">
                            <div className="relative z-[1] px-6 py-7 lg:px-10 lg:py-9 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                                <div className="space-y-3 max-w-[520px]">
                                    <div className="inline-flex items-center gap-2 rounded-full bg-white/80 dark:bg-black/40 border border-white/60 dark:border-white/10 px-3 py-1 shadow-sm shadow-black/5">
                                        <span className="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.35)]" />
                                        <span className="text-[11px] font-medium text-[#283046] dark:text-gray-100">
                                            {t('service.badge.online')}
                                        </span>
                                    </div>
                                    <h1 className="text-[26px] leading-tight lg:text-[30px] lg:leading-tight font-semibold text-[#17191c] dark:text-gray-50 tracking-tight">
                                        {t('service.hero.title')}<br />
                                        <span className="text-[#2563eb] dark:text-[#60a5fa]">
                                            {t('service.hero.subtitle')}
                                        </span>
                                    </h1>
                                    <p className="text-sm lg:text-[15px] text-[#4b5563] dark:text-gray-300 leading-relaxed">
                                        {t('service.subtitle')}
                                    </p>
                                    <div className="flex flex-wrap gap-2 lg:gap-3 pt-1">
                                        <button
                                            type="button"
                                            className="inline-flex items-center justify-center gap-2 px-4 h-10 rounded-lg border border-[#d5d7dc] dark:border-gray-700 text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-[#0c0d0e] hover:bg-[rgba(145,150,161,0.08)] active:bg-[rgba(23,25,28,0.26)] transition-colors"
                                        >
                                            <FiMessageCircle className="w-4 h-4" />
                                            <span>{t('service.actions.liveChat')}</span>
                                        </button>
                                        <button
                                            type="button"
                                            className="inline-flex items-center justify-center gap-2 px-3.5 h-10 rounded-lg border border-[#d5d7dc] dark:border-gray-700 text-sm font-medium text-gray-900 dark:text-white bg-white/90 dark:bg-[#050816] hover:bg-[rgba(145,150,161,0.08)] active:bg-[rgba(23,25,28,0.26)] transition-colors"
                                        >
                                            <FiMail className="w-4 h-4" />
                                            <span>{t('service.actions.email')}</span>
                                        </button>
                                    </div>
                                </div>

                                <div className="relative flex-1 min-w-[260px] max-w-[360px] lg:max-w-[95%] self-stretch lg:self-auto">
                                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),transparent_55%),radial-gradient(circle_at_bottom,_rgba(59,130,246,0.12),transparent_60%)] opacity-80 dark:opacity-70" />
                                    <div className="relative z-[1] h-full flex items-center justify-center">
                                        <div className="w-full max-w-[320px] rounded-2xl bg-[#020617]/90 dark:bg-black/80 border border-white/10 shadow-xl shadow-black/40 px-5 py-4">
                                            <p className="text-xs font-medium tracking-[0.18em] uppercase text-[#93c5fd] mb-2">
                                                {t('service.hero.card.badge')}
                                            </p>
                                            <p className="text-sm font-semibold text-white leading-snug">
                                                {t('service.hero.card.title')}
                                            </p>
                                            <p className="mt-1.5 text-[11px] text-gray-300 leading-relaxed">
                                                {t('service.hero.card.body')}
                                            </p>
                                            <div className="mt-3 grid grid-cols-3 gap-2 text-[11px]">
                                                <div className="rounded-xl bg-white/5 border border-white/10 px-2.5 py-1.5 flex flex-col gap-0.5 items-center">
                                                    <span className="text-gray-300">
                                                        {t('service.hero.card.stats.ideas')}
                                                    </span>
                                                    <span className="text-xs font-semibold text-white">
                                                        {t('service.hero.card.stats.within24h')}
                                                    </span>
                                                </div>
                                                <div className="rounded-xl bg-white/5 border border-white/10 px-2.5 py-1.5 flex flex-col gap-0.5 items-center">
                                                    <span className="text-gray-300">
                                                        {t('service.hero.card.stats.bug')}
                                                    </span>
                                                    <span className="text-xs font-semibold text-white">
                                                        {t('service.hero.card.stats.priority')}
                                                    </span>
                                                </div>
                                                <div className="rounded-xl bg-white/5 border border-white/10 px-2.5 py-1.5 flex flex-col gap-0.5 items-center">
                                                    <span className="text-gray-300">
                                                        {t('service.hero.card.stats.support')}
                                                    </span>
                                                    <span className="text-xs font-semibold text-white">
                                                        {t('service.hero.card.stats.oneOnOne')}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-[#3b82f6]/40 to-transparent pointer-events-none" />
                        </section>

                        <section className="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] px-4 lg:px-6 py-3 flex flex-col sm:flex-row sm:items-center gap-2 shadow-sm">
                            <div className="flex items-center gap-2 flex-shrink-0">
                                <div className="inline-flex h-6 items-center rounded-full bg-[#eff4ff] dark:bg-[#111827] px-2.5 text-[11px] font-semibold text-[#2563eb] dark:text-[#60a5fa]">
                                    {t('service.notice.label')}
                                </div>
                            </div>
                            <div className="flex-1 min-w-0 sm:px-3">
                                {loadingNotices ? (
                                    <div className="h-5 flex items-center text-[12px] text-[#9ca3af] dark:text-gray-500">
                                        {t('service.notice.loading')}
                                    </div>
                                ) : notices.length === 0 ? (
                                    <div className="h-5 flex items-center text-[12px] text-[#9ca3af] dark:text-gray-500">
                                        {t('service.notice.empty')}
                                    </div>
                                ) : (
                                    <div className="h-5 flex items-center overflow-hidden">
                                        {(() => {
                                            const n = notices[currentNoticeIndex] ?? notices[0]
                                            const isLatest = currentNoticeIndex === 0
                                            return (
                                                <Link
                                                    key={n.id}
                                                    href={n.url || '#'}
                                                    target={n.url ? '_blank' : undefined}
                                                    rel={n.url ? 'noopener noreferrer' : undefined}
                                                    className={`flex items-center gap-3 text-[13px] w-full truncate hover:text-[#111827] dark:hover:text-gray-50 transform transition-all duration-300 ease-out ${noticePhase === 'leave'
                                                        ? '-translate-y-2 opacity-0'
                                                        : 'translate-y-0 opacity-100'
                                                        } ${isLatest
                                                            ? 'text-[#111827] dark:text-gray-50 font-medium'
                                                            : 'text-[#4b5563] dark:text-gray-300'
                                                        }`}
                                                >
                                                    <span className="flex-shrink-0 text-[11px] text-[#9ca3af] dark:text-gray-500">
                                                        {formatDateTime(n.date)}
                                                    </span>
                                                    <span className="truncate">{n.title}</span>
                                                </Link>
                                            )
                                        })()}
                                    </div>
                                )}
                            </div>
                            <button
                                type="button"
                                className="inline-flex items-center gap-1 mt-1 sm:mt-0 text-[11px] font-medium text-[#4b5563] dark:text-gray-300 hover:text-[#111827] dark:hover:text-gray-50"
                            >
                                <span>{t('service.notice.more')}</span>
                                <FiArrowRight className="w-3.5 h-3.5" />
                            </button>
                        </section>

                        {/* Middle three boards */}
                        <section className="px-4 lg:px-8 py-10">
                            <div className="max-w-[960px] mx-auto">
                                <ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    {/* User board */}
                                    <li>
                                        <Link href="#" className="group block h-full bg-white dark:bg-[#0c0d0e] rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all border border-gray-200 dark:border-gray-800 cursor-pointer">
                                            <div className="h-[160px] sm:h-[170px] bg-[#6076a6] flex items-center justify-center">
                                                <div className="w-[120px] h-[96px] rounded-2xl bg-white/10 border border-white/20 shadow-inner shadow-black/30" />
                                            </div>
                                            <div className="px-5 pb-5 pt-4 text-center">
                                                <h3 className="text-lg font-semibold text-[#374151] dark:text-gray-50 mb-2">
                                                    {t('service.boards.user.title')}
                                                </h3>
                                                <p className="text-[13px] text-[#6b7280] dark:text-gray-300 leading-relaxed mb-4">
                                                    {t('service.boards.user.body')}
                                                </p>
                                                <span className="inline-flex items-center justify-center h-8 px-4 rounded-md text-[13px] font-medium text-[#2563eb] border border-[#2563eb]/70 group-hover:bg-[#2563eb] group-hover:text-white transition-colors">
                                                    {t('service.boards.cta')}
                                                    <FiArrowRight className="w-3.5 h-3.5 ml-1" />
                                                </span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Streamer board */}
                                    <li>
                                        <Link href="#" className="group block h-full bg-white dark:bg-[#0c0d0e] rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all border border-gray-200 dark:border-gray-800 cursor-pointer">
                                            <div className="h-[160px] sm:h-[170px] bg-[#6076a6] flex items-center justify-center">
                                                <div className="w-[126px] h-[104px] rounded-2xl bg-white/10 border border-white/20 shadow-inner shadow-black/30" />
                                            </div>
                                            <div className="px-5 pb-5 pt-4 text-center">
                                                <h3 className="text-lg font-semibold text-[#374151] dark:text-gray-50 mb-2">
                                                    {t('service.boards.streamer.title')}
                                                </h3>
                                                <p className="text-[13px] text-[#6b7280] dark:text-gray-300 leading-relaxed mb-4">
                                                    {t('service.boards.streamer.body')}
                                                </p>
                                                <span className="inline-flex items-center justify-center h-8 px-4 rounded-md text-[13px] font-medium text-[#2563eb] border border-[#2563eb]/70 group-hover:bg-[#2563eb] group-hover:text-white transition-colors">
                                                    {t('service.boards.cta')}
                                                    <FiArrowRight className="w-3.5 h-3.5 ml-1" />
                                                </span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Bug report */}
                                    <li>
                                        <Link href="#" className="group block h-full bg-white dark:bg-[#0c0d0e] rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all border border-gray-200 dark:border-gray-800 cursor-pointer">
                                            <div className="h-[160px] sm:h-[170px] bg-[#6076a6] flex items-center justify-center">
                                                <div className="w-[140px] h-[96px] rounded-2xl bg-white/10 border border-white/20 shadow-inner shadow-black/30" />
                                            </div>
                                            <div className="px-5 pb-5 pt-4 text-center">
                                                <h3 className="text-lg font-semibold text-[#374151] dark:text-gray-50 mb-2">
                                                    {t('service.boards.bug.title')}
                                                </h3>
                                                <p className="text-[13px] text-[#6b7280] dark:text-gray-300 leading-relaxed mb-4">
                                                    {t('service.boards.bug.body')}
                                                </p>
                                                <span className="inline-flex items-center justify-center h-8 px-4 rounded-md text-[13px] font-medium text-[#2563eb] border border-[#2563eb]/70 group-hover:bg-[#2563eb] group-hover:text-white transition-colors">
                                                    {t('service.boards.bugCta')}
                                                    <FiArrowRight className="w-3.5 h-3.5 ml-1" />
                                                </span>
                                            </div>
                                        </Link>
                                    </li>
                                </ul>
                            </div>
                        </section>

                        {/* Bottom support area */}
                        <section className="px-4 lg:px-8 py-7 shadow-sm">
                            <div className="max-w-[960px] mx-auto flex flex-col lg:flex-row gap-6 relative">
                                {/* Left two links */}
                                <div className="flex-1 space-y-4 lg:pr-[280px]">
                                    <div>
                                        <h2 className="text-xl font-semibold text-[#2563eb] dark:text-[#60a5fa] text-center lg:text-left mb-1">
                                            {t('service.support.title')}
                                        </h2>
                                        <p className="text-[13px] lg:text-sm text-[#4b4b4b] dark:text-gray-300 text-center lg:text-left">
                                            {t('service.support.subtitle')}
                                        </p>
                                    </div>

                                    <ul className="mt-5 space-y-3 lg:space-y-4">
                                        <li>
                                            <Link href="#" className="group relative block border border-gray-200 dark:border-gray-700 rounded-2xl px-5 py-4 hover:border-[#2563eb] dark:hover:border-[#60a5fa] transition-all cursor-pointer">
                                                <div className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-[#6076a6] flex items-center justify-center text-white text-lg font-bold shadow-md">
                                                    G
                                                </div>
                                                <div className="pl-16">
                                                    <strong className="block text-[15px] text-[#374151] dark:text-gray-50 mb-1">
                                                        {t('service.support.guide.title')}
                                                    </strong>
                                                    <p className="text-[13px] text-[#6b7280] dark:text-gray-300 leading-relaxed mb-2">
                                                        {t('service.support.guide.body')}
                                                    </p>
                                                    <span className="inline-flex items-center h-7 px-3 rounded-md text-[12px] font-medium text-[#555] border border-[#cdcdcd] group-hover:text-[#2563eb] group-hover:border-[#2563eb] transition-colors">
                                                        {t('service.support.cta')}
                                                        <FiArrowRight className="w-3.5 h-3.5 ml-1" />
                                                    </span>
                                                </div>
                                            </Link>
                                        </li>
                                        <li>
                                            <Link href="#" className="group relative block border border-gray-200 dark:border-gray-700 rounded-2xl px-5 py-4 hover:border-[#2563eb] dark:hover:border-[#60a5fa] transition-all cursor-pointer">
                                                <div className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-[#6076a6] flex items-center justify-center text-white text-lg font-bold shadow-md">
                                                    C
                                                </div>
                                                <div className="pl-16">
                                                    <strong className="block text-[15px] text-[#374151] dark:text-gray-50 mb-1">
                                                        {t('service.support.lab.title')}
                                                    </strong>
                                                    <p className="text-[13px] text-[#6b7280] dark:text-gray-300 leading-relaxed mb-2">
                                                        {t('service.support.lab.body')}
                                                    </p>
                                                    <span className="inline-flex items-center h-7 px-3 rounded-md text-[12px] font-medium text-[#555] border border-[#cdcdcd] group-hover:text-[#2563eb] group-hover:border-[#2563eb] transition-colors">
                                                        {t('service.support.labCta')}
                                                        <FiArrowRight className="w-3.5 h-3.5 ml-1" />
                                                    </span>
                                                </div>
                                            </Link>
                                        </li>
                                    </ul>
                                </div>

                                {/* Right small panel */}
                                <div className="w-full lg:w-[260px] lg:absolute lg:right-0 lg:top-1/2 lg:-translate-y-1/2">
                                    <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-[#ebecf8] dark:bg-[#111827] px-5 py-4 shadow-sm">
                                        <h3 className="text-[15px] font-semibold text-[#374151] dark:text-gray-50 mb-1">
                                            {t('service.support.center.title')}
                                        </h3>
                                        <p className="text-[13px] text-[#4b5563] dark:text-gray-300 leading-relaxed mb-3">
                                            {t('service.support.center.body')}
                                        </p>
                                        <button
                                            type="button"
                                            className="inline-flex items-center gap-1 text-[13px] font-semibold text-[#2563eb] dark:text-[#60a5fa]  mb-2"
                                        >
                                            <span>{t('service.support.center.link')}</span>
                                            <FiArrowRight className="w-3.5 h-3.5" />
                                        </button>
                                        <div className="mt-3 pt-3 border-t border-gray-300/70 dark:border-gray-700/70 text-[13px] space-y-1.5">
                                            <div className="text-[#374151] dark:text-gray-100 font-semibold tracking-wide">
                                                {t('service.support.center.onlineLabel')}
                                            </div>
                                            <div className="text-[12px] text-[#6b7280] dark:text-gray-300">
                                                {t('service.support.center.onlineDesc')}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </main>

                <Footer />
            </div>
        </div>
    )
}