'use client'

/**
 * 自動化 (/automation) — Sprint 5 整合頁面
 * 整合: 自動修復 + 神經指揮 + Drift 偵測
 * 2026-06-26 IA reset: 不再用頁面級分頁承載主導航，改為入口卡片。
 * 建立時間: 2026-04-08 (台北時區)
 * 更新時間: 2026-04-09 — 全部 Tab Panel 抽取完成
 */

import Link from 'next/link'
import type { Route as NextRoute } from 'next'
import { useTranslations } from 'next-intl'
import {
  Activity,
  GitBranch,
  Wrench,
} from 'lucide-react'
import { AppLayout } from '@/components/layout'

export default function AutomationPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('nav')

  const links = [
    { id: 'auto-repair', label: t('autoRepair'), href: `/${params.locale}/auto-repair`, Icon: Wrench },
    { id: 'neural-command', label: t('neuralCommand'), href: `/${params.locale}/neural-command`, Icon: Activity },
    { id: 'drift', label: t('drift'), href: `/${params.locale}/drift`, Icon: GitBranch },
  ]

  return (
    <AppLayout locale={params.locale}>
      <main className="min-h-[calc(100vh-116px)] max-w-full overflow-x-hidden bg-[#f5f4ed]">
        <section className="border border-[#e0ddd4] bg-white p-5">
          <div className="min-w-0">
            <h1 className="text-xl font-semibold tracking-normal text-[#141413]">
              {t('knowledgeAutomation')}
            </h1>
          </div>
          <div className="mt-5 grid min-w-0 gap-3 md:grid-cols-3">
            {links.map(({ id, label, href, Icon }) => (
              <Link
                key={id}
                href={href as NextRoute}
                className="group min-w-0 border border-[#e0ddd4] bg-[#faf9f3] p-4 text-[#141413] no-underline transition hover:border-[#d97757] hover:bg-[#fffaf7]"
              >
                <div className="flex items-center justify-between gap-3">
                  <span className="flex h-9 w-9 shrink-0 items-center justify-center border border-[#d8d3c7] bg-white text-[#5f5d57] group-hover:text-[#d97757]">
                    <Icon className="h-4 w-4" aria-hidden="true" />
                  </span>
                  <span className="min-w-0 text-right text-[11px] font-semibold text-[#87867f]">
                    {href.replace(`/${params.locale}`, '')}
                  </span>
                </div>
                <div className="mt-4 min-w-0 text-sm font-semibold leading-5">
                  {label}
                </div>
              </Link>
            ))}
          </div>
        </section>
      </main>
    </AppLayout>
  )
}
