"use client";

import { ChevronLeft } from "lucide-react";
import type { TabConfig, TabId } from "@/lib/types/dashboard.types";

interface DashboardNavigationProps {
  tabs: TabConfig[];
  activeTab: TabId;
  isAr: boolean;
  sidebarCollapsed: boolean;
  organizationRole?: string | null;
  onTabChange: (tab: TabId) => void;
  onToggleSidebar: () => void;
  onUpgradeClick: () => void;
}

export function DashboardNavigation({
  tabs,
  activeTab,
  isAr,
  sidebarCollapsed,
  organizationRole,
  onTabChange,
  onToggleSidebar,
  onUpgradeClick,
}: DashboardNavigationProps) {
  return (
    <>
      {/* Sidebar Navigation */}
      <aside
        className={`hidden md:flex flex-col sticky top-[65px] h-[calc(100vh-65px)] ${sidebarCollapsed ? "w-20" : "w-64"} border-r border-slate-200/80 bg-white/50 backdrop-blur-sm transition-all duration-300`}
      >
        <button
          type="button"
          aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          onClick={onToggleSidebar}
          className={`absolute ${isAr ? "-left-3" : "-right-3"} top-6 flex h-6 w-6 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm hover:shadow-md transition-shadow z-10`}
        >
          <ChevronLeft
            className={`w-3 h-3 text-slate-400 transition-transform ${sidebarCollapsed ? (isAr ? "" : "rotate-180") : isAr ? "rotate-180" : ""}`}
          />
        </button>

        <nav className="flex-1 p-4 space-y-1">
          {tabs.map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => onTabChange(tab.id)}
                className={`flex items-center gap-3 w-full rounded-xl px-3 py-3 text-sm font-medium transition-all ${
                  isActive
                    ? "bg-gradient-to-r from-brand-green to-emerald-600 text-white shadow-lg shadow-brand-green/25"
                    : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                }`}
              >
                <span
                  className={`flex-shrink-0 ${isActive ? "text-white" : "text-slate-400"}`}
                >
                  {tab.icon}
                </span>
                {!sidebarCollapsed && <span>{tab.label}</span>}
              </button>
            );
          })}
        </nav>

        {!sidebarCollapsed && organizationRole !== "STAFF" && (
          <div className="p-4 border-t border-slate-200/80">
            <div className="rounded-xl bg-gradient-to-br from-brand-green/10 to-emerald-500/5 p-4">
              <p className="text-xs font-semibold text-brand-green">
                {isAr ? "ترقية خطتك" : "Upgrade Plan"}
              </p>
              <p className="mt-1 text-xs text-slate-600">
                {isAr ? "احصل على ميزات متقدمة" : "Get advanced features"}
              </p>
              <button
                onClick={onUpgradeClick}
                className="mt-3 w-full rounded-lg bg-brand-green px-3 py-2 text-xs font-semibold text-white hover:bg-brand-greenHover transition-colors"
              >
                {isAr ? "ترقية الآن" : "Upgrade Now"}
              </button>
            </div>
          </div>
        )}
      </aside>

      {/* Mobile Tab Bar */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t border-slate-200 bg-white/95 backdrop-blur-sm px-2 py-2 safe-area-pb">
        <div className="flex items-center justify-around gap-1">
          {tabs.slice(0, 5).map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => onTabChange(tab.id)}
                className={`flex flex-col items-center gap-1 rounded-lg px-3 py-2 transition-all ${
                  isActive
                    ? "bg-brand-green/10 text-brand-green"
                    : "text-slate-400"
                }`}
              >
                <span className="w-5 h-5">{tab.icon}</span>
                <span className="text-[10px] font-medium">{tab.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default DashboardNavigation;