'use client';

import { ReactNode, useState } from 'react';
import { Menu, X } from 'lucide-react';
import { UserSession } from '@/types';
import { logout } from '@/lib/clientAuth';
import { AAMovementHeader } from './AAMovementHeader';
import { SidebarNav } from './SidebarNav';

export function DashboardWorkspace({ user, activeView, children }: {
  user: UserSession; activeView: 'USERS' | 'REGISTERED_VOTERS' | 'BVAS_INFO' | 'BVAS_REPORT_1' | 'BVAS_REPORT_2' | 'BVAS_REPORT_3' | 'INCIDENTS'; children: ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [error, setError] = useState('');
  const signOut = async () => {
    try { await logout(); }
    catch (error) { setError(error instanceof Error ? error.message : 'Unable to sign out. Please try again.'); }
  };
  return <div className="dashboard-workspace flex min-h-screen bg-slate-50 font-sans text-sm text-slate-900">
    {mobileOpen && <button aria-label="Close sidebar" className="fixed inset-0 z-30 bg-slate-950/50 md:hidden" onClick={() => setMobileOpen(false)} />}
    <aside className={`fixed top-0 z-40 h-[100dvh] shrink-0 md:sticky ${mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
      <SidebarNav activeView={activeView} currentUser={user} onViewChange={() => {}} onLogout={() => void signOut()}
        isCollapsed={collapsed && !mobileOpen} onToggleCollapse={() => setCollapsed(!collapsed)}
        navigationHref={(view) => view === 'USERS' ? '/users' : user.role === 'PU_AGENT' ? '/agent' : `/dashboard?view=${view}`} />
    </aside>
    <div className="min-w-0 flex-1">
      <button className="m-3 flex min-h-11 items-center gap-2 rounded-lg border border-slate-300 px-3 md:hidden"
        aria-expanded={mobileOpen} onClick={() => setMobileOpen(!mobileOpen)}>
        {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}Menu
      </button>
      <AAMovementHeader currentUser={user} onLogout={() => void signOut()} unreadCount={0} />
      <main className="mx-auto max-w-6xl space-y-3 p-3 sm:p-4">
        {error && <p role="alert" className="rounded-lg bg-rose-50 p-3 text-rose-800">{error}</p>}
        {children}
      </main>
    </div>
  </div>;
}