'use client'

import { Truck, Plus, MapPin, Clock, Package, TrendingUp, AlertTriangle, Navigation } from 'lucide-react'
import { useState } from 'react'

import { Sidebar } from '@/components/dashboard/sidebar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { useSidebar } from '@/hooks/useSidebar'

// Мок данные для перевозок
const mockLogistics = [
  {
    id: '1',
    routeNumber: 'LOG-001',
    from: 'Садовод',
    fromAddress: 'Москва, 14-й км МКАД',
    to: 'SFERAV Logistics',
    toAddress: 'Москва, ул. Складская, 15',
    status: 'in_transit',
    distance: '45 км',
    estimatedTime: '1 ч 30 мин',
    cargo: 'Смартфоны (50 шт.)',
    price: 15000,
    createdDate: '2024-01-10',
  },
  {
    id: '2',
    routeNumber: 'LOG-002',
    from: 'SFERAV Logistics',
    fromAddress: 'Москва, ул. Складская, 15',
    to: 'Коледино WB',
    toAddress: 'МО, г. Подольск, Коледино',
    status: 'delivered',
    distance: '62 км',
    estimatedTime: '2 ч 15 мин',
    cargo: 'Одежда (120 шт.)',
    price: 22000,
    createdDate: '2024-01-09',
  },
  {
    id: '3',
    routeNumber: 'LOG-003',
    from: 'Тверь Ozon',
    fromAddress: 'г. Тверь, ул. Складская, 88',
    to: 'SFERAV Logistics',
    toAddress: 'Москва, ул. Складская, 15',
    status: 'planned',
    distance: '178 км',
    estimatedTime: '3 ч 45 мин',
    cargo: 'Электроника (75 шт.)',
    price: 35000,
    createdDate: '2024-01-11',
  },
]

export function LogisticsDashboard() {
  const { getSidebarMargin } = useSidebar()

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0,
    }).format(amount)
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('ru-RU', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    })
  }

  const getStatusBadge = (status: string) => {
    const statusConfig = {
      planned: {
        color: 'text-blue-300 border-blue-400/30',
        label: 'Запланировано',
      },
      in_transit: {
        color: 'text-yellow-300 border-yellow-400/30',
        label: 'В пути',
      },
      delivered: {
        color: 'text-green-300 border-green-400/30',
        label: 'Доставлено',
      },
      cancelled: { color: 'text-red-300 border-red-400/30', label: 'Отменено' },
    }

    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.planned

    return (
      <Badge variant="outline" className={`glass-secondary ${config.color}`}>
        {config.label}
      </Badge>
    )
  }

  const getTotalRevenue = () => {
    return mockLogistics.reduce((sum, route) => sum + route.price, 0)
  }

  const getInTransitCount = () => {
    return mockLogistics.filter((route) => route.status === 'in_transit').length
  }

  const getDeliveredCount = () => {
    return mockLogistics.filter((route) => route.status === 'delivered').length
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        <div className="p-8">
          {/* Заголовок */}
          <div className="flex items-center justify-between mb-8">
            <div>
              <h1 className="text-3xl font-bold text-white mb-2">Перевозки</h1>
              <p className="text-white/60">Управление логистическими маршрутами</p>
            </div>
            <Button className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg">
              <Plus className="h-4 w-4 mr-2" />
              Создать маршрут
            </Button>
          </div>

          {/* Статистика */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-blue-500/20 rounded-lg">
                  <Truck className="h-6 w-6 text-blue-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">Всего маршрутов</p>
                  <p className="text-2xl font-bold text-white">{mockLogistics.length}</p>
                </div>
              </div>
            </Card>

            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-yellow-500/20 rounded-lg">
                  <Navigation className="h-6 w-6 text-yellow-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">В пути</p>
                  <p className="text-2xl font-bold text-white">{getInTransitCount()}</p>
                </div>
              </div>
            </Card>

            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-green-500/20 rounded-lg">
                  <Package className="h-6 w-6 text-green-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">Доставлено</p>
                  <p className="text-2xl font-bold text-white">{getDeliveredCount()}</p>
                </div>
              </div>
            </Card>

            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-purple-500/20 rounded-lg">
                  <TrendingUp className="h-6 w-6 text-purple-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">Выручка</p>
                  <p className="text-2xl font-bold text-white">{formatCurrency(getTotalRevenue())}</p>
                </div>
              </div>
            </Card>
          </div>

          {/* Список маршрутов */}
          <Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
            <div className="p-6">
              <h2 className="text-xl font-semibold text-white mb-4">Активные маршруты</h2>
              <div className="space-y-4">
                {mockLogistics.map((route) => (
                  <Card key={route.id} className="glass-card p-4 hover:bg-white/5 transition-colors">
                    <div className="flex items-center justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-3">
                          <h3 className="text-white font-semibold text-lg">{route.routeNumber}</h3>
                          {getStatusBadge(route.status)}
                        </div>

                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-3">
                          <div className="space-y-2">
                            <div className="flex items-center gap-2">
                              <MapPin className="h-4 w-4 text-green-400" />
                              <div>
                                <p className="text-white font-medium">{route.from}</p>
                                <p className="text-white/60 text-sm">{route.fromAddress}</p>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <MapPin className="h-4 w-4 text-red-400" />
                              <div>
                                <p className="text-white font-medium">{route.to}</p>
                                <p className="text-white/60 text-sm">{route.toAddress}</p>
                              </div>
                            </div>
                          </div>

                          <div className="space-y-2">
                            <div className="flex items-center gap-2">
                              <Package className="h-4 w-4 text-blue-400" />
                              <span className="text-white">{route.cargo}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Clock className="h-4 w-4 text-yellow-400" />
                              <span className="text-white">
                                {route.distance} • {route.estimatedTime}
                              </span>
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center justify-between">
                          <span className="text-white/60 text-sm">Создано: {formatDate(route.createdDate)}</span>
                          <span className="text-green-400 font-semibold text-lg">{formatCurrency(route.price)}</span>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </Card>
        </div>
      </main>
    </div>
  )
}
