import { useNavigate } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import orionLogo from "@/assets/orion-logo.svg";
import { BrandscapeShell } from "@/components/BrandscapeShell";

type Content = Record<string, unknown>;

function str(c: unknown): string {
  return typeof c === "string" ? c : "";
}

function bool(c: unknown, fallback: boolean): boolean {
  if (typeof c === "boolean") return c;
  if (c === "false" || c === 0 || c === "0") return false;
  if (c === "true" || c === 1 || c === "1") return true;
  return fallback;
}

const defaultLabel = "Orion STEM Schools";
const defaultTitle = "Learning by Solving Real Problems";
const defaultSubtitle = "This year's theme: Water — Every Drop Counts";
const defaultBackLabel = "Back";
const defaultBackHref = "/grade/kg";

/** Prefer in-app history; otherwise go to the configured fallback route. */
function navigateBack(navigate: ReturnType<typeof useNavigate>, fallbackHref: string) {
  const idx = (window.history.state as { idx?: number } | null)?.idx;
  if (typeof idx === "number" && idx > 0) {
    navigate(-1);
    return;
  }
  if (window.history.length > 1 && document.referrer) {
    navigate(-1);
    return;
  }
  navigate(fallbackHref || defaultBackHref);
}

export function OrionSchoolHeaderBlock({ content }: { content?: Content }) {
  const navigate = useNavigate();
  const label = str(content?.label).trim() || defaultLabel;
  const title = str(content?.title).trim() || defaultTitle;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;
  const showBack = bool(content?.showBack, true);
  const backLabel = str(content?.backLabel).trim() || defaultBackLabel;
  const backHref = str(content?.backHref).trim() || defaultBackHref;

  return (
    <BrandscapeShell variant="narrow">
      {showBack ? (
        <div className="mb-2">
          <a
            href={backHref}
            onClick={(e) => {
              e.preventDefault();
              navigateBack(navigate, backHref);
            }}
            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground font-display text-sm transition-colors"
          >
            <ArrowLeft className="w-4 h-4" /> {backLabel}
          </a>
        </div>
      ) : null}
      <div className="flex items-center gap-4 pb-4 border-b-2 border-primary mb-5 relative after:absolute after:bottom-[-2px] after:left-0 after:w-20 after:h-0.5 after:bg-accent">
        <div className="w-[52px] h-[52px] rounded-xl bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center shrink-0">
          <img src={orionLogo} alt="Orion" className="w-8 h-8" />
        </div>
        <div>
          <p className="font-body font-bold text-[11px] tracking-[1.8px] uppercase text-primary">{label}</p>
          <h1 className="font-display text-[25px] font-normal text-primary leading-tight mt-0.5 mb-0.5">{title}</h1>
          <p className="text-[13.5px] text-muted-foreground">{subtitle}</p>
        </div>
      </div>
    </BrandscapeShell>
  );
}