import Image from "next/image";
import { AccountLogoutButton } from "@/components/sections/account/account-logout-button";
import type { StorefrontAccountSession } from "@/types/storefront";

function AccountSidebarItem({
  active,
  iconSrc,
  label,
}: {
  active?: boolean;
  iconSrc: string;
  label: string;
}) {
  return (
    <div
      className={[
        "flex h-12 w-full items-center gap-3 rounded-[6px] px-6",
        active ? "bg-[#F5F5F5]" : "bg-transparent",
      ].join(" ")}
    >
      <Image alt="" src={iconSrc} width={20} height={20} className="size-5" />
      <span className="text-[16px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
        {label}
      </span>
    </div>
  );
}

function AccountDisplayField({
  label,
  value,
}: {
  label: string;
  value: string;
}) {
  return (
    <div className="space-y-3">
      <p className="text-[16px] font-bold leading-[1.2] tracking-[-0.02em] text-primary">
        {label}
        <span className="text-accent"> *</span>
      </p>
      <div className="flex h-[52px] items-center rounded-[6px] border border-black/10 bg-white px-5 text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
        {value}
      </div>
    </div>
  );
}

export function AccountPageShell({
  session,
}: {
  session: StorefrontAccountSession;
}) {
  const accountTypeLabel =
    session.accountType === "company" ? "Tvrtka" : "Fizička osoba";
  const displayName = [session.firstName, session.lastName]
    .filter(Boolean)
    .join(" ");
  const tertiaryValue = [
    session.phone,
    session.companyName,
    session.address1,
    [session.postcode, session.city].filter(Boolean).join(" "),
  ]
    .filter(Boolean)
    .join(" • ");

  return (
    <section className="pb-20 pt-[60px]">
      <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:gap-[60px]">
        <aside className="w-full max-w-[295px] shrink-0">
          <div className="overflow-hidden rounded-[6px]">
            <AccountSidebarItem
              active
              iconSrc="/figma/detonex/icon-user.svg"
              label="Profil i sigurnost"
            />
            <AccountSidebarItem
              iconSrc="/figma/detonex/icon-cart-small.svg"
              label="Tvoje narudžbe"
            />
          </div>
        </aside>

        <div className="w-full max-w-[500px] space-y-8">
          <h1 className="text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
            Profil i sigurnost
          </h1>

          <div className="space-y-6">
            <AccountDisplayField label="Email adresa" value={session.email} />
            <AccountDisplayField
              label="Ime i prezime"
              value={displayName || "Kupac"}
            />
            <AccountDisplayField
              label="Vrsta računa"
              value={accountTypeLabel}
            />

            <AccountLogoutButton
              label="Odjavi se"
              className="w-full rounded-[6px] border-0"
            />

            <div className="space-y-1 text-[14px] font-medium leading-[1.2] tracking-[-0.02em] text-primary/60">
              {tertiaryValue ? <p>{tertiaryValue}</p> : null}
              {session.oib ? <p>OIB: {session.oib}</p> : null}
              {session.companyAddress ? <p>{session.companyAddress}</p> : null}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}