"use client";

import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Store,
  Users,
  ClipboardList,
  UserPlus,
  Truck,
  ShieldCheck,
  Lock,
  ChevronLeft,
  WashingMachine,
  Sparkles,
  Zap,
  Clock,
  AlertTriangle,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { ROLE_LABELS } from "@/lib/constants";
import { getNavGroups } from "@/lib/config/navigation";
import { useAuthStore } from "@/lib/stores/auth-store";
import { Button } from "@/components/ui/button";
import { useSidebarStore } from "@/lib/stores/sidebar-store";
import { useOrderStore } from "@/lib/stores/order-store";
import { StatusBadge } from "@/components/shared";
import { Separator } from "@/components/ui/separator";
import { toast } from "sonner";



/** Hitung order yang butuh perhatian */
function useUrgentOrders() {
  const { orders } = useOrderStore();
  const today = new Date().toISOString().split("T")[0];

  // Express yang belum selesai (exclude terminal status)
  const expressPending = orders.filter(
    (o) =>
      o.items.some((i) => i.serviceId === "svc-4") &&
      o.status !== "selesai" &&
      o.status !== "diambil" &&
      o.status !== "ditolak"
  );

  // Order hari ini yang belum selesai (exclude terminal status)
  const todayPending = orders.filter(
    (o) =>
      o.createdAt.startsWith(today) &&
      o.status !== "selesai" &&
      o.status !== "diambil" &&
      o.status !== "ditolak"
  );

  return { expressPending, todayPending };
}

