import { Layout } from 'react-grid-layout';
import {
  Break,
  PunctualityMetrics,
  Department,
  Shift,
  ShiftAssignment,
} from './shift';

// ============================================================================
// Dashboard Layout Types
// ============================================================================

export interface DashboardLayout {
  layouts: Record<string, Layout[]>;
  widgetSettings: WidgetSettings;
}

export interface WidgetVisibility {
  profile: boolean;
  actions: boolean;
  sessions: boolean;
  upcoming: boolean;
  attendance: boolean;
  myShifts: boolean;
  swapRequests: boolean;
  replacements: boolean;
}

export interface WidgetSettings {
  profile: ProfileWidgetSettings;
  sessions: SessionsWidgetSettings;
  upcoming: UpcomingWidgetSettings;
  attendance: AttendanceWidgetSettings;
  pip: PipSettings;
  visibility: WidgetVisibility;
}

export interface ProfileWidgetSettings {
  showDepartments: boolean;
  showContactInfo: boolean;
}

export interface SessionsWidgetSettings {
  maxVisible: number;
  autoRefreshInterval: number; // in ms
}

export interface UpcomingWidgetSettings {
  timeRange: 6 | 8 | 12; // hours
  selectedDepartmentId: number | null; // null = all departments
}

export interface AttendanceWidgetSettings {
  showResolved: boolean;
  lateThresholdMinutes: number;
}

export interface PipSettings {
  enabled: boolean;
  globalPipEnabled: boolean; // Controls the Global PIP (shown on all pages)
  position: { x: number; y: number };
  collapsed: boolean;
  showSessions: boolean;
  showUpcoming: boolean;
  soundEnabled: boolean;
}

// ============================================================================
// Widget Data Types
// ============================================================================

// Profile Widget
export interface DashboardProfile {
  userId: number;
  userName: string;
  userInitials: string;
  userPhoto?: string | null;
  userEmail?: string;
  departments: Department[];
  roles: DashboardUserRole[];
  currentStatus: ClockStatus;
  linkedDevice?: LinkedDevice | null;
}

export interface LinkedDevice {
  deviceId: number;
  deviceName: string | null;
  deviceType: string;
  deviceModel: string | null;
  pairedAt: string | null;
  lastActiveAt: string | null;
}

export interface DashboardUserRole {
  roleId: number;
  roleName: string;
  roleColor: string;
}

export interface ClockStatus {
  status: 'clocked_in' | 'on_break' | 'off_duty';
  clockInTime?: string;
  shiftName?: string;
  shiftStartTime?: string;
  shiftEndTime?: string;
  currentBreakStart?: string;
  totalBreakMinutes: number;
  sessionId?: number;
}

// Active Sessions Widget
export interface ActiveSession {
  sessionId: number;
  userId: number;
  userName: string;
  userInitials: string;
  userPhoto?: string | null;
  shiftId?: number;
  shiftName?: string;
  shiftDate: string;
  shiftStartTime: string;
  shiftEndTime: string;
  shiftColor?: string;
  roleId?: number;
  roleName?: string;
  roleColor?: string;
  clockInTime: string;
  clockInMethod: 'mobile' | 'web' | 'manual';
  clockInLocationValid: boolean;
  isOnBreak: boolean;
  breakDuration: number;
  currentBreakStart?: string;
  departmentId: number;
  departmentName: string;
  status: 'working' | 'on_break';
  breaks: Break[];
  punctuality: PunctualityMetrics | null;
}

// Upcoming Shifts Widget
export interface UpcomingShift {
  shiftId: number;
  shiftName: string;
  shiftDate: string;
  shiftStartTime: string;
  shiftEndTime: string;
  shiftColor: string;
  departmentId: number;
  departmentName: string;
  minWorkers: number;
  maxWorkers: number;
  assignedCount: number;
  assignments: UpcomingShiftUser[];
  isUserAssigned: boolean;
  userAssignmentStatus?: 'assigned' | 'accepted' | 'declined';
}

export interface UpcomingShiftUser {
  userId: number;
  userName: string;
  userInitials: string;
  userPhoto?: string | null;
  isCurrentUser: boolean;
  status: 'assigned' | 'accepted' | 'declined' | 'completed';
}

