import type { Assignment, AppointmentType, PlanningProject, WorkMode } from'@/lib/planning-types'
import { WORK_MODE_COLORS, STATUS_COLORS } from'@/lib/planning-config'

const WORK_MODE_ABBREV: Record<WorkMode, string> = {
 homeoffice:'HO',
 onsite:'VO',
 remote:'RE',
}

const WORK_MODE_EMOJI: Record<WorkMode, string> = {
 homeoffice:'🏠',
 onsite:'📍',
 remote:'💻',
}

interface Props {
 assignment: Assignment
 appointmentType: AppointmentType | undefined
 project: PlanningProject | undefined
 selectionMode: boolean
 selected: boolean
 overbooked?: boolean
 /** Show full project name — used for multi-day span cells that have more horizontal space */
 showFullLabel?: boolean
 /**'pending'|'error'|'conflict'— undefined or absent means synced */
 syncStatus?: string
 onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void
 onMouseLeave: () => void
 onClick: (e: React.MouseEvent<HTMLDivElement>) => void
 onContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void
 onDragStart: (e: React.DragEvent<HTMLDivElement>) => void
}

const SYNC_DOT_COLOR: Record<string, string> = {
 pending:'#D97706',
 error:'#DC2626',
 conflict:'#7C3AED',
}

export default function AssignmentCard({
 assignment, appointmentType, project,
 selectionMode, selected, overbooked, showFullLabel, syncStatus,
 onMouseEnter, onMouseLeave, onClick, onContextMenu, onDragStart,
}: Props) {
 const bgColor = appointmentType?.color ??'#E5E5E5'
 const cancelled = assignment.status ==='cancelled'
 const label = project
 ? (showFullLabel ? `${project.code} ${project.name}` : project.code)
 : (appointmentType?.code ?? appointmentType?.label?.slice(0, 8) ??'—')

 return (
 <div
 draggable={!selectionMode}
 className={[
'relative flex items-center rounded px-1 mb-px cursor-pointer overflow-hidden h-[20px]',
 selected ?'ring-2 ring-primary ring-offset-1':'',
 overbooked ?'ring-2 ring-destructive':'',
 ].join('')}
 style={{ backgroundColor: bgColor, opacity: cancelled ? 0.55 : 1 }}
 onMouseEnter={onMouseEnter}
 onMouseLeave={onMouseLeave}
 onClick={onClick}
 onContextMenu={onContextMenu}
 onDragStart={onDragStart}
 >
 {/* Selection checkbox */}
 {selectionMode && (
 <span
 className={[
'shrink-0 w-2.5 h-2.5 rounded border flex items-center justify-center mr-0.5',
 selected ?'bg-primary border-primary':'bg-card/80 border-white/60',
 ].join('')}
 >
 {selected && (
 <svg viewBox="0 0 10 8"className="w-1.5 h-1 fill-white">
 <path d="M1 4l2.5 2.5L9 1"stroke="white"strokeWidth="1.5"fill="none"strokeLinecap="round"/>
 </svg>
 )}
 </span>
 )}

 {/* Travel icon */}
 {!selectionMode && assignment.requires_travel && (
 <span className="text-[8px] leading-none mr-0.5 shrink-0"title="Dienstreise">✈</span>
 )}

 {/* Label: project code or appointment type code */}
 <span
 className={[
'text-[9px] font-semibold text-foreground truncate flex-1 leading-none',
 cancelled ?'line-through':'',
 ].join('')}
 >
 {label}
 </span>

 {/* Status + work mode + sync dots */}
 <span className="flex items-center gap-0.5 ml-1 shrink-0">
 <span
 className="w-1.5 h-1.5 rounded-full"
 style={{ backgroundColor: STATUS_COLORS[assignment.status] }}
 title={assignment.status}
 />
 {showFullLabel ? (
 <span className="text-[9px] leading-none"title={assignment.work_mode}>
 {WORK_MODE_EMOJI[assignment.work_mode]}
 </span>
 ) : (
 <span
 className="text-[6px] font-bold px-0.5 rounded leading-none text-white"
 style={{ backgroundColor: WORK_MODE_COLORS[assignment.work_mode] }}
 title={assignment.work_mode}
 >
 {WORK_MODE_ABBREV[assignment.work_mode]}
 </span>
 )}
 {syncStatus && SYNC_DOT_COLOR[syncStatus] && (
 <span
 className="w-1.5 h-1.5 rounded-full"
 style={{ backgroundColor: SYNC_DOT_COLOR[syncStatus] }}
 title={syncStatus ==='pending'?'Wird synchronisiert…': syncStatus ==='error'?'Sync-Fehler':'Konflikt'}
 />
 )}
 </span>
 </div>
 )
}