"use client";

import SearchButton from "@/app/search";
import { t, type Locale } from "@/lib/i18n";
import type { Item } from "@/lib/items";
import { useState } from "react";

export default function ItemsResults({
  initialItems,
  initialError,
  locale,
}: {
  initialItems: Item[];
  initialError: string;
  locale: Locale;
}) {
  const [items, setItems] = useState(initialItems);
  const [error, setError] = useState(initialError);

  function handleResults(nextItems: Item[], nextError: string) {
    setItems(nextItems);
    setError(nextError);
  }

  return (
    <>
      <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>

      <div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-6 py-4">
          <h2 className="text-lg font-semibold text-slate-800">
            {t(locale, "articles.heading")}
          </h2>
          <div className="flex flex-wrap items-center gap-2">
            <input
              type="text"
              id="search-input"
              placeholder={t(locale, "articles.search")}
              className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
            />
            <SearchButton locale={locale} onResults={handleResults} />
          </div>
        </div>

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

        {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>
        )}

        {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>
    </>
  );
}