"use client";

import { useState } from "react";
import { Hash, ChevronDown, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { getChannelsByCategory } from "@/lib/channels";
import { Channel } from "@/lib/types";

interface ChannelSidebarProps {
  activeChannelId: string;
  onChannelSelect: (channelId: string) => void;
  className?: string;
}

export function ChannelSidebar({
  activeChannelId,
  onChannelSelect,
  className,
}: ChannelSidebarProps) {
  const categories = getChannelsByCategory();
  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
    new Set()
  );

  const toggleCategory = (categoryName: string) => {
    setCollapsedCategories((prev) => {
      const next = new Set(prev);
      if (next.has(categoryName)) {
        next.delete(categoryName);
      } else {
        next.add(categoryName);
      }
      return next;
    });
  };

  return (
    <div
      className={cn("w-60 flex flex-col min-h-0", className)}
      style={{ backgroundColor: "#1a1d23" }}
    >
      {/* Server header */}
      <div
        className="h-12 flex items-center px-4 shadow-md cursor-pointer hover:brightness-110 transition-all shrink-0"
        style={{
          borderBottom: "1px solid rgba(0,0,0,0.3)",
        }}
      >
        <h1
          className="text-[15px] font-semibold truncate"
          style={{ color: "#ffffff" }}
        >
          LocalBosses AI
        </h1>
      </div>

      {/* Channel list */}
      <div className="flex-1 overflow-y-auto pt-4 pb-2 px-2 min-h-0">
        {categories.map((category) => {
          const isCollapsed = collapsedCategories.has(category.name);
          return (
            <div key={category.name} className="mb-4">
              {/* Category header */}
              <button
                onClick={() => toggleCategory(category.name)}
                className="flex items-center gap-0.5 px-1 mb-1 w-full text-left group"
              >
                {isCollapsed ? (
                  <ChevronRight
                    className="w-3 h-3 shrink-0"
                    style={{ color: "#96989d" }}
                  />
                ) : (
                  <ChevronDown
                    className="w-3 h-3 shrink-0"
                    style={{ color: "#96989d" }}
                  />
                )}
                <span
                  className="text-[11px] font-bold uppercase tracking-wider group-hover:text-white transition-colors"
                  style={{ color: "#96989d" }}
                >
                  {category.name}
                </span>
              </button>

              {/* Channels */}
              {!isCollapsed && (
                <div className="space-y-[2px]">
                  {category.channels.map((channel) => (
                    <ChannelItem
                      key={channel.id}
                      channel={channel}
                      isActive={activeChannelId === channel.id}
                      onClick={() => onChannelSelect(channel.id)}
                    />
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* User area */}
      <div
        className="h-[52px] flex items-center px-2 shrink-0"
        style={{
          backgroundColor: "rgba(0,0,0,0.2)",
        }}
      >
        <div className="flex items-center gap-2 px-1">
          <div className="relative">
            <div
              className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold"
              style={{ backgroundColor: "#ff6d5a", color: "#ffffff" }}
            >
              U
            </div>
            <div
              className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-2"
              style={{
                backgroundColor: "#3ba55c",
                borderColor: "#1a1d23",
              }}
            />
          </div>
          <div className="flex flex-col">
            <span
              className="text-sm font-medium leading-tight"
              style={{ color: "#ffffff" }}
            >
              User
            </span>
            <span className="text-[11px] leading-tight" style={{ color: "#3ba55c" }}>
              Online
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ChannelItem({
  channel,
  isActive,
  onClick,
}: {
  channel: Channel;
  isActive: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "w-full flex items-center gap-1.5 px-2 py-[6px] rounded-[4px] text-left transition-colors group"
      )}
      style={{
        backgroundColor: isActive ? "rgba(255,109,90,0.15)" : "transparent",
        color: isActive ? "#ff6d5a" : "#96989d",
      }}
      onMouseEnter={(e) => {
        if (!isActive) {
          e.currentTarget.style.backgroundColor = "rgba(255,109,90,0.08)";
          e.currentTarget.style.color = "#dcddde";
        }
      }}
      onMouseLeave={(e) => {
        if (!isActive) {
          e.currentTarget.style.backgroundColor = "transparent";
          e.currentTarget.style.color = "#96989d";
        }
      }}
    >
      <Hash
        className="w-5 h-5 shrink-0 opacity-70"
        style={{ color: isActive ? "#ff6d5a" : "#72767d" }}
      />
      <span className="text-[15px] leading-5 truncate font-medium">
        {channel.icon} {channel.name}
      </span>
    </button>
  );
}
