import Link from "next/link";
import type { ReactNode } from "react";

/** Route-level skeleton — archive / list style pages. */
export function CtkpArchivePageLoading({
  eyebrow = "Đang mở sổ",
  title,
  subtitle,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
}) {
  return (
    <main
      className="mx-auto max-w-[1100px] px-4 py-16 sm:px-8 sm:py-20 lg:py-24"
      aria-busy="true"
      aria-live="polite"
    >
      <div className="mx-auto max-w-3xl text-center">
        <div className="ctkp-rule mx-auto mb-8 w-24 opacity-[0.35]" aria-hidden />
        <p className="ctkp-eyebrow tracking-[0.32em] opacity-90">{eyebrow}</p>
        <p className="font-ctkp-display mt-4 text-xl font-medium text-stone-400 motion-safe:animate-pulse sm:text-2xl">
          {title}
        </p>
        {subtitle ? <p className="mt-3 text-sm text-stone-600">{subtitle}</p> : null}
        <div className="ctkp-rule mx-auto mt-10 max-w-xs opacity-[0.35]" aria-hidden />
      </div>
      <div className="mx-auto mt-14 max-w-3xl space-y-4 sm:mt-16">
        <div className="h-36 rounded-2xl border border-amber-950/20 bg-stone-950/40 ctkp-skeleton-breathe" />
        <div className="h-36 rounded-2xl border border-amber-950/20 bg-stone-950/35 ctkp-skeleton-breathe" />
        <div className="hidden h-36 rounded-2xl border border-amber-950/20 bg-stone-950/30 ctkp-skeleton-breathe sm:block" />
      </div>
    </main>
  );
}

/** Single post / long-form content shell. */
export function CtkpArticlePageLoading({ title }: { title: string }) {
  return (
    <main
      className="mx-auto max-w-3xl px-4 py-16 sm:px-8 sm:py-20"
      aria-busy="true"
      aria-live="polite"
    >
      <div className="ctkp-rule mb-8 w-16 opacity-[0.35]" aria-hidden />
      <div className="h-4 w-40 rounded bg-stone-800/50 ctkp-skeleton-breathe" />
      <p className="font-ctkp-display mt-8 text-xl font-medium text-stone-400 motion-safe:animate-pulse sm:text-2xl">
        {title}
      </p>
      <div className="mt-10 space-y-3">
        <div className="h-3.5 w-full max-w-md rounded bg-stone-800/55 ctkp-skeleton-breathe" />
        <div className="h-3.5 w-full rounded bg-stone-800/45 ctkp-skeleton-breathe" />
        <div className="h-3.5 w-[88%] rounded bg-stone-800/40 ctkp-skeleton-breathe" />
      </div>
      <div className="mt-12 h-48 rounded-2xl border border-amber-950/20 bg-stone-950/35 ctkp-skeleton-breathe" />
      <div className="mt-6 space-y-2.5">
        <div className="h-3 w-full rounded bg-stone-800/35 ctkp-skeleton-breathe" />
        <div className="h-3 w-full rounded bg-stone-800/35 ctkp-skeleton-breathe" />
        <div className="h-3 w-[92%] rounded bg-stone-800/30 ctkp-skeleton-breathe" />
      </div>
    </main>
  );
}

