import { useState } from "react";
import {
  BarChart3,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  CloudSun,
  Droplet,
  Filter,
  Gauge,
  Home,
  Lightbulb,
  MonitorDot,
  Settings,
  TabletSmartphone,
  Waves,
  Wind,
} from "lucide-react";

import logo from "../../assets/logo.png";
import type { AppPage } from "../../app/App";

type SidebarProps = {
  theme: "dark" | "light";
  activePage: AppPage;
  collapsed: boolean;
  onNavigate: (page: AppPage) => void;
  onToggleCollapsed: () => void;
};

const RADIUS = "rounded-[6px]";

const navigationItems: {
  label: string;
  page: AppPage;
  icon: React.ElementType;
}[] = [
    { label: "Painel Principal", page: "dashboard", icon: Home },
    { label: "Meteorologia", page: "meteo", icon: CloudSun },
    { label: "Gráficos Gerais", page: "maincharts", icon: BarChart3 },
    { label: "Sinótico", page: "synoptic" , icon: MonitorDot }

  ];

const climateItems = [
  { label: "Iluminação", icon: Lightbulb },
  { label: "Ventilação", icon: Wind },
  { label: "Gráficos", icon: BarChart3 },
];

const irrigationItems = [
  { label: "Regas", icon: Droplet },
  { label: "Filtros de Rega", icon: Filter },
  { label: "Consumos", icon: Gauge },
  { label: "Drenagem", icon: Waves },
  { label: "Gráficos", icon: BarChart3 },
];

const utilityItems: {
  label: string;
  page: AppPage;
  icon: React.ElementType;
}[] = [
    { label: "Consola (VNC)", page: "console", icon: TabletSmartphone },
    { label: "Configurações", page: "settings", icon: Settings },
  ];

