import { useLocation, useNavigate } from "react-router-dom";
import ChevronLeftIcon from "@/assets/home/chevron-left.svg?react";
import ChevronRightIcon from "@/assets/home/chevron-right.svg?react";

/** 리포트 라우트가 `report/:id`일 때 점/플로우에서 이동할 기본 경로 */
const DEFAULT_REPORT_NAV_PATH = "/report/demo";

type FlowStep = {
  id: string;
  label: string;
  /** 이전·다음·점 클릭 시 `navigate`에 넣을 경로 */
  navigatePath: string;
  isActive: (pathname: string) => boolean;
};

const PAGE_FLOW: FlowStep[] = [
  { id: "home", label: "홈", navigatePath: "/", isActive: (p) => p === "/" },
  {
    id: "report",
    label: "마케팅 분석",
    navigatePath: DEFAULT_REPORT_NAV_PATH,
    isActive: (p) => p === "/report" || p.startsWith("/report/"),
  },
  { id: "plan", label: "콘텐츠 기획", navigatePath: "/plan", isActive: (p) => p === "/plan" },
  { id: "studio", label: "콘텐츠 제작", navigatePath: "/studio", isActive: (p) => p === "/studio" },
  { id: "channels", label: "채널 연결", navigatePath: "/channels", isActive: (p) => p === "/channels" },
  {
    id: "distribute",
    label: "콘텐츠 배포",
    navigatePath: "/distribute",
    isActive: (p) => p === "/distribute",
  },
  {
    id: "performance",
    label: "성과 관리",
    navigatePath: "/performance",
    isActive: (p) => p === "/performance",
  },
];

function flowIndexForPathname(pathname: string): number {
  return PAGE_FLOW.findIndex((step) => step.isActive(pathname));
}

export function PageNavigator() {
  const location = useLocation();
  const navigate = useNavigate();

  const currentIndex = flowIndexForPathname(location.pathname);
  if (currentIndex === -1) return null;

  const prev = currentIndex > 0 ? PAGE_FLOW[currentIndex - 1] : null;
  const next = currentIndex < PAGE_FLOW.length - 1 ? PAGE_FLOW[currentIndex + 1] : null;

  return (
    <div
      data-no-print
      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 bg-white/90 backdrop-blur-xl border border-slate-200 rounded-full px-2 py-2 shadow-[0_4px_20px_rgba(0,0,0,0.08)]"
    >
      {/* 이전 페이지 */}
      <button
        type="button"
        onClick={() => prev && navigate(prev.navigatePath)}
        disabled={!prev}
        aria-label={prev ? `이전: ${prev.label}` : "이전 페이지 없음"}
        className="body-14-medium flex items-center gap-2 px-3 py-2 rounded-full text-neutral-70 transition-all hover:bg-neutral-20 hover:text-navy-900 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
      >
        <ChevronLeftIcon aria-hidden="true" />
        {prev && <span className="hidden sm:inline">{prev.label}</span>}
      </button>

      {/* 페이지 인디케이터 */}
      <div className="flex items-center gap-2 px-2">
        {PAGE_FLOW.map((page, i) => (
          <button
            key={page.id}
            type="button"
            onClick={() => navigate(page.navigatePath)}
            title={page.label}
            aria-label={page.label}
            className={`rounded-full transition-all cursor-pointer ${
              i === currentIndex
                ? "w-6 h-2 bg-navy-900"
                : "w-2 h-2 bg-neutral-40 hover:bg-neutral-60"
            }`}
          />
        ))}
      </div>

      {/* 다음 페이지 */}
      <button
        type="button"
        onClick={() => next && navigate(next.navigatePath)}
        disabled={!next}
        aria-label={next ? `다음: ${next.label}` : "다음 페이지 없음"}
        className="body-14-medium flex items-center gap-2 px-3 py-2 rounded-full text-neutral-70 transition-all hover:bg-neutral-20 hover:text-navy-900 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
      >
        {next && <span className="hidden sm:inline">{next.label}</span>}
        <ChevronRightIcon aria-hidden="true" />
      </button>
    </div>
  );
}