"use client"

import React from 'react'
import { Dashboard } from './index'
import { Widget, MetricData, ChartData, ActivityItem, DashboardNotification } from './types'
import { MetricCard } from './widgets/metric-card'
import { ChartWidget } from './widgets/chart-widget'
import { ActivityFeed } from './widgets/activity-feed'
import { 
  Users, 
  DollarSign, 
  ShoppingCart, 
  TrendingUp,
  Package,
  CreditCard,
  Activity,
  AlertCircle,
  User,
  Settings2,
  LogOut,
  HelpCircle
} from 'lucide-react'

// Örnek metrik verileri
const sampleMetrics: MetricData[] = [
  {
    id: 'revenue',
    title: 'Total Revenue',
    value: 54234,
    unit: '$',
    change: { value: 12.5, type: 'increase', period: 'last month' },
    icon: <DollarSign className="h-4 w-4" />,
    color: 'success',
    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    target: 60000,
    forecast: 58500
  },
  {
    id: 'users',
    title: 'Active Users',
    value: 2453,
    change: { value: 8.2, type: 'increase', period: 'last week' },
    icon: <Users className="h-4 w-4" />,
    color: 'primary',
    sparkline: [200, 220, 210, 230, 225, 240, 254, 260, 245]
  },
  {
    id: 'orders',
    title: 'New Orders',
    value: 846,
    change: { value: 3.1, type: 'decrease', period: 'yesterday' },
    icon: <ShoppingCart className="h-4 w-4" />,
    color: 'warning',
    sparkline: [80, 85, 90, 88, 85, 82, 84, 86, 84]
  },
  {
    id: 'conversion',
    title: 'Conversion Rate',
    value: '3.24%',
    change: { value: 0.5, type: 'increase', period: 'last month' },
    icon: <TrendingUp className="h-4 w-4" />,
    color: 'info',
    sparkline: [2.8, 2.9, 3.0, 2.95, 3.1, 3.15, 3.2, 3.22, 3.24]
  }
]

// Örnek chart verileri
const revenueChartData: ChartData = {
  type: 'area',
  data: [
    { name: 'Jan', revenue: 4000, profit: 2400, expenses: 1600 },
    { name: 'Feb', revenue: 3000, profit: 1398, expenses: 1602 },
    { name: 'Mar', revenue: 5000, profit: 3200, expenses: 1800 },
    { name: 'Apr', revenue: 4500, profit: 2900, expenses: 1600 },
    { name: 'May', revenue: 6000, profit: 3800, expenses: 2200 },
    { name: 'Jun', revenue: 5500, profit: 3400, expenses: 2100 },
    { name: 'Jul', revenue: 7000, profit: 4200, expenses: 2800 }
  ]
}

const salesByProductData: ChartData = {
  type: 'pie',
  data: [
    { name: 'Product A', value: 35 },
    { name: 'Product B', value: 25 },
    { name: 'Product C', value: 20 },
    { name: 'Product D', value: 15 },
    { name: 'Product E', value: 5 }
  ]
}

const performanceData: ChartData = {
  type: 'radar',
  data: [
    { subject: 'Sales', A: 120, B: 110, fullMark: 150 },
    { subject: 'Marketing', A: 98, B: 130, fullMark: 150 },
    { subject: 'Development', A: 86, B: 130, fullMark: 150 },
    { subject: 'Customer Support', A: 99, B: 100, fullMark: 150 },
    { subject: 'Technology', A: 85, B: 90, fullMark: 150 },
    { subject: 'HR', A: 65, B: 85, fullMark: 150 }
  ]
}

