Implementing Drag Drop

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "DnD-Kit Configuration Schema",
  "description": "Configuration schema for dnd-kit drag-and-drop library",
  "type": "object",
  "properties": {
    "sensors": {
      "type": "array",
      "description": "Input sensors for detecting drag operations",
      "items": {
        "type": "object",
        "properties": {
          "sensor": {
            "type": "string",
            "enum": ["PointerSensor", "KeyboardSensor", "TouchSensor"],
            "description": "Type of sensor to use"
          },
          "options": {
            "type": "object",
            "properties": {
              "activationConstraint": {
                "type": "object",
                "properties": {
                  "distance": {
                    "type": "number",
                    "description": "Minimum distance in pixels to activate drag"
                  },
                  "delay": {
                    "type": "number",
                    "description": "Delay in milliseconds before drag activation"
                  },
                  "tolerance": {
                    "type": "number",
                    "description": "Movement tolerance during delay period"
                  }
                }
              },
              "coordinateGetter": {
                "type": "string",
                "description": "Function name for getting keyboard coordinates"
              },
              "scrollBehavior": {
                "type": "string",
                "enum": ["auto", "smooth"],
                "description": "Scrolling behavior during keyboard navigation"
              }
            }
          }
        },
        "required": ["sensor"]
      }
    },
    "modifiers": {
      "type": "array",
      "description": "Modifiers to constrain or modify drag behavior",
      "items": {
        "type": "object",
        "properties": {
          "modifier": {
            "type": "string",
            "enum": [
              "restrictToVerticalAxis",
              "restrictToHorizontalAxis",
              "restrictToWindowEdges",
              "restrictToParentElement",
              "restrictToFirstScrollableAncestor",
              "snapCenterToCursor"
            ],
            "description": "Type of modifier to apply"
          },
          "options": {
            "type": "object",
            "properties": {
              "gridSize": {
                "type": "number",
                "description": "Grid size for snapping (in pixels)"
              }
            }
          }
        },
        "required": ["modifier"]
      }
    },
    "animation": {
      "type": "object",
      "description": "Animation configuration",
      "properties": {
        "duration": {
          "type": "number",
          "description": "Animation duration in milliseconds",
          "minimum": 0
        },
        "easing": {
          "type": "string",
          "description": "CSS easing function",
          "examples": [
            "ease",
            "ease-in",
            "ease-out",
            "ease-in-out",
            "cubic-bezier(0.4, 0, 0.2, 1)"
          ]
        },
        "dragOverlay": {
          "type": ["object", "null"],
          "description": "Drag overlay animation settings",
          "properties": {
            "opacity": {
              "type": "number",
              "minimum": 0,
              "maximum": 1,
              "description": "Opacity of dragged element"
            },
            "scale": {
              "type": "number",
              "minimum": 0,
              "description": "Scale factor for dragged element"
            }
          }
        },
        "dropAnimation": {
          "type": ["object", "null"],
          "description": "Drop animation settings",
          "properties": {
            "duration": {
              "type": "number",
              "minimum": 0,
              "description": "Drop animation duration"
            },
            "easing": {
              "type": "string",
              "description": "Drop animation easing"
            },
            "keyframes": {
              "type": "array",
              "description": "Animation keyframes",
              "items": {
                "type": "object"
              }
            }
          }
        },
        "layoutAnimation": {
          "type": ["object", "null"],
          "description": "Layout shift animation settings",
          "properties": {
            "duration": {
              "type": "number",
              "minimum": 0
            },
            "easing": {
              "type": "string"
            }
          }
        }
      }
    },
    "collision": {
      "type": "object",
      "description": "Collision detection strategy",
      "properties": {
        "name": {
          "type": "string",
          "enum": [
            "closestCenter",
            "closestCorners",
            "rectIntersection",
            "pointerWithin"
          ],
          "description": "Collision detection algorithm"
        },
        "description": {
          "type": "string",
          "description": "Description of the collision strategy"
        }
      },
      "required": ["name"]
    },
    "sorting": {
      "type": "object",
      "description": "Sorting strategy for sortable items",
      "properties": {
        "name": {
          "type": "string",
          "enum": [
            "verticalListSortingStrategy",
            "horizontalListSortingStrategy",
            "rectSortingStrategy"
          ],
          "description": "Sorting strategy name"
        },
        "description": {
          "type": "string",
          "description": "Description of the sorting strategy"
        },
        "direction": {
          "type": "string",
          "enum": ["vertical", "horizontal", "both"],
          "description": "Direction of sorting"
        }
      },
      "required": ["name", "direction"]
    },
    "accessibility": {
      "type": "object",
      "description": "Accessibility configuration",
      "properties": {
        "announcements": {
          "type": ["object", "null"],
          "description": "Screen reader announcements",
          "properties": {
            "onDragStart": {
              "type": "string",
              "description": "Template for drag start announcement"
            },
            "onDragOver": {
              "type": "string",
              "description": "Template for drag over announcement"
            },
            "onDragEnd": {
              "type": "string",
              "description": "Template for drag end announcement"
            },
            "onDragCancel": {
              "type": "string",
              "description": "Template for drag cancel announcement"
            }
          }
        },
        "liveRegion": {
          "type": "boolean",
          "description": "Enable live region for announcements",
          "default": true
        },
        "screenReaderInstructions": {
          "type": "boolean",
          "description": "Include screen reader instructions",
          "default": true
        },
        "ariaDescribedBy": {
          "type": "string",
          "description": "ID of element containing instructions"
        },
        "ariaAttributes": {
          "type": "object",
          "description": "Additional ARIA attributes",
          "additionalProperties": {
            "type": "string"
          }
        }
      }
    },
    "autoScroll": {
      "type": ["object", "null"],
      "description": "Auto-scroll configuration",
      "properties": {
        "enabled": {
          "type": "boolean",
          "description": "Enable auto-scrolling",
          "default": true
        },
        "threshold": {
          "type": "object",
          "description": "Distance from edge to trigger scrolling (0-1)",
          "properties": {
            "x": {
              "type": "number",
              "minimum": 0,
              "maximum": 1
            },
            "y": {
              "type": "number",
              "minimum": 0,
              "maximum": 1
            }
          }
        },
        "maxSpeed": {
          "type": "number",
          "description": "Maximum scroll speed in pixels per frame",
          "minimum": 0
        },
        "acceleration": {
          "type": "number",
          "description": "Scroll acceleration factor",
          "minimum": 0
        },
        "interval": {
          "type": "number",
          "description": "Scroll interval in milliseconds",
          "minimum": 0
        },
        "canScroll": {
          "type": "boolean",
          "description": "Whether scrolling is allowed"
        }
      }
    }
  },
  "required": ["sensors", "collision", "sorting"],
  "examples": [
    {
      "sensors": [
        {
          "sensor": "PointerSensor",
          "options": {
            "activationConstraint": {
              "distance": 10
            }
          }
        },
        {
          "sensor": "KeyboardSensor",
          "options": {
            "coordinateGetter": "sortableKeyboardCoordinates"
          }
        }
      ],
      "modifiers": [
        {
          "modifier": "restrictToWindowEdges"
        }
      ],
      "animation": {
        "duration": 200,
        "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
        "dragOverlay": {
          "opacity": 0.5,
          "scale": 1.05
        }
      },
      "collision": {
        "name": "closestCenter",
        "description": "Drop on the element whose center is closest to the pointer"
      },
      "sorting": {
        "name": "verticalListSortingStrategy",
        "description": "For vertical lists",
        "direction": "vertical"
      },
      "accessibility": {
        "announcements": {
          "onDragStart": "Picked up draggable item ${id}",
          "onDragEnd": "Dropped draggable item ${id}"
        },
        "liveRegion": true,
        "screenReaderInstructions": true,
        "ariaDescribedBy": "dnd-instructions"
      },
      "autoScroll": {
        "enabled": true,
        "threshold": {
          "x": 0.2,
          "y": 0.2
        },
        "maxSpeed": 10,
        "acceleration": 10,
        "interval": 10
      }
    }
  ]
}

