'use client';
import { lazy, Suspense, useEffect, useState, type CSSProperties } from 'react';
import Link from 'next/link';
import {
  ArrowLeft,
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers,
  Calendar,
  Focus,
  Folder,
  MessageCircle,
} from 'lucide-react';
import { templates, styles } from '@/lib/catalog';
import { products, money } from '@/lib/commerce';
import { CatalogDemo, useCart } from './demos';
const Thumbnail = lazy(() => import('./model-thumbnail'));
function Model({ id, color = '#b8a487' }: { id: string; color?: string }) {
  return (
    <Suspense fallback={<div className="thumbnail-placeholder" />}>
      <Thumbnail object={id} color={color} />
    </Suspense>
  );
}
export function TemplateSite({
  id,
  page = 'home',
}: {
  id: string;
  page?: string;
}) {
  const template = templates.find((t) => t.id === id)!;
  const style = styles.find((s) => s.id === template.style)!;
  const [selectedProduct, setSelectedProduct] = useState('vase');
  const { add, count } = useCart();
  const [added, setAdded] = useState(false);
  useEffect(() => {
    const id = new URLSearchParams(location.search).get('id');
    if (id && products.some((p) => p.id === id)) setSelectedProduct(id);
  }, [page]);
  const p = products.find((p) => p.id === selectedProduct)!;
  const routes =
    id === 'store'
      ? ['home', 'product', 'cart']
      : id === 'saas'
        ? ['home', 'features', 'pricing']
        : id === 'journal'
          ? ['home', 'article', 'about']
          : id === 'cafe'
            ? ['home', 'menu', 'about']
            : ['home', 'projects', 'about'];
  const url = (p: string) => `/templates/${id}${p === 'home' ? '' : '/' + p}`;
  const vars = {
    '--sample-bg': style.bg,
    '--sample-fg': style.fg,
    '--sample-accent': style.accent,
    '--sample-radius': style.radius,
    '--sample-font':
      style.font === 'serif' ? 'Georgia, serif' : 'Manrope, sans-serif',
  } as CSSProperties;
  return (
    <div className={`template-shell ${id}-world`} style={vars}>
      <div className="template-bar">
        <Link href="/templates">
          <ArrowLeft size={13} />К библиотеке WEBCRAFT
        </Link>
        <span>
          Учебный проект · {template.pages.length} страницы · {style.name}
        </span>
        <a href={`/bundles/template-${id}.zip`} download>
          Скачать исходники <ArrowUpRight size={13} />
        </a>
      </div>
      <nav className="template-nav" aria-label="Страницы примера">
        <Link href={url('home')} className="template-logo">
          {template.name}
        </Link>
        <div>
          {routes.map((r, i) => (
            <Link
              href={url(r)}
              key={r}
              aria-current={r === page ? 'page' : undefined}
            >
              {template.pages[i]}
              {r === 'cart' ? ` (${count})` : ''}
            </Link>
          ))}
        </div>
      </nav>
      <main className="template-body">
        {id === 'store' ? (
          page === 'product' ? (
            <div className="product-page">
              <Model id={p.shape} color={p.color} />
              <div>
                <span>{p.category} / Учебная коллекция</span>
                <h1>{p.name}</h1>
                <p>{p.description}</p>
                <strong>{money(p.price)}</strong>
                <p>В наличии в демо: {p.stock} шт.</p>
                <button
                  className="template-cta"
                  onClick={() => {
                    add(p.id);
                    setAdded(true);
                  }}
                >
                  {added ? 'Добавлено в корзину' : 'Добавить в корзину'}
                  {added ? <Check size={18} /> : <ArrowRight size={18} />}
                </button>
                <Link className="subtle" href={url('cart')}>
                  Перейти к корзине <ArrowUpRight size={15} />
                </Link>
              </div>
            </div>
          ) : (
            <CatalogDemo full onlyCart={page === 'cart'} />
          )
        ) : id === 'journal' ? (
          page === 'home' ? (
            <>
              <h1 className="journal-title">A little more space.</h1>
              <div className="journal-feature">
                <Model id="vase" color="#aab4a1" />
                <div>
                  <h2>О вещах, с которыми хочется жить.</h2>
                  <p>
                    Форма, пауза и повседневность. Заметки о предметах, которые
                    делают пространство нашим.
                  </p>
                  <Link className="template-cta" href={url('article')}>
                    Читать материал <ArrowRight size={17} />
                  </Link>
                </div>
              </div>
              <section className="template-section">
                <h2>В поле зрения</h2>
                <div className="template-work-grid">
                  {[
                    ['mug', 'Маленькие ритуалы'],
                    ['chair', 'Пространство для паузы'],
                    ['ring', 'Значение деталей'],
                  ].map(([model, title]) => (
                    <article key={model}>
                      <Model id={model} />
                      <h3>{title}</h3>
                      <Link href={url('article')}>
                        Открыть эссе <ArrowUpRight size={14} />
                      </Link>
                    </article>
                  ))}
                </div>
              </section>
            </>
          ) : (
            <article className="template-copy">
              <h1>
                {page === 'article'
                  ? 'Предмет и пауза.'
                  : 'На полях повседневности.'}
              </h1>
              <p>
                {page === 'article'
                  ? 'Иногда пространство меняет одна вещь. Невысокая ваза на пустом столе, удобный стул у окна или чашка, которую выбираешь каждое утро.'
                  : 'MARGIN — учебный редакционный проект о дизайне и повседневной культуре.'}
              </p>
              <Model id="vase" />
              <h2>Форма становится привычкой</h2>
              <p>
                Хороший предмет не требует постоянного внимания. Он поддерживает
                ритуал: удобно ложится в руку, занимает ровно столько места,
                сколько нужно, и со временем становится частью жизни.
              </p>
              <p>
                В редакционном интерфейсе работает тот же принцип. Достаточная
                ширина строки, ясная иерархия и спокойный ритм оставляют место
                для мысли. Изображение не иллюстрирует каждое предложение — оно
                предлагает ещё один взгляд.
              </p>
              <Link href={url('home')}>
                Вернуться к журналу <ArrowLeft size={16} />
              </Link>
            </article>
          )
        ) : id === 'cafe' ? (
          page === 'menu' ? (
            <>
              <div className="template-copy">
                <h1>
                  Something good
                  <br />
                  is brewing.
                </h1>
                <p>
                  Учебное меню. Здесь проверяем категории, длинные названия и
                  читаемость цен.
                </p>
              </div>
              <div className="template-menu">
                {[
                  ['Эспрессо', 'Плотный и короткий', '180 ₽'],
                  ['Флэт уайт', 'Двойной эспрессо и молоко', '290 ₽'],
                  ['Фильтр дня', 'Яркий вкус без спешки', '240 ₽'],
                  ['Какао', 'Тёмный шоколад, тёплое молоко', '310 ₽'],
                  [
                    'Миндальный круассан',
                    'Хрустящая корочка, мягкая середина',
                    '320 ₽',
                  ],
                  ['Тост с авокадо', 'Хлеб на закваске и зелень', '490 ₽'],
                ].map(([name, desc, price]) => (
                  <div key={name}>
                    <span>
                      <h3>{name}</h3>
                      <p>{desc}</p>
                    </span>
                    <b>{price}</b>
                  </div>
                ))}
              </div>
            </>
          ) : page === 'about' ? (
            <div className="template-copy">
              <h1>A place to slow down.</h1>
              <p>
                COMMON Grounds — концепция небольшой кофейни. Простое меню,
                знакомые ритуалы и место, где можно задержаться.
              </p>
              <p>
                В настоящем проекте здесь появятся реальные фотографии команды,
                адрес, часы работы и маршрут. Контакты не выдуманы ради
                заполнения шаблона.
              </p>
              <Link href={url('menu')}>
                Посмотреть меню <ArrowRight size={16} />
              </Link>
            </div>
          ) : (
            <div className="template-hero">
              <div>
                <h1>
                  Good coffee.
                  <br />
                  Better company.
                </h1>
                <p>
                  Небольшая пауза в большом дне. Кофе, что согревает, и
                  пространство, где можно никуда не спешить.
                </p>
                <Link className="template-cta" href={url('menu')}>
                  Наше меню <ArrowRight size={17} />
                </Link>
              </div>
              <div className="template-hero-visual">
                <Model id="mug" color="#c68656" />
              </div>
            </div>
          )
        ) : id === 'saas' ? (
          page === 'pricing' ? (
            <>
              <div className="template-copy">
                <h1>A plan for your pace.</h1>
                <p>
                  Пример страницы тарифов. Цены иллюстративные; кнопки открывают
                  описание продукта, покупка не выполняется.
                </p>
              </div>
              <div className="template-pricing">
                {[
                  [
                    'Personal',
                    '0 ₽',
                    'Один человек, один спокойный рабочий день.',
                  ],
                  ['Team', '990 ₽', 'Общие проекты и согласованный ритм.'],
                  [
                    'Studio',
                    '2 490 ₽',
                    'Несколько команд и единое пространство.',
                  ],
                ].map(([title, price, description]) => (
                  <article key={title}>
                    <h2>{title}</h2>
                    <strong>
                      {price}
                      <small> / месяц</small>
                    </strong>
                    <p>{description}</p>
                    <Link href={url('features')} className="template-cta">
                      Посмотреть возможности
                    </Link>
                  </article>
                ))}
              </div>
            </>
          ) : page === 'features' ? (
            <>
              <div className="template-copy">
                <h1>
                  Everything has
                  <br />
                  its place.
                </h1>
                <p>
                  Учебная витрина SaaS: представляем возможности через реальные
                  задачи, без выдуманных показателей и клиентов.
                </p>
              </div>
              <div className="template-work-grid">
                {[
                  [
                    'Проекты',
                    'Соберите задачи по смыслу, а не по месту в списке.',
                  ],
                  ['Обсуждения', 'Оставляйте контекст рядом с решением.'],
                  [
                    'Фокус',
                    'Выбирайте главное на сегодня и возвращайтесь к нему.',
                  ],
                ].map(([title, desc]) => (
                  <article key={title}>
                    <h3>{title}</h3>
                    <p>{desc}</p>
                  </article>
                ))}
              </div>
              <Link className="template-cta" href={url('pricing')}>
                Сравнить планы <ArrowRight size={16} />
              </Link>
            </>
          ) : (
            <div className="template-hero">
              <div>
                <h1>
                  Your work.
                  <br />
                  In focus.
                </h1>
                <p>
                  Проекты, решения и следующий шаг. Всё, что нужно небольшой
                  команде, чтобы двигаться в одном направлении.
                </p>
                <Link className="template-cta" href={url('features')}>
                  Исследовать продукт <ArrowRight size={17} />
                </Link>
              </div>
              <div className="template-hero-visual">
                <div className="saas-feature-list">
                  {[
                    [Folder, 'Проект запуска'],
                    [Calendar, 'На этой неделе'],
                    [Focus, 'В фокусе сегодня'],
                    [MessageCircle, 'Контекст решений'],
                  ].map(([Icon, title]) => {
                    const I = Icon as typeof Folder;
                    return (
                      <div key={title as string}>
                        <I size={21} />
                        <span>{title as string}</span>
                        <Check size={16} />
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          )
        ) : page === 'about' ? (
          <article className="template-copy">
            <h1>
              {id === 'studio'
                ? 'Curiosity is a practice.'
                : 'Space for the way we live.'}
            </h1>
            <p>
              {id === 'studio'
                ? 'FORMA — учебная концепция независимой дизайн-студии. Мы исследуем, как типографика, движение и материалы могут выражать характер проекта.'
                : 'STILL — учебная концепция архитектурного бюро. Свет, пропорции и материал складываются в пространство, которое остаётся спокойным, даже когда жизнь меняется.'}
            </p>
            <h2>Сначала вопрос, затем форма</h2>
            <p>
              Каждый проект начинается с контекста: для кого он существует, где
              его встречают и какое действие он поддерживает. Ответы
              превращаются в композицию и проверяются в масштабе реального
              использования.
            </p>
            <Link href={url('projects')}>
              Посмотреть проекты <ArrowRight size={16} />
            </Link>
          </article>
        ) : (
          <>
            {page === 'home' && (
              <div className="template-hero">
                <div>
                  <h1>
                    {id === 'studio' ? (
                      <>
                        We give
                        <br />
                        ideas form.
                      </>
                    ) : (
                      <>
                        Space.
                        <br />
                        Light.
                        <br />
                        Stillness.
                      </>
                    )}
                  </h1>
                  <p>
                    {id === 'studio'
                      ? 'Дизайн, в котором мысль становится видимой. Айдентика, цифровые продукты и предметы с собственным характером.'
                      : 'Архитектура, которая начинается с человека. Пространства для работы, жизни и простой ежедневной паузы.'}
                  </p>
                  <Link className="template-cta" href={url('projects')}>
                    Избранные проекты <ArrowUpRight size={18} />
                  </Link>
                </div>
                <div className="template-hero-visual">
                  <Model
                    id={id === 'studio' ? 'knot' : 'tower'}
                    color={id === 'studio' ? '#f8e7c8' : '#c8bdac'}
                  />
                </div>
              </div>
            )}
            <section className={page === 'home' ? 'template-section' : ''}>
              <h2>
                {page === 'projects' ? 'Selected work.' : 'Продолжение мысли'}
              </h2>
              <p className="template-project-note">
                Концептуальные проекты для демонстрации структуры.
              </p>
              <div className="template-work-grid">
                {(id === 'studio'
                  ? [
                      ['knot', 'Continuum', 'Цифровая форма'],
                      ['bottle', 'Essence', 'Предметная айдентика'],
                      ['speaker', 'Frequency', 'Продуктовый язык'],
                    ]
                  : [
                      ['tower', 'Vertical', 'Жилое пространство'],
                      ['chair', 'Quiet room', 'Предмет и интерьер'],
                      ['vase', 'Inner courtyard', 'Пропорции и материал'],
                    ]
                ).map(([model, title, type]) => (
                  <article key={title}>
                    <Model id={model} />
                    <h3>{title}</h3>
                    <p>{type} / Концепт</p>
                    <Link href={url('about')}>
                      Подход к проекту <ArrowUpRight size={14} />
                    </Link>
                  </article>
                ))}
              </div>
            </section>
          </>
        )}
      </main>
      <footer className="template-footer">
        <Link href={url('home')}>{template.name}</Link>
        <span>Демонстрационный сайт из библиотеки WEBCRAFT.</span>
        <Link href="/templates">
          Все проекты <ArrowUpRight size={12} />
        </Link>
      </footer>
    </div>
  );
}