// cases.jsx — кейсы участников (CJM Насти, п. 3.7; решения Саши 02.10.2026).
// «Кейсы» в меню — один раздел: кейсы участников из базы данных + материалы кластера
// «Кейсы» из базы знаний (карточками рядом, с пометкой «от основателей»).
//   CasesFeed    — лента с фильтрами (тип чипами; блок, сфера, цель списками)
//   CasePage     — страница кейса (?view=case&id=)
//   CaseForm     — «Опубликовать кейс» по шаблону, превью, черновик в браузере (?view=case_new[&edit=id])
//   NewFromMembers — блок главной; CasesByTopic — «Кейсы по теме» в материале; MyCases — профиль
// Баллы за кейс — после проверки командой. Витрины на hakku.ai пока нет (решение отложено),
// но согласие автора хранится и уходит в GET /api/public/cases.
// TODO(telegram): анонс нового кейса в чат сообщества — когда будет токен бота.

const CASE_TYPE = { product: ['Продукт', 'blue'], prompt: ['Промпт', 'mag'], story: ['История', 'orange'], video: ['Видеоразбор', 'ink2'] };
const CASE_STATUS = { pending: ['На проверке', 'orange'], published: ['Опубликован', 'green'], returned: ['Вернули с комментарием', 'mag'], hidden: ['Скрыт командой', ''] };
const casesCfg = () => CFG().cases || {};
const caseTypes = () => casesCfg().types || Object.entries(CASE_TYPE).map(([id, [title]]) => ({ id, title }));
const sphereTitleOf = (id) => ((CFG().spheres || []).find(s => s.id === id) || {}).title || '';
const goalTitleById = (id) => ((CFG().goals || []).find(g => g.id === id) || {}).title || '';
const AUTHORS_KB = { alex: 'Александр Д.', nikolai: 'Николай П.', sergei: 'Сергей Е.', nastya: 'Настя' };

function TypeBadge({ type }) {
  const t = CASE_TYPE[type] || ['Кейс', ''];
  return <span className={`os-badge ${t[1]}`}>{t[0]}</span>;
}

function CaseCover({ c, big = false }) {
  if (c.cover_url) return (
    <div className={`cm-ccover has-img${big ? ' big' : ''}`}>
      <img src={c.cover_url} alt="" loading="lazy"/>
      {c.type === 'video' && <span className="cm-ccover-play">{Icons.play()}</span>}
    </div>
  );
  return (
    <div className={`cm-ccover t-${c.type}${big ? ' big' : ''}`} aria-hidden="true">
      <div className="cm-ccover-sheet">
        <i className="l1"/><i className="l2"/><i className="l3"/>
        {c.type !== 'prompt' && <span className="cm-ccover-bars"><b/><b/><b className="hi"/><b/><b/></span>}
      </div>
      {c.type === 'video' && <span className="cm-ccover-play">{Icons.play()}</span>}
    </div>
  );
}

function CaseCard({ c, nav, compact = false }) {
  const tools = c.tools || [];
  return (
    <a className="cm-ccard" href={`/os/?view=case&id=${c.id}`} onClick={(e) => { e.preventDefault(); nav('case', { id: c.id }); }}>
      <CaseCover c={c}/>
      <div className="cm-ccard-b">
        <div className="cm-ccard-meta"><TypeBadge type={c.type}/>{c.block && <span>{clusterTitle(c.block)}</span>}</div>
        <div className="cm-ccard-t">{c.title}</div>
        <div className="cm-ccard-r"><b>Результат:</b> {c.result}</div>
        {!compact && tools.length > 0 && (
          <div className="cm-tags">{tools.slice(0, 3).map(t => <span key={t} className="cm-tag">{t}</span>)}{tools.length > 3 && <span className="cm-tag">+{tools.length - 3}</span>}</div>
        )}
        <div className="cm-ccard-a">
          <Avatar name={c.author.name} initials={c.author.initials} url={c.author.avatar_url} size={22}/>
          <span>{[c.author.name, c.author.sphere].filter(Boolean).join(' · ')}</span>
        </div>
      </div>
    </a>
  );
}
// материал кластера «Кейсы» из базы знаний — в той же ленте
function KbCaseCard({ it, nav }) {
  const who = (it.authors || []).map(a => AUTHORS_KB[a]).filter(Boolean);
  return (
    <a className="cm-ccard kb" href={`/os/?view=kb&m=${it.slug}`} onClick={(e) => { e.preventDefault(); nav('kb', { m: it.slug }); }}>
      <div className="cm-ccover kbc" aria-hidden="true"><span>{Icons.book()}</span><small>База знаний</small></div>
      <div className="cm-ccard-b">
        <div className="cm-ccard-meta"><span className="os-badge">Кейс</span><span>от основателей</span>{it.locked && <LockBadge lock={it.lock || 'members'}/>}</div>
        <div className="cm-ccard-t">{it.title}</div>
        <div className="cm-ccard-r">{it.summary}</div>
        <div className="cm-ccard-a"><span className="cm-hakku-dot"><HakkuGlyph size={12} color="var(--paper)"/></span><span>{who.length ? who.join(', ') : 'Команда hakku'}</span></div>
      </div>
    </a>
  );
}

