'use client'

/**
 * 營運 (/operations) — Sprint 5 整合頁面
 * 整合: 部署管理 + 工單 + 成本分析 + 行動日誌 + 計費
 * 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 {
  BarChart3,
  ClipboardList,
  CreditCard,
  FileText,
  Rocket,
} from 'lucide-react'
import { AppLayout } from '@/components/layout'

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

  const links = [
    { id: 'deployments', label: t('deployments'), href: `/${params.locale}/deployments`, Icon: Rocket },
    { id: 'tickets', label: t('tickets'), href: `/${params.locale}/tickets`, Icon: ClipboardList },
    { id: 'cost', label: t('cost'), href: `/${params.locale}/cost`, Icon: BarChart3 },
    { id: 'actions', label: t('actions'), href: `/${params.locale}/action-logs`, Icon: FileText },
    { id: 'billing', label: t('billing'), href: `/${params.locale}/billing`, Icon: CreditCard },
  ]

  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="flex min-w-0 flex-wrap items-end justify-between gap-3">
            <div className="min-w-0">
              <h1 className="text-xl font-semibold tracking-normal text-[#141413]">
                {t('operationsOverview')}
              </h1>
            </div>
          </div>
          <div className="mt-5 grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-5">
            {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>
  )
}
