'use client'

import Link from 'next/link'
import type { LobsterWithStatus } from '@/hooks/useLobsters'

interface LobsterSidebarProps {
  lobsters: LobsterWithStatus[]
  activeLobsterId: string | null
  onSelect: (lobster: LobsterWithStatus) => void
  collapsed?: boolean
  onToggle?: () => void
}

export function LobsterSidebar({
  lobsters,
  activeLobsterId,
  onSelect,
  collapsed,
  onToggle,
}: LobsterSidebarProps) {
  return (
    <>
      {/* Mobile toggle button */}
      <button
        onClick={onToggle}
        className="absolute left-3 top-3 z-20 rounded-lg border border-slate-200 bg-white p-2 shadow-sm md:hidden"
        aria-label="Toggle sidebar"
      >
        <svg className="h-5 w-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      {/* Backdrop for mobile */}
      {!collapsed && (
        <div
          className="fixed inset-0 z-20 bg-black/20 md:hidden"
          onClick={onToggle}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`
          fixed inset-y-0 left-0 z-30 flex w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-200
          md:relative md:z-auto md:translate-x-0
          ${collapsed ? '-translate-x-full' : 'translate-x-0'}
        `}
      >
        <div className="border-b border-slate-200 px-4 py-3">
          <h2 className="text-sm font-semibold text-slate-900">Lobsters</h2>
        </div>

        <div className="flex-1 overflow-y-auto">
          {lobsters.length === 0 ? (
            <p className="px-4 py-6 text-center text-xs text-slate-400">
              No lobsters yet
            </p>
          ) : (
            <ul className="py-1">
              {lobsters.map((lobster) => (
                <li key={lobster.id}>
                  <button
                    onClick={() => onSelect(lobster)}
                    className={`flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors ${
                      lobster.id === activeLobsterId
                        ? 'bg-blue-50 text-blue-700'
                        : 'text-slate-700 hover:bg-slate-50'
                    }`}
                  >
                    <span
                      className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${
                        lobster.isOnline ? 'bg-green-400' : 'bg-slate-300'
                      }`}
                    />
                    <span className="truncate font-medium">{lobster.name}</span>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="border-t border-slate-200 px-4 py-3">
          <Link
            href="/lobsters"
            className="flex items-center gap-2 text-xs text-slate-500 hover:text-slate-700"
          >
            Manage Lobsters
            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </Link>
        </div>
      </aside>
    </>
  )
}
