import type { ReactNode } from "react";
import { Music2 } from "lucide-react";
import { navigationDict } from "@/features/navigation/dict";

type NavLabel = Exclude<keyof typeof navigationDict, "ariaLabel">;

type NavIconProps = {
  className?: string;
};

export type NavItem = {
  href: string;
  label: NavLabel;
  icon: (props: NavIconProps) => ReactNode;
  bottomNavHidden?: boolean;
};

export function HomeIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z" />
    </svg>
  );
}

export function HabitsIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M7 4h10a2 2 0 0 1 2 2v14l-7-3.5L5 20V6a2 2 0 0 1 2-2Z" />
    </svg>
  );
}

export function GoalsIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <circle cx="12" cy="12" r="8" />
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M2 12h2M20 12h2" />
    </svg>
  );
}

export function TasksIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M9 11 11 13 15 9" />
      <rect x="4" y="4" width="16" height="16" rx="3" />
    </svg>
  );
}

export function SupportIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7A2.5 2.5 0 0 1 17.5 16H11l-4 4v-4H6.5A2.5 2.5 0 0 1 4 14.5v-8Z" />
    </svg>
  );
}

export function ReportsIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M4 19V5" />
      <path d="M4 19h16" />
      <path d="M8 17V11" />
      <path d="M12 17V7" />
      <path d="M16 17v-5" />
    </svg>
  );
}

export function AiIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M12 3l1.6 4.8L18 8.4l-4.4 1.6L12 15l-1.6-4.8L6 8.4l4.4-1.6L12 3z" />
    </svg>
  );
}

export function SubscriptionIcon({ className }: NavIconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 10h18" />
      <path d="M7 15h4" />
    </svg>
  );
}

export const navItems: NavItem[] = [
  {
    href: "/panel",
    label: "home",
    icon: HomeIcon,
  },
  {
    href: "/panel/tasks",
    label: "tasks",
    icon: TasksIcon,
  },
  {
    href: "/panel/habits",
    label: "habits",
    icon: HabitsIcon,
  },
  {
    href: "/panel/goals",
    label: "goals",
    icon: GoalsIcon,
  },
  {
    href: "/panel/audio",
    label: "audio",
    icon: Music2,
    bottomNavHidden: true,
  },
  {
    href: "/panel/ai",
    label: "ai",
    icon: AiIcon,
    bottomNavHidden: true,
  },
  {
    href: "/panel/subscription",
    label: "subscription",
    icon: SubscriptionIcon,
    bottomNavHidden: true,
  },
  {
    href: "/panel/support",
    label: "support",
    icon: SupportIcon,
    bottomNavHidden: true,
  },
  {
    href: "/panel/reports",
    label: "reports",
    icon: ReportsIcon,
    bottomNavHidden: true,
  },
];