"use client";

import {
  Home,
  Sparkles,
  LayoutTemplate,
  LayoutDashboard,
  Shield,
  Smartphone,
  Moon,
  Sun,
  X,
} from "lucide-react";
import { useState } from "react";
import { ViewId, viewMeta } from "@/app/page";
import { useTheme } from "./ThemeProvider";

const iconMap = {
  Home,
  Sparkles,
  LayoutTemplate,
  LayoutDashboard,
  Shield,
  Smartphone,
};

export function ViewSwitcher({
  current,
  onChange,
}: {
  current: ViewId;
  onChange: (v: ViewId) => void;
}) {
  const [open, setOpen] = useState(false);
  const { theme, toggle } = useTheme();

  return (
    <>
      {/* Floating pill switcher - bottom center */}
      <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-2">
        {/* Theme toggle */}
        <button
          onClick={toggle}
          className="h-12 w-12 rounded-full bg-white dark:bg-slate-800 shadow-soft border border-slate-200 dark:border-slate-700 flex items-center justify-center hover:scale-105 transition-base"
          aria-label="تغییر تم"
          title={theme === "light" ? "حالت تاریک" : "حالت روشن"}
        >
          {theme === "light" ? (
            <Moon className="w-5 h-5 text-violet-600" />
          ) : (
            <Sun className="w-5 h-5 text-amber-400" />
          )}
        </button>

        {/* Compact switcher showing current + button to expand */}
        <div className="flex items-center gap-1 rounded-full bg-white dark:bg-slate-800 shadow-soft border border-slate-200 dark:border-slate-700 p-1.5">
          {viewMeta.map((v) => {
            const Icon = iconMap[v.icon as keyof typeof iconMap];
            const active = current === v.id;
            return (
              <button
                key={v.id}
                onClick={() => onChange(v.id)}
                className={`relative h-9 px-3 rounded-full flex items-center gap-2 text-sm font-medium transition-base ${
                  active
                    ? "bg-violet-600 text-white shadow-violet"
                    : "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
                }`}
                title={v.label}
              >
                <Icon className="w-4 h-4" />
                <span className="hidden md:inline whitespace-nowrap">{v.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
}