// Action Items Widget
export interface ActionItem {
  id: string;
  type: 'shift_pending' | 'swap_request' | 'vacation_request' | 'sick_leave';
  title: string;
  description: string;
  createdAt: string;
  priority: 'low' | 'medium' | 'high';
  relatedShiftId?: number;
  relatedUserId?: number;
  actions: ActionItemAction[];
}

export interface ActionItemAction {
  label: string;
  action: 'accept' | 'decline' | 'review' | 'dismiss';
  variant: 'primary' | 'secondary' | 'danger';
}

// Attendance Alerts Widget
export interface AttendanceAlert {
  id: string;
  shiftId: number;
  shiftName: string;
  shiftStartTime: string;
  departmentId: number;
  departmentName: string;
  userId: number;
  userName: string;
  userInitials: string;
  userPhoto?: string | null;
  userPhone?: string;
  userEmail?: string;
  alertType: 'late' | 'very_late' | 'no_show';
  minutesLate: number;
  detectedAt: string;
  resolved: boolean;
  resolvedAt?: string;
  resolvedBy?: number;
  resolution?: 'arrived' | 'marked_absent' | 'excused';
}

// ============================================================================
// API Response Types
// ============================================================================

export interface DashboardOverviewResponse {
  profile: DashboardProfile;
  actionItemsCount: number;
  activeSessionsCount: number;
  upcomingShiftsCount: number;
  attendanceAlertsCount: number;
}

export interface DashboardLayoutResponse {
  layoutJson: string;
  widgetSettings: WidgetSettings | null;
}

// ============================================================================
// Component Props Types
// ============================================================================

export interface WidgetWrapperProps {
  title: string;
  icon?: React.ReactNode;
  headerActions?: React.ReactNode;
  loading?: boolean;
  error?: string | null;
  empty?: boolean;
  emptyMessage?: string;
  emptyIcon?: React.ReactNode;
  children: React.ReactNode;
  onRefresh?: () => void;
  refreshing?: boolean;
  badge?: number;
  badgeColor?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
}

export interface SessionDetailModalProps {
  open: boolean;
  onClose: () => void;
  session: ActiveSession | null;
  onClockOut?: (sessionId: number) => Promise<void>;
  onStartBreak?: (sessionId: number) => Promise<void>;
  onEndBreak?: (sessionId: number) => Promise<void>;
}

// ============================================================================
// Widget IDs for Grid Layout
// ============================================================================

export type WidgetId =
  | 'profile'
  | 'actions'
  | 'sessions'
  | 'upcoming'
  | 'attendance'
  | 'myShifts'
  | 'swapRequests'
  | 'replacements';