export function Sidebar() {
  const pathname = usePathname();
  const { user } = useAuthStore();
  const { isCollapsed, toggle } = useSidebarStore();
  const { expressPending, todayPending } = useUrgentOrders();

  const navGroups = getNavGroups(user?.role || "admin_laundry");
  const urgentCount = expressPending.length + todayPending.length;
  const [bannerDismissed, setBannerDismissed] = useState(false);
  const prevUrgentCount = useRef(urgentCount);

  useEffect(() => {
    if (urgentCount !== prevUrgentCount.current) {
      prevUrgentCount.current = urgentCount;
      if (urgentCount > 0) setBannerDismissed(false);
    }
  }, [urgentCount]);

  const showBanner = urgentCount > 0 && !bannerDismissed;
  const orderBase = user?.role === "owner" ? "/owner/order" : "/admin/order";
  const expressHref = `${orderBase}?filter=express`;
  const todayHref = `${orderBase}?filter=today`;

  return (
    <aside
      className={cn(
        "hidden lg:flex flex-col h-screen bg-sidebar border-r border-sidebar-border transition-all duration-300 sticky top-0",
        isCollapsed ? "w-16" : "w-64"
      )}
    >
      {/* Logo */}
      <div className={cn("flex items-center gap-2 px-4 h-16 border-b border-sidebar-border", isCollapsed && "justify-center px-0")}>
        <button
          onClick={isCollapsed ? toggle : undefined}
          className={cn(
            "flex items-center justify-center size-8 rounded-lg bg-primary text-primary-foreground shrink-0",
            isCollapsed && "cursor-pointer hover:opacity-80 transition-opacity"
          )}
        >
          <WashingMachine className="size-4" />
        </button>
        {!isCollapsed && (
          <span className="font-bold text-lg text-sidebar-foreground tracking-tight">
            CleanWash
          </span>
        )}
        {!isCollapsed && (
          <button
            onClick={toggle}
            className="ml-auto p-1 rounded-md hover:bg-sidebar-accent text-sidebar-foreground/60 hover:text-sidebar-foreground transition-colors"
          >
            <ChevronLeft className="size-4" />
          </button>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto scrollbar-thin py-4 px-2 space-y-6">
        {navGroups.map((group) => (
          <div key={group.title}>
            {!isCollapsed && (
              <p className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {group.title}
              </p>
            )}
            {isCollapsed && <Separator className="my-2" />}
            <div className="space-y-1">
              {group.items.map((item) => {
                const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
                const isLocked = item.locked;

                return (
                  <Link
                    key={item.label}
                    href={isLocked ? "#" : item.href}
                    onClick={(e) => {
                      if (isLocked) {
                        e.preventDefault();
                        toast("Coming Soon", {
                          description: "Fitur ini akan tersedia di versi PRO. Hubungi sales untuk upgrade.",
                        });
                      }
                    }}
                    className={cn(
                      "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                      isCollapsed && "justify-center px-0",
                      isActive && !isLocked
                        ? "bg-sidebar-accent text-sidebar-primary font-semibold"
                        : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
                      isLocked && "opacity-50 cursor-not-allowed"
                    )}
                    title={isCollapsed ? item.label : undefined}
                  >
                    {item.icon}
                    {!isCollapsed && (
                      <>
                        <span className="flex-1">{item.label}</span>
                        {isLocked && (
                          <StatusBadge variant="neutral" type="outline" icon={<Lock className="size-3" />} className="text-[10px]">
                            PRO
                          </StatusBadge>
                        )}
                      </>
                    )}
                  </Link>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* Urgent Banners */}
      {showBanner && (
        <div className="px-2 pb-2 space-y-2">
          {/* Close button */}
          {!isCollapsed && (
            <div className="flex items-center justify-between px-1">
              <p className="text-[10px] font-semibold uppercase tracking-wider d-text-muted">
                Perhatian
              </p>
              <Button
                variant="ghost"
                size="icon-xs"
                onClick={() => setBannerDismissed(true)}
              >
                <X className="size-3" />
              </Button>
            </div>
          )}

          {isCollapsed ? (
            <div className="flex justify-center">
              <Link href={expressHref}>
                <Button
                  variant="ghost"
                  size="icon"
                  title={`${expressPending.length} express, ${todayPending.length} hari ini — klik untuk lihat`}
                  className="d-bg-warning-soft"
                >
                  <div className="relative">
                    <AlertTriangle className="size-4 d-text-warning" />
                    <span className="absolute -top-1.5 -right-2.5 size-4 d-rounded-full d-bg-danger-solid d-text-on-solid text-[10px] font-bold flex items-center justify-center">
                      {urgentCount}
                    </span>
                  </div>
                </Button>
              </Link>
            </div>
          ) : (
            <>
              {expressPending.length > 0 && (
                <Link
                  href={expressHref}
                  className="flex items-start gap-3 p-3 d-rounded d-bg-warning-soft d-interactive-primary"
                >
                  <div className="d-icon-warning d-icon-sm shrink-0">
                    <Zap className="size-3.5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-semibold d-text-warning">
                      {expressPending.length} Express Pending
                    </p>
                    <p className="text-[11px] d-text-muted mt-0.5 truncate">
                      {expressPending.map((o) => o.customerName).join(", ")}
                    </p>
                  </div>
                </Link>
              )}

              {todayPending.length > 0 && (
                <Link
                  href={todayHref}
                  className="flex items-start gap-3 p-3 d-rounded d-bg-info-soft d-interactive-primary"
                >
                  <div className="d-icon-info d-icon-sm shrink-0">
                    <Clock className="size-3.5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-semibold d-text-info">
                      {todayPending.length} Order Hari Ini
                    </p>
                    <p className="text-[11px] d-text-muted mt-0.5">
                      Belum selesai diproses
                    </p>
                  </div>
                </Link>
              )}
            </>
          )}
        </div>
      )}

      {/* Bottom user info */}
      {user && (
        <div className="border-t border-sidebar-border p-3">
          <div
            className={cn(
              "flex items-center gap-3",
              isCollapsed && "justify-center"
            )}
          >
            <div className="size-8 d-rounded-full d-bg-primary-soft flex items-center justify-center font-semibold text-sm shrink-0">
              {user.name.charAt(0)}
            </div>
            {!isCollapsed && (
              <div className="flex-1 min-w-0">
                <p className="d-text-label truncate">
                  {user.name}
                </p>
                <p className="d-text-caption truncate">
                  {ROLE_LABELS[user.role] || user.role}
                </p>
              </div>
            )}
          </div>
        </div>
      )}
    </aside>
  );
}