"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  ShoppingCart,
  Package,
  Truck,
  Warehouse,
  CheckCircle,
  Clock,
  AlertCircle,
  ArrowRight,
  Users,
  FileText,
  MapPin,
  DollarSign,
  MessageSquare,
  Building2,
  Settings,
  Handshake,
  MessageCircle,
  Store,
} from "lucide-react";

export function BusinessProcessesDemo() {
  const processSteps = [
    {
      id: 1,
      title: "Селлер заходит в маркет",
      description: "Пользователь входит в систему и переходит в раздел маркета",
      actor: "Селлер",
      status: "completed",
      icon: ShoppingCart,
      location: "Кабинет селлера → Маркет",
    },
    {
      id: 2,
      title: "Выбор категории",
      description: "Селлер выбирает нужную категорию товаров",
      actor: "Селлер",
      status: "completed",
      icon: Package,
      location: "Маркет → Категории",
    },
    {
      id: 3,
      title: "Выбор товара",
      description: "Выбор конкретного товара из каталога",
      actor: "Селлер",
      status: "completed",
      icon: Package,
      location: "Каталог товаров",
    },
    {
      id: 4,
      title: "Заказ количества",
      description: "Указание необходимого количества товара",
      actor: "Селлер",
      status: "completed",
      icon: FileText,
      location: "Форма заказа",
    },
    {
      id: 5,
      title: "Выбор услуг фулфилмента",
      description: "Выбор услуг фулфилмента и расходников для каждого товара",
      actor: "Селлер",
      status: "completed",
      icon: Warehouse,
      location: "Настройки заказа",
    },
    {
      id: 6,
      title: "Создание заявки",
      description:
        "Нажатие кнопки 'Создать заявку' и формирование заявки на поставку",
      actor: "Селлер",
      status: "in-progress",
      icon: FileText,
      location: "Форма заказа",
    },
    {
      id: 7,
      title: "Сохранение в кабинете селлера",
      description:
        "Заявка сохраняется в разделе 'Мои поставки' → 'Поставки на ФФ' → 'Товар'",
      actor: "Система",
      status: "pending",
      icon: Package,
      location: "Кабинет селлера → Мои поставки",
    },
    {
      id: 8,
      title: "Дублирование поставщику",
      description: "Заявка дублируется в кабинет поставщика чей товар заказали",
      actor: "Система",
      status: "pending",
      icon: Users,
      location: "Кабинет поставщика → Заявки",
    },
    {
      id: 9,
      title: "Одобрение поставщиком",
      description: "Поставщик должен одобрить заявку на поставку",
      actor: "Поставщик",
      status: "pending",
      icon: CheckCircle,
      location: "Кабинет поставщика → Заявки",
    },
    {
      id: 10,
      title: "Изменение статуса у селлера",
      description:
        "После одобрения меняется статус поставки в кабинете селлера",
      actor: "Система",
      status: "pending",
      icon: AlertCircle,
      location: "Кабинет селлера → Мои поставки",
    },
    {
      id: 11,
      title: "Появление в кабинете фулфилмента",
      description:
        "Поставка появляется в разделе 'Входящие поставки' → 'Поставки на фулфилмент' → 'Товар' → 'Новые'",
      actor: "Система",
      status: "pending",
      icon: Warehouse,
      location: "Кабинет фулфилмент → Входящие поставки",
    },
    {
      id: 12,
      title: "Назначение ответственного",
      description:
        "Менеджер выбирает ответственного, логистику и нажимает 'Приёмка'",
      actor: "Менеджер фулфилмента",
      status: "pending",
      icon: Users,
      location: "Кабинет фулфилмент → Управление",
    },
    {
      id: 13,
      title: "Перенос в приёмку",
      description:
        "Поставка переносится в подраздел 'Поставка на фулфилмент' → 'Товар' → 'Приёмка'",
      actor: "Система",
      status: "pending",
      icon: Package,
      location: "Кабинет фулфилмент → Приёмка",
    },
    {
      id: 14,
      title: "Появление в логистике",
      description: "Заявка появляется в кабинете логистики в разделе 'Заявки'",
      actor: "Система",
      status: "pending",
      icon: Truck,
      location: "Кабинет логистика → Заявки",
    },
    {
      id: 15,
      title: "Подтверждение логистикой",
      description:
        "Менеджер логистики подтверждает заявку, статусы меняются во всех кабинетах",
      actor: "Менеджер логистики",
      status: "pending",
      icon: CheckCircle,
      location: "Кабинет логистика → Заявки",
    },
    {
      id: 16,
      title: "Доставка товара",
      description: "Логистика доставляет товар на фулфилмент",
      actor: "Логистика",
      status: "pending",
      icon: Truck,
      location: "Физическая доставка",
    },
    {
      id: 17,
      title: "Ввод данных о хранении",
      description:
        "Менеджер фулфилмента вводит данные о месте хранения и нажимает 'Принято'",
      actor: "Менеджер фулфилмента",
      status: "pending",
      icon: MapPin,
      location: "Кабинет фулфилмент → Приёмка",
    },
    {
      id: 18,
      title: "Обновление статусов",
      description: "Статусы меняются во всех кабинетах",
      actor: "Система",
      status: "pending",
      icon: AlertCircle,
      location: "Все кабинеты",
    },
    {
      id: 19,
      title: "Перенос в подготовку",
      description: "Поставка переносится в раздел 'Подготовка'",
      actor: "Система",
      status: "pending",
      icon: Package,
      location: "Кабинет фулфилмент → Подготовка",
    },
    {
      id: 20,
      title: "Обновление места хранения",
      description: "Вносятся данные о новом месте хранения товара-продукта",
      actor: "Менеджер фулфилмента",
      status: "pending",
      icon: MapPin,
      location: "Кабинет фулфилмент → Подготовка",
    },
    {
      id: 21,
      title: "Перенос в работу",
      description: "Поставка переносится в подраздел 'В работе'",
      actor: "Система",
      status: "pending",
      icon: Clock,
      location: "Кабинет фулфилмент → В работе",
    },
    {
      id: 22,
      title: "Контроль качества",
      description: "Вносятся данные о факте количества товара и о браке товара",
      actor: "Менеджер фулфилмента",
      status: "pending",
      icon: CheckCircle,
      location: "Кабинет фулфилмент → В работе",
    },
    {
      id: 23,
      title: "Завершение работ",
      description:
        "При нажатии 'Выполнено' поставка переносится в подраздел 'Выполнено'",
      actor: "Менеджер фулфилмента",
      status: "pending",
      icon: CheckCircle,
      location: "Кабинет фулфилмент → Выполнено",
    },
    {
      id: 24,
      title: "Обновление статуса у селлера",
      description: "В кабинете селлера меняется статус поставки",
      actor: "Система",
      status: "pending",
      icon: AlertCircle,
      location: "Кабинет селлера → Мои поставки",
    },
    {
      id: 25,
      title: "Появление кнопки счёта",
      description: "В поставке появляется кнопка 'Выставить счёт'",
      actor: "Система",
      status: "pending",
      icon: DollarSign,
      location: "Кабинет селлера → Мои поставки",
    },
    {
      id: 26,
      title: "Отправка счёта",
      description: "В сообщения селлеру отправляется счёт на оплату",
      actor: "Система",
      status: "pending",
      icon: MessageSquare,
      location: "Мессенджер селлера",
    },
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-500/20 text-green-400 border-green-500/30";
      case "in-progress":
        return "bg-blue-500/20 text-blue-400 border-blue-500/30";
      case "pending":
        return "bg-yellow-500/20 text-yellow-400 border-yellow-500/30";
      default:
        return "bg-gray-500/20 text-gray-400 border-gray-500/30";
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case "completed":
        return "Выполнено";
      case "in-progress":
        return "В процессе";
      case "pending":
        return "Ожидает";
      default:
        return "Неизвестно";
    }
  };

  const actors = [
    { name: "Селлер", color: "bg-blue-500/20 text-blue-400", count: 5 },
    { name: "Поставщик", color: "bg-green-500/20 text-green-400", count: 1 },
    {
      name: "Менеджер фулфилмента",
      color: "bg-purple-500/20 text-purple-400",
      count: 5,
    },
    {
      name: "Менеджер логистики",
      color: "bg-orange-500/20 text-orange-400",
      count: 1,
    },
    { name: "Логистика", color: "bg-red-500/20 text-red-400", count: 1 },
    { name: "Система", color: "bg-gray-500/20 text-gray-400", count: 13 },
  ];

  // Данные о кабинетах
  const cabinets = [
    {
      id: "admin",
      name: "Админ",
      description: "Управление системой",
      icon: Settings,
      color: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30",
      features: ["UI Kit", "Пользователи", "Категории"],
      role: "Администрирование системы",
    },
    {
      id: "market",
      name: "Маркет",
      description: "Центральная площадка",
      icon: Store,
      color: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30",
      features: ["Поиск партнёров", "Каталог товаров", "Заявки"],
      role: "Объединение всех участников",
    },
    {
      id: "seller",
      name: "Селлер",
      description: "Продажи на маркетплейсах",
      icon: ShoppingCart,
      color: "bg-purple-500/20 text-purple-400 border-purple-500/30",
      features: ["Мои поставки", "Склад WB", "Статистика"],
      role: "Заказчик товаров и услуг",
    },
    {
      id: "fulfillment",
      name: "Фулфилмент",
      description: "Склады и логистика",
      icon: Warehouse,
      color: "bg-red-500/20 text-red-400 border-red-500/30",
      features: [
        "Входящие поставки",
        "Склад",
        "Услуги",
        "Сотрудники",
        "Статистика",
      ],
      role: "Обработка и хранение товаров",
    },
    {
      id: "logistics",
      name: "Логистика",
      description: "Логистические решения",
      icon: Truck,
      color: "bg-orange-500/20 text-orange-400 border-orange-500/30",
      features: ["Перевозки", "Заявки"],
      role: "Доставка товаров",
    },
    {
      id: "wholesale",
      name: "Оптовик",
      description: "Оптовые продажи",
      icon: Building2,
      color: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30",
      features: ["Отгрузки", "Склад"],
      role: "Поставщик товаров",
    },
  ];

  const commonModules = [
    {
      name: "Мессенджер",
      description: "Общение между участниками",
      icon: MessageCircle,
      features: ["Чаты", "Файлы", "Голосовые сообщения"],
      connectedTo: ["Все кабинеты"],
    },
    {
      name: "Партнёры",
      description: "Управление контрагентами",
      icon: Handshake,
      features: ["Заявки", "Партнёрская сеть"],
      connectedTo: ["Все кабинеты кроме Админа"],
    },
    {
      name: "Настройки",
      description: "Профиль организации",
      icon: Settings,
      features: ["API ключи", "Данные компании"],
      connectedTo: ["Все кабинеты кроме Админа"],
    },
  ];

  return (
    <div className="space-y-8">
      {/* Заголовок */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Package className="h-6 w-6" />
            Бизнес-процессы
          </CardTitle>
          <p className="text-white/70">
            Схема всего проекта по кабинетам со связями между ними и детальная
            визуализация бизнес-процесса поставки товаров
          </p>
        </CardHeader>
      </Card>

      {/* Общая схема проекта */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-xl">
            🏗️ Схема всего проекта по кабинетам
          </CardTitle>
          <p className="text-white/70">
            Полная архитектура системы с типами кабинетов и их взаимосвязями
          </p>
        </CardHeader>
        <CardContent>
          {/* Mermaid диаграмма */}
          <div className="mb-8 bg-white/5 rounded-lg p-4 border border-white/10">
            <div className="text-center mb-4">
              <h3 className="text-white font-medium mb-2">
                Архитектурная схема проекта
              </h3>
              <p className="text-white/60 text-sm">
                Кабинеты, модули и связи между ними
              </p>
            </div>

            <div className="bg-white rounded-lg p-6 min-h-[500px] overflow-auto">
              <div className="mermaid text-sm">
                {`graph TB
                  %% Основные кабинеты
                  A["🏢 Админ<br/>Управление системой<br/>UI Kit, Пользователи, Категории"] --> B["🏪 Маркет<br/>Центральная площадка<br/>Поиск партнёров"]
                  
                  %% Типы кабинетов
                  C["🛒 Селлер<br/>Продажи на маркетплейсах<br/>• Мои поставки<br/>• Склад WB<br/>• Статистика"]
                  
                  D["📦 Фулфилмент<br/>Склады и логистика<br/>• Входящие поставки<br/>• Склад<br/>• Услуги<br/>• Сотрудники<br/>• Статистика"]
                  
                  E["🚛 Логистика<br/>Логистические решения<br/>• Перевозки<br/>• Заявки"]
                  
                  F["🏭 Оптовик<br/>Оптовые продажи<br/>• Отгрузки<br/>• Склад"]
                  
                  %% Общие модули
                  G["💬 Мессенджер<br/>Общение между участниками<br/>• Чаты<br/>• Файлы<br/>• Голосовые"]
                  
                  H["🤝 Партнёры<br/>Управление контрагентами<br/>• Заявки<br/>• Партнёрская сеть"]
                  
                  I["⚙️ Настройки<br/>Профиль организации<br/>• API ключи<br/>• Данные компании"]
                  
                  %% Связи между кабинетами
                  B --> C
                  B --> D  
                  B --> E
                  B --> F
                  
                  %% Бизнес-процессы
                  C -->|"Создаёт заказ"| D
                  C -->|"Заказывает товар"| F
                  F -->|"Одобряет заявку"| D
                  D -->|"Запрос логистики"| E
                  E -->|"Доставка"| D
                  D -->|"Готовый товар"| C
                  
                  %% Коммуникации
                  C --> G
                  D --> G
                  E --> G
                  F --> G
                  
                  %% Партнёрство
                  C --> H
                  D --> H
                  E --> H
                  F --> H
                  
                  %% Настройки доступны всем
                  C --> I
                  D --> I
                  E --> I
                  F --> I
                  
                  %% Стили для разных типов кабинетов
                  classDef admin fill:#4f46e5,stroke:#4338ca,stroke-width:3px,color:#fff
                  classDef market fill:#059669,stroke:#047857,stroke-width:3px,color:#fff
                  classDef seller fill:#7c3aed,stroke:#6d28d9,stroke-width:3px,color:#fff
                  classDef fulfillment fill:#dc2626,stroke:#b91c1c,stroke-width:3px,color:#fff
                  classDef logistics fill:#ea580c,stroke:#c2410c,stroke-width:3px,color:#fff
                  classDef wholesale fill:#0891b2,stroke:#0e7490,stroke-width:3px,color:#fff
                  classDef common fill:#374151,stroke:#1f2937,stroke-width:2px,color:#fff
                  
                  class A admin
                  class B market
                  class C seller
                  class D fulfillment
                  class E logistics
                  class F wholesale
                  class G,H,I common`}
              </div>
            </div>
          </div>

          {/* Описание кабинетов */}
          <div className="space-y-6">
            <h3 className="text-white text-lg font-medium">Типы кабинетов</h3>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {cabinets.map((cabinet) => {
                const IconComponent = cabinet.icon;
                return (
                  <div
                    key={cabinet.id}
                    className="p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-all duration-200"
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
                        <IconComponent className="h-5 w-5 text-white" />
                      </div>
                      <div>
                        <h4 className="text-white font-medium">
                          {cabinet.name}
                        </h4>
                        <p className="text-white/60 text-xs">
                          {cabinet.description}
                        </p>
                      </div>
                    </div>

                    <p className="text-white/70 text-sm mb-3">{cabinet.role}</p>

                    <div className="space-y-2">
                      <p className="text-white/50 text-xs font-medium">
                        Функции:
                      </p>
                      <div className="flex flex-wrap gap-1">
                        {cabinet.features.map((feature, index) => (
                          <Badge
                            key={index}
                            className={`${cabinet.color} border text-xs px-2 py-1`}
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Общие модули */}
          <div className="space-y-6 mt-8">
            <h3 className="text-white text-lg font-medium">Общие модули</h3>

            <div className="grid md:grid-cols-3 gap-4">
              {commonModules.map((module, index) => {
                const IconComponent = module.icon;
                return (
                  <div
                    key={index}
                    className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 hover:bg-gray-500/20 transition-all duration-200"
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="w-10 h-10 rounded-lg bg-gray-500/20 flex items-center justify-center">
                        <IconComponent className="h-5 w-5 text-gray-300" />
                      </div>
                      <div>
                        <h4 className="text-white font-medium">
                          {module.name}
                        </h4>
                        <p className="text-white/60 text-xs">
                          {module.description}
                        </p>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <p className="text-white/50 text-xs font-medium">
                        Функции:
                      </p>
                      <div className="flex flex-wrap gap-1 mb-2">
                        {module.features.map((feature, featureIndex) => (
                          <Badge
                            key={featureIndex}
                            className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs px-2 py-1"
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                      <p className="text-white/40 text-xs">
                        <span className="font-medium">Доступ:</span>{" "}
                        {module.connectedTo.join(", ")}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Ключевые связи */}
          <div className="space-y-4 mt-8">
            <h3 className="text-white text-lg font-medium">
              Ключевые бизнес-связи
            </h3>

            <div className="grid md:grid-cols-2 gap-4">
              <div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
                <h4 className="text-blue-400 font-medium mb-2 flex items-center gap-2">
                  <ArrowRight className="h-4 w-4" />
                  Процесс заказа
                </h4>
                <p className="text-white/70 text-sm">
                  Селлер → Маркет → Оптовик → Фулфилмент → Логистика
                </p>
              </div>

              <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
                <h4 className="text-green-400 font-medium mb-2 flex items-center gap-2">
                  <MessageCircle className="h-4 w-4" />
                  Коммуникации
                </h4>
                <p className="text-white/70 text-sm">
                  Все кабинеты связаны через Мессенджер для обмена информацией
                </p>
              </div>

              <div className="p-4 rounded-lg bg-purple-500/10 border border-purple-500/20">
                <h4 className="text-purple-400 font-medium mb-2 flex items-center gap-2">
                  <Handshake className="h-4 w-4" />
                  Партнёрство
                </h4>
                <p className="text-white/70 text-sm">
                  Система заявок и управления контрагентами между всеми
                  участниками
                </p>
              </div>

              <div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
                <h4 className="text-orange-400 font-medium mb-2 flex items-center gap-2">
                  <Settings className="h-4 w-4" />
                  Администрирование
                </h4>
                <p className="text-white/70 text-sm">
                  Админ-панель для управления пользователями, категориями и UI
                  Kit
                </p>
              </div>
            </div>
          </div>

          {/* Упрощенная схема потоков данных */}
          <div className="space-y-4 mt-8">
            <h3 className="text-white text-lg font-medium">
              Потоки данных между кабинетами
            </h3>

            <div className="bg-white/5 rounded-lg p-6 border border-white/10">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Основной поток заказа */}
                <div className="space-y-4">
                  <h4 className="text-blue-400 font-medium text-center mb-4">
                    📋 Основной поток заказа
                  </h4>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
                      <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-xs font-bold text-blue-400">
                        1
                      </div>
                      <div>
                        <p className="text-white text-sm font-medium">
                          Селлер создаёт заказ
                        </p>
                        <p className="text-white/60 text-xs">
                          Через маркет выбирает товары
                        </p>
                      </div>
                    </div>

                    <div className="flex justify-center">
                      <ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
                    </div>

                    <div className="flex items-center gap-3 p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
                      <div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-xs font-bold text-cyan-400">
                        2
                      </div>
                      <div>
                        <p className="text-white text-sm font-medium">
                          Оптовик одобряет
                        </p>
                        <p className="text-white/60 text-xs">
                          Подтверждает наличие товара
                        </p>
                      </div>
                    </div>

                    <div className="flex justify-center">
                      <ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
                    </div>

                    <div className="flex items-center gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
                      <div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-xs font-bold text-red-400">
                        3
                      </div>
                      <div>
                        <p className="text-white text-sm font-medium">
                          Фулфилмент принимает
                        </p>
                        <p className="text-white/60 text-xs">
                          Готовится к приёмке товара
                        </p>
                      </div>
                    </div>

                    <div className="flex justify-center">
                      <ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
                    </div>

                    <div className="flex items-center gap-3 p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
                      <div className="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-xs font-bold text-orange-400">
                        4
                      </div>
                      <div>
                        <p className="text-white text-sm font-medium">
                          Логистика доставляет
                        </p>
                        <p className="text-white/60 text-xs">
                          Транспортирует товар
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Коммуникационный поток */}
                <div className="space-y-4">
                  <h4 className="text-green-400 font-medium text-center mb-4">
                    💬 Коммуникации
                  </h4>
                  <div className="space-y-3">
                    <div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
                      <MessageCircle className="h-8 w-8 text-green-400 mx-auto mb-2" />
                      <p className="text-white text-sm font-medium mb-2">
                        Мессенджер
                      </p>
                      <p className="text-white/60 text-xs mb-3">
                        Центр всех коммуникаций
                      </p>

                      <div className="space-y-2">
                        <div className="flex items-center justify-between text-xs">
                          <span className="text-blue-400">Селлер</span>
                          <ArrowRight className="h-3 w-3 text-white/30" />
                          <span className="text-green-400">Мессенджер</span>
                        </div>
                        <div className="flex items-center justify-between text-xs">
                          <span className="text-red-400">Фулфилмент</span>
                          <ArrowRight className="h-3 w-3 text-white/30" />
                          <span className="text-green-400">Мессенджер</span>
                        </div>
                        <div className="flex items-center justify-between text-xs">
                          <span className="text-orange-400">Логистика</span>
                          <ArrowRight className="h-3 w-3 text-white/30" />
                          <span className="text-green-400">Мессенджер</span>
                        </div>
                        <div className="flex items-center justify-between text-xs">
                          <span className="text-cyan-400">Оптовик</span>
                          <ArrowRight className="h-3 w-3 text-white/30" />
                          <span className="text-green-400">Мессенджер</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Управленческий поток */}
                <div className="space-y-4">
                  <h4 className="text-purple-400 font-medium text-center mb-4">
                    🤝 Партнёрство
                  </h4>
                  <div className="space-y-3">
                    <div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
                      <Handshake className="h-8 w-8 text-purple-400 mx-auto mb-2" />
                      <p className="text-white text-sm font-medium mb-2">
                        Система партнёрства
                      </p>
                      <p className="text-white/60 text-xs mb-3">
                        Управление контрагентами
                      </p>

                      <div className="space-y-2 text-xs">
                        <div className="p-2 rounded bg-purple-500/10 border border-purple-500/20">
                          <p className="text-purple-400 font-medium">
                            Заявки на партнёрство
                          </p>
                          <p className="text-white/60">
                            Отправка и получение заявок
                          </p>
                        </div>
                        <div className="p-2 rounded bg-purple-500/10 border border-purple-500/20">
                          <p className="text-purple-400 font-medium">
                            Управление контрагентами
                          </p>
                          <p className="text-white/60">
                            Ведение базы партнёров
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
                      <Settings className="h-8 w-8 text-orange-400 mx-auto mb-2" />
                      <p className="text-white text-sm font-medium mb-2">
                        Настройки
                      </p>
                      <p className="text-white/60 text-xs">
                        Профиль и конфигурация
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Статистика участников */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">
            Участники процесса
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {actors.map((actor) => (
              <div key={actor.name} className="text-center">
                <Badge
                  className={`${actor.color} border px-3 py-2 text-xs font-medium`}
                >
                  {actor.name}
                </Badge>
                <p className="text-white/50 text-xs mt-1">
                  {actor.count} шагов
                </p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Визуализация процесса */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">
            Схема бизнес-процесса
          </CardTitle>
          <p className="text-white/70 text-sm">
            Полный цикл поставки товара от заказа до выставления счёта
          </p>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {processSteps.map((step, index) => {
              const IconComponent = step.icon;
              const isLast = index === processSteps.length - 1;

              return (
                <div key={step.id} className="relative">
                  <div className="flex items-start gap-4 p-4 rounded-lg bg-white/5 backdrop-blur border border-white/10 hover:bg-white/10 transition-all duration-200">
                    {/* Иконка и номер */}
                    <div className="flex-shrink-0 relative">
                      <div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center border border-white/20">
                        <IconComponent className="h-5 w-5 text-white" />
                      </div>
                      <div className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs font-bold text-white">
                        {step.id}
                      </div>
                    </div>

                    {/* Контент */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-4 mb-2">
                        <h4 className="text-white font-medium text-sm leading-tight">
                          {step.title}
                        </h4>
                        <Badge
                          className={`${getStatusColor(
                            step.status
                          )} border text-xs flex-shrink-0`}
                        >
                          {getStatusText(step.status)}
                        </Badge>
                      </div>

                      <p className="text-white/70 text-xs mb-3 leading-relaxed">
                        {step.description}
                      </p>

                      <div className="flex items-center gap-4 text-xs">
                        <div className="flex items-center gap-1">
                          <Users className="h-3 w-3 text-white/50" />
                          <span className="text-white/50">{step.actor}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <MapPin className="h-3 w-3 text-white/50" />
                          <span className="text-white/50">{step.location}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Стрелка к следующему шагу */}
                  {!isLast && (
                    <div className="flex justify-center py-2">
                      <ArrowRight className="h-4 w-4 text-white/30" />
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* Легенда статусов */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">Легенда статусов</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-4">
            <div className="flex items-center gap-2">
              <Badge className="bg-green-500/20 text-green-400 border-green-500/30 border">
                Выполнено
              </Badge>
              <span className="text-white/70 text-sm">Этап завершён</span>
            </div>
            <div className="flex items-center gap-2">
              <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 border">
                В процессе
              </Badge>
              <span className="text-white/70 text-sm">Выполняется сейчас</span>
            </div>
            <div className="flex items-center gap-2">
              <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 border">
                Ожидает
              </Badge>
              <span className="text-white/70 text-sm">Ожидает выполнения</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Диаграмма процесса */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">
            Диаграмма бизнес-процесса
          </CardTitle>
          <p className="text-white/70 text-sm">
            Схематическое представление всех этапов процесса поставки
          </p>
        </CardHeader>
        <CardContent>
          <div className="bg-white/5 rounded-lg p-4 border border-white/10">
            <p className="text-white/70 text-sm mb-4 text-center">
              Полная схема процесса от создания заказа до получения счёта
            </p>
            <div className="text-xs text-white/50 space-y-1">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded bg-blue-500"></div>
                <span>Селлер - создание и отслеживание заказа</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded bg-green-500"></div>
                <span>Поставщик - одобрение заявки</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded bg-purple-500"></div>
                <span>Фулфилмент - обработка и хранение</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded bg-orange-500"></div>
                <span>Логистика - доставка товара</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded bg-gray-500"></div>
                <span>Система - автоматические операции</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Схема взаимодействия систем */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">
            Схема взаимодействия систем
          </CardTitle>
          <p className="text-white/70 text-sm">
            Упрощённая схема движения данных между кабинетами
          </p>
        </CardHeader>
        <CardContent>
          <div className="bg-white/5 rounded-lg p-6 border border-white/10">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {/* Селлер */}
              <div className="text-center">
                <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-blue-500/20 flex items-center justify-center border-2 border-blue-500/30">
                  <ShoppingCart className="h-8 w-8 text-blue-400" />
                </div>
                <h4 className="text-blue-400 font-medium mb-2">Селлер</h4>
                <div className="text-xs text-white/70 space-y-1">
                  <div>• Создаёт заказ</div>
                  <div>• Отслеживает статус</div>
                  <div>• Получает счёт</div>
                </div>
              </div>

              {/* Поставщик */}
              <div className="text-center">
                <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-green-500/20 flex items-center justify-center border-2 border-green-500/30">
                  <Users className="h-8 w-8 text-green-400" />
                </div>
                <h4 className="text-green-400 font-medium mb-2">Поставщик</h4>
                <div className="text-xs text-white/70 space-y-1">
                  <div>• Получает заявку</div>
                  <div>• Одобряет поставку</div>
                </div>
              </div>

              {/* Фулфилмент */}
              <div className="text-center">
                <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-purple-500/20 flex items-center justify-center border-2 border-purple-500/30">
                  <Warehouse className="h-8 w-8 text-purple-400" />
                </div>
                <h4 className="text-purple-400 font-medium mb-2">Фулфилмент</h4>
                <div className="text-xs text-white/70 space-y-1">
                  <div>• Принимает товар</div>
                  <div>• Контролирует качество</div>
                  <div>• Управляет складом</div>
                </div>
              </div>

              {/* Логистика */}
              <div className="text-center">
                <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-orange-500/20 flex items-center justify-center border-2 border-orange-500/30">
                  <Truck className="h-8 w-8 text-orange-400" />
                </div>
                <h4 className="text-orange-400 font-medium mb-2">Логистика</h4>
                <div className="text-xs text-white/70 space-y-1">
                  <div>• Подтверждает заявку</div>
                  <div>• Доставляет товар</div>
                </div>
              </div>
            </div>

            {/* Стрелки взаимодействия */}
            <div className="mt-8 flex justify-center">
              <div className="flex items-center gap-2 text-white/50 text-xs">
                <ArrowRight className="h-4 w-4" />
                <span>Передача данных</span>
                <ArrowRight className="h-4 w-4" />
                <span>Смена статуса</span>
                <ArrowRight className="h-4 w-4" />
                <span>Уведомления</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Ключевые точки интеграции */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white text-lg">
            Ключевые точки интеграции
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
              <h4 className="text-blue-400 font-medium mb-2 flex items-center gap-2">
                <ShoppingCart className="h-4 w-4" />
                Кабинет селлера
              </h4>
              <p className="text-white/70 text-sm">
                Создание заказа, отслеживание статуса, получение счёта
              </p>
            </div>

            <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
              <h4 className="text-green-400 font-medium mb-2 flex items-center gap-2">
                <Users className="h-4 w-4" />
                Кабинет поставщика
              </h4>
              <p className="text-white/70 text-sm">
                Получение и одобрение заявок на поставку
              </p>
            </div>

            <div className="p-4 rounded-lg bg-purple-500/10 border border-purple-500/20">
              <h4 className="text-purple-400 font-medium mb-2 flex items-center gap-2">
                <Warehouse className="h-4 w-4" />
                Кабинет фулфилмента
              </h4>
              <p className="text-white/70 text-sm">
                Управление поставками, приёмка, подготовка, контроль качества
              </p>
            </div>

            <div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
              <h4 className="text-orange-400 font-medium mb-2 flex items-center gap-2">
                <Truck className="h-4 w-4" />
                Кабинет логистики
              </h4>
              <p className="text-white/70 text-sm">
                Подтверждение заявок и организация доставки
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}