import { useState } from 'react'
import { usePOSStore } from '@/stores/pos.store'
import { Button } from '@/components/ui/button'
import { CalendarDays, CalendarRange } from 'lucide-react'
import { LessonsTodayOverview } from './lessons-today-overview'
import { LessonsWeekView } from './lessons-week-view'

interface LessonsInstructorViewProps {
  canEdit: boolean
}

export function LessonsInstructorView({ canEdit }: LessonsInstructorViewProps) {
  const [subView, setSubView] = useState<'today' | 'week'>('today')
  const cashier = usePOSStore((s) => s.cashier)

  // TODO: Map cashier user ID to instructor ID
  // For now, the instructor view shows the same data as desk view
  // but filtered by the logged-in user's instructor record

  return (
    <div className="flex flex-col h-full">
      {/* Sub-view toggle */}
      <div className="flex items-center gap-1 px-3 py-2 border-b border-border shrink-0 bg-card/50">
        <Button
          variant={subView === 'today' ? 'default' : 'ghost'}
          size="sm"
          className="h-8 gap-1.5"
          onClick={() => setSubView('today')}
        >
          <CalendarDays className="h-3.5 w-3.5" />
          My Sessions
        </Button>
        <Button
          variant={subView === 'week' ? 'default' : 'ghost'}
          size="sm"
          className="h-8 gap-1.5"
          onClick={() => setSubView('week')}
        >
          <CalendarRange className="h-3.5 w-3.5" />
          Week
        </Button>
        {cashier && (
          <span className="text-xs text-muted-foreground ml-auto">
            {cashier.firstName} {cashier.lastName}
          </span>
        )}
      </div>

      {/* Content */}
      <div className="flex-1 min-h-0 overflow-hidden">
        {subView === 'today' && <LessonsTodayOverview canEdit={canEdit} />}
        {subView === 'week' && <LessonsWeekView canEdit={canEdit} />}
      </div>
    </div>
  )
}