export const DEFAULT_LAYOUTS: Record<string, Layout[]> = {
  lg: [
    { i: 'profile', x: 0, y: 0, w: 3, h: 4, minW: 2, minH: 3 },
    { i: 'actions', x: 3, y: 0, w: 9, h: 4, minW: 4, minH: 3 },
    { i: 'myShifts', x: 0, y: 4, w: 6, h: 6, minW: 4, minH: 4 },
    { i: 'swapRequests', x: 6, y: 4, w: 3, h: 6, minW: 3, minH: 4 },
    { i: 'replacements', x: 9, y: 4, w: 3, h: 6, minW: 3, minH: 4 },
    { i: 'sessions', x: 0, y: 10, w: 12, h: 4, minW: 3, minH: 2 },
    { i: 'upcoming', x: 0, y: 14, w: 12, h: 5, minW: 6, minH: 3 },
    { i: 'attendance', x: 0, y: 19, w: 12, h: 4, minW: 6, minH: 3 },
  ],
  md: [
    { i: 'profile', x: 0, y: 0, w: 4, h: 4, minW: 2, minH: 3 },
    { i: 'actions', x: 4, y: 0, w: 6, h: 4, minW: 4, minH: 3 },
    { i: 'myShifts', x: 0, y: 4, w: 5, h: 6, minW: 4, minH: 4 },
    { i: 'swapRequests', x: 5, y: 4, w: 5, h: 6, minW: 3, minH: 4 },
    { i: 'replacements', x: 0, y: 10, w: 10, h: 5, minW: 5, minH: 4 },
    { i: 'sessions', x: 0, y: 15, w: 10, h: 4, minW: 3, minH: 2 },
    { i: 'upcoming', x: 0, y: 19, w: 10, h: 5, minW: 5, minH: 3 },
    { i: 'attendance', x: 0, y: 24, w: 10, h: 4, minW: 5, minH: 3 },
  ],
  sm: [
    { i: 'profile', x: 0, y: 0, w: 6, h: 4, minW: 4, minH: 3 },
    { i: 'actions', x: 0, y: 4, w: 6, h: 4, minW: 4, minH: 3 },
    { i: 'myShifts', x: 0, y: 8, w: 6, h: 6, minW: 4, minH: 4 },
    { i: 'swapRequests', x: 0, y: 14, w: 6, h: 5, minW: 4, minH: 4 },
    { i: 'replacements', x: 0, y: 19, w: 6, h: 5, minW: 4, minH: 4 },
    { i: 'sessions', x: 0, y: 24, w: 6, h: 4, minW: 3, minH: 2 },
    { i: 'upcoming', x: 0, y: 28, w: 6, h: 5, minW: 4, minH: 3 },
    { i: 'attendance', x: 0, y: 33, w: 6, h: 4, minW: 4, minH: 3 },
  ],
  xs: [
    { i: 'profile', x: 0, y: 0, w: 4, h: 4, minW: 2, minH: 3 },
    { i: 'actions', x: 0, y: 4, w: 4, h: 4, minW: 2, minH: 3 },
    { i: 'myShifts', x: 0, y: 8, w: 4, h: 6, minW: 2, minH: 4 },
    { i: 'swapRequests', x: 0, y: 14, w: 4, h: 5, minW: 2, minH: 4 },
    { i: 'replacements', x: 0, y: 19, w: 4, h: 5, minW: 2, minH: 4 },
    { i: 'sessions', x: 0, y: 24, w: 4, h: 4, minW: 2, minH: 2 },
    { i: 'upcoming', x: 0, y: 28, w: 4, h: 5, minW: 2, minH: 3 },
    { i: 'attendance', x: 0, y: 33, w: 4, h: 4, minW: 2, minH: 3 },
  ],
  xxs: [
    { i: 'profile', x: 0, y: 0, w: 2, h: 4, minW: 2, minH: 3 },
    { i: 'actions', x: 0, y: 4, w: 2, h: 4, minW: 2, minH: 3 },
    { i: 'myShifts', x: 0, y: 8, w: 2, h: 6, minW: 2, minH: 4 },
    { i: 'swapRequests', x: 0, y: 14, w: 2, h: 5, minW: 2, minH: 4 },
    { i: 'replacements', x: 0, y: 19, w: 2, h: 5, minW: 2, minH: 4 },
    { i: 'sessions', x: 0, y: 12, w: 1, h: 4, minW: 1, minH: 2 },
    { i: 'upcoming', x: 0, y: 28, w: 2, h: 5, minW: 2, minH: 3 },
    { i: 'attendance', x: 0, y: 33, w: 2, h: 4, minW: 2, minH: 3 },
  ],
};

export const DEFAULT_WIDGET_SETTINGS: WidgetSettings = {
  profile: {
    showDepartments: true,
    showContactInfo: false,
  },
  sessions: {
    maxVisible: 10,
    autoRefreshInterval: 30000,
  },
  upcoming: {
    timeRange: 6,
    selectedDepartmentId: null,
  },
  attendance: {
    showResolved: false,
    lateThresholdMinutes: 5,
  },
  pip: {
    enabled: true,
    globalPipEnabled: false, // Global PIP disabled by default
    position: { x: -1, y: -1 }, // -1 means default (bottom-right)
    collapsed: false,
    showSessions: true,
    showUpcoming: true,
    soundEnabled: true,
  },
  visibility: {
    profile: true,
    actions: true,
    sessions: true,
    upcoming: true,
    attendance: true,
    myShifts: true,
    swapRequests: true,
    replacements: true,
  },
};