import { Link } from 'react-router-dom'
import { Settings, UserCog, Package, ShoppingCart, ArrowRight, CheckCircle2, BarChart3 } from 'lucide-react'
import { PageHeader } from '@/components/PageHeader'
import { useOnboardingProgress } from '@/lib/useOnboardingProgress'

interface StepCard {
  done: boolean
  badge: string
  title: string
  description: string
  ctaLabel: string
  ctaTo: string
  ctaDisabled?: boolean
  icon: React.ComponentType<{ className?: string }>
}

export function OnboardingPage() {
  const p = useOnboardingProgress()

  const cards: StepCard[] = [
    {
      done: p.orgConfigured,
      badge: 'Запуск магазина',
      title: 'Основные настройки бизнеса',
      description: 'Укажите название, страну и валюту. От этого зависят валюта цен и ставка НДС в карточках товаров.',
      ctaLabel: p.orgConfigured ? 'Изменить настройки' : 'Перейти к настройкам',
      ctaTo: '/settings/organization',
      icon: Settings,
    },
    {
      done: p.hasEmployees,
      badge: 'Команда магазина',
      title: 'Добавьте кассира, кладовщика и других сотрудников',
      description: 'Каждому сотруднику — своя роль с набором прав. Кассирам можно привязать конкретные кассы.',
      ctaLabel: p.hasEmployees ? 'Управление сотрудниками' : 'Добавить сотрудников',
      ctaTo: '/settings/employees',
      icon: UserCog,
    },
    {
      done: p.hasProducts,
      badge: 'Каталог',
      title: 'Заведите товары вручную или импортируйте из МойСклад',
      description: 'Товары — основа всего. Импорт подтянет наименования, штрихкоды, цены и остатки одним нажатием.',
      ctaLabel: p.hasProducts ? 'Перейти в каталог' : 'Добавить товары',
      ctaTo: p.hasProducts ? '/catalog/products' : '/admin/import/moysklad',
      icon: Package,
    },
    {
      done: p.hasSupplies,
      badge: 'Закупки',
      title: 'Создайте первую приёмку товара',
      description: 'Проведённая приёмка кладёт товар на склад и обновляет себестоимость. Сканируйте штрихкоды или ищите вручную.',
      ctaLabel: p.hasSupplies ? 'К приёмкам' : 'Создать приёмку',
      ctaTo: p.hasSupplies ? '/purchases/supplies' : '/purchases/supplies/new',
      icon: ShoppingCart,
    },
  ]

  return (
    <div className="h-full overflow-auto">
      <div className="max-w-5xl mx-auto p-4 sm:p-6 space-y-5 sm:space-y-6">
        <PageHeader
          title="Первые шаги в Food Market"
          description="Складской учёт, закупки и продажи в одной системе. Пройдите 4 шага — и можно работать."
        />

        {/* Прогресс-плашка */}
        <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
          <div className="flex items-center justify-between gap-3 mb-3">
            <div>
              <div className="text-sm text-slate-500">Готовность системы</div>
              <div className="text-xl font-semibold">{p.doneCount} из {p.totalCount} шагов</div>
            </div>
            {p.allDone ? (
              <Link
                to="/dashboard"
                className="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-[var(--color-brand)] text-white text-sm font-medium hover:bg-[var(--color-brand-hover)]"
              >
                <BarChart3 className="w-4 h-4" /> Открыть дашборд
              </Link>
            ) : (
              <span className="text-2xl font-bold text-[var(--color-brand)]">{p.overall}%</span>
            )}
          </div>
          <div className="h-2 rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden">
            <div
              className="h-full bg-[var(--color-brand)] transition-all"
              style={{ width: `${p.overall}%` }}
            />
          </div>
          {p.allDone && (
            <div className="mt-3 text-sm text-emerald-600 inline-flex items-center gap-1.5">
              <CheckCircle2 className="w-4 h-4" /> 🎉 Готово! Система настроена и готова к работе.
            </div>
          )}
        </section>

        {/* Карточки шагов */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5">
          {cards.map((c) => (
            <article
              key={c.title}
              className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 flex flex-col gap-3"
            >
              <div className="flex items-start gap-3">
                <div className={`w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0
                  ${c.done ? 'bg-[var(--color-brand-light)] text-[var(--color-brand)]' : 'bg-slate-100 dark:bg-slate-800 text-slate-500'}`}>
                  {c.done ? <CheckCircle2 className="w-6 h-6" /> : <c.icon className="w-6 h-6" />}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-xs uppercase tracking-wide text-slate-500">{c.badge}</div>
                  <h3 className="text-base font-semibold mt-0.5">{c.title}</h3>
                </div>
              </div>
              <p className="text-sm text-slate-600 dark:text-slate-400 flex-1">{c.description}</p>
              {c.ctaDisabled ? (
                <button disabled className="inline-flex items-center gap-1.5 self-start px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm text-slate-400 cursor-not-allowed">
                  {c.ctaLabel}
                </button>
              ) : (
                <Link
                  to={c.ctaTo}
                  className="inline-flex items-center gap-1.5 self-start px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-800"
                >
                  {c.ctaLabel} <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              )}
            </article>
          ))}
        </div>

        {/* Поддержка */}
        <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 p-5">
          <h3 className="text-sm font-semibold mb-1">Помощь и поддержка</h3>
          <p className="text-sm text-slate-600 dark:text-slate-400">
            Возникли вопросы по настройке или работе системы? Напишите администратору
            или загляните в документацию проекта на Forgejo.
          </p>
        </section>
      </div>
    </div>
  )
}
