"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import PageTitle from "@/components/settings/PageTitle";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import Header from "@/components/main/Header";
import ShopListCard from "@/components/shops/ShopListCard";
import BoldIcon from "@/components/ui/BoldIcon";
import useAxios from "@/hooks/useAxios";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";

type MyShop = {
  _id: string;
  name: string;
  logo?: string | null;
  status: string;
  address?: string | null;
  has_physical_location?: boolean;
  productCount?: number;
  activeProductCount?: number;
  soldCount?: number;
};

export default function ShopSettingsPage() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const { request } = useAxios();
  const [myShops, setMyShops] = useState<MyShop[] | null>(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    request<{ shops: MyShop[] }>("GET", "/shops/mine")
      .then((res) => setMyShops(res?.shops || []))
      .catch(() => setMyShops([]));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const filteredShops = useMemo(() => {
    if (!myShops) return [];
    const query = search.trim();
    if (!query) return myShops;
    return myShops.filter((shop) => shop.name.includes(query));
  }, [myShops, search]);

  return (
    <>
      <Header />
      <LocalePageShell>
      <Container>
        <PageTitle>{t("shops.myShopsTitle")}</PageTitle>

        <div className="mx-auto w-full max-w-md">
          <div className="relative">
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder={t("shops.searchShopPlaceholder")}
              className="w-full rounded-full border border-neutral-200 bg-white py-2.5 pl-4 pr-10 text-sm outline-none dark:border-neutral-700 dark:bg-neutral-900"
            />
            <BoldIcon
              name="search-normal"
              size={18}
              tinted
              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
            />
          </div>

          <div className="mt-4 flex flex-col gap-3">
            {myShops === null ? (
              <p className="py-10 text-center text-sm text-neutral-500">
                {t("common.loading")}
              </p>
            ) : filteredShops.length === 0 ? (
              <p className="py-10 text-center text-sm text-neutral-500">
                {t("shops.noShopsYet")}
              </p>
            ) : (
              filteredShops.map((shop) => <ShopListCard key={shop._id} shop={shop} />)
            )}
          </div>

          <RoundedButton
            type="button"
            variant="primary"
            onClick={() => router.push("/shops/new/name")}
            className="mx-auto mt-6 flex h-11 w-full max-w-xs items-center justify-center gap-2"
          >
            <BoldIcon name="add" size={18} tinted className="text-white" />
            {t("shops.addShopNew")}
          </RoundedButton>
        </div>
      </Container>
      </LocalePageShell>
    </>
  );
}
