"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowRight, ArrowLeft, Store } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { useI18n, useT } from "@/i18n";
import { cn } from "@/lib/cn";

/**
 * The way in for a shop owner, from any sign-in screen.
 *
 * The root of the app is the back office's sign-in, so a store owner who is simply sent the site's
 * address would otherwise land on a screen for somebody else with no hint that theirs exists. These
 * links sit in the shared header, and drop whichever one points at the page already open: a
 * "Store sign in" button on the store sign-in page is a button that does nothing.
 *
 * Real links styled as buttons rather than a `<button>` around an `<a>`, which is invalid markup
 * and breaks middle-click and "open in new tab".
 */
export function StoreAccessLinks({ className }: { className?: string }) {
  const t = useT();
  const pathname = usePathname();

  const onStoreLogin = pathname.startsWith("/portal/login");
  const onStoreRegister = pathname.startsWith("/portal/register");
  const onPortal = onStoreLogin || onStoreRegister;

  return (
    <div className={cn("grid auto-cols-fr grid-flow-col gap-2 sm:flex sm:items-center sm:justify-end", className)}>
      {onPortal ? (
        <Link href="/" className={buttonVariants({ variant: "outline", size: "sm" })}>
          {t("portal.entry.backOffice")}
        </Link>
      ) : null}
      {!onStoreLogin ? (
        <Link
          href="/portal/login"
          className={buttonVariants({ variant: "outline", size: "sm" })}
        >
          <Store aria-hidden />
          {t("portal.entry.storeSignIn")}
        </Link>
      ) : null}
      {!onStoreRegister ? (
        <Link href="/portal/register" className={buttonVariants({ size: "sm" })}>
          {t("portal.entry.register")}
        </Link>
      ) : null}
    </div>
  );
}

/**
 * The same invitation as a card, for under the back office sign-in form — the one place a store
 * owner who landed on the wrong door is already looking.
 */
export function StoreOwnerCallout({ className }: { className?: string }) {
  const t = useT();
  const { dir } = useI18n();
  const Arrow = dir === "rtl" ? ArrowLeft : ArrowRight;

  return (
    <aside
      aria-label={t("portal.entry.promptTitle")}
      className={cn("rounded-xl border border-primary/15 bg-primary-soft/50 p-4", className)}
    >
      <div className="flex items-start gap-3">
        <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
          <Store className="h-4 w-4" aria-hidden />
        </span>
        <div className="min-w-0 space-y-3">
          <div className="space-y-1">
            <p className="text-sm font-semibold text-foreground">{t("portal.entry.promptTitle")}</p>
            <p className="text-xs leading-relaxed text-muted-foreground">{t("portal.entry.promptBody")}</p>
          </div>
          <div className="flex flex-col gap-2 sm:flex-row">
            <Link href="/portal/register" className={cn(buttonVariants({ size: "sm" }), "w-full sm:w-auto")}>
              {t("portal.entry.register")}
              <Arrow aria-hidden />
            </Link>
            <Link href="/portal/login" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "w-full sm:w-auto")}>
              {t("portal.entry.storeSignIn")}
            </Link>
          </div>
        </div>
      </div>
    </aside>
  );
}