export function Sidebar({
  theme,
  activePage,
  collapsed,
  onNavigate,
  onToggleCollapsed,
}: SidebarProps) {
  const isDark = theme === "dark";

  const [climateOpen, setClimateOpen] = useState(false);
  const [irrigationOpen, setIrrigationOpen] = useState(false);
  const [activeTreeItem, setActiveTreeItem] = useState<string | null>(null);

  const handleTreeClick = (key: string) => {
    setActiveTreeItem(key);

    if (key === "climate:Gráficos") {
      onNavigate("climateCharts");
    }
  };

  const handleTreeToggle = (section: "climate" | "irrigation") => {
    if (collapsed) {
      onToggleCollapsed();
    }

    if (section === "climate") {
      setClimateOpen((current) => !current);
      setIrrigationOpen(false);
      return;
    }

    setIrrigationOpen((current) => !current);
    setClimateOpen(false);
  };

  return (
    <aside
      className={
        isDark
          ? `${collapsed ? "w-20" : "w-[290px]"
          } flex h-full flex-col border-r border-[#263247] bg-[#0B1220] px-4 py-5 text-slate-100 transition-all duration-200`
          : `${collapsed ? "w-20" : "w-[290px]"
          } flex h-full flex-col border-r border-[#D7DEE8] bg-[#F3F6FA] px-4 py-5 text-[#0F172A] transition-all duration-200`
      }
    >
      <div
        className={
          collapsed
            ? "mb-10 flex items-center justify-center"
            : "mb-10 flex items-center gap-3 px-1"
        }
      >
        <div
          className={
            isDark
              ? `${RADIUS} flex h-12 w-12 shrink-0 items-center justify-center border border-[#2A3950] bg-[#111A2B] p-1.5`
              : `${RADIUS} flex h-12 w-12 shrink-0 items-center justify-center border border-[#CBD5E1] bg-white p-1.5`
          }
        >
          <img
            src={logo}
            alt="Litoral Central"
            className="h-full w-full object-contain"
          />
        </div>

        {!collapsed && (
          <div className="min-w-0 flex-1">
            <div
              className={
                isDark
                  ? "truncate text-[15px] font-extrabold tracking-[-0.02em] text-white"
                  : "truncate text-[15px] font-extrabold tracking-[-0.02em] text-[#0F172A]"
              }
            >
              Litoral Central
            </div>

            <div className="mt-1 whitespace-nowrap text-[10px] font-bold uppercase tracking-[0.18em] text-[#7D8EA8]">
              Operações agrícolas
            </div>
          </div>
        )}
      </div>

      <nav className="space-y-1.5">
        {navigationItems.map((item) => {
          const Icon = item.icon;
          const active = activePage === item.page && activeTreeItem === null;

          return (
            <button
              key={item.label}
              type="button"
              onClick={() => {
                setActiveTreeItem(null);
                onNavigate(item.page);
              }}
              title={collapsed ? item.label : undefined}
              className={navButtonClass(isDark, active, collapsed)}
            >
              {active && <ActiveIndicator isDark={isDark} />}
              <Icon className={navIconClass(isDark, active)} />
              {!collapsed && <span className="truncate">{item.label}</span>}
            </button>
          );
        })}

        <SectionLabel collapsed={collapsed} label="Operação" />

        <TreeSection
          theme={theme}
          collapsed={collapsed}
          label="Clima"
          icon={Wind}
          open={climateOpen}
          onToggle={() => handleTreeToggle("climate")}
          items={climateItems}
          sectionKey="climate"
          activeTreeItem={activeTreeItem}
          onItemClick={handleTreeClick}
        />

        <TreeSection
          theme={theme}
          collapsed={collapsed}
          label="Rega"
          icon={Droplet}
          open={irrigationOpen}
          onToggle={() => handleTreeToggle("irrigation")}
          items={irrigationItems}
          sectionKey="irrigation"
          activeTreeItem={activeTreeItem}
          onItemClick={handleTreeClick}
        />

        <SectionLabel collapsed={collapsed} label="Sistema" />

        {utilityItems.map((item) => {
          const Icon = item.icon;
          const active = activePage === item.page && activeTreeItem === null;

          return (
            <button
              key={item.label}
              type="button"
              onClick={() => {
                setActiveTreeItem(null);
                onNavigate(item.page);
              }}
              title={collapsed ? item.label : undefined}
              className={navButtonClass(isDark, active, collapsed)}
            >
              {active && <ActiveIndicator isDark={isDark} />}
              <Icon className={navIconClass(isDark, active)} />
              {!collapsed && <span className="truncate">{item.label}</span>}
            </button>
          );
        })}
      </nav>

      <button
        type="button"
        onClick={onToggleCollapsed}
        className={
          isDark
            ? `mt-auto flex items-center justify-center gap-2 ${RADIUS} border border-[#263247] bg-[#111A2B] px-4 py-3 text-[14px] font-semibold text-[#9BAAC1] transition hover:border-[#33445F] hover:bg-[#162033] hover:text-white`
            : `mt-auto flex items-center justify-center gap-2 ${RADIUS} border border-[#CBD5E1] bg-white px-4 py-3 text-[14px] font-semibold text-slate-600 transition hover:bg-[#EAF0F7] hover:text-[#0F172A]`
        }
      >
        {collapsed ? (
          <ChevronRight className="h-5 w-5" />
        ) : (
          <>
            <ChevronLeft className="h-5 w-5" />
            <span>Recolher menu</span>
          </>
        )}
      </button>
    </aside>
  );
}