/** Session restore / small surfaces (fortune & tử vi result). */
export function CtkpCompactLoading({
  title,
  subtitle,
  embedded,
}: {
  title: string;
  subtitle?: string;
  /** When true, render a `div` (use inside parent `<main>`). */
  embedded?: boolean;
}) {
  const inner = embedded ? (
    <>
      <div className="ctkp-rule mx-auto mb-8 w-16 opacity-[0.35]" aria-hidden />
      <p className="font-ctkp-serif text-lg text-stone-500 motion-safe:animate-pulse sm:text-xl">{title}</p>
      {subtitle ? <p className="mt-3 text-sm leading-relaxed text-stone-600">{subtitle}</p> : null}
      <div className="mx-auto mt-10 h-px max-w-[5.5rem] overflow-hidden bg-stone-800/80" aria-hidden>
        <div className="h-full w-2/5 bg-stone-600/50 ctkp-skeleton-breathe" />
      </div>
    </>
  ) : (
    <>
      <div className="ctkp-rule mx-auto mb-8 w-16 opacity-[0.4]" aria-hidden />
      <p className="font-ctkp-display text-lg text-stone-400 motion-safe:animate-pulse sm:text-xl">{title}</p>
      {subtitle ? <p className="mt-2 text-sm text-stone-600">{subtitle}</p> : null}
      <div
        className="mx-auto mt-10 h-1.5 max-w-[7rem] overflow-hidden rounded-full bg-stone-900/90"
        aria-hidden
      >
        <div className="h-full w-2/5 rounded-full bg-amber-900/45 ctkp-skeleton-breathe" />
      </div>
    </>
  );
  const cls = "mx-auto max-w-lg px-4 py-16 text-center sm:px-8 sm:py-20";
  if (embedded) {
    return (
      <div className={cls} aria-busy="true" aria-live="polite">
        {inner}
      </div>
    );
  }
  return (
    <main className={cls} aria-busy="true" aria-live="polite">
      {inner}
    </main>
  );
}

/** List-style loading (history, short pages). */
export function CtkpHistoryListLoading({ title }: { title: string }) {
  return (
    <div className="mt-12 space-y-4" aria-busy="true" aria-live="polite">
      <p className="text-center text-sm text-stone-500 motion-safe:animate-pulse sm:text-left">{title}</p>
      <div className="h-[5.5rem] rounded-xl border border-stone-800/60 bg-stone-950/50 ctkp-skeleton-breathe" />
      <div className="h-[5.5rem] rounded-xl border border-stone-800/55 bg-stone-950/45 ctkp-skeleton-breathe" />
      <div className="hidden h-[5.5rem] rounded-xl border border-stone-800/50 bg-stone-950/40 ctkp-skeleton-breathe sm:block" />
    </div>
  );
}

export function CtkpEmptyPanel({
  title,
  children,
  className = "",
}: {
  title?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      className={`rounded-xl border border-dashed border-stone-700/45 bg-[#0c0b0a]/50 px-8 py-14 text-center sm:px-10 sm:py-16 ${className}`}
    >
      {title ? (
        <p className="font-ctkp-display text-lg font-semibold tracking-tight text-stone-200 sm:text-xl">{title}</p>
      ) : null}
      <div className={`text-sm leading-relaxed text-stone-500 ${title ? "mt-4" : ""}`}>{children}</div>
    </div>
  );
}

export function CtkpUnavailableResult({
  title,
  body,
  primaryHref,
  primaryLabel,
  secondaryHref,
  secondaryLabel,
  embedded,
}: {
  title: string;
  body: ReactNode;
  primaryHref: string;
  primaryLabel: string;
  secondaryHref?: string;
  secondaryLabel?: string;
  embedded?: boolean;
}) {
  const primaryClass = embedded
    ? "inline-flex min-h-[2.5rem] items-center justify-center border border-stone-600/35 bg-transparent px-5 py-2.5 text-sm text-stone-400 transition-colors duration-200 ease-ctkp hover:border-stone-500/45 hover:text-stone-300"
    : "ctkp-btn-primary px-6 py-3";
  const secondaryClass = embedded
    ? "inline-flex min-h-[2.5rem] items-center justify-center px-4 text-sm text-stone-600 underline-offset-[5px] transition-colors hover:text-stone-500 hover:underline"
    : "inline-flex min-h-[2.75rem] items-center justify-center px-4 text-sm ctkp-text-link-muted";

  const panel = (
    <CtkpEmptyPanel title={title}>
      {body}
      <div className="mt-10 flex flex-col items-stretch gap-3 sm:flex-row sm:justify-center sm:gap-4">
        <Link href={primaryHref} className={primaryClass}>
          {primaryLabel}
        </Link>
        {secondaryHref && secondaryLabel ? (
          <Link href={secondaryHref} className={secondaryClass}>
            {secondaryLabel}
          </Link>
        ) : null}
      </div>
    </CtkpEmptyPanel>
  );
  const cls = "mx-auto max-w-lg px-4 py-16 sm:px-8 sm:py-20";
  if (embedded) {
    return <div className={cls}>{panel}</div>;
  }
  return <main className={cls}>{panel}</main>;
}