import React from 'react';
import { Badge, MaturityBadge, Button } from '../../shared/ui';
import { CAPABILITIES_LIST } from '../../core/capabilities/types';
import { useDemoStore } from '../../mock/store';

export const AppsCatalogModule: React.FC = () => {
  const { customCapabilities, toggleCapability } = useDemoStore();

  return (
    <div className="space-y-4 animate-fade-in">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-krona-surface p-3.5 rounded-xl border border-krona-border shadow-krona-soft">
        <div>
          <div className="flex items-center gap-2">
            <h2 className="text-sm font-bold text-krona-primary">
              Каталог приложений & Модульная экосистема Кроны
            </h2>
            <MaturityBadge level="demo" size="sm" />
          </div>
          <p className="text-xs text-krona-secondary mt-0.5">
            Подключайте и отключайте функциональные блоки для адаптации платформы под новые ниши
          </p>
        </div>

        <Badge variant="gold" size="md">Всего модулей: {CAPABILITIES_LIST.length}</Badge>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
        {CAPABILITIES_LIST.map((app) => {
          const isEnabled = customCapabilities[app.id];

          return (
            <div
              key={app.id}
              className="p-4 rounded-xl border border-krona-border bg-krona-surface shadow-krona-soft flex flex-col justify-between space-y-3"
            >
              <div>
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-[10px] uppercase font-bold text-krona-secondary">{app.category}</span>
                  <Badge variant={isEnabled ? 'green' : 'neutral'} size="sm">
                    {isEnabled ? 'Активен' : 'Отключен'}
                  </Badge>
                </div>
                <h4 className="text-xs font-bold text-krona-primary">{app.name}</h4>
                <p className="text-[11px] text-krona-secondary mt-1 leading-relaxed">
                  {app.description}
                </p>
              </div>

              <div className="pt-2 border-t border-krona-border/50 flex justify-end">
                <Button
                  variant={isEnabled ? 'secondary' : 'primary'}
                  size="sm"
                  className="w-full text-xs"
                  onClick={() => toggleCapability(app.id)}
                >
                  {isEnabled ? 'Отключить модуль' : 'Включить в контур'}
                </Button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};