/**
 * TypeScript Types for Drag-and-Drop State Management
 */

import type { Active, Over, DragStartEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';

// Basic drag state
export interface DragState {
  isDragging: boolean;
  draggedItem: DraggableItem | null;
  draggedFrom: string | null;
  draggedOver: string | null;
  initialPosition: Position | null;
  currentPosition: Position | null;
}

// Position coordinates
export interface Position {
  x: number;
  y: number;
}

// Draggable item interface
export interface DraggableItem {
  id: string;
  content: React.ReactNode;
  order?: number;
  parentId?: string;
  type?: string;
  data?: Record<string, any>;
}

// Container interface for multi-container drag-drop
export interface DroppableContainer {
  id: string;
  title: string;
  items: DraggableItem[];
  acceptTypes?: string[];
  maxItems?: number;
  disabled?: boolean;
}

// Event handlers
export interface DragEventHandlers {
  onDragStart?: (event: DragStartEvent) => void;
  onDragMove?: (event: DragOverEvent) => void;
  onDragOver?: (event: DragOverEvent) => void;
  onDragEnd?: (event: DragEndEvent) => void;
  onDragCancel?: (event: DragCancelEvent) => void;
}

// Sensor configuration
export interface SensorConfig {
  pointer?: {
    enabled: boolean;
    activationConstraint?: {
      distance?: number;
      delay?: number;
      tolerance?: number;
    };
  };
  keyboard?: {
    enabled: boolean;
    coordinateGetter?: string;
    scrollBehavior?: 'auto' | 'smooth';
  };
  touch?: {
    enabled: boolean;
    activationConstraint?: {
      delay?: number;
      tolerance?: number;
    };
  };
}

// Animation configuration
export interface AnimationConfig {
  duration?: number;
  easing?: string;
  dragOverlay?: {
    opacity?: number;
    scale?: number;
  };
  dropAnimation?: {
    duration?: number;
    easing?: string;
    keyframes?: Keyframe[];
  };
}

// Collision detection strategies
export type CollisionDetectionStrategy =
  | 'closestCenter'
  | 'closestCorners'
  | 'rectIntersection'
  | 'pointerWithin'
  | ((args: any) => any);

// Sorting strategies
export type SortingStrategy =
  | 'vertical'
  | 'horizontal'
  | 'grid'
  | 'rect';

// Accessibility configuration
export interface AccessibilityConfig {
  announcements?: {
    onDragStart?: (id: string) => string;
    onDragOver?: (activeId: string, overId?: string) => string;
    onDragEnd?: (activeId: string, overId?: string) => string;
    onDragCancel?: (id: string) => string;
  };
  screenReaderInstructions?: string;
  ariaDescribedBy?: string;
  liveRegion?: boolean;
}

// Auto-scroll configuration
export interface AutoScrollConfig {
  enabled?: boolean;
  threshold?: {
    x?: number;
    y?: number;
  };
  maxSpeed?: number;
  acceleration?: number;
  interval?: number;
  canScroll?: (element: Element) => boolean;
}

// Complete dnd-kit configuration
export interface DndKitConfig {
  sensors?: SensorConfig;
  collisionDetection?: CollisionDetectionStrategy;
  sortingStrategy?: SortingStrategy;
  animation?: AnimationConfig;
  accessibility?: AccessibilityConfig;
  autoScroll?: AutoScrollConfig;
  modifiers?: Array<(args: any) => any>;
}

// Kanban-specific types
export namespace Kanban {
  export interface Task {
    id: string;
    title: string;
    description?: string;
    columnId: string;
    order: number;
    priority?: 'low' | 'medium' | 'high' | 'urgent';
    assignee?: string;
    tags?: string[];
    dueDate?: Date;
    createdAt: Date;
    updatedAt: Date;
  }

  export interface Column {
    id: string;
    title: string;
    order: number;
    wipLimit?: number;
    collapsed?: boolean;
    color?: string;
  }

  export interface Board {
    id: string;
    name: string;
    columns: Column[];
    tasks: Task[];
  }

  export interface Swimlane {
    id: string;
    title: string;
    order: number;
    collapsed?: boolean;
  }
}

// File upload types
export namespace FileUpload {
  export interface FileWithMeta extends File {
    id: string;
    preview?: string;
    progress: number;
    status: 'pending' | 'uploading' | 'success' | 'error';
    error?: string;
  }

  export interface DropzoneConfig {
    accept?: Record<string, string[]>;
    maxSize?: number;
    minSize?: number;
    maxFiles?: number;
    multiple?: boolean;
    disabled?: boolean;
    validator?: (file: File) => boolean | Promise<boolean>;
  }

  export interface UploadProgress {
    loaded: number;
    total: number;
    percentage: number;
  }
}

// Grid layout types
export namespace Grid {
  export interface GridItem {
    id: string;
    x: number;
    y: number;
    width: number;
    height: number;
    minWidth?: number;
    maxWidth?: number;
    minHeight?: number;
    maxHeight?: number;
    isDraggable?: boolean;
    isResizable?: boolean;
    static?: boolean;
  }

  export interface GridLayout {
    columns: number;
    rowHeight: number;
    width: number;
    margin?: [number, number];
    containerPadding?: [number, number];
    isDragging?: boolean;
    isResizing?: boolean;
  }
}

// History/Undo types
export interface HistoryState<T> {
  past: T[];
  present: T;
  future: T[];
}

export interface UndoableAction<T> {
  type: string;
  payload: T;
  timestamp: number;
  undo: () => void;
  redo: () => void;
}

// Multi-user sync types
export namespace Sync {
  export interface UserCursor {
    userId: string;
    userName: string;
    color: string;
    position: Position;
    draggedItem?: DraggableItem;
  }

  export interface SyncMessage {
    type: 'DRAG_START' | 'DRAG_MOVE' | 'DRAG_END' | 'STATE_UPDATE';
    userId: string;
    timestamp: number;
    data: any;
  }

  export interface CollaborationState {
    users: Map<string, UserCursor>;
    localUserId: string;
    isConnected: boolean;
  }
}

// Utility types
export type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
  Pick<T, Exclude<keyof T, Keys>> &
  {
    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
  }[Keys];

// Hook return types
export interface UseDragDropReturn {
  isDragging: boolean;
  activeId: string | null;
  overId: string | null;
  handleDragStart: (event: DragStartEvent) => void;
  handleDragOver: (event: DragOverEvent) => void;
  handleDragEnd: (event: DragEndEvent) => void;
  handleDragCancel: (event: DragCancelEvent) => void;
}

export interface UseDroppableReturn {
  isOver: boolean;
  setNodeRef: (element: HTMLElement | null) => void;
  active: Active | null;
  over: Over | null;
}

export interface UseDraggableReturn {
  attributes: Record<string, any>;
  listeners: Record<string, any>;
  setNodeRef: (element: HTMLElement | null) => void;
  transform: { x: number; y: number; scaleX: number; scaleY: number } | null;
  isDragging: boolean;
}

// Re-export commonly used dnd-kit types
export type {
  Active,
  Over,
  DragStartEvent,
  DragEndEvent,
  DragOverEvent,
  DragCancelEvent,
} from '@dnd-kit/core';

import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

// File type with additional metadata
interface FileWithMeta extends File {
  id: string;
  preview?: string;
  progress: number;
  status: 'pending' | 'uploading' | 'success' | 'error';
  error?: string;
}

// File Dropzone Component
export function FileDropzone() {
  const [files, setFiles] = useState<FileWithMeta[]>([]);

  // Handle file drop
  const onDrop = useCallback((acceptedFiles: File[], rejectedFiles: any[]) => {
    // Process accepted files
    const newFiles: FileWithMeta[] = acceptedFiles.map((file) => ({
      ...file,
      id: `${file.name}-${Date.now()}`,
      preview: file.type.startsWith('image/')
        ? URL.createObjectURL(file)
        : undefined,
      progress: 0,
      status: 'pending' as const,
    } as FileWithMeta));

    setFiles((prev) => [...prev, ...newFiles]);

    // Handle rejected files
    if (rejectedFiles.length > 0) {
      const errors = rejectedFiles.map((rejection) => {
        const errors = rejection.errors.map((e: any) => e.message).join(', ');
        return `${rejection.file.name}: ${errors}`;
      });
      alert(`Some files were rejected:\n${errors.join('\n')}`);
    }

    // Start upload simulation
    newFiles.forEach((file) => {
      simulateUpload(file);
    });
  }, []);

  // Configure dropzone
  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
    open,
  } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
      'application/pdf': ['.pdf'],
      'text/*': ['.txt', '.md', '.csv'],
      'application/vnd.openxmlformats-officedocument.*': ['.docx', '.xlsx'],
    },
    maxSize: 10 * 1024 * 1024, // 10MB
    maxFiles: 10,
    multiple: true,
  });

  // Simulate file upload with progress
  const simulateUpload = (file: FileWithMeta) => {
    // Update status to uploading
    updateFileStatus(file.id, 'uploading');

    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 30;

      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);

        // Randomly succeed or fail (90% success rate)
        if (Math.random() > 0.1) {
          updateFileStatus(file.id, 'success');
        } else {
          updateFileStatus(file.id, 'error', 'Upload failed');
        }
      }

      updateFileProgress(file.id, Math.min(progress, 100));
    }, 500);
  };

  // Update file status
  const updateFileStatus = (
    id: string,
    status: FileWithMeta['status'],
    error?: string
  ) => {
    setFiles((prev) =>
      prev.map((file) =>
        file.id === id ? { ...file, status, error } : file
      )
    );
  };

  // Update file progress
  const updateFileProgress = (id: string, progress: number) => {
    setFiles((prev) =>
      prev.map((file) =>
        file.id === id ? { ...file, progress } : file
      )
    );
  };

  // Remove file
  const removeFile = (id: string) => {
    setFiles((prev) => {
      const file = prev.find((f) => f.id === id);
      if (file?.preview) {
        URL.revokeObjectURL(file.preview);
      }
      return prev.filter((f) => f.id !== id);
    });
  };

  // Retry failed upload
  const retryUpload = (file: FileWithMeta) => {
    updateFileStatus(file.id, 'pending');
    updateFileProgress(file.id, 0);
    simulateUpload(file);
  };

  // Clear all files
  const clearAll = () => {
    files.forEach((file) => {
      if (file.preview) {
        URL.revokeObjectURL(file.preview);
      }
    });
    setFiles([]);
  };

  return (
    <div className="dropzone-container">
      <h2>File Upload</h2>

      {/* Dropzone Area */}
      <div
        {...getRootProps()}
        className={`dropzone ${isDragActive ? 'drag-active' : ''} ${
          isDragAccept ? 'drag-accept' : ''
        } ${isDragReject ? 'drag-reject' : ''}`}
      >
        <input {...getInputProps()} />

        <div className="dropzone-content">
          {isDragActive ? (
            <>
              {isDragAccept && (
                <div className="drop-message accept">
                  <span className="drop-icon">📥</span>
                  <p>Drop files here to upload</p>
                </div>
              )}
              {isDragReject && (
                <div className="drop-message reject">
                  <span className="drop-icon">🚫</span>
                  <p>Some files are not accepted</p>
                </div>
              )}
            </>
          ) : (
            <div className="default-message">
              <span className="upload-icon">☁️</span>
              <h3>Drag & drop files here</h3>
              <p className="help-text">or click to browse</p>

              <div className="file-info">
                <span>Accepted: Images, PDFs, Documents</span>
                <span>Max size: 10MB per file</span>
                <span>Max files: 10</span>
              </div>

              <button
                type="button"
                onClick={open}
                className="browse-btn"
              >
                Browse Files
              </button>
            </div>
          )}
        </div>
      </div>

      {/* File List */}
      {files.length > 0 && (
        <div className="file-list">
          <div className="file-list-header">
            <h3>Files ({files.length})</h3>
            <button onClick={clearAll} className="clear-btn">
              Clear All
            </button>
          </div>

          {files.map((file) => (
            <FileItem
              key={file.id}
              file={file}
              onRemove={() => removeFile(file.id)}
              onRetry={() => retryUpload(file)}
            />
          ))}
        </div>
      )}

      {/* Upload Summary */}
      {files.length > 0 && (
        <UploadSummary files={files} />
      )}
    </div>
  );
}

