import {
  AlertCircle,
  Bell,
  BookOpen,
  Home,
  MessageSquare,
  Search,
  Settings,
  Users,
  Workflow,
} from 'lucide-react';
import { useState } from 'react';
import { NavLink, Outlet, useParams } from 'react-router-dom';

import { useCurrentWorkspace } from '@/hooks/workspace/useCurrentWorkspace';
import { cn } from '@/lib/utils';

// ---------------------------------------------------------------------------
// WorkspaceLayout
// ---------------------------------------------------------------------------

export function WorkspaceLayout() {
  const { workspaceName } = useParams<{ workspaceName: string }>();
  const { isLoading, error } = useCurrentWorkspace();

  if (isLoading) {
    return (
      <div className="flex items-center gap-2 p-8 text-[14px] text-muted-foreground">
        <span className="inline-block size-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
        Loading workspace…
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-8">
        <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-[14px] text-destructive">
          Failed to load workspace.
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full">
      <WorkspaceNav workspaceName={workspaceName ?? ''} />
      <div className="flex min-w-0 flex-1 flex-col pr-4 pb-2 pl-4 gap-1">
        <div className="h-12 shrink-0 rounded-xl bg-background shadow-sm flex items-center justify-end px-4 gap-1.5">
          <div className="relative">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
            <input
              type="text"
              placeholder="Search..."
              className="h-8 w-56 rounded-lg bg-muted pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
          </div>
          <button
            type="button"
            className="size-8 rounded-lg hover:bg-muted flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
          >
            <Users className="size-4" />
          </button>
          <button
            type="button"
            className="size-8 rounded-lg hover:bg-muted flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
          >
            <Bell className="size-4" />
          </button>
          <button
            type="button"
            className="size-8 rounded-lg hover:bg-muted flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
          >
            <Settings className="size-4" />
          </button>
        </div>
        <div className="flex flex-1 flex-col min-h-0 rounded-2xl bg-background shadow-[0_2px_16px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] overflow-hidden">
          <main className="flex-1 overflow-y-auto">
            <Outlet />
          </main>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// WorkspaceNav
// ---------------------------------------------------------------------------

function WorkspaceNav({ workspaceName }: { workspaceName: string }) {
  const base = `/${workspaceName}`;
  const [tab, setTab] = useState<'im' | 'work'>('work');

  return (
    <div className="flex h-full w-60 shrink-0 flex-col bg-sidebar">
      {/* Tab toggle */}
      <div className="flex shrink-0 gap-1 px-2 py-2">
        <button
          type="button"
          onClick={() => setTab('im')}
          className={cn(
            'flex flex-1 items-center justify-center gap-1.5 rounded-md py-1.5 text-[13px] font-medium transition-colors',
            tab === 'im'
              ? 'bg-sidebar-primary text-sidebar-primary-foreground'
              : 'text-sidebar-foreground/50 hover:text-sidebar-foreground',
          )}
        >
          <MessageSquare className="size-3.5" />
          IM
        </button>
        <button
          type="button"
          onClick={() => setTab('work')}
          className={cn(
            'flex flex-1 items-center justify-center gap-1.5 rounded-md py-1.5 text-[13px] font-medium transition-colors',
            tab === 'work'
              ? 'bg-sidebar-primary text-sidebar-primary-foreground'
              : 'text-sidebar-foreground/50 hover:text-sidebar-foreground',
          )}
        >
          <Workflow className="size-3.5" />
          Work
        </button>
      </div>

      {/* Navigation */}
      {tab === 'work' && (
        <nav className="flex-1 overflow-y-auto py-2 px-2">
          <span className="mb-1 block px-3 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/50">
            General
          </span>
          <NavEntry to={base} icon={Home} label="Overview" end />
          <NavEntry to={`${base}/repos`} icon={BookOpen} label="Repositories" />
          <NavEntry to={`${base}/issues`} icon={AlertCircle} label="Issues" />
          <NavEntry to={`${base}/members`} icon={Users} label="Members" />

          <span className="mb-1 mt-4 block px-3 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/50">
            Manage
          </span>
          <NavEntry to={`${base}/settings`} icon={Settings} label="Settings" />
        </nav>
      )}

      {tab === 'im' && (
        <div className="flex flex-1 items-center justify-center px-4">
          <p className="text-center text-[13px] text-sidebar-foreground/30">Coming soon</p>
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// NavEntry
// ---------------------------------------------------------------------------

function NavEntry({
  to,
  icon: Icon,
  label,
  end,
}: {
  to: string;
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  end?: boolean;
}) {
  return (
    <NavLink
      to={to}
      end={end}
      className={({ isActive }) =>
        cn(
          'flex items-center gap-2.5 rounded-md px-3 py-[6px] text-[13px] transition-colors',
          isActive
            ? 'bg-sidebar-primary text-sidebar-primary-foreground'
            : 'text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-foreground',
        )
      }
    >
      <Icon className="size-[18px] shrink-0" />
      <span className="truncate">{label}</span>
    </NavLink>
  );
}
