"use client";

import Link from "next/link";
import { signOut } from "next-auth/react";
import { Languages, LogIn, LogOut, Moon, PackageCheck, ShoppingBag, ShoppingCart, Sun } from "lucide-react";
import type { ReactNode } from "react";
import { usePreferences } from "@/components/providers/app-providers";
import { useStore } from "./store-provider";

export function StoreChrome({ customerName, children }: { customerName?: string; children: ReactNode }) {
  const { dictionary: t, locale, theme, toggleLocale, toggleTheme } = usePreferences();
  const { count, href } = useStore();

  return (
    <div className="store-shell" dir={locale === "ar" ? "rtl" : "ltr"}>
      <header className="store-header">
        <Link className="store-brand" href={href()}>
          <span className="store-brand-mark"><ShoppingBag size={23} /></span>
          <span><strong>{t.store.brand}</strong><small>{t.store.tagline}</small></span>
        </Link>
        <nav className="store-nav" aria-label={t.store.navigation.home}>
          <Link href={href()}>{t.store.navigation.home}</Link>
          <Link href={`${href()}#products`}>{t.store.navigation.products}</Link>
          {customerName ? <Link href={href("/orders")}>{t.store.navigation.orders}</Link> : null}
        </nav>
        <div className="store-header-actions">
          <button className="store-icon-button" onClick={toggleLocale} type="button" aria-label={t.dashboard.header.language}>
            <Languages size={17} /><span>{locale === "ar" ? "EN" : "ع"}</span>
          </button>
          <button className="store-icon-button compact" onClick={toggleTheme} type="button" aria-label={t.dashboard.header.theme}>
            {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
          </button>
          <Link className="store-cart-link" href={href("/cart")} aria-label={t.store.navigation.cart}>
            <ShoppingCart size={19} /><span>{t.store.navigation.cart}</span>{count > 0 ? <b>{count}</b> : null}
          </Link>
          {customerName ? (
            <button className="store-account-button" onClick={() => signOut({ callbackUrl: href() })} type="button">
              <LogOut size={17} /><span>{t.store.navigation.logout}</span>
            </button>
          ) : (
            <Link className="store-account-button" href={href("/auth/login")}>
              <LogIn size={17} /><span>{t.store.navigation.login}</span>
            </Link>
          )}
        </div>
      </header>
      <main className="store-main">{children}</main>
      <footer className="store-footer">
        <span><PackageCheck size={18} />{t.store.footer}</span>
        <b>{t.store.brand}</b>
      </footer>
    </div>
  );
}