// UI mocks with animations/wow

// ---------- HERO DASHBOARD ----------
const AnimatedKPI = ({ label, value, delta, tone="neutral", trigger, decimals=0, suffix="", prefix="" }) => {
  const tones = {
    neutral: "text-foreground",
    rose: "text-rose-600 dark:text-rose-400",
    emerald: "text-emerald-600 dark:text-emerald-500",
  };
  return (
    <div className="rounded-lg border border-border bg-background/60 p-3">
      <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{label}</div>
      <div className={`mt-1 text-2xl font-semibold tabular font-display tracking-tight ${tones[tone]}`}>
        <CountUp value={value} decimals={decimals} trigger={trigger} prefix={prefix} suffix={suffix} />
      </div>
      {delta && <div className={`text-[11px] tabular mt-0.5 ${tone==="neutral"?"text-muted-foreground":tones[tone]}`}>{delta}</div>}
    </div>
  );
};

const HeroDashboardMock = () => {
  const [ref, v] = useReveal();
  return (
    <div ref={ref}>
      <MockCard title="Панель руководителя · финансовый директор"
        meta={<span className="inline-flex items-center gap-2"><span className="live-dot inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" /><span>23.04.2026</span></span>}>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2.5">
          <AnimatedKPI label="DSO" value={41} delta="−3 дн" trigger={v} />
          <AnimatedKPI label="Просрочка" value={12.4} decimals={1} suffix=" М" delta="+0,8 М" tone="rose" trigger={v} />
          <AnimatedKPI label="Возвращено" value={8.4} decimals={1} prefix="+" suffix=" М" delta="апрель" tone="emerald" trigger={v} />
          <AnimatedKPI label="Событий" value={5} delta="требуют" trigger={v} />
        </div>
        <div className="mt-5 flex items-baseline justify-between">
          <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Топ должников</div>
          <div className="text-[11px] tabular text-muted-foreground">обновлено 2 минуты назад</div>
        </div>
        <div className={`mt-2 divide-y divide-border/70 reveal-stagger ${v?"in":""}`}>
          {[
            ["Пищепром-Центр", "2,1 М", "45 дн", "rose"],
            ["Ромашка ООО", "1,8 М", "18 дн", "amber"],
            ["Агро-Лидер", "1,2 М", "обещал", "emerald"],
            ["Техпром-МСК", "0,9 М", "62 дн", "rose"],
          ].map(([n,a,s,t])=>(
            <div key={n} className="grid grid-cols-[1fr_auto_auto] items-center gap-4 py-2.5">
              <div className="text-sm">{n}</div>
              <div className="text-sm tabular font-medium">{a}</div>
              <Chip tone={t}>{s}</Chip>
            </div>
          ))}
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F1 MORNING DIGEST ----------
const F1_MorningDigest = () => {
  const [ref, v] = useReveal();
  return (
    <div ref={ref}>
      <MockCard title="Утренняя сводка · финансовый директор" meta="23.04.2026 · 08:30">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2.5">
          <AnimatedKPI label="DSO" value={41} trigger={v} />
          <AnimatedKPI label="Просрочка" value={12.4} decimals={1} suffix=" М" tone="rose" trigger={v} />
          <AnimatedKPI label="Возвращено" value={8.4} decimals={1} prefix="+" suffix=" М" tone="emerald" trigger={v} />
          <AnimatedKPI label="Событий" value={5} trigger={v} />
        </div>
        <div className="mt-5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Требуют решения сегодня</div>
        <div className={`mt-2 space-y-1.5 reveal-stagger ${v?"in":""}`}>
          {[
            ["rose", "Банкротство: Техпром-МСК", "62 дн"],
            ["rose", "Новый иск к Пищепром-Центр +2 млн", "45 дн"],
            ["amber", "Обещание оплаты: Ромашка", "завтра"],
            ["emerald", "Скоринг упал: Агро-Лидер", "B→C"],
          ].map(([t,l,m])=>(
            <div key={l} className="flex items-center gap-3 rounded-md border border-border bg-background/50 px-3 py-2">
              <Dot tone={t} />
              <div className="text-sm flex-1 truncate">{l}</div>
              <div className="text-[11px] tabular text-muted-foreground">{m}</div>
            </div>
          ))}
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F2 RULES ENGINE ----------
const F2_Rules = () => {
  const [ref, v] = useReveal();
  const rules = [
    { name:"Стоп отгрузки при просрочке > 45 дней",
      chain:[["Просрочка > 45 дн","rose"],["Блок проводки в 1С","emerald"]], count:23 },
    { name:"Претензия при просрочке 14 дней",
      chain:[["Просрочка = 14 дн","rose"],["Ответственный","amber"],["Претензия Диадок","emerald"]], count:47 },
    { name:"Эскалация при банкротстве в ЕФРСБ",
      chain:[["ЕФРСБ: новое дело","rose"],["Алерт юристу + фин. директору","emerald"]], count:3 },
  ];
  return (
    <div ref={ref}>
      <MockCard title="Активные правила · 34" meta="все в бою">
        <div className="space-y-3">
          {rules.map((r, ri)=>(
            <div key={r.name} className="rounded-lg border border-border bg-background/50 p-3">
              <div className="text-[13px] font-medium">{r.name}</div>
              <div className="mt-2 flex flex-wrap items-center gap-1.5">
                {r.chain.map((c,i)=>(
                  <React.Fragment key={i}>
                    <span className="chain-chip" style={{animationDelay: v?`${ri*0.15 + i*0.22}s`:"999s", opacity: v?undefined:0}}>
                      <Chip tone={c[1]}>{c[0]}</Chip>
                    </span>
                    {i<r.chain.length-1 && (
                      <span className="chain-arrow" style={{animationDelay: v?`${ri*0.15 + i*0.22 + 0.12}s`:"999s", opacity: v?undefined:0}}>
                        <I.ArrowRight size={12} className="text-muted-foreground" />
                      </span>
                    )}
                  </React.Fragment>
                ))}
              </div>
              <div className="mt-2 flex items-center justify-between text-[11px]">
                <span className="text-muted-foreground tabular">Сработало <CountUp value={r.count} trigger={v} />×</span>
                <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
                  <span className="live-dot h-1.5 w-1.5 rounded-full bg-emerald-500" /> активно
                </span>
              </div>
            </div>
          ))}
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F3 COUNTERPARTY DOSSIER ----------
const F3_Dossier = () => {
  const [ref, v] = useReveal();
  return (
    <div ref={ref}>
      <MockCard>
        <div className="flex items-center gap-3">
          <div className="grid h-9 w-9 place-items-center rounded-md bg-primary/10 text-primary">
            <I.Shield size={18} />
          </div>
          <div className="flex-1">
            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Досье контрагента</div>
            <div className="text-sm font-semibold">ООО «Агро-Лидер»</div>
          </div>
          <span className="pulse-rose rounded-md"><Chip tone="rose" size="sm">скоринг C</Chip></span>
        </div>
        <div className="mt-4 grid grid-cols-3 gap-2.5">
          <AnimatedKPI label="Арбитраж" value={5} delta="+2 за 30 дн" tone="rose" trigger={v} />
          <AnimatedKPI label="ФССП" value={1.2} decimals={1} prefix="₽ " suffix=" М" delta="3 производства" tone="rose" trigger={v} />
          <div className="rounded-lg border border-border bg-background/60 p-3">
            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Скоринг</div>
            <div className="mt-1 text-2xl font-semibold tabular font-display tracking-tight text-rose-600 dark:text-rose-400">C</div>
            <div className="text-[11px] tabular mt-0.5 text-rose-600 dark:text-rose-400">B→C</div>
          </div>
        </div>
        <div className="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 dark:border-rose-900/50 dark:bg-rose-950/30 signal-sweep">
          <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-rose-700 dark:text-rose-300">
            <I.AlertTriangle size={12} /> Рекомендация системы
          </div>
          <div className="mt-1.5 text-[13px] text-rose-900 dark:text-rose-100 leading-snug">
            Одобрить с лимитом <span className="font-semibold tabular">300 тыс ₽</span> и предоплатой 50%. За 30 дней — 2 новых иска, смена директора.
          </div>
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F4 SIGNALS PRIORITIZED ----------
const F4_Signals = () => {
  const [ref, v] = useReveal();
  const rows = [
    { p:"Срочно", tone:"rose", text:"Пищепром-Центр: пропущено обещание оплаты вчера", action:"Отправить претензию", sweep:true },
    { p:"Важно", tone:"amber", text:"Техпром-МСК: новая запись в ЕФРСБ сегодня утром", action:"Запустить судебный приказ" },
    { p:"Внимание", tone:"sky", text:"Ромашка ООО: скоринг упал с B до C за неделю", action:"Снизить лимит" },
  ];
  return (
    <div ref={ref}>
      <MockCard title="Сигналы · приоритет" meta={<span className="inline-flex items-center gap-1.5"><span className="live-dot inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />обновлено сейчас</span>}>
        <div className={`space-y-2.5 reveal-stagger ${v?"in":""}`}>
          {rows.map((r,i)=>(
            <div key={i} className={`rounded-lg border border-border bg-background/50 p-3 ${r.sweep?"signal-sweep":""}`}>
              <div className="flex items-start gap-3">
                <Chip tone={r.tone} size="sm">{r.p}</Chip>
                <div className="text-[13px] flex-1 leading-snug">{r.text}</div>
              </div>
              <div className="mt-2.5 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2.5 py-1.5">
                <I.Check size={14} className="text-primary" />
                <span className="text-[12px] font-medium text-primary">{r.action}</span>
                <I.ArrowRight size={12} className="ml-auto text-primary" />
              </div>
            </div>
          ))}
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F5 CLAIM DOCUMENT ----------
const F5_Claim = () => {
  const [ref, v] = useReveal();
  return (
    <div ref={ref}>
      <MockCard>
        <div className="flex items-center justify-between">
          <div>
            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Досудебная претензия</div>
            <div className="text-sm font-semibold">ООО «Техпром-МСК»</div>
          </div>
          <Chip tone="primary">готова</Chip>
        </div>
        <div className="mt-4 rounded-lg border border-border bg-muted/40 p-3">
          <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground mb-2">Расчёт задолженности</div>
          <div className="space-y-1 text-[13px]">
            <div className="flex justify-between"><span>Основной долг</span>
              <span className="tabular font-medium"><CountUp value={2145000} trigger={v} /> ₽</span></div>
            <div className="flex justify-between"><span>Неустойка (ст. 395 ГК)</span>
              <span className="tabular font-medium"><CountUp value={84320} trigger={v} /> ₽</span></div>
            <div className="mt-2 pt-2 border-t border-border flex justify-between font-semibold">
              <span>Итого к уплате</span>
              <span className="tabular font-display"><CountUp value={2229320} trigger={v} /> ₽</span>
            </div>
          </div>
        </div>
        <div className={`mt-3 grid grid-cols-3 gap-2 reveal-stagger ${v?"in":""}`}>
          {[["Договор",""],["УПД","×7"],["Акты","×3"]].map(([l,c])=>(
            <div key={l} className="rounded-md border border-border bg-background/50 p-2.5 flex items-center gap-2">
              <I.File size={14} className="text-muted-foreground" />
              <div className="text-[12px] flex-1">{l}{c && <span className="text-muted-foreground tabular"> {c}</span>}</div>
              <I.Check size={12} className="text-emerald-600 dark:text-emerald-400" />
            </div>
          ))}
        </div>
        <div className="mt-3 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2 signal-sweep">
          <span className="text-[13px] font-medium text-primary">Отправить через Диадок с КЭП</span>
          <I.ArrowRight size={14} className="ml-auto text-primary" />
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F6 RECONCILIATION ----------
const F6_Reconcile = () => {
  const [ref, v] = useReveal();
  const pct = useCountUp(96, { trigger: v, duration: 1400 });
  const rows = [
    { c:"Ромашка ООО", inn:"7701123456", a:"450 000 ₽", s:"auto" },
    { c:"Агро-Лидер", inn:"5022987654", a:"1 200 000 ₽", s:"auto" },
    { c:"Пищепром-Центр", inn:"7733445566", a:"180 000 ₽", s:"other" },
    { c:"Техпром-МСК", inn:"7712334455", a:"95 000 ₽", s:"auto" },
  ];
  return (
    <div ref={ref}>
      <MockCard title="Поступления · сегодня"
        meta={<span className="inline-flex items-center gap-1.5 rounded-md bg-emerald-100 px-2 py-0.5 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300 font-medium tabular">{pct}% авто</span>}>
        <div className="mb-3 h-1.5 w-full rounded-full bg-muted overflow-hidden">
          <div className="bar-fill" style={{ "--fill": v ? "96%" : "0%" }} />
        </div>
        <div className={`divide-y divide-border reveal-stagger ${v?"in":""}`}>
          {rows.map((r,i)=>(
            <div key={i} className="grid grid-cols-[1fr_auto_auto] items-center gap-3 py-2.5">
              <div className="min-w-0">
                <div className="text-[13px] truncate">{r.c}</div>
                <div className="text-[11px] text-muted-foreground tabular">ИНН {r.inn}</div>
              </div>
              <div className="text-[13px] tabular font-medium">{r.a}</div>
              <Chip tone={r.s==="auto"?"emerald":"amber"}>
                {r.s==="auto" ? "Разнесено автоматически" : "Клиент оплатил другой счёт"}
              </Chip>
            </div>
          ))}
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F7 DEBTOR TIMELINE ----------
const F7_Timeline = () => {
  const [ref, v] = useReveal();
  const rows = [
    { d:"23.04", who:"Компас", tone:"rose", text:"Пропущено обещание оплаты — создан сигнал" },
    { d:"21.04", who:"Иванов А.", tone:"neutral", text:"Разговор с Петровым: обещает оплату 22 апреля" },
    { d:"18.04", who:"Компас", tone:"emerald", text:"Автосверка: частичная оплата 1,2 М ₽" },
    { d:"12.04", who:"Компас", tone:"neutral", text:"Отправлена досудебная претензия через Диадок" },
    { d:"10.04", who:"Иванов А.", tone:"neutral", text:"Согласована рассрочка на 3 месяца" },
  ];
  const toneClass = { rose:"text-rose-600 dark:text-rose-400", emerald:"text-emerald-600 dark:text-emerald-400", neutral:"text-foreground" };
  return (
    <div ref={ref}>
      <MockCard>
        <div className="flex items-start justify-between gap-4">
          <div>
            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Карточка должника</div>
            <div className="text-sm font-semibold">ООО «Пищепром-Центр»</div>
          </div>
          <div className="text-right">
            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Задолженность</div>
            <div className="text-base font-semibold tabular font-display text-rose-600 dark:text-rose-400">
              <CountUp value={2.1} decimals={1} trigger={v} suffix=" М ₽" />
            </div>
          </div>
        </div>
        <div className="mt-4 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">История · последние события</div>
        <div className="mt-2 relative pl-4">
          <div className="absolute left-[5px] top-2 bottom-2 w-px bg-border" />
          <div className={`space-y-2.5 reveal-stagger ${v?"in":""}`}>
            {rows.map((r,i)=>(
              <div key={i} className="relative">
                <div className="absolute -left-[14px] top-1.5 h-2 w-2 rounded-full bg-primary/70 ring-2 ring-background" />
                <div className="grid grid-cols-[40px_1fr] gap-3">
                  <div className="text-[11px] tabular text-muted-foreground pt-0.5">{r.d}</div>
                  <div className="text-[13px] leading-snug">
                    <span className="font-semibold">{r.who}</span>{" "}
                    <span className={toneClass[r.tone]}>{r.text}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </MockCard>
    </div>
  );
};

// ---------- F8 EFFECT COUNTER ----------
const F8_Counter = () => {
  const [ref, v] = useReveal();
  const fmtMM = (x) => x.toLocaleString("ru-RU", { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " М ₽";
  const rows = [
    { I: I.TrendUp, l:"Возвращено через автоматику", val:8.4, suffix:" М ₽", dec:1 },
    { I: I.Shield, l:"Предотвращено отгрузок должникам", val:3.2, suffix:" М ₽", dec:1 },
    { I: I.Dollar, l:"Сэкономлено часов юриста / бухгалтера", val:214, suffix:" ч" },
    { I: I.TrendUp, l:"Срок оплаты ↓", val:-11, suffix:" дн" },
  ];
  return (
    <div ref={ref}>
      <MockCard title="Счётчик эффекта · 2 квартал" meta="к отчёту собственнику">
        <div className="divide-y divide-border">
          {rows.map((r, i)=>(
            <div key={i} className="flex items-center gap-3 py-2.5">
              <div className="grid h-8 w-8 place-items-center rounded-md bg-primary/10 text-primary">
                <r.I size={16} />
              </div>
              <div className="text-sm text-foreground">{r.l}</div>
              <div className="ml-auto text-base font-semibold tabular font-display">
                <CountUp value={r.val} decimals={r.dec||0} trigger={v} suffix={r.suffix} />
              </div>
            </div>
          ))}
        </div>
        <div className="mt-3 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2 signal-sweep">
          <I.File size={14} className="text-primary" />
          <span className="text-[13px] font-medium text-primary">Выгрузить отчёт PDF для собственника</span>
          <I.ArrowRight size={14} className="ml-auto text-primary" />
        </div>
      </MockCard>
    </div>
  );
};

Object.assign(window, {
  HeroDashboardMock,
  F1_MorningDigest, F2_Rules, F3_Dossier, F4_Signals,
  F5_Claim, F6_Reconcile, F7_Timeline, F8_Counter,
});