// Individual File Item
function FileItem({
  file,
  onRemove,
  onRetry,
}: {
  file: FileWithMeta;
  onRemove: () => void;
  onRetry: () => void;
}) {
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  };

  const getFileIcon = (type: string) => {
    if (type.startsWith('image/')) return '🖼️';
    if (type === 'application/pdf') return '📄';
    if (type.startsWith('text/')) return '📝';
    return '📎';
  };

  return (
    <div className={`file-item status-${file.status}`}>
      {/* Preview or Icon */}
      <div className="file-preview">
        {file.preview ? (
          <img src={file.preview} alt={file.name} />
        ) : (
          <span className="file-icon">{getFileIcon(file.type)}</span>
        )}
      </div>

      {/* File Info */}
      <div className="file-info">
        <div className="file-name">{file.name}</div>
        <div className="file-meta">
          <span className="file-size">{formatFileSize(file.size)}</span>
          {file.status === 'success' && (
            <span className="success-badge">✓ Uploaded</span>
          )}
          {file.status === 'error' && (
            <span className="error-badge">✗ {file.error}</span>
          )}
        </div>

        {/* Progress Bar */}
        {file.status === 'uploading' && (
          <div className="progress-bar">
            <div
              className="progress-fill"
              style={{ width: `${file.progress}%` }}
            />
            <span className="progress-text">{Math.round(file.progress)}%</span>
          </div>
        )}
      </div>

      {/* Actions */}
      <div className="file-actions">
        {file.status === 'error' && (
          <button
            onClick={onRetry}
            className="action-btn retry"
            aria-label="Retry upload"
          >
            🔄
          </button>
        )}
        <button
          onClick={onRemove}
          className="action-btn remove"
          aria-label="Remove file"
        >
          ✕
        </button>
      </div>
    </div>
  );
}

