import { useState } from 'react'
import { RepairStatusBar } from './repair-status-bar'
import { RepairQueuePanel } from './repair-queue-panel'
import { RepairDetailPanel } from './repair-detail-panel'
import { RepairIntakeForm } from './repair-intake-form'

interface RepairDeskViewProps {
  canEdit: boolean
}

export function RepairDeskView({ canEdit }: RepairDeskViewProps) {
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
  const [intakeMode, setIntakeMode] = useState(false)
  const [statusFilter, setStatusFilter] = useState<string[] | null>(null)
  const [activeFilterLabel, setActiveFilterLabel] = useState<string | null>(null)

  function handleFilterChange(statuses: string[] | null) {
    setStatusFilter(statuses)
    // Track which group label is active for the status bar highlight
    if (!statuses) {
      setActiveFilterLabel(null)
    } else {
      // Map statuses back to group label
      const groups: Record<string, string> = {
        new: 'New', in_transit: 'New', intake: 'New',
        diagnosing: 'Diagnosing', pending_approval: 'Diagnosing',
        approved: 'In Progress', in_progress: 'In Progress', pending_parts: 'In Progress',
        ready: 'Ready',
      }
      setActiveFilterLabel(groups[statuses[0]] ?? null)
    }
  }

  if (intakeMode) {
    return (
      <div className="flex flex-col h-full">
        <RepairIntakeForm
          onComplete={(ticketId) => {
            setIntakeMode(false)
            setSelectedTicketId(ticketId)
          }}
          onCancel={() => setIntakeMode(false)}
        />
      </div>
    )
  }

  return (
    <div className="flex flex-col h-full">
      <RepairStatusBar activeFilter={activeFilterLabel} onFilterChange={handleFilterChange} />
      <div className="flex flex-1 min-h-0">
        <div className="w-[35%] border-r border-border overflow-hidden">
          <RepairQueuePanel
            selectedTicketId={selectedTicketId}
            onSelectTicket={setSelectedTicketId}
            onNewIntake={() => setIntakeMode(true)}
            statusFilter={statusFilter}
          />
        </div>
        <div className="w-[65%] overflow-hidden">
          <RepairDetailPanel ticketId={selectedTicketId} canEdit={canEdit} />
        </div>
      </div>
    </div>
  )
}