import React from "react";
import { Badge } from "../UI/Badge";
import { Button } from "../UI/Button";
import { Panel } from "../UI/Panel";

const statusConfig = {
  online: { label: "Онлайн", tone: "accent" },
  offline: { label: "Офлайн", tone: "warning" },
  installed: { label: "Установлено", tone: "accent" },
  browser: { label: "В браузере", tone: "neutral" },
  ready: { label: "Офлайн готов", tone: "accent" },
  pending: { label: "Кешируется", tone: "neutral" },
};

export const PwaDemoPanel = ({
  isOnline,
  isInstallAvailable,
  isInstalled,
  isOfflineReady,
  onInstall,
}) => {
  const networkBadge = isOnline ? statusConfig.online : statusConfig.offline;
  const installBadge = isInstalled ? statusConfig.installed : statusConfig.browser;
  const offlineBadge = isOfflineReady ? statusConfig.ready : statusConfig.pending;

  return (
    <Panel className="p-6">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <p className="text-sm uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
            Демо и PWA
          </p>
          <h3 className="text-xl font-semibold">Что это и зачем для демонстрации</h3>
          <p className="max-w-3xl text-sm leading-6 text-[var(--color-text-muted)]">
            PWA превращает веб-приложение в устанавливаемый рабочий экран: его можно открыть как
            отдельное приложение и использовать для показа сценариев после первого запуска.
          </p>
        </div>

        {isInstallAvailable ? (
          <Button variant="secondary" onClick={onInstall}>
            Установить приложение
          </Button>
        ) : null}
      </div>

      <div className="mt-5 flex flex-wrap gap-2">
        <Badge tone={networkBadge.tone}>{networkBadge.label}</Badge>
        <Badge tone={installBadge.tone}>{installBadge.label}</Badge>
        <Badge tone={offlineBadge.tone}>{offlineBadge.label}</Badge>
      </div>

      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        <div className="rounded-[24px] bg-[var(--color-surface-strong)] p-5">
          <h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
            Что это
          </h4>
          <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
            Это PWA-версия панели: её можно установить на ноутбук или телефон и запускать без
            адресной строки браузера.
          </p>
        </div>

        <div className="rounded-[24px] bg-[var(--color-surface-strong)] p-5">
          <h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
            Зачем для демо
          </h4>
          <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
            После первого запуска оболочка кешируется, поэтому дашборд и демо-данные можно
            показать даже без интернета.
          </p>
        </div>
      </div>

      <div className="mt-4 rounded-[24px] border border-[var(--color-border)] bg-[var(--color-accent-soft)] p-5">
        <p className="text-sm font-medium">Как работает офлайн-демо</p>
        <p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
          Демо-данные доступны локально: роли, вход по коду `000000`, заказы, статусы и обзор
          дашборда продолжают работать после первого запуска.
        </p>
        <p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
          Интеграции и рабочая база требуют подключения, поэтому Supabase и боевые сценарии
          остаются сетевыми.
        </p>
      </div>
    </Panel>
  );
};