// Upload Summary
function UploadSummary({ files }: { files: FileWithMeta[] }) {
  const stats = {
    pending: files.filter((f) => f.status === 'pending').length,
    uploading: files.filter((f) => f.status === 'uploading').length,
    success: files.filter((f) => f.status === 'success').length,
    error: files.filter((f) => f.status === 'error').length,
  };

  const totalSize = files.reduce((sum, file) => sum + file.size, 0);

  return (
    <div className="upload-summary">
      <div className="stat">
        <span className="stat-label">Total Size:</span>
        <span className="stat-value">
          {(totalSize / (1024 * 1024)).toFixed(2)} MB
        </span>
      </div>
      {stats.pending > 0 && (
        <div className="stat">
          <span className="stat-label">Pending:</span>
          <span className="stat-value">{stats.pending}</span>
        </div>
      )}
      {stats.uploading > 0 && (
        <div className="stat">
          <span className="stat-label">Uploading:</span>
          <span className="stat-value">{stats.uploading}</span>
        </div>
      )}
      {stats.success > 0 && (
        <div className="stat success">
          <span className="stat-label">Completed:</span>
          <span className="stat-value">{stats.success}</span>
        </div>
      )}
      {stats.error > 0 && (
        <div className="stat error">
          <span className="stat-label">Failed:</span>
          <span className="stat-value">{stats.error}</span>
        </div>
      )}
    </div>
  );
}