const pubCaseBtn = (nav, label = 'Опубликовать кейс', cls = 'os-btn') => (
  <button type="button" className={cls} onClick={() => nav('case_new')}>{Icons.plus()} {label}</button>
);

/* ---- лента ------------------------------------------------------------------ */
function Select({ label, value, onChange, options }) {
  return (
    <label className={`cm-select${value ? ' on' : ''}`}>
      <select value={value || ''} onChange={e => onChange(e.target.value || null)} aria-label={label}>
        <option value="">{label}</option>
        {options.map(o => <option key={o.id} value={o.id}>{o.title}</option>)}
      </select>
    </label>
  );
}
function CasesFeed({ nav, params = {} }) {
  const [f, setF] = React.useState({ type: params.type || null, block: params.c || null, sphere: null, goal: null });
  const [page, setPage] = React.useState(1);
  const q = new URLSearchParams(Object.entries(f).filter(([, v]) => v)).toString();
  const [data] = useApi('/api/cases' + (q ? '?' + q : ''));
  const [mine] = useApi('/api/cases?mine=1');
  const set = (k, v) => { setF(x => ({ ...x, [k]: v })); setPage(1); };
  const any = Object.values(f).some(Boolean);
  const list = data ? data.cases : [];
  const kbList = data ? data.kb : [];
  const shown = list.slice(0, page * 9);
  const pending = mine ? mine.cases.filter(c => c.status === 'pending').length : 0;
  const returned = mine ? mine.cases.filter(c => c.status === 'returned').length : 0;
  const pts = (CFG().points || {}).case || 100;
  const n = list.length;
  return (
    <div className="os-frame">
      <Sidebar active="cases" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Кейсы']}/>
        <div className="os-content cm-wide">
          <div className="cm-pagehead">
            <div style={{ minWidth: 0 }}>
              <div className="os-eyebrow" style={{ marginBottom: 10 }}>Кейсы</div>
              <h1 className="os-h1">ИИ в деле: кейсы основателей и участников</h1>
              <p className="os-sub" style={{ marginTop: 8, maxWidth: 600 }}>
                Продукты, промпты, истории и видеоразборы по одному шаблону: задача, инструменты и результат. Рядом кейсы основателей из базы знаний.
              </p>
            </div>
            {pubCaseBtn(nav)}
          </div>

          {(pending > 0 || returned > 0) && (
            <a className="cm-mystrip" href="/os/?view=profile" onClick={(e) => { e.preventDefault(); nav('profile', { s: 'cases' }); }}>
              <span>Мои кейсы: {[pending && `${pending} на проверке`, returned && `${returned} вернули с комментарием`].filter(Boolean).join(', ')}</span>
              <span className="cm-more">Открыть →</span>
            </a>
          )}

          <div className="cm-filters">
            <div className="os-chips cm-chips-lg" role="tablist" aria-label="Тип кейса">
              <button className={!f.type ? 'on' : ''} onClick={() => set('type', null)}>Все</button>
              {caseTypes().map(t => <button key={t.id} className={f.type === t.id ? 'on' : ''} onClick={() => set('type', f.type === t.id ? null : t.id)}>{t.title}</button>)}
            </div>
            <div className="cm-filters-2">
              <Select label="Тематический блок" value={f.block} onChange={v => set('block', v)} options={(CFG().clusters || []).map(c => ({ id: c.id, title: c.title }))}/>
              <Select label="Сфера" value={f.sphere} onChange={v => set('sphere', v)} options={(CFG().spheres || []).filter(s => s.id !== 'other')}/>
              <Select label="Цель" value={f.goal} onChange={v => set('goal', v)} options={CFG().goals || []}/>
              {data && <span className="cm-fine cm-filters-n">{n} {plural(n, 'кейс', 'кейса', 'кейсов')} · сначала новые</span>}
            </div>
          </div>

          {data === undefined && <div className="cm-empty">Загружаем кейсы…</div>}
          {data === null && <div className="cm-soon">Кейсы не загрузились. Обнови страницу через минуту.</div>}
          {data && !n && any && (
            <div className="cm-empty-box">
              <div className="cm-empty-h">По этим фильтрам пока пусто</div>
              <p>Кейсов с такими условиями ещё нет. Сними один фильтр или стань первым автором.</p>
              <div className="cm-row-btns">
                <button type="button" className="os-btn ghost sm" onClick={() => { setF({ type: null, block: null, sphere: null, goal: null }); setPage(1); }}>Сбросить фильтры</button>
                {pubCaseBtn(nav, 'Опубликовать кейс', 'os-btn sm')}
              </div>
            </div>
          )}
          {data && !n && !any && (
            <div className="cm-empty-box">
              <div className="cm-empty-h">Здесь будут кейсы участников</div>
              <p>Продукт, промпт, история или видеоразбор: что ты сделал с ИИ и что вышло. Шаблон займёт 10 минут, за кейс +{pts} баллов после проверки.</p>
              {pubCaseBtn(nav, 'Опубликовать первый кейс', 'os-btn sm')}
            </div>
          )}
          {n > 0 && (
            <>
              <div className="cm-cgrid">{shown.map(c => <CaseCard key={c.id} c={c} nav={nav}/>)}</div>
              {shown.length < n && <div style={{ textAlign: 'center' }}><button type="button" className="os-btn ghost sm" onClick={() => setPage(p => p + 1)}>Показать ещё</button></div>}
            </>
          )}
          {kbList.length > 0 && (
            <section className="cm-sec">
              <div className="cm-h2row" style={{ marginBottom: 0 }}><h2 className="os-h2" style={{ fontSize: 22 }}>Кейсы основателей из базы знаний</h2>
                <a className="cm-more" href="/os/?view=kb&c=keysy" onClick={(e) => { e.preventDefault(); nav('kb', { c: 'keysy' }); }}>Раздел базы →</a></div>
              <div className="cm-cgrid">{kbList.map(it => <KbCaseCard key={it.slug} it={it} nav={nav}/>)}</div>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---- страница кейса ----------------------------------------------------------- */
function PromptBlock({ text }) {
  return (
    <div className="cm-prompt">
      <CopyButton text={text} label="Скопировать" className="cm-prompt-copy" onCopy={() => track('case:copy')}/>
      <pre>{text}</pre>
    </div>
  );
}
function Steps({ text }) {
  const lines = String(text || '').split('\n').map(s => s.trim()).filter(Boolean);
  const numbered = lines.length > 1 && lines.every(l => /^\d+[.)]\s/.test(l));
  if (numbered) return <ol className="cm-steps">{lines.map((l, i) => <li key={i}>{l.replace(/^\d+[.)]\s*/, '')}</li>)}</ol>;
  return <div className="cm-ctext">{text}</div>;
}
function StatusNote({ c, nav }) {
  if (!c.status || c.status === 'published' && !c.mine) return null;
  const s = CASE_STATUS[c.status];
  const site = c.consent === 'no' ? 'только в сообществе' : c.on_site ? 'на сайте hakku.ai' : 'на сайт после флажка команды';
  return (
    <div className={`cm-status s-${c.status}`}>
      <div className="cm-status-h"><span className={`os-badge ${s[1]}`}>{s[0]}</span>
        {c.status === 'published' && <span className="cm-fine">Виден участникам · {site}</span>}
        {c.status === 'pending' && <span className="cm-fine">Команда посмотрит в течение пары дней. Баллы придут после проверки.</span>}</div>
      {c.team_comment && <div className="cm-status-c"><b>Комментарий команды:</b> {c.team_comment}</div>}
      {c.mine && ['pending', 'returned'].includes(c.status) && (
        <button type="button" className="os-btn sm" onClick={() => nav('case_new', { edit: c.id })}>{c.status === 'returned' ? 'Исправить и отправить' : 'Изменить'}</button>
      )}
    </div>
  );
}
function CaseBody({ c, nav, preview = false }) {
  return (
    <>
      <div className="cm-cpage-tags">
        <TypeBadge type={c.type}/>
        {c.block && <span className="cm-tag">{clusterTitle(c.block)}</span>}
        {c.sphere && <span className="cm-tag">{sphereTitleOf(c.sphere)}</span>}
        {c.goal && <span className="cm-tag">Цель: {goalTitleById(c.goal)}</span>}
      </div>
      <h1 className="os-h1 cm-article-h">{c.title || 'Название кейса'}</h1>
      <div className="cm-cpage-author">
        <Avatar name={c.author.name} initials={c.author.initials} url={c.author.avatar_url} size={36}/>
        <div><b>{c.author.name}</b><span>{[c.author.sphere, c.published_at || c.created_at ? fmtUntil(c.published_at || c.created_at) : ''].filter(Boolean).join(' · ')}</span></div>
      </div>
      {c.cover_url && <CaseCover c={c} big/>}
      <div className="cm-csecs">
        <div className="cm-csec"><div className="cm-csec-l">Задача</div><div className="cm-ctext">{c.task}</div></div>
        <div className="cm-csec"><div className="cm-csec-l">Инструменты</div><div className="cm-tags">{(c.tools || []).map(t => <span key={t} className="cm-tag lg">{t}</span>)}</div></div>
        <div className="cm-csec"><div className="cm-csec-l">Как использован ИИ</div><Steps text={c.ai_how}/></div>
        <div className="cm-csec"><div className="cm-csec-l">Результат</div><div className="cm-cresult">{c.result}</div></div>
        {c.prompt && <div className="cm-csec"><div className="cm-csec-l">Промпт</div><PromptBlock text={c.prompt}/></div>}
        {c.link && (
          <div className="cm-csec"><div className="cm-csec-l">{c.type === 'video' ? 'Видеоразбор' : 'Ссылка'}</div>
            <div><a className="os-btn ghost sm" href={c.link} target="_blank" rel="noopener noreferrer nofollow">{c.type === 'video' ? Icons.play() : Icons.link()} {c.type === 'video' ? 'Смотреть запись' : 'Открыть'} ↗</a>
              <div className="cm-fine" style={{ marginTop: 6, overflowWrap: 'anywhere' }}>{c.link}</div></div></div>
        )}
      </div>
    </>
  );
}
function CasePage({ nav, params = {} }) {
  const [data] = useApi('/api/cases/' + encodeURIComponent(params.id || ''));
  const c = data && data.case;
  return (
    <div className="os-frame">
      <Sidebar active="cases" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Кейсы', c ? c.title : 'Кейс']}/>
        <div className="os-content">
          <a className="cm-back" href="/os/?view=cases" onClick={(e) => { e.preventDefault(); nav('cases'); }}>{Icons.back()} Все кейсы</a>
          {data === undefined && <div className="cm-empty">Открываем кейс…</div>}
          {data === null && (
            <div className="os-card" style={{ padding: 24 }}><h2 className="os-h2">Такого кейса нет.</h2>
              <p className="os-sub" style={{ marginTop: 8 }}>Возможно, его скрыли или ссылка устарела.</p></div>
          )}
          {c && <StatusNote c={c} nav={nav}/>}
          {c && <article className="cm-cpage"><CaseBody c={c} nav={nav}/></article>}
          {c && data.similar.length > 0 && (
            <section className="cm-sec only-narrow">
              <h2 className="os-h2" style={{ fontSize: 20 }}>Похожие кейсы</h2>
              <div className="cm-cgrid">{data.similar.map(x => <CaseCard key={x.id} c={x} nav={nav}/>)}</div>
            </section>
          )}
        </div>
      </div>
      {c && (
        <MemberRail hideMember>
          <div className="os-rail-block">
            <div className="os-rail-h">Автор</div>
            <div className="os-card tight cm-authorcard">
              <div className="cm-authorcard-h"><Avatar name={c.author.name} initials={c.author.initials} url={c.author.avatar_url} size={40}/>
                <div><b>{c.author.name}</b><span>{[c.author.sphere, c.author.city].filter(Boolean).join(' · ')}</span></div></div>
              <div className="cm-fine">{data.author_cases} {plural(data.author_cases, 'кейс', 'кейса', 'кейсов')} в сообществе</div>
            </div>
          </div>
          {data.similar.length > 0 && (
            <div className="os-rail-block">
              <div className="os-rail-h">Похожие кейсы</div>
              {data.similar.slice(0, 1).map(x => <CaseCard key={x.id} c={x} nav={nav} compact/>)}
            </div>
          )}
          {data.related.length > 0 && (
            <div className="os-rail-block">
              <div className="os-rail-h">В базе по теме</div>
              <div className="os-card tight cm-rel">
                {data.related.map(r => (
                  <a key={r.slug} href={`/os/?view=kb&m=${r.slug}`} onClick={(e) => { e.preventDefault(); nav('kb', { m: r.slug }); }}>
                    <span>{r.title}</span>{r.locked && <LockBadge lock="members"/>}</a>
                ))}
              </div>
            </div>
          )}
        </MemberRail>
      )}
    </div>
  );
}

/* ---- форма «Опубликовать кейс» --------------------------------------------------- */
const ERR_CASE = {
  title_required: 'Добавь название.', title_too_long: 'Название длиннее 60 знаков.', bad_type: 'Выбери тип кейса.',
  task_required: 'Опиши задачу: что было не так до ИИ.', ai_how_required: 'Расскажи по шагам, как помог ИИ.',
  result_required: 'Напиши результат, лучше в цифрах.', tools_required: 'Добавь хотя бы один инструмент.',
  task_too_long: 'Задача длиннее 500 знаков.', ai_how_too_long: 'Шаги длиннее 500 знаков.', result_too_long: 'Результат длиннее 500 знаков.',
  prompt_too_long: 'Промпт длиннее 500 знаков.', bad_link: 'Ссылка должна начинаться с https://', video_link_required: 'Для видеоразбора нужна ссылка на запись.',
  consent_required: 'Выбери, показывать ли кейс на сайте.', bad_cover: 'Обложка не загрузилась, выбери файл ещё раз.',
  too_many_tools: 'Не больше 10 инструментов.', tool_too_long: 'Название инструмента длиннее 30 знаков.', too_many: 'Сегодня уже много кейсов, продолжим завтра.',
  not_editable: 'Этот кейс уже проверили, изменить нельзя.', server: 'Сервер не ответил, попробуй ещё раз.',
};
const ERR_FIELD = { title_required: 'title', title_too_long: 'title', bad_type: 'type', task_required: 'task', task_too_long: 'task',
  ai_how_required: 'ai_how', ai_how_too_long: 'ai_how', result_required: 'result', result_too_long: 'result', tools_required: 'tools',
  too_many_tools: 'tools', tool_too_long: 'tools', prompt_too_long: 'prompt', bad_link: 'link', video_link_required: 'link', consent_required: 'consent', bad_cover: 'cover' };
const DRAFT_KEY = 'cm_case_draft';
const emptyCase = () => {
  const p = ME().profile || {};
  return { title: '', type: '', cover: null, cover_url: null, task: '', tools: [], ai_how: '', result: '', prompt: '', link: '', mode: 'prompt',
           block: null, sphere: p.sphere && p.sphere !== 'other' ? p.sphere : null, goal: p.goal && goalOf(p.goal) ? goalOf(p.goal).id : null, consent: '' };
};

function Counter({ v, max }) {
  const n = String(v || '').length;
  return <span className={`cm-counter${n > max ? ' over' : n > max * .9 ? ' near' : ''}`}>{n} / {max}</span>;
}
function Field({ label, req, hint, opt, children, count, err, id }) {
  return (
    <div className={`cm-field${err ? ' bad' : ''}`} id={id ? 'f-' + id : undefined}>
      <div className="cm-field-l">{label}{req && <span className="cm-req">*</span>}{opt && <span className="cm-q-opt">{opt}</span>}</div>
      {hint && <div className="cm-field-h">{hint}</div>}
      {children}
      {(count || err) && <div className="cm-field-f"><span className="cm-field-err">{err || ''}</span>{count}</div>}
    </div>
  );
}
function ToolsInput({ value, onChange }) {
  const [t, setT] = React.useState('');
  const sugg = (casesCfg().tools || []).filter(x => !value.some(v => v.toLowerCase() === x.toLowerCase()));
  const add = (x) => { const s = String(x || '').trim().slice(0, 30); if (s && !value.some(v => v.toLowerCase() === s.toLowerCase()) && value.length < 10) onChange([...value, s]); setT(''); };
  return (
    <div className="cm-tagsin">
      {value.map(v => <span key={v} className="cm-tagx">{v}<button type="button" aria-label={'Убрать ' + v} onClick={() => onChange(value.filter(x => x !== v))}>×</button></span>)}
      <input list="cm-tools" value={t} placeholder={value.length ? 'Ещё инструмент…' : 'Добавь из списка или свой…'} maxLength={30}
             onChange={e => { const x = e.target.value; if (sugg.includes(x)) add(x); else setT(x); }}
             onKeyDown={e => { if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(t); } if (e.key === 'Backspace' && !t && value.length) onChange(value.slice(0, -1)); }}
             onBlur={() => t && add(t)} aria-label="Инструменты"/>
      <datalist id="cm-tools">{sugg.map(x => <option key={x} value={x}/>)}</datalist>
    </div>
  );
}

function CaseForm({ nav, params = {} }) {
  const editId = params.edit || null;
  const [v, setV] = React.useState(() => {
    if (editId) return null;
    try { const d = JSON.parse(localStorage.getItem(DRAFT_KEY) || 'null'); if (d && typeof d === 'object') return { ...emptyCase(), ...d }; } catch (e) {}
    return emptyCase();
  });
  const [saved, setSaved] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [up, setUp] = React.useState('');
  const [pts] = useApi('/api/points');
  React.useEffect(() => {
    if (!editId) return;
    fetch('/api/cases/' + encodeURIComponent(editId), { credentials: 'same-origin' }).then(r => r.json()).then(j => {
      const c = j && j.ok && j.case;
      if (!c || !c.mine) return setV(emptyCase());
      setV({ ...emptyCase(), ...c, prompt: c.prompt || '', link: c.link || '', mode: c.link && !c.prompt ? 'link' : 'prompt' });
    }).catch(() => setV(emptyCase()));
  }, [editId]);
  React.useEffect(() => {
    if (!v || editId) return;
    const t = setTimeout(() => { try { localStorage.setItem(DRAFT_KEY, JSON.stringify(v)); setSaved(true); } catch (e) {} }, 600);
    return () => clearTimeout(t);
  }, [v]);
  const frame = (body, rail) => (
    <div className="os-frame">
      <Sidebar active="cases" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Кейсы', editId ? 'Правка кейса' : 'Новый кейс']}/>
        <div className="os-content cm-wide">{body}</div>
      </div>
    </div>
  );
  if (!v) return frame(<div className="cm-empty">Открываем кейс…</div>);
  const set = (k, x) => { setV(o => ({ ...o, [k]: x })); setSaved(false); if (err && ERR_FIELD[err] === k) setErr(null); };
  const ferr = (k) => err && ERR_FIELD[err] === k ? ERR_CASE[err] : null;
  const pointsCase = (CFG().points || {}).case || 100;

  const upload = async (file) => {
    if (!file) return;
    if (!/^image\/(jpeg|png|webp)$/.test(file.type)) return setUp('Подойдёт JPG, PNG или WebP.');
    if (file.size > 3 * 1024 * 1024) return setUp('Файл больше 3 МБ. Сожми картинку или сделай скрин меньше.');
    setUp('Загружаем…');
    try {
      const r = await fetch('/api/cases/cover', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': file.type }, body: file });
      const j = await r.json().catch(() => null);
      if (!r.ok || !j || !j.ok) return setUp(j && j.error === 'too_big' ? 'Файл больше 3 МБ.' : 'Не получилось загрузить, попробуй другой файл.');
      setV(o => ({ ...o, cover: j.cover, cover_url: j.url })); setUp('');
    } catch (e) { setUp('Не получилось загрузить, попробуй ещё раз.'); }
  };
  const body = () => ({ title: v.title, type: v.type, cover: v.cover, task: v.task, tools: v.tools, ai_how: v.ai_how, result: v.result,
    prompt: v.mode === 'prompt' || v.type === 'video' ? (v.type === 'video' ? '' : v.prompt) : '', link: v.mode === 'link' || v.type === 'video' ? v.link : '',
    block: v.block, sphere: v.sphere, goal: v.goal, consent: v.consent });
  const submit = async () => {
    setBusy(true); setErr(null);
    const b = body();
    const r = await (editId ? putJSON('/api/cases/' + encodeURIComponent(editId), b) : postJSON('/api/cases', b));
    setBusy(false);
    if (!r.ok) {
      const e = (r.j && r.j.error) || 'server';
      setErr(e);
      const el = ERR_FIELD[e] && document.getElementById('f-' + ERR_FIELD[e]);
      if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
      return;
    }
    if (!editId) { try { localStorage.removeItem(DRAFT_KEY); } catch (e) {} }
    toast('Кейс отправлен на проверку. Баллы придут после неё.');
    nav('case', { id: r.j.case.id });
  };
  const me = ME();
  const prof = me.profile || {};
  const myName = prof.first_name ? `${prof.first_name}${prof.last_name ? ' ' + prof.last_name[0] + '.' : ''}` : (me.user.name || 'Ты');
  const preview = { id: 'preview', title: v.title || 'Название кейса', type: v.type || 'product', result: v.result || 'Результат появится здесь',
    tools: v.tools, block: v.block, cover_url: v.cover_url, author: { name: myName, initials: null, sphere: sphereTitleOf(v.sphere) || '' } };
  // лимит кейсов с баллами в месяц: null — без лимита (правка 05.10.2026), карточку лимита не рисуем
  const used = pts ? pts.case_limit.used : null, lim = pts ? pts.case_limit.limit : null;
  const isVideo = v.type === 'video';

  return frame(<>
    <a className="cm-back" href="/os/?view=cases" onClick={(e) => { e.preventDefault(); nav('cases'); }}>{Icons.back()} Кейсы</a>
    <div>
      <h1 className="os-h1">{editId ? 'Правка кейса' : 'Опубликовать кейс'}</h1>
      <p className="os-sub" style={{ marginTop: 8 }}>Один шаблон для всех: задача, инструменты, как помог ИИ, результат. За полный кейс +{pointsCase} баллов после проверки командой.</p>
      {v.team_comment && v.status === 'returned' && <div className="cm-status s-returned" style={{ marginTop: 14 }}><div className="cm-status-c"><b>Комментарий команды:</b> {v.team_comment}</div></div>}
    </div>
    <div className="cm-form2">
      <div className="cm-form2-main">
        <Field label="Название" req id="title" err={ferr('title')} count={<Counter v={v.title} max={60}/>}>
          <input className="os-login-input" value={v.title} maxLength={80} onChange={e => set('title', e.target.value)} placeholder="Например: ассистент для еженедельного отчёта"/>
        </Field>
        <Field label="Тип" req id="type" err={ferr('type')}>
          <div className="cm-typegrid" role="radiogroup" aria-label="Тип кейса">
            {caseTypes().map(t => (
              <label key={t.id} className={`cm-opt${v.type === t.id ? ' on' : ''}`}>
                <input type="radio" name="ctype" checked={v.type === t.id} onChange={() => set('type', t.id)}/>
                <span className="cm-opt-t">{t.title}</span><span className="cm-opt-d">{t.d}</span>
              </label>
            ))}
          </div>
        </Field>
        <Field label="Обложка" opt="по желанию" id="cover" err={ferr('cover') || (up && up !== 'Загружаем…' ? up : null)}>
          <label className={`cm-drop${v.cover_url ? ' has' : ''}`}
                 onDragOver={e => e.preventDefault()} onDrop={e => { e.preventDefault(); upload(e.dataTransfer.files[0]); }}>
            <input type="file" accept="image/jpeg,image/png,image/webp" onChange={e => upload(e.target.files[0])}/>
            {v.cover_url ? <img src={v.cover_url} alt=""/> : <span className="cm-bicon">{Icons.image()}</span>}
            <span><b>{v.cover_url ? 'Обложка загружена' : 'Скриншот или картинка'}</b>
              <small>{up === 'Загружаем…' ? 'Загружаем…' : v.cover_url ? 'Нажми, чтобы заменить' : 'Перетащи сюда или выбери файл · JPG, PNG, WebP до 3 МБ'}</small></span>
            {v.cover_url && <button type="button" className="cm-linkbtn" onClick={(e) => { e.preventDefault(); setV(o => ({ ...o, cover: null, cover_url: null })); }}>Убрать</button>}
          </label>
        </Field>
        <Field label="Задача" req hint="Одно-два предложения: что было не так до ИИ" id="task" err={ferr('task')} count={<Counter v={v.task} max={500}/>}>
          <textarea className="os-login-input cm-textarea" rows={3} value={v.task} onChange={e => set('task', e.target.value)}/>
        </Field>
        <Field label="Инструменты" req id="tools" err={ferr('tools')}>
          <ToolsInput value={v.tools} onChange={x => set('tools', x)}/>
        </Field>
        <Field label="Как использован ИИ" req hint="По шагам: что делаешь ты, что делает ИИ" id="ai_how" err={ferr('ai_how')} count={<Counter v={v.ai_how} max={500}/>}>
          <textarea className="os-login-input cm-textarea" rows={5} value={v.ai_how} onChange={e => set('ai_how', e.target.value)} placeholder={'1. …\n2. …\n3. …'}/>
        </Field>
        <Field label="Результат" req hint="Лучше в цифрах: время, деньги, конверсия" id="result" err={ferr('result')} count={<Counter v={v.result} max={500}/>}>
          <textarea className="os-login-input cm-textarea" rows={3} value={v.result} onChange={e => set('result', e.target.value)}/>
        </Field>
        {isVideo ? (
          <Field label="Ссылка на видеоразбор" req hint="YouTube, Rutube, Loom, Яндекс Диск. Видео в LMS не загружаем" id="link" err={ferr('link')}>
            <input className="os-login-input" value={v.link} onChange={e => set('link', e.target.value)} placeholder="https://"/>
          </Field>
        ) : (
          <Field label="Промпт или ссылка" opt="по желанию" hint="Другие участники смогут скопировать промпт одной кнопкой" id={v.mode === 'link' ? 'link' : 'prompt'}
                 err={ferr('prompt') || ferr('link')} count={v.mode === 'prompt' ? <Counter v={v.prompt} max={500}/> : null}>
            <div className="cm-segm sm" role="tablist" style={{ marginBottom: 10 }}>
              {[['prompt', 'Промпт'], ['link', 'Ссылка']].map(([k, t]) => <button key={k} type="button" className={v.mode === k ? 'on' : ''} onClick={() => set('mode', k)}>{t}</button>)}
            </div>
            {v.mode === 'prompt'
              ? <textarea className="os-login-input cm-textarea cm-mono" rows={4} value={v.prompt} onChange={e => set('prompt', e.target.value)} placeholder="Текст промпта"/>
              : <input className="os-login-input" value={v.link} onChange={e => set('link', e.target.value)} placeholder="https://"/>}
          </Field>
        )}
        <Field label="Тема" opt="сфера и цель подставились из анкеты" hint="Блок базы, сфера и цель: по ним кейс найдут в фильтрах">
          <div className="cm-filters-2">
            <Select label="Блок базы" value={v.block} onChange={x => set('block', x)} options={(CFG().clusters || []).map(c => ({ id: c.id, title: c.title }))}/>
            <Select label="Сфера" value={v.sphere} onChange={x => set('sphere', x)} options={(CFG().spheres || []).filter(s => s.id !== 'other')}/>
            <Select label="Цель" value={v.goal} onChange={x => set('goal', x)} options={CFG().goals || []}/>
          </div>
        </Field>
        <Field label="Показать на сайте hakku.ai" req hint="Витрину на сайте ещё готовим. Кейс попадёт туда только с твоего согласия и после проверки командой. Баллы и контакты на сайте не показываем." id="consent" err={ferr('consent')}>
          <div className="cm-radios" role="radiogroup">
            {(casesCfg().consent || []).map(o => (
              <label key={o.id} className={`cm-radio${v.consent === o.id ? ' on' : ''}`}>
                <input type="radio" name="consent" checked={v.consent === o.id} onChange={() => set('consent', o.id)}/>
                <span><b>{o.title}</b><small>{o.d}</small></span>
              </label>
            ))}
          </div>
        </Field>
        <div className="cm-formbar">
          <span className="cm-fine">{editId ? 'После правки кейс снова уйдёт на проверку' : saved ? <>{Icons.check()} Черновик сохранён</> : 'Черновик сохраняется в браузере'}</span>
          <div className="cm-row-btns">
            <button type="button" className="os-btn ghost sm only-narrow" onClick={() => { const el = document.getElementById('cm-preview'); el && el.scrollIntoView({ behavior: 'smooth' }); }}>Предпросмотр</button>
            <button type="button" className="os-btn tg sm" disabled={busy} onClick={submit}>{busy ? 'Отправляем…' : 'Отправить на проверку'}</button>
          </div>
          {err && !ERR_FIELD[err] && <div className="os-login-err show" role="alert" style={{ width: '100%' }}>{ERR_CASE[err] || ERR_CASE.server}</div>}
        </div>
      </div>
      <aside className="cm-form2-side" id="cm-preview">
        <div className="os-eyebrow" style={{ marginBottom: 10 }}>Так кейс увидят другие</div>
        <div className="cm-preview"><CaseCard c={preview} nav={() => {}}/></div>
        <p className="cm-fine" style={{ marginTop: 10 }}>Карточка в ленте «Кейсы» и в блоке «Новое от участников» на главной. Появится после проверки командой.</p>
        {lim != null && (
          <div className="os-card tight cm-limitcard">
            <div>{Icons.trophy()} В этом месяце <b>{used == null ? '…' : used} из {lim}</b> кейсов с баллами</div>
            <Bar value={used || 0} max={lim}/>
            {used != null && used >= lim && <div className="cm-fine">Лимит месяца выбран: кейс опубликуем, но без баллов.</div>}
          </div>
        )}
      </aside>
    </div>
  </>);
}

/* ---- блоки для главной, материала и профиля ----------------------------------------- */
function PublishRow({ nav }) {
  const pts = (CFG().points || {}).case || 100;
  return (
    <div className="os-card cm-pubrow">
      <span className="cm-pubrow-ic">{Icons.plus()}</span>
      <div className="cm-pubrow-t"><b>Сделал что-то с ИИ?</b><span>Опубликуй кейс по шаблону. За полный кейс +{pts} баллов после проверки.</span></div>
      {pubCaseBtn(nav, 'Опубликовать кейс', 'os-btn sm')}
    </div>
  );
}
function NewFromMembers({ data, nav }) {
  if (data === undefined) return null;
  const list = (data && data.cases) || [];
  const pts = (CFG().points || {}).case || 100;
  return (
    <section aria-label="Новое от участников">
      <div className="cm-h2row">
        <h2 className="os-h2">Новое от участников</h2>
        {list.length > 0 && <a className="cm-more" href="/os/?view=cases" onClick={(e) => { e.preventDefault(); nav('cases'); }}>Все кейсы →</a>}
      </div>
      {list.length ? (
        <>
          <div className="cm-cgrid cm-strip">{list.slice(0, 3).map(c => <CaseCard key={c.id} c={c} nav={nav} compact/>)}</div>
          <div className="only-wide-tab" style={{ marginTop: 14 }}><PublishRow nav={nav}/></div>
          <button type="button" className="os-btn ghost sm block only-mobile" style={{ marginTop: 12 }} onClick={() => nav('case_new')}>{Icons.plus()} Опубликовать кейс · +{pts}</button>
        </>
      ) : (
        <div className="cm-empty-box">
          <div className="cm-empty-h">Здесь появятся кейсы участников</div>
          <p>Кейс, промпт или история о том, как ИИ помог в работе. Первым авторам по {pts} баллов после проверки.</p>
          {pubCaseBtn(nav, 'Опубликовать первый кейс', 'os-btn sm')}
        </div>
      )}
    </section>
  );
}
function CasesByTopic({ block, nav }) {
  const [data] = useApi(block && isMember() ? `/api/cases?block=${encodeURIComponent(block)}&limit=3&kb=0` : null);
  if (!block || !isMember() || !data) return null;
  return (
    <div className="cm-related">
      <div className="cm-h2row" style={{ marginBottom: 12 }}>
        <div className="os-wiki-sec-h" style={{ margin: 0 }}>Кейсы участников по теме</div>
        {data.total > 3 && <a className="cm-more" href="/os/?view=cases" onClick={(e) => { e.preventDefault(); nav('cases', { c: block }); }}>Все {data.total} →</a>}
      </div>
      {data.cases.length
        ? <div className="cm-cgrid two">{data.cases.map(c => <CaseCard key={c.id} c={c} nav={nav} compact/>)}</div>
        : <PublishRow nav={nav}/>}
    </div>
  );
}
function MyCases({ nav }) {
  const [data] = useApi('/api/cases?mine=1');
  if (!data) return null;
  return (
    <div className="os-card" style={{ padding: 22 }} id="my-cases">
      <div className="cm-h2row" style={{ marginBottom: 12 }}>
        <h2 className="os-h2" style={{ fontSize: 20 }}>Мои кейсы</h2>
        <button type="button" className="os-btn ghost sm" onClick={() => nav('case_new')}>{Icons.plus()} Новый кейс</button>
      </div>
      {data.cases.length ? data.cases.map(c => {
        const s = CASE_STATUS[c.status] || ['', ''];
        return (
          <a key={c.id} className="cm-mycase" href={`/os/?view=case&id=${c.id}`} onClick={(e) => { e.preventDefault(); nav('case', { id: c.id }); }}>
            <span style={{ minWidth: 0 }}><b>{c.title}</b>{c.team_comment && c.status !== 'published' && <small>Команда: {c.team_comment}</small>}</span>
            <span className={`os-badge ${s[1]}`}>{s[0]}</span>
          </a>
        );
      }) : <p className="os-sub" style={{ margin: 0, fontSize: 14 }}>Кейсов пока нет. Расскажи, что ты сделал с ИИ: шаблон займёт 10 минут.</p>}
    </div>
  );
}

Object.assign(window, { CASE_TYPE, CASE_STATUS, TypeBadge, CaseCover, CaseCard, KbCaseCard, CasesFeed, CasePage, CaseForm, CaseBody,
  NewFromMembers, PublishRow, CasesByTopic, MyCases, Select });