"use client"

import React from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { cn } from '../../lib/utils'
import { Widget } from './types'
import { MetricCard } from './widgets/metric-card'
import { ChartWidget } from './widgets/chart-widget'
import { ActivityFeed } from './widgets/activity-feed'
import { Responsive, WidthProvider, Layout, Layouts } from 'react-grid-layout'
const ResponsiveGridLayout = WidthProvider(Responsive)
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import { 
  Grip, 
  X, 
  Maximize2, 
  Minimize2,
  Lock,
  Unlock,
  Settings
} from 'lucide-react'
import { Button } from '../ui/button'

interface DashboardGridProps {
  widgets: Widget[]
  onLayoutChange?: (layout: Layout[]) => void
  onWidgetRemove?: (widgetId: string) => void
  onWidgetAction?: (widgetId: string, action: string, data?: any) => void
  editMode?: boolean
  className?: string
  glassmorphism?: boolean
  breakpoints?: { lg: number; md: number; sm: number; xs: number; xxs: number }
  cols?: { lg: number; md: number; sm: number; xs: number; xxs: number }
  rowHeight?: number
  margin?: [number, number]
  containerPadding?: [number, number]
}

export function DashboardGrid({
  widgets,
  onLayoutChange,
  onWidgetRemove,
  onWidgetAction,
  editMode = false,
  className,
  glassmorphism = false,
  breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
  cols = { lg: 12, md: 8, sm: 4, xs: 2, xxs: 1 },
  rowHeight = 80,
  margin = [16, 24],
  containerPadding = [0, 0]
}: DashboardGridProps) {
  const [layouts, setLayouts] = React.useState<Layouts>({})
  const [currentBreakpoint, setCurrentBreakpoint] = React.useState('lg')
  const [lockedWidgets, setLockedWidgets] = React.useState<Set<string>>(new Set())
  const [fullscreenWidget, setFullscreenWidget] = React.useState<string | null>(null)
  const [containerWidth, setContainerWidth] = React.useState(1200)
  const containerRef = React.useRef<HTMLDivElement>(null)
  const [compactType, setCompactType] = React.useState<'vertical' | 'horizontal' | null>('vertical')

  // Container genişliğini ölç ve breakpoint'i güncelle
  React.useEffect(() => {
    const updateWidth = () => {
      if (containerRef.current) {
        const width = containerRef.current.offsetWidth
        setContainerWidth(width)
        
        // Breakpoint'i manuel olarak belirle
        if (width < 480) {
          setCurrentBreakpoint('xxs')
        } else if (width < 768) {
          setCurrentBreakpoint('xs')
        } else if (width < 996) {
          setCurrentBreakpoint('sm')
        } else if (width < 1200) {
          setCurrentBreakpoint('md')
        } else {
          setCurrentBreakpoint('lg')
        }
      }
    }

    updateWidth()
    window.addEventListener('resize', updateWidth)
    return () => window.removeEventListener('resize', updateWidth)
  }, [])

  // Responsive layout oluştur
  const generateResponsiveLayouts = (): Layouts => {
    const baseLayout = widgets.map((widget, index) => ({
      i: widget.id,
      x: widget.position?.x ?? (index * 3) % 12,
      y: widget.position?.y ?? Math.floor((index * 3) / 12) * 3,
      w: widget.size?.w ?? 3,
      h: widget.size?.h ?? 3,
      minW: widget.size?.minW || 2,
      maxW: widget.size?.maxW || 12,
      minH: widget.size?.minH || 2,
      maxH: widget.size?.maxH || 8,
      isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
      isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false,
    }))

    // Farklı breakpoint'ler için layout'ları ayarla
    const sortedLayout = [...baseLayout].sort((a, b) => {
      if (a.y === b.y) return a.x - b.x;
      return a.y - b.y;
    });

    return {
      lg: baseLayout,
      md: sortedLayout.map((item, index) => {
        const cols = 8;
        const maxW = Math.min(item.w, 4);
        const row = Math.floor(index / 2);
        const col = (index % 2) * 4;
        return {
          ...item,
          w: maxW,
          x: col,
          y: row * 3,
          h: Math.min(item.h, 3)
        };
      }),
      sm: sortedLayout.map((item, index) => {
        const maxW = Math.min(item.w, 4);
        return {
          ...item,
          w: maxW,
          x: 0,
          y: index * 3,
          h: Math.min(item.h, 3)
        };
      }),
      xs: sortedLayout.map((item, index) => ({
        ...item,
        w: 2, // Full width on mobile
        x: 0,
        y: index * 2,
        h: Math.min(item.h, 2)
      })),
      xxs: sortedLayout.map((item, index) => ({
        ...item,
        w: 1, // Full width on extra small
        x: 0,
        y: index * 2,
        h: Math.min(item.h, 2)
      }))
    }
  }

  // Layout oluştur (geriye uyumluluk için)
  const generateLayout = (): Layout[] => {
    const responsiveLayouts = generateResponsiveLayouts()
    return responsiveLayouts[currentBreakpoint as keyof Layouts] || responsiveLayouts.lg
  }

  // Widget kilit durumunu değiştir
  const toggleWidgetLock = (widgetId: string) => {
    setLockedWidgets(prev => {
      const newSet = new Set(prev)
      if (newSet.has(widgetId)) {
        newSet.delete(widgetId)
      } else {
        newSet.add(widgetId)
      }
      return newSet
    })
  }

  // Widget'ı tam ekran yap
  const toggleFullscreen = (widgetId: string) => {
    if (fullscreenWidget === widgetId) {
      setFullscreenWidget(null)
    } else {
      setFullscreenWidget(widgetId)
    }
  }

  // Widget render
  const renderWidget = (widget: Widget) => {
    const isLocked = lockedWidgets.has(widget.id)
    const isFullscreen = fullscreenWidget === widget.id

    const widgetContent = () => {
      switch (widget.type) {
        case 'metric':
          return (
            <MetricCard
              data={widget.data}
              onAction={(action) => onWidgetAction?.(widget.id, action)}
              glassmorphism={glassmorphism}
            />
          )
        
        case 'chart':
          return (
            <ChartWidget
              id={widget.id}
              title={widget.title}
              description={widget.description}
              data={widget.data}
              loading={widget.loading}
              glassmorphism={glassmorphism}
              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
            />
          )
        
        case 'activity':
          return (
            <ActivityFeed
              items={widget.data?.items || []}
              title={widget.title}
              loading={widget.loading}
              glassmorphism={glassmorphism}
              realtime={widget.data?.realtime}
              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
            />
          )

        case 'table':
        case 'map':
        case 'calendar':
        case 'progress':
        case 'comparison':
          // Bu widget tipleri için geçici olarak basit bir görünüm
          return (
            <div className={cn(
              "h-full p-4 rounded-lg border",
              glassmorphism ? "bg-background/60 backdrop-blur-md border-white/10" : "bg-card"
            )}>
              <h3 className="font-semibold mb-2">{widget.title}</h3>
              {widget.description && (
                <p className="text-sm text-muted-foreground mb-4">{widget.description}</p>
              )}
              <div className="flex items-center justify-center h-32 text-muted-foreground">
                <span className="text-sm">{widget.type} widget content</span>
              </div>
            </div>
          )
        
        default:
          return (
            <div className="flex items-center justify-center h-full text-muted-foreground">
              Widget type not supported: {widget.type}
            </div>
          )
      }
    }

    return (
      <motion.div
        key={widget.id}
        className={cn(
          "relative group h-full",
          isFullscreen && "!fixed !inset-4 !z-50 !h-auto !w-auto"
        )}
        layout={!isFullscreen}
        transition={{ duration: 0.2 }}
      >
        {/* Widget içeriği */}
        <div className="h-full">
          {widgetContent()}
        </div>

        {/* Edit mode kontrolleri */}
        {editMode && !isFullscreen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"
          >
            <div className={cn(
              "flex items-center gap-1 p-1 rounded-lg",
              glassmorphism ? "bg-background/80 backdrop-blur-sm" : "bg-background/95",
              "border shadow-sm"
            )}>
              {/* Drag handle */}
              {!isLocked && (
                <div className="drag-handle cursor-move p-1 hover:bg-muted rounded">
                  <Grip className="h-4 w-4" />
                </div>
              )}

              {/* Lock/Unlock */}
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={() => toggleWidgetLock(widget.id)}
              >
                {isLocked ? (
                  <Lock className="h-3 w-3" />
                ) : (
                  <Unlock className="h-3 w-3" />
                )}
              </Button>

              {/* Fullscreen */}
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={() => toggleFullscreen(widget.id)}
              >
                <Maximize2 className="h-3 w-3" />
              </Button>

              {/* Settings */}
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={() => onWidgetAction?.(widget.id, 'settings')}
              >
                <Settings className="h-3 w-3" />
              </Button>

              {/* Remove */}
              {widget.permissions?.canDelete !== false && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                  onClick={() => onWidgetRemove?.(widget.id)}
                >
                  <X className="h-3 w-3" />
                </Button>
              )}
            </div>
          </motion.div>
        )}

        {/* Fullscreen kontrolleri */}
        {isFullscreen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            className="absolute top-4 right-4 z-10"
          >
            <Button
              variant="outline"
              size="sm"
              onClick={() => toggleFullscreen(widget.id)}
            >
              <Minimize2 className="h-4 w-4 mr-2" />
              Exit Fullscreen
            </Button>
          </motion.div>
        )}
      </motion.div>
    )
  }

  // Mobile kontrolü
  const isMobile = currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' || currentBreakpoint === 'sm';

  return (
    <div ref={containerRef} className={cn("w-full relative", className)}>
      <AnimatePresence>
        {fullscreenWidget ? (
          // Fullscreen widget
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-40 bg-background"
          >
            {widgets
              .filter(w => w.id === fullscreenWidget)
              .map(renderWidget)}
          </motion.div>
        ) : isMobile ? (
          // Mobile layout - Grid Layout yerine normal flex kullan
          <div className="space-y-6">
            {widgets.map(widget => (
              <motion.div
                key={widget.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3 }}
                className="w-full"
              >
                {renderWidget(widget)}
              </motion.div>
            ))}
          </div>
        ) : (
          // Desktop Grid layout
          <ResponsiveGridLayout
            className="layout"
            layouts={layouts.lg ? layouts : generateResponsiveLayouts()}
            breakpoints={breakpoints}
            cols={cols}
            rowHeight={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? 60 : currentBreakpoint === 'sm' ? 70 : rowHeight}
            margin={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [12, 20] : margin}
            containerPadding={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [8, 8] : containerPadding}
            onLayoutChange={(layout, allLayouts) => {
              setLayouts(allLayouts)
              onLayoutChange?.(layout)
            }}
            onBreakpointChange={(breakpoint) => {
              setCurrentBreakpoint(breakpoint)
              // Dar alanlarda compact type'ı değiştir
              if (breakpoint === 'xs' || breakpoint === 'xxs' || breakpoint === 'sm') {
                setCompactType('vertical')
              } else {
                setCompactType('vertical')
              }
            }}
            draggableHandle=".drag-handle"
            isDraggable={editMode}
            isResizable={editMode}
            compactType={compactType}
            preventCollision={false}
            useCSSTransforms={true}
            transformScale={1}
            isDroppable={true}
            autoSize={true}
            verticalCompact={true}
          >
            {widgets.map(widget => (
              <div key={widget.id}>
                {renderWidget(widget)}
              </div>
            ))}
          </ResponsiveGridLayout>
        )}
      </AnimatePresence>

      {/* Grid çizgileri (edit mode) */}
      {editMode && !fullscreenWidget && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.1 }}
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage: `
              repeating-linear-gradient(
                0deg,
                var(--border) 0px,
                transparent 1px,
                transparent ${rowHeight + margin[1]}px,
                var(--border) ${rowHeight + margin[1]}px
              ),
              repeating-linear-gradient(
                90deg,
                var(--border) 0px,
                transparent 1px,
                transparent ${100 / cols[currentBreakpoint as keyof typeof cols]}%,
                var(--border) ${100 / cols[currentBreakpoint as keyof typeof cols]}%
              )
            `
          }}
        />
      )}
    </div>
  )
}

export default DashboardGrid