// Styles
const styles = `
.dropzone-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--color-white);
}

.dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.dropzone.drag-active {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  transform: scale(1.02);
}

.dropzone.drag-accept {
  border-color: var(--color-success);
  background: var(--color-success-50);
}

.dropzone.drag-reject {
  border-color: var(--color-danger);
  background: var(--color-danger-50);
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.dropzone-content {
  pointer-events: none;
}

.drop-message {
  animation: fadeIn 0.3s;
}

.drop-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.upload-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
}

.help-text {
  color: var(--color-text-secondary);
  margin: 0.5rem 0 1.5rem;
}

.file-info {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.browse-btn {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.browse-btn:hover {
  background: var(--color-primary-600);
  transform: translateY(-2px);
}

.file-list {
  margin-top: 2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  transition: all 0.2s;
}

.file-item:hover {
  background: var(--color-gray-100);
}

.file-preview {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-icon {
  font-size: 1.5rem;
}

.file-info {
  flex: 1;
}

.file-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.file-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.progress-bar {
  position: relative;
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.file-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s;
}

.action-btn:hover {
  transform: scale(1.1);
}

.upload-summary {
  display: flex;
  gap: 2rem;
  padding: 1rem;
  margin-top: 1rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.stat {
  display: flex;
  gap: 0.5rem;
}

.stat-label {
  color: var(--color-text-secondary);
}

.stat-value {
  font-weight: 600;
}

.stat.success .stat-value {
  color: var(--color-success);
}

.stat.error .stat-value {
  color: var(--color-danger);
}
`;

import React, { useState } from 'react';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  rectSortingStrategy,
} from '@dnd-kit/sortable';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

// Widget interface
interface Widget {
  id: string;
  title: string;
  content: React.ReactNode;
  size: 'small' | 'medium' | 'large';
  color: string;
  icon: string;
}

// Grid item component
function GridItem({
  widget,
  isDragging,
}: {
  widget: Widget;
  isDragging?: boolean;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging: localIsDragging,
  } = useSortable({ id: widget.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging || localIsDragging ? 0.5 : 1,
    gridColumn: widget.size === 'large' ? 'span 2' : 'span 1',
    gridRow: widget.size === 'large' ? 'span 2' : 'span 1',
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`grid-item size-${widget.size}`}
      {...attributes}
      {...listeners}
    >
      <div
        className="widget"
        style={{ background: `linear-gradient(135deg, ${widget.color}22, ${widget.color}44)` }}
      >
        <div className="widget-header">
          <span className="widget-icon">{widget.icon}</span>
          <h3 className="widget-title">{widget.title}</h3>
          <button className="widget-menu" aria-label="Widget menu">
            ⋮
          </button>
        </div>

        <div className="widget-content">
          {widget.content}
        </div>

        {/* Resize handle */}
        <button
          className="resize-handle"
          aria-label="Resize widget"
          onClick={(e) => {
            e.stopPropagation();
            // Handle resize
          }}
        >
          ⤡
        </button>
      </div>
    </div>
  );
}