// Örnek aktivite verileri
const sampleActivities: ActivityItem[] = [
  {
    id: '1',
    type: 'success',
    title: 'completed a purchase',
    description: 'Order #12345 - Premium Plan ($299)',
    timestamp: new Date(Date.now() - 1000 * 60 * 5),
    user: { name: 'John Doe', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John' },
    icon: <CreditCard className="h-4 w-4" />
  },
  {
    id: '2',
    type: 'info',
    title: 'deployed new version',
    description: 'v2.1.0 deployed to production',
    timestamp: new Date(Date.now() - 1000 * 60 * 15),
    user: { name: 'Sarah Chen' },
    icon: <Package className="h-4 w-4" />
  },
  {
    id: '3',
    type: 'warning',
    title: 'high server load detected',
    description: 'CPU usage above 80% on server-02',
    timestamp: new Date(Date.now() - 1000 * 60 * 30),
    icon: <AlertCircle className="h-4 w-4" />
  },
  {
    id: '4',
    type: 'success',
    title: 'new user registered',
    description: 'Welcome email sent',
    timestamp: new Date(Date.now() - 1000 * 60 * 45),
    user: { name: 'Mike Johnson' }
  },
  {
    id: '5',
    type: 'error',
    title: 'payment failed',
    description: 'Card declined - Order #12346',
    timestamp: new Date(Date.now() - 1000 * 60 * 60),
    user: { name: 'Emma Wilson' }
  }
]

// Örnek widget'lar
const sampleWidgets: Widget[] = [
  // Metrik widget'ları
  {
    id: 'metric-revenue',
    type: 'metric',
    title: 'Revenue',
    size: { w: 3, h: 2 },
    position: { x: 0, y: 0 },
    data: sampleMetrics[0]
  },
  {
    id: 'metric-users',
    type: 'metric',
    title: 'Users',
    size: { w: 3, h: 2 },
    position: { x: 3, y: 0 },
    data: sampleMetrics[1]
  },
  {
    id: 'metric-orders',
    type: 'metric',
    title: 'Orders',
    size: { w: 3, h: 2 },
    position: { x: 6, y: 0 },
    data: sampleMetrics[2]
  },
  {
    id: 'metric-conversion',
    type: 'metric',
    title: 'Conversion',
    size: { w: 3, h: 2 },
    position: { x: 9, y: 0 },
    data: sampleMetrics[3]
  },
  // Chart widget'ları
  {
    id: 'chart-revenue-trend',
    type: 'chart',
    title: 'Revenue Trend',
    description: 'Monthly revenue, profit and expenses',
    size: { w: 8, h: 4 },
    position: { x: 0, y: 2 },
    data: revenueChartData
  },
  {
    id: 'chart-sales-by-product',
    type: 'chart',
    title: 'Sales by Product',
    description: 'Product distribution',
    size: { w: 4, h: 4 },
    position: { x: 8, y: 2 },
    data: salesByProductData
  },
  {
    id: 'chart-performance',
    type: 'chart',
    title: 'Team Performance',
    description: 'Department comparison',
    size: { w: 6, h: 4 },
    position: { x: 0, y: 6 },
    data: performanceData
  },
  // Activity feed
  {
    id: 'activity-feed',
    type: 'activity',
    title: 'Recent Activity',
    size: { w: 6, h: 4 },
    position: { x: 6, y: 6 },
    data: {
      items: sampleActivities,
      realtime: true
    }
  }
]

// Örnek notification verileri
const sampleNotifications: DashboardNotification[] = [
  {
    id: 'notif-1',
    type: 'success',
    title: 'Payment Received',
    message: 'Payment of $1,250 has been processed successfully',
    timestamp: new Date(Date.now() - 1000 * 60 * 5), // 5 dakika önce
    read: false
  },
  {
    id: 'notif-2',
    type: 'warning',
    title: 'Low Stock Alert',
    message: 'Product "Premium Widget" is running low on stock',
    timestamp: new Date(Date.now() - 1000 * 60 * 30), // 30 dakika önce
    read: false
  },
  {
    id: 'notif-3',
    type: 'info',
    title: 'New Feature Available',
    message: 'Check out our new analytics dashboard features',
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 saat önce
    read: true
  },
  {
    id: 'notif-4',
    type: 'error',
    title: 'Sync Failed',
    message: 'Failed to sync data with external service',
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 gün önce
    read: true
  }
]

// Örnek user bilgileri
const sampleUser = {
  name: 'John Doe',
  email: 'john@example.com',
  avatar: 'https://github.com/shadcn.png',
  role: 'Admin'
}

// Örnek custom user menu items
const customUserMenuItems = [
  {
    id: 'profile',
    label: 'My Profile',
    icon: <User className="h-4 w-4" />,
    onClick: () => console.log('Profile clicked')
  },
  {
    id: 'billing',
    label: 'Billing & Plans',
    icon: <CreditCard className="h-4 w-4" />,
    onClick: () => console.log('Billing clicked')
  },
  { id: 'sep1', label: '', separator: true },
  {
    id: 'settings',
    label: 'Settings',
    icon: <Settings2 className="h-4 w-4" />,
    onClick: () => console.log('Settings clicked')
  },
  {
    id: 'help',
    label: 'Help & Support',
    icon: <HelpCircle className="h-4 w-4" />,
    onClick: () => console.log('Help clicked')
  },
  { id: 'sep2', label: '', separator: true },
  {
    id: 'logout',
    label: 'Sign Out',
    icon: <LogOut className="h-4 w-4" />,
    onClick: () => console.log('Logout clicked')
  }
]

export function DashboardDemo() {
  const [notifications, setNotifications] = React.useState(sampleNotifications)

  const handleNotificationMarkAsRead = (notificationId: string) => {
    setNotifications(prev => 
      prev.map(n => n.id === notificationId ? { ...n, read: true } : n)
    )
  }

  const handleNotificationClear = (notificationId: string) => {
    setNotifications(prev => prev.filter(n => n.id !== notificationId))
  }

  const handleNotificationMarkAllAsRead = () => {
    setNotifications(prev => prev.map(n => ({ ...n, read: true })))
  }

  const handleNotificationClearAll = () => {
    setNotifications([])
  }

  return (
    <div className="min-h-screen bg-background">
      <Dashboard
        title="Analytics Dashboard"
        description="Real-time insights and performance metrics"
        widgets={sampleWidgets}
        editable={true}
        realtime={true}
        glassmorphism={true}
        user={sampleUser}
        userMenuItems={customUserMenuItems}
        notifications={notifications}
        onNotificationClick={(notification) => {
          console.log('Notification clicked:', notification)
        }}
        onNotificationMarkAsRead={handleNotificationMarkAsRead}
        onNotificationMarkAllAsRead={handleNotificationMarkAllAsRead}
        onNotificationClear={handleNotificationClear}
        onNotificationClearAll={handleNotificationClearAll}
        onWidgetAdd={(widget) => {
          console.log('Widget added:', widget)
        }}
        onWidgetRemove={(widgetId) => {
          console.log('Widget removed:', widgetId)
        }}
        onWidgetUpdate={(widgetId, updates) => {
          console.log('Widget updated:', widgetId, updates)
        }}
        onExport={(format) => {
          console.log('Export dashboard as:', format)
        }}
      />
    </div>
  )
}

// Standalone widget demos
export function MetricCardDemo() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
      {sampleMetrics.map((metric) => (
        <MetricCard
          key={metric.id}
          data={metric}
          showSparkline={true}
          showForecast={true}
          interactive={true}
          glassmorphism={true}
          onAction={(action) => console.log('Metric action:', action)}
        />
      ))}
    </div>
  )
}

export function ChartWidgetDemo() {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
      <ChartWidget
        id="demo-1"
        title="Revenue Analysis"
        description="Monthly revenue breakdown"
        data={revenueChartData}
        height={300}
        interactive={true}
        glassmorphism={true}
        onAction={(action, data) => console.log('Chart action:', action, data)}
      />
      <ChartWidget
        id="demo-2"
        title="Product Sales"
        description="Sales distribution by product"
        data={salesByProductData}
        height={300}
        interactive={true}
        glassmorphism={true}
      />
    </div>
  )
}

export function ActivityFeedDemo() {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <ActivityFeed
        items={sampleActivities}
        title="System Activity"
        height={400}
        showFilters={true}
        showNotifications={true}
        glassmorphism={true}
        realtime={true}
        onItemClick={(item) => console.log('Activity clicked:', item)}
        onAction={(action, data) => console.log('Feed action:', action, data)}
      />
    </div>
  )
}