import LogoutButton from "@/app/logout-button";
import LanguageSwitcher from "@/app/language-switcher";
import { getItems } from "@/lib/items";
import { cookies } from "next/headers";
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";

export const dynamic = "force-dynamic";


export default async function ItemsPage() {
  const { items, error } = await getItems();
  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);

  return (
    <main className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
        <div className="mx-auto max-w-7xl px-6 py-12">
          <h1 className="text-4xl font-bold tracking-tight">
            {t(locale, "articles.title")}
          </h1>

          <p className="mt-3 max-w-2xl text-sky-100">
            {t(locale, "articles.description")}
          </p>
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <LogoutButton locale={locale} />
            <LanguageSwitcher locale={locale} label={t(locale, "language.label")} />
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-6 py-10">
        {/* KPI Card */}
        <div className="mb-6">
          <div className="inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
            <div>
              <p className="text-sm text-slate-500">{t(locale, "articles.count")}</p>
              <p className="mt-1 text-3xl font-bold text-cyan-700">
                {items.length}
              </p>
            </div>
          </div>
        </div>

        {/* Main Card */}
        <div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
          <div className="border-b border-slate-200 px-6 py-4">
            <h2 className="text-lg font-semibold text-slate-800">
              {t(locale, "articles.heading")}
            </h2>
          </div>

          {/* Error */}
          {error && (
            <div className="m-6 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
              {t(locale, "articles.error")}
            </div>
          )}

          {/* Table */}
          {items.length > 0 && (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-slate-100">
                    <th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
                      {t(locale, "articles.code")}
                    </th>
                    <th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
                      {t(locale, "articles.descriptionColumn")}
                    </th>
                  </tr>
                </thead>

                <tbody>
                  {items.map((item) => (
                    <tr
                      key={item.ItemCode}
                      className="border-t border-slate-100 transition-colors hover:bg-cyan-50"
                    >
                      <td className="px-6 py-4 font-mono text-sm font-medium text-cyan-700">
                        {item.ItemCode}
                      </td>

                      <td className="px-6 py-4 text-slate-700">
                        {item.ItemName}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Empty State */}
          {items.length === 0 && !error && (
            <div className="py-20 text-center">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
                📦
              </div>

              <h3 className="text-lg font-semibold text-slate-700">
                {t(locale, "articles.emptyTitle")}
              </h3>

              <p className="mt-2 text-slate-500">
                {t(locale, "articles.emptyDescription")}
              </p>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}