// Main grid component
export function GridReorder() {
  const [widgets, setWidgets] = useState<Widget[]>([
    {
      id: 'widget-1',
      title: 'Analytics',
      content: (
        <div className="chart-placeholder">
          <div className="bar" style={{ height: '60%' }}></div>
          <div className="bar" style={{ height: '80%' }}></div>
          <div className="bar" style={{ height: '40%' }}></div>
          <div className="bar" style={{ height: '90%' }}></div>
          <div className="bar" style={{ height: '70%' }}></div>
        </div>
      ),
      size: 'large',
      color: '#3b82f6',
      icon: '📊',
    },
    {
      id: 'widget-2',
      title: 'Users',
      content: <div className="metric">1,234</div>,
      size: 'small',
      color: '#10b981',
      icon: '👥',
    },
    {
      id: 'widget-3',
      title: 'Revenue',
      content: <div className="metric">$54,321</div>,
      size: 'small',
      color: '#f59e0b',
      icon: '💰',
    },
    {
      id: 'widget-4',
      title: 'Activity',
      content: (
        <div className="activity-list">
          <div className="activity-item">User signed up</div>
          <div className="activity-item">New order received</div>
          <div className="activity-item">Payment processed</div>
        </div>
      ),
      size: 'medium',
      color: '#8b5cf6',
      icon: '📈',
    },
    {
      id: 'widget-5',
      title: 'Tasks',
      content: (
        <div className="task-progress">
          <div className="progress-item">
            <span>In Progress</span>
            <span>5</span>
          </div>
          <div className="progress-item">
            <span>Completed</span>
            <span>12</span>
          </div>
        </div>
      ),
      size: 'small',
      color: '#ef4444',
      icon: '✓',
    },
    {
      id: 'widget-6',
      title: 'Calendar',
      content: (
        <div className="mini-calendar">
          <div className="calendar-header">November 2024</div>
          <div className="calendar-grid">
            {[...Array(30)].map((_, i) => (
              <div key={i} className="calendar-day">
                {i + 1}
              </div>
            ))}
          </div>
        </div>
      ),
      size: 'medium',
      color: '#ec4899',
      icon: '📅',
    },
  ]);

  const [activeId, setActiveId] = useState<string | null>(null);
  const [columns, setColumns] = useState(4);

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 10,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  function handleDragStart(event: DragStartEvent) {
    setActiveId(event.active.id as string);
  }

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    if (over && active.id !== over.id) {
      setWidgets((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);
        return arrayMove(items, oldIndex, newIndex);
      });
    }

    setActiveId(null);
  }

  // Responsive columns
  const handleColumnChange = (newColumns: number) => {
    setColumns(newColumns);
  };

  const activeWidget = activeId
    ? widgets.find((w) => w.id === activeId)
    : null;

  return (
    <div className="grid-container">
      <div className="grid-header">
        <h2>Dashboard Grid</h2>

        <div className="grid-controls">
          <div className="column-selector">
            <label>Columns:</label>
            <button
              onClick={() => handleColumnChange(2)}
              className={columns === 2 ? 'active' : ''}
              aria-label="2 columns"
            >
              2
            </button>
            <button
              onClick={() => handleColumnChange(3)}
              className={columns === 3 ? 'active' : ''}
              aria-label="3 columns"
            >
              3
            </button>
            <button
              onClick={() => handleColumnChange(4)}
              className={columns === 4 ? 'active' : ''}
              aria-label="4 columns"
            >
              4
            </button>
          </div>

          <button className="add-widget-btn">
            + Add Widget
          </button>
        </div>
      </div>

      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      >
        <SortableContext
          items={widgets}
          strategy={rectSortingStrategy}
        >
          <div
            className="widget-grid"
            style={{
              gridTemplateColumns: `repeat(${columns}, 1fr)`,
            }}
          >
            {widgets.map((widget) => (
              <GridItem key={widget.id} widget={widget} />
            ))}
          </div>
        </SortableContext>

        <DragOverlay>
          {activeWidget && (
            <GridItem widget={activeWidget} isDragging />
          )}
        </DragOverlay>
      </DndContext>

      {/* Instructions */}
      <div className="grid-instructions">
        <p>
          <strong>Drag widgets</strong> to reorder •
          <strong> Resize</strong> using corner handle •
          <strong> Keyboard</strong>: Tab to focus, Space to grab, Arrows to move
        </p>
      </div>
    </div>
  );
}

