import { NavLink, Outlet } from 'react-router'
import {
  LayoutDashboard,
  Wallet,
  Wrench,
  FileText,
  MessagesSquare,
  LogOut,
  Building2,
  Bell,
} from 'lucide-react'
import { useStore } from '../store/store'
import logo from '../assets/logo.png'

const navItems = [
  { to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true },
  { to: '/mietkonto', label: 'Mietkonto & Zahlungen', icon: Wallet },
  { to: '/schadensmeldungen', label: 'Schadensmeldungen', icon: Wrench },
  { to: '/dokumente', label: 'Dokumente', icon: FileText },
  { to: '/nachrichten', label: 'Nachrichten', icon: MessagesSquare },
]

export default function AppLayout() {
  const { role, dispatch, threads } = useStore()
  const unread = threads.filter((t) =>
    role === 'tenant' ? t.unreadByTenant : t.unreadByAdmin,
  ).length

  return (
    <div className="flex min-h-screen bg-slate-50">
      {/* Sidebar */}
      <aside className="hidden w-72 flex-col bg-[#0b3a44] text-white md:flex">
        <div className="flex items-center gap-3 px-6 py-6">
          <img src={logo} alt="Hocks Logo" className="h-11 w-11" />
          <div>
            <div className="text-lg font-bold leading-tight">Hocks Mieterportal</div>
            <div className="text-xs text-teal-200/80">mieterportal.hocks.eu</div>
          </div>
        </div>

        <div className="mx-6 mb-4 rounded-xl bg-white/10 p-3 text-sm">
          <div className="mb-1 text-xs uppercase tracking-wide text-teal-200/70">
            Angemeldet als
          </div>
          <div className="font-semibold">
            {role === 'tenant' ? 'Anna Berger (Mieterin)' : 'Hocks Verwaltung'}
          </div>
          <button
            onClick={() =>
              dispatch({ type: 'setRole', role: role === 'tenant' ? 'admin' : 'tenant' })
            }
            className="mt-2 w-full rounded-lg bg-teal-500/20 px-3 py-1.5 text-xs font-medium text-teal-100 transition hover:bg-teal-500/30"
          >
            {role === 'tenant'
              ? '→ Als Verwaltung anzeigen'
              : '→ Als Mieterin anzeigen'}
          </button>
        </div>

        <nav className="flex-1 space-y-1 px-4">
          {navItems.map(({ to, label, icon: Icon, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              className={({ isActive }) =>
                `flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-medium transition ${
                  isActive
                    ? 'bg-teal-500 text-white shadow'
                    : 'text-teal-100/80 hover:bg-white/10 hover:text-white'
                }`
              }
            >
              <Icon className="h-4.5 w-4.5" />
              <span className="flex-1">{label}</span>
              {label === 'Nachrichten' && unread > 0 && (
                <span className="rounded-full bg-red-500 px-2 py-0.5 text-[10px] font-bold">
                  {unread}
                </span>
              )}
            </NavLink>
          ))}
        </nav>

        <div className="border-t border-white/10 p-4">
          <div className="mb-2 flex items-center gap-2 px-2 text-xs text-teal-200/70">
            <Building2 className="h-3.5 w-3.5" />
            3 Häuser · 50 Wohnungen
          </div>
          <NavLink
            to="/login"
            className="flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-teal-100/80 transition hover:bg-white/10 hover:text-white"
          >
            <LogOut className="h-4 w-4" /> Abmelden
          </NavLink>
        </div>
      </aside>

      {/* Mobile top bar */}
      <div className="flex min-h-screen flex-1 flex-col">
        <header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur md:hidden">
          <img src={logo} alt="Hocks Logo" className="h-9 w-9" />
          <div className="flex-1 font-bold text-[#0b3a44]">Hocks Mieterportal</div>
          <button
            onClick={() =>
              dispatch({ type: 'setRole', role: role === 'tenant' ? 'admin' : 'tenant' })
            }
            className="rounded-lg bg-teal-50 px-2.5 py-1.5 text-xs font-semibold text-teal-700"
          >
            {role === 'tenant' ? 'Verwaltung' : 'Mieterin'}
          </button>
        </header>
        <nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 md:hidden">
          {navItems.map(({ to, label, icon: Icon, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              className={({ isActive }) =>
                `flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium ${
                  isActive ? 'bg-teal-600 text-white' : 'text-slate-600'
                }`
              }
            >
              <Icon className="h-3.5 w-3.5" />
              {label.split(' &')[0]}
            </NavLink>
          ))}
        </nav>

        <main className="flex-1 p-4 md:p-8">
          <Outlet />
        </main>
      </div>

      {/* Decorative fixed bell (placeholder for notifications) */}
      <div className="pointer-events-none fixed bottom-4 right-4 hidden opacity-0">
        <Bell />
      </div>
    </div>
  )
}