'use client'

import { usePanelStore } from '@/lib/stores/panel-store'
import {
  PanelLeftClose,
  PanelLeftOpen,
  PanelRightClose,
  PanelRightOpen,
  Download,
  Settings,
  Users,
} from 'lucide-react'
import type { StoryMaster, User } from '@prisma/client'

interface TopBarProps {
  story: StoryMaster
  collaborators: Pick<User, 'id' | 'displayName' | 'avatar'>[]
}

export function TopBar({ story, collaborators }: TopBarProps) {
  const {
    leftPanelOpen,
    rightPanelOpen,
    toggleLeftPanel,
    toggleRightPanel,
    openOverlay,
  } = usePanelStore()

  const formatLabel = story.format.replace(/_/g, ' ')

  return (
    <header className="flex items-center justify-between border-b border-border px-3 py-2 bg-background">
      {/* Left section */}
      <div className="flex items-center gap-3">
        <button
          onClick={toggleLeftPanel}
          className="p-1.5 rounded-md hover:bg-accent transition-colors"
          title={leftPanelOpen ? 'Hide scene panel' : 'Show scene panel'}
        >
          {leftPanelOpen ? (
            <PanelLeftClose className="h-4 w-4" />
          ) : (
            <PanelLeftOpen className="h-4 w-4" />
          )}
        </button>

        <div className="flex items-center gap-2">
          <h1 className="text-sm font-semibold">{story.title || 'Untitled'}</h1>
          <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
            {formatLabel}
          </span>
        </div>
      </div>

      {/* Right section */}
      <div className="flex items-center gap-2">
        {/* Collaborator avatars */}
        <div className="flex -space-x-1.5 mr-2">
          {collaborators.slice(0, 4).map((user) => (
            <div
              key={user.id}
              className="h-6 w-6 rounded-full bg-brand-500/20 border-2 border-background flex items-center justify-center"
              title={user.displayName ?? 'User'}
            >
              {user.avatar ? (
                <img
                  src={user.avatar}
                  alt=""
                  className="h-full w-full rounded-full"
                />
              ) : (
                <span className="text-[10px] font-medium text-brand-500">
                  {(user.displayName ?? '?')[0].toUpperCase()}
                </span>
              )}
            </div>
          ))}
          {collaborators.length > 4 && (
            <div className="h-6 w-6 rounded-full bg-muted border-2 border-background flex items-center justify-center">
              <span className="text-[10px] text-muted-foreground">
                +{collaborators.length - 4}
              </span>
            </div>
          )}
        </div>

        <button
          onClick={() => openOverlay('export')}
          className="p-1.5 rounded-md hover:bg-accent transition-colors"
          title="Export"
        >
          <Download className="h-4 w-4" />
        </button>

        <button
          onClick={() => openOverlay('team')}
          className="p-1.5 rounded-md hover:bg-accent transition-colors"
          title="Team"
        >
          <Users className="h-4 w-4" />
        </button>

        <button
          onClick={() => openOverlay('settings')}
          className="p-1.5 rounded-md hover:bg-accent transition-colors"
          title="Settings"
        >
          <Settings className="h-4 w-4" />
        </button>

        <button
          onClick={toggleRightPanel}
          className="p-1.5 rounded-md hover:bg-accent transition-colors"
          title={rightPanelOpen ? 'Hide panel' : 'Show panel'}
        >
          {rightPanelOpen ? (
            <PanelRightClose className="h-4 w-4" />
          ) : (
            <PanelRightOpen className="h-4 w-4" />
          )}
        </button>
      </div>
    </header>
  )
}