// Styles
const styles = `
.grid-container {
  padding: 2rem;
  background: var(--color-gray-50);
  min-height: 100vh;
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.grid-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.column-selector {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.column-selector label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.column-selector button {
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s;
}

.column-selector button:hover {
  background: var(--color-gray-100);
}

.column-selector button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.add-widget-btn {
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.add-widget-btn:hover {
  background: var(--color-primary-600);
}

.widget-grid {
  display: grid;
  gap: 1rem;
  grid-auto-rows: minmax(120px, 1fr);
  grid-auto-flow: dense;
}

.grid-item {
  cursor: grab;
  transition: transform 0.2s, opacity 0.2s;
}

.grid-item:active {
  cursor: grabbing;
}

.widget {
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s;
}

.widget:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.widget-icon {
  font-size: 1.25rem;
}

.widget-title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.widget-menu {
  padding: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
}

.widget-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.resize-handle {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: nwse-resize;
  color: var(--color-text-tertiary);
  opacity: 0;
  transition: opacity 0.2s;
}

.widget:hover .resize-handle {
  opacity: 1;
}

/* Widget content styles */
.metric {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-text-primary);
}

.chart-placeholder {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  height: 100px;
  width: 100%;
}

.bar {
  flex: 1;
  background: var(--color-primary-400);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.activity-list {
  width: 100%;
  font-size: 0.813rem;
}

.activity-item {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.task-progress {
  width: 100%;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  font-size: 0.875rem;
}

.mini-calendar {
  width: 100%;
  font-size: 0.75rem;
}

.calendar-header {
  text-align: center;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  border-radius: 2px;
  font-size: 0.625rem;
}

.grid-instructions {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .widget-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-item.size-large {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .widget-grid {
    grid-template-columns: 1fr !important;
  }

  .grid-item.size-large,
  .grid-item.size-medium {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Drag overlay */
.grid-item[aria-grabbed="true"] {
  opacity: 0.5;
}

/* Focus styles */
.grid-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
`;