function TreeSection({
  theme,
  collapsed,
  label,
  icon: Icon,
  open,
  onToggle,
  items,
  sectionKey,
  activeTreeItem,
  onItemClick,
}: {
  theme: "dark" | "light";
  collapsed: boolean;
  label: string;
  icon: React.ElementType;
  open: boolean;
  onToggle: () => void;
  items: { label: string; icon: React.ElementType }[];
  sectionKey: string;
  activeTreeItem: string | null;
  onItemClick: (key: string) => void;
}) {
  const isDark = theme === "dark";
  const hasActiveChild = items.some(
    (item) => activeTreeItem === `${sectionKey}:${item.label}`,
  );

  return (
    <div>
      <button
        type="button"
        onClick={onToggle}
        title={collapsed ? label : undefined}
        className={navButtonClass(isDark, hasActiveChild, collapsed)}
      >
        {hasActiveChild && <ActiveIndicator isDark={isDark} />}
        <Icon className={navIconClass(isDark, hasActiveChild)} />

        {!collapsed && (
          <>
            <span className="min-w-0 flex-1 truncate">{label}</span>

            <ChevronDown
              className={`h-4 w-4 shrink-0 text-[#6F819B] transition-transform duration-200 ${open ? "rotate-180" : ""
                }`}
            />
          </>
        )}
      </button>

      {!collapsed && open && (
        <div
          className={
            isDark
              ? "ml-[18px] mt-2 space-y-1 border-l border-[#263247] pl-3"
              : "ml-[18px] mt-2 space-y-1 border-l border-[#CBD5E1] pl-3"
          }
        >
          {items.map((item) => {
            const SubIcon = item.icon;
            const key = `${sectionKey}:${item.label}`;
            const active = activeTreeItem === key;

            return (
              <button
                key={item.label}
                type="button"
                onClick={() => onItemClick(key)}
                className={
                  active
                    ? isDark
                      ? "flex w-full items-center gap-2 rounded-[5px] border border-[#2C3D56] bg-[#131D2F] px-3 py-2.5 text-left text-[13px] font-bold text-white"
                      : "flex w-full items-center gap-2 rounded-[5px] border border-[#CBD5E1] bg-white px-3 py-2.5 text-left text-[13px] font-bold text-[#0F172A]"
                    : isDark
                      ? "flex w-full items-center gap-2 rounded-[5px] px-3 py-2.5 text-left text-[13px] font-semibold text-[#7D8EA8] transition hover:bg-[#111A2B] hover:text-slate-200"
                      : "flex w-full items-center gap-2 rounded-[5px] px-3 py-2.5 text-left text-[13px] font-semibold text-slate-500 transition hover:bg-white hover:text-[#0F172A]"
                }
              >
                <SubIcon
                  className={
                    active
                      ? isDark
                        ? "h-4 w-4 shrink-0 text-[#4FD1C5]"
                        : "h-4 w-4 shrink-0 text-[#0F766E]"
                      : "h-4 w-4 shrink-0"
                  }
                />

                <span className="truncate">{item.label}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function SectionLabel({
  collapsed,
  label,
}: {
  collapsed: boolean;
  label: string;
}) {
  if (collapsed) {
    return <div className="py-2" />;
  }

  return (
    <div className="pb-1 pt-5">
      <p className="px-4 text-[10px] font-black uppercase tracking-[0.2em] text-[#61738C]">
        {label}
      </p>
    </div>
  );
}

function ActiveIndicator({ isDark }: { isDark: boolean }) {
  return (
    <span
      className={
        isDark
          ? "absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-sm bg-[#4FD1C5]"
          : "absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-sm bg-[#0F766E]"
      }
    />
  );
}

function navButtonClass(isDark: boolean, active: boolean, collapsed: boolean) {
  const alignment = collapsed ? "justify-center px-0" : "px-4";

  if (active) {
    return isDark
      ? `relative flex w-full items-center gap-3 ${RADIUS} border border-[#2C3D56] bg-[#131D2F] ${alignment} py-3.5 text-left text-[14px] font-extrabold text-white`
      : `relative flex w-full items-center gap-3 ${RADIUS} border border-[#CBD5E1] bg-white ${alignment} py-3.5 text-left text-[14px] font-extrabold text-[#0F172A]`;
  }

  return isDark
    ? `relative flex w-full items-center gap-3 ${RADIUS} ${alignment} py-3.5 text-left text-[14px] font-semibold text-[#8EA0BA] transition hover:bg-[#111A2B] hover:text-white`
    : `relative flex w-full items-center gap-3 ${RADIUS} ${alignment} py-3.5 text-left text-[14px] font-semibold text-slate-600 transition hover:bg-white hover:text-[#0F172A]`;
}

function navIconClass(isDark: boolean, active: boolean) {
  if (active) {
    return isDark
      ? "h-5 w-5 shrink-0 text-[#4FD1C5]"
      : "h-5 w-5 shrink-0 text-[#0F766E]";
  }

  return isDark
    ? "h-5 w-5 shrink-0 text-[#6F819B]"
    : "h-5 w-5 shrink-0 text-slate-500";
}