import React, { useState, useMemo } from 'react';
import {
  DndContext,
  DragOverlay,
  closestCorners,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragStartEvent,
  DragOverEvent,
  DragEndEvent,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  horizontalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

// Types
interface Task {
  id: string;
  title: string;
  description: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  assignee?: string;
  tags: string[];
  columnId: string;
}

interface Column {
  id: string;
  title: string;
  wipLimit?: number;
  color: string;
}

// Draggable Task Card
function TaskCard({ task, isDragging }: { task: Task; isDragging?: boolean }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: task.id,
    data: {
      type: 'task',
      task,
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`task-card priority-${task.priority}`}
      {...attributes}
      {...listeners}
    >
      <div className="task-header">
        <h4 className="task-title">{task.title}</h4>
        <span className={`priority-indicator priority-${task.priority}`} />
      </div>

      <p className="task-description">{task.description}</p>

      <div className="task-footer">
        {task.assignee && (
          <div className="assignee">
            <img
              src={`https://ui-avatars.com/api/?name=${task.assignee}&size=24`}
              alt={task.assignee}
              title={task.assignee}
            />
          </div>
        )}

        <div className="tags">
          {task.tags.map((tag) => (
            <span key={tag} className="tag">
              {tag}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// Droppable Column
function BoardColumn({
  column,
  tasks,
  isOver,
}: {
  column: Column;
  tasks: Task[];
  isOver?: boolean;
}) {
  const {
    setNodeRef,
    attributes,
    listeners,
    transform,
    transition,
  } = useSortable({
    id: column.id,
    data: {
      type: 'column',
      column,
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const isOverLimit = column.wipLimit && tasks.length >= column.wipLimit;

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`board-column ${isOver ? 'column-over' : ''} ${
        isOverLimit ? 'over-limit' : ''
      }`}
    >
      <div
        className="column-header"
        style={{ borderTopColor: column.color }}
      >
        <button
          className="column-drag-handle"
          {...attributes}
          {...listeners}
          aria-label={`Drag to reorder ${column.title} column`}
        >
          ⋮⋮
        </button>

        <h3 className="column-title">{column.title}</h3>

        <span className="task-count">
          {tasks.length}
          {column.wipLimit && ` / ${column.wipLimit}`}
        </span>
      </div>

      <SortableContext
        items={tasks.map((t) => t.id)}
        strategy={verticalListSortingStrategy}
      >
        <div className="tasks-container">
          {tasks.map((task) => (
            <TaskCard key={task.id} task={task} />
          ))}

          {tasks.length === 0 && (
            <div className="empty-column">
              Drop tasks here
            </div>
          )}
        </div>
      </SortableContext>

      <button className="add-task-btn">
        + Add Task
      </button>
    </div>
  );
}

// Main Kanban Board
export function KanbanBoard() {
  const [columns] = useState<Column[]>([
    { id: 'backlog', title: 'Backlog', color: '#94a3b8' },
    { id: 'todo', title: 'To Do', color: '#60a5fa', wipLimit: 5 },
    { id: 'inprogress', title: 'In Progress', color: '#fbbf24', wipLimit: 3 },
    { id: 'review', title: 'Review', color: '#a78bfa', wipLimit: 2 },
    { id: 'done', title: 'Done', color: '#34d399' },
  ]);

  const [tasks, setTasks] = useState<Task[]>([
    {
      id: 'task-1',
      title: 'Setup project repository',
      description: 'Initialize git repo and add initial files',
      priority: 'high',
      assignee: 'John Doe',
      tags: ['setup', 'git'],
      columnId: 'done',
    },
    {
      id: 'task-2',
      title: 'Design database schema',
      description: 'Create ERD and define relationships',
      priority: 'urgent',
      assignee: 'Jane Smith',
      tags: ['backend', 'database'],
      columnId: 'inprogress',
    },
    {
      id: 'task-3',
      title: 'Implement authentication',
      description: 'Add JWT-based auth system',
      priority: 'high',
      assignee: 'John Doe',
      tags: ['backend', 'security'],
      columnId: 'todo',
    },
    {
      id: 'task-4',
      title: 'Create landing page',
      description: 'Design and implement homepage',
      priority: 'medium',
      tags: ['frontend', 'design'],
      columnId: 'todo',
    },
    {
      id: 'task-5',
      title: 'Write API documentation',
      description: 'Document all API endpoints',
      priority: 'low',
      tags: ['documentation'],
      columnId: 'backlog',
    },
  ]);

  const [activeId, setActiveId] = useState<string | null>(null);

  // Group tasks by column
  const tasksByColumn = useMemo(() => {
    const map: Record<string, Task[]> = {};
    columns.forEach((col) => {
      map[col.id] = tasks.filter((task) => task.columnId === col.id);
    });
    return map;
  }, [tasks, columns]);

  // Sensors for drag detection
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 10,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  // Find container for task
  function findContainer(id: string) {
    if (columns.find((col) => col.id === id)) {
      return id;
    }
    const task = tasks.find((t) => t.id === id);
    return task?.columnId;
  }

  // Drag handlers
  function handleDragStart(event: DragStartEvent) {
    const { active } = event;
    setActiveId(active.id as string);
  }

  function handleDragOver(event: DragOverEvent) {
    const { active, over } = event;
    if (!over) return;

    const activeContainer = findContainer(active.id as string);
    const overContainer = findContainer(over.id as string);

    if (!activeContainer || !overContainer || activeContainer === overContainer) {
      return;
    }

    setTasks((prev) => {
      const activeTask = prev.find((t) => t.id === active.id);
      if (!activeTask) return prev;

      // Check WIP limit
      const overColumn = columns.find((c) => c.id === overContainer);
      if (overColumn?.wipLimit) {
        const tasksInColumn = prev.filter((t) => t.columnId === overContainer);
        if (tasksInColumn.length >= overColumn.wipLimit) {
          // Show warning
          console.warn(`Column ${overColumn.title} has reached its WIP limit`);
          return prev;
        }
      }

      // Move task to new column
      return prev.map((task) =>
        task.id === activeTask.id
          ? { ...task, columnId: overContainer }
          : task
      );
    });
  }

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (!over) {
      setActiveId(null);
      return;
    }

    const activeContainer = findContainer(active.id as string);
    const overContainer = findContainer(over.id as string);

    if (!activeContainer || !overContainer) {
      setActiveId(null);
      return;
    }

    if (activeContainer === overContainer) {
      // Reorder within same column
      const containerTasks = tasksByColumn[overContainer];
      const oldIndex = containerTasks.findIndex((t) => t.id === active.id);
      const newIndex = containerTasks.findIndex((t) => t.id === over.id);

      if (oldIndex !== newIndex) {
        const newTasks = arrayMove(containerTasks, oldIndex, newIndex);
        setTasks((prev) => [
          ...prev.filter((t) => t.columnId !== overContainer),
          ...newTasks,
        ]);
      }
    }

    setActiveId(null);
  }

  const activeTask = activeId ? tasks.find((t) => t.id === activeId) : null;

  return (
    <div className="kanban-board">
      <h2>Project Board</h2>

      <DndContext
        sensors={sensors}
        collisionDetection={closestCorners}
        onDragStart={handleDragStart}
        onDragOver={handleDragOver}
        onDragEnd={handleDragEnd}
      >
        <SortableContext
          items={columns.map((c) => c.id)}
          strategy={horizontalListSortingStrategy}
        >
          <div className="columns-container">
            {columns.map((column) => (
              <BoardColumn
                key={column.id}
                column={column}
                tasks={tasksByColumn[column.id] || []}
              />
            ))}
          </div>
        </SortableContext>

        <DragOverlay>
          {activeTask && <TaskCard task={activeTask} isDragging />}
        </DragOverlay>
      </DndContext>
    </div>
  );
}

// Styles
const styles = `
.kanban-board {
  padding: 2rem;
  background: var(--color-gray-50);
  min-height: 100vh;
}

.columns-container {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 2rem;
}

.board-column {
  flex: 0 0 320px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}

.board-column.column-over {
  background: var(--color-primary-50);
  box-shadow: var(--shadow-md);
}

.board-column.over-limit {
  background: var(--color-red-50);
}

.column-header {
  padding: 1rem;
  border-top: 3px solid;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.column-drag-handle {
  cursor: grab;
  padding: 0.25rem;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
}

.column-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.task-count {
  background: var(--color-gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
}

.tasks-container {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: grab;
  transition: all 0.2s;
}

.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.task-card.priority-urgent {
  border-left: 3px solid var(--color-red-500);
}

.task-card.priority-high {
  border-left: 3px solid var(--color-orange-500);
}

.task-card.priority-medium {
  border-left: 3px solid var(--color-yellow-500);
}

.task-card.priority-low {
  border-left: 3px solid var(--color-blue-500);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.5rem;
}

.task-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.priority-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.priority-indicator.priority-urgent {
  background: var(--color-red-500);
}

.priority-indicator.priority-high {
  background: var(--color-orange-500);
}

.priority-indicator.priority-medium {
  background: var(--color-yellow-500);
}

.priority-indicator.priority-low {
  background: var(--color-blue-500);
}

.task-description {
  font-size: 0.813rem;
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
  line-height: 1.4;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

.assignee img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.tag {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.empty-column {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-tertiary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: 0.5rem;
}

.add-task-btn {
  margin: 0.5rem;
  padding: 0.75rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.add-task-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
`;