// Карточки результата: задачи, обязательства, дубли, решения, вопросы, подтверждение.
(function () {
  const { useState } = React as any;
  const T = (window as any).AppTypes;
  const { Badge, Button, Card, Label, Input, Select, Textarea, ConfidenceBar, Evidence, Warnings } = (window as any).UI;

  const KIND_META: Record<string, any> = {
    our_task: { dot: "bg-lime-deep", border: "", tone: "slate", label: "наша задача" },
    customer_commitment: { dot: "bg-violet-500", border: "", tone: "violet", label: "обязательство заказчика" },
    unclear_action: { dot: "bg-amber-400", border: "", tone: "amber", label: "владелец не определён" },
  };

  const MetaChip = ({ icon, label, value, muted }: any) => (
    <span className="inline-flex items-center gap-1 text-[12px]">
      <span className="font-medium text-ink-mute">{label}:</span>
      <span className={muted ? "font-medium text-ink-mute" : "font-bold text-ink"}>{value}</span>
    </span>
  );

  // ---------- дубликаты (§10, §11, §15)

  const DuplicatePanel = ({ dup, st, patch }: any) => {
    const likely = dup.level === "likely";
    const chosen = st.mode === "update" && st.dupId === dup.existing_task_id;
    const su = dup.suggested_updates || {};
    const changes = [
      su.description_addition ? { key: "description_addition", label: "добавить описание проблемы", value: su.description_addition } : null,
      su.deadline ? { key: "deadline", label: "изменить срок", value: su.deadline } : null,
      su.priority ? { key: "priority", label: "изменить приоритет", value: T.PRIORITY_LABEL[su.priority] || su.priority } : null,
      su.context_note ? { key: "context_note", label: "добавить контекст", value: su.context_note } : null,
    ].filter(Boolean) as any[];

    return (
      <div className={"mt-3 rounded-2xl p-3.5 " + (likely ? "bg-rose-50" : "bg-amber-50")}>
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-[13px] font-bold">
            {likely ? "Похоже, такая задача уже есть" : "Возможно связано с существующей"}
          </span>
          <Badge tone={likely ? "rose" : "amber"} title={dup.reason}>similarity {T.pct(dup.similarity_score)}</Badge>
        </div>
        <div className="mt-1.5 text-sm">
          <span className="mono font-semibold">{dup.existing_task_id}</span>
          <span className="text-ink-soft"> — {dup.existing_task_title}</span>
        </div>
        <div className="mt-1 text-xs text-ink-soft">{dup.reason}</div>

        <div className="mt-2.5 flex flex-wrap gap-2">
          <Button variant={chosen ? "accent" : "ghost"} className="py-1.5"
            onClick={() => patch({ mode: "update", dupId: dup.existing_task_id, selected: true })}>
            Использовать существующую
          </Button>
          <Button variant={st.mode === "create" ? "accent" : "ghost"} className="py-1.5"
            onClick={() => patch({ mode: "create", dupId: null, applied: null, selected: true })}>
            Создать новую
          </Button>
        </div>

        {chosen ? (
          <div className="fade-in mt-3 rounded-2xl bg-white p-3.5">
            <div className="text-xs font-semibold uppercase tracking-wide text-ink-soft">Existing</div>
            <div className="mt-0.5 text-sm"><span className="mono font-semibold">{dup.existing_task_id}</span> — {dup.existing_task_title}</div>
            <div className="mt-2.5 text-xs font-semibold uppercase tracking-wide text-ink-soft">AI предлагает изменения</div>
            {changes.length ? (
              <ul className="mt-1.5 space-y-1.5">
                {changes.map((c) => (
                  <li key={c.key} className="text-sm">
                    <span className="text-ink-soft">• {c.label}:</span>{" "}
                    <span className="text-ink">{String(c.value)}</span>
                  </li>
                ))}
              </ul>
            ) : <div className="mt-1 text-sm text-ink-mute">Модель не предложила изменений.</div>}
            <div className="mt-3 flex items-center gap-3">
              <Button variant="primary" className="py-1.5" disabled={!!st.applied}
                onClick={() => patch({ applied: dup.suggested_updates })}>
                {st.applied ? "Изменения применены" : "Apply changes"}
              </Button>
              {st.applied ? <span className="text-xs font-medium text-emerald-700">✓ будут применены к {dup.existing_task_id}</span> : null}
            </div>
          </div>
        ) : null}
      </div>
    );
  };

  // ---------- карточка действия

  const QueueSelect = ({ item, st, patch, queues, tracker }: any) => {
    if (!tracker || !tracker.configured || !queues.length) return null;
    const f = st.fields;
    const suggested = item.queue_key;
    const chosen = f.queue_key || "";
    return (
      <div className="mt-3 rounded-2xl bg-black/[.04] px-3.5 py-3">
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-xs font-semibold uppercase tracking-wide text-ink-soft">Очередь</span>
          {suggested && chosen === suggested ? <Badge tone="blue">предложил AI</Badge> : null}
          {suggested && chosen !== suggested ? <Badge tone="slate">AI предлагал {suggested}</Badge> : null}
          {!suggested ? <Badge tone="amber" title="Модель не стала угадывать очередь">AI не выбрал</Badge> : null}
        </div>
        {/* на узком экране список должен занимать всю ширину карточки, иначе уезжает за край */}
        <select value={chosen} onChange={(e: any) => patch({ fields: { ...f, queue_key: e.target.value || null } })}
          className="mt-2 block w-full min-w-0 max-w-full truncate rounded-xl border-0 bg-white px-3 py-2.5 text-sm font-semibold focus:ring-2 focus:ring-ink outline-none">
          <option value="">— не выбрана —</option>
          {queues.map((q: any) => <option key={q.key} value={q.key}>{q.key} — {q.name}</option>)}
        </select>
        {item.queue_reason ? <p className="mt-1.5 text-xs text-ink-soft">{item.queue_reason}</p> : null}
        {!chosen ? <p className="mt-1.5 text-xs text-rose-700">Без очереди задача в трекере не создастся.</p> : null}
      </div>
    );
  };

  const ActionCard = ({ item, kind, st, patch, dups, ourNames, customerNames, queues, tracker }: any) => {
    const [editing, setEditing] = useState(false);
    const meta = KIND_META[kind];
    const f = st.fields;
    const who = kind === "customer_commitment" ? f.owner : f.assignee;
    const whoLabel = kind === "customer_commitment" ? "Ответственный" : "Исполнитель";
    const names = kind === "customer_commitment" ? customerNames : ourNames;

    return (
      <Card className={"px-4 py-4 " + (st.selected ? "" : "opacity-50")}>
        <div className="flex items-start gap-3">
          <input type="checkbox" checked={st.selected} onChange={(e: any) => patch({ selected: e.target.checked })}
            title="Включить в создание задач"
            className="mt-1 h-[18px] w-[18px] shrink-0 cursor-pointer rounded-md border-black/20 accent-ink focus:ring-ink" />
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-start justify-between gap-2">
              <div className="flex min-w-0 items-start gap-2">
                <span className={"mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full " + meta.dot} />
                {editing
                  ? <Input value={f.title} onChange={(e: any) => patch({ fields: { ...f, title: e.target.value } })} />
                  : <h3 className="text-[15px] font-bold leading-snug tracking-tight text-ink">{f.title}</h3>}
              </div>
              <div className="shrink-0 pt-0.5"><ConfidenceBar value={item.confidence} /></div>
            </div>

            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1">
              <MetaChip icon="👤" label={whoLabel} value={who || "не назначен"} muted={!who} />
              <MetaChip icon="📅" label="Срок" value={T.formatDeadline(f)} muted={!f.deadline && !f.deadline_text} />
              {kind === "our_task"
                ? <MetaChip icon="⚑" label="Приоритет" value={T.PRIORITY_LABEL[f.priority] || f.priority} muted={f.priority === "unknown"} />
                : null}
              <Badge tone={meta.tone}>{T.OWNER_LABEL[f.owner_side] || meta.label}</Badge>
              {st.mode === "update" ? <Badge tone="emerald">обновление {st.dupId}</Badge> : null}
            </div>

            {f.description ? <p className="mt-2 text-sm leading-relaxed text-ink-soft">{f.description}</p> : null}
            {item.why_unclear ? (
              <p className="mt-2 rounded-2xl bg-amber-50 px-3.5 py-2.5 text-[13px] font-medium text-amber-900">
Почему неясно: {item.why_unclear}
              </p>
            ) : null}

            <Evidence quote={item.source_quote} verified={item.quote_verified} />
            <Warnings items={item.warnings} />

            {dups.map((d: any) => <DuplicatePanel key={d.existing_task_id} dup={d} st={st} patch={patch} />)}

            {kind === "our_task" && st.mode !== "update"
              ? <QueueSelect item={item} st={st} patch={patch} queues={queues} tracker={tracker} />
              : null}
            {kind !== "our_task" ? (
              <p className="mt-3 text-xs text-ink-mute">
                {kind === "customer_commitment"
                  ? "Обязательство заказчика — в трекер не уходит, остаётся в отчёте по встрече."
                  : "Пока владелец не определён как наша команда, задача в трекер не уходит."}
              </p>
            ) : null}

            {editing ? (
              <div className="fade-in mt-3 grid gap-3 rounded-2xl bg-black/[.04] p-3.5 sm:grid-cols-2">
                <div>
                  <Label>{whoLabel}</Label>
                  <Select value={who || ""} onChange={(e: any) => patch({
                    fields: kind === "customer_commitment"
                      ? { ...f, owner: e.target.value || null }
                      : { ...f, assignee: e.target.value || null },
                  })}>
                    <option value="">не назначен</option>
                    {names.map((n: string) => <option key={n} value={n}>{n}</option>)}
                  </Select>
                </div>
                <div>
                  <Label>Срок (дата)</Label>
                  <Input type="date" value={f.deadline || ""}
                    onChange={(e: any) => patch({ fields: { ...f, deadline: e.target.value || null } })} />
                </div>
                <div>
                  <Label>Срок словами</Label>
                  <Input value={f.deadline_text || ""} placeholder="например, следующий релиз"
                    onChange={(e: any) => patch({ fields: { ...f, deadline_text: e.target.value || null } })} />
                </div>
                <div>
                  <Label>Приоритет</Label>
                  <Select value={f.priority || "unknown"}
                    onChange={(e: any) => patch({ fields: { ...f, priority: e.target.value } })}>
                    {["unknown", "low", "medium", "high"].map((p) => (
                      <option key={p} value={p}>{T.PRIORITY_LABEL[p]}</option>
                    ))}
                  </Select>
                </div>
                <div>
                  <Label>Сторона</Label>
                  <Select value={f.owner_side}
                    onChange={(e: any) => patch({ fields: { ...f, owner_side: e.target.value } })}>
                    {["OUR_TEAM", "CUSTOMER", "UNKNOWN"].map((o) => (
                      <option key={o} value={o}>{T.OWNER_LABEL[o]}</option>
                    ))}
                  </Select>
                </div>
                <div className="sm:col-span-2">
                  <Label>Описание</Label>
                  <Textarea rows={3} value={f.description}
                    onChange={(e: any) => patch({ fields: { ...f, description: e.target.value } })} />
                </div>
              </div>
            ) : null}

            <div className="mt-3">
              <Button variant="link" onClick={() => setEditing(!editing)}>
                {editing ? "Готово" : "Редактировать"}
              </Button>
            </div>
          </div>
        </div>
      </Card>
    );
  };

  // ---------- решения и открытые вопросы

  const TextList = ({ items, icon, empty }: any) => {
    if (!items.length) return <p className="text-sm text-ink-mute">{empty}</p>;
    return (
      <div className="space-y-2">
        {items.map((x: any, i: number) => (
          <Card key={i} className="px-4 py-3.5">
            <div className="flex gap-2.5">
              <span className="mt-0.5 shrink-0">{icon}</span>
              <div className="min-w-0 flex-1">
                <div className="text-[14px] font-medium leading-relaxed text-ink">{x.text}</div>
                <Evidence quote={x.source_quote} verified={x.quote_verified} />
              </div>
            </div>
          </Card>
        ))}
      </div>
    );
  };

  // ---------- подтверждение (§14)

  const ConfirmModal = ({ plan, onCancel, onConfirm, busy, tracker }: any) => {
    const c = plan.counts;
    const lines = [
      c.our_tasks ? c.our_tasks + " — наша команда" : null,
      c.customer_commitments ? c.customer_commitments + " — customer commitment" : null,
      c.unclear_actions ? c.unclear_actions + " — без владельца" : null,
    ].filter(Boolean) as string[];

    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4">
        <div className="fade-in w-full max-w-lg rounded-3xl bg-white p-6 shadow-xl">
          <h3 className="text-lg font-extrabold tracking-tight">Подтвердите создание</h3>
          <div className="mt-4 space-y-3 text-sm">
            {c.created ? (
              <div>
                <div className="font-medium">Будет создано {c.created} {c.created === 1 ? "задача" : "задачи"}:</div>
                <ul className="mt-1 space-y-0.5 text-ink-soft">{lines.map((l, i) => <li key={i}>• {l}</li>)}</ul>
              </div>
            ) : <div className="text-ink-soft">Новых задач не создаётся.</div>}
            {c.updated ? (
              <div className="rounded-2xl bg-lime-soft px-3.5 py-2.5 text-ink">
                {c.updated} существующ{c.updated === 1 ? "ая задача" : "их задач"} будет обновлен{c.updated === 1 ? "а" : "о"} вместо создания новой:
                <ul className="mt-1">{plan.items.filter((i: any) => i.action === "update_existing")
                  .map((i: any, k: number) => <li key={k} className="mono text-xs">{i.existing_task_id}</li>)}</ul>
              </div>
            ) : null}
            {plan.byQueue && plan.byQueue.length ? (
              <div>
                <div className="text-xs font-semibold uppercase tracking-wide text-ink-soft">В какие очереди</div>
                <ul className="mt-1 space-y-0.5 text-ink-soft">
                  {plan.byQueue.map((q: any) => (
                    <li key={q.key}><span className="mono font-semibold text-ink">{q.key || "без очереди"}</span> — {q.count}</li>
                  ))}
                </ul>
              </div>
            ) : null}
            {c.no_queue ? (
              <div className="rounded-2xl bg-rose-50 px-3.5 py-2.5 text-rose-900">
                {c.no_queue} {c.no_queue === 1 ? "задача" : "задачи"} без очереди — они не будут созданы.
                Вернитесь и выберите очередь в карточке.
              </div>
            ) : null}
            {c.report_only ? (
              <div className="text-ink-soft">
                {c.report_only} записи останутся только в отчёте по встрече (обязательства заказчика
                и действия без владельца в трекер не уходят).
              </div>
            ) : null}
            <p className="text-xs text-ink-mute">
              {tracker && tracker.configured
                ? (tracker.dry_run
                  ? "Режим dry-run: ничего не создаётся, приложение покажет тело запроса к Трекеру."
                  : "Боевой режим: задачи будут созданы в Яндекс Трекере.")
                : "Трекер не подключён — создание имитируется на бэкенде."}
            </p>
          </div>
          <div className="mt-6 flex justify-end gap-2">
            <Button variant="ghost" onClick={onCancel} disabled={busy}>Отмена</Button>
            <Button variant="accent" onClick={onConfirm} disabled={busy}>
              {busy ? "Создаю…" : "✓ Создать"}
            </Button>
          </div>
        </div>
      </div>
    );
  };

  const IssueRow = ({ t }: any) => {
    const [open, setOpen] = useState(false);
    return (
      <li className="rounded-lg px-2 py-1.5 hover:bg-slate-50">
        <div className="flex flex-wrap items-baseline gap-2">
          {t.url
            ? <a href={t.url} target="_blank" rel="noreferrer" className="mono font-semibold text-blue-700 hover:underline">{t.key}</a>
            : <span className="mono font-semibold text-ink-soft">{t.key}</span>}
          <span className="min-w-0 flex-1 text-ink-soft">{t.title}</span>
          {t.status === "dry_run" ? <Badge tone="amber">dry-run</Badge> : null}
          {t.status === "error" ? <Badge tone="rose">ошибка</Badge> : null}
        </div>
        {t.error ? <div className="mt-1 text-xs text-rose-700">{t.error}</div> : null}
        {t.payload ? (
          <div className="mt-1">
            <button onClick={() => setOpen(!open)} className="text-xs text-ink-soft hover:text-ink">
              {open ? "▾" : "▸"} запрос к Трекеру
            </button>
            {open ? (
              <pre className="mono mt-1 max-h-52 overflow-auto whitespace-pre-wrap break-words rounded-lg bg-slate-900 p-3 text-[11px] leading-relaxed text-slate-100">
                {JSON.stringify(t.payload, null, 2)}
              </pre>
            ) : null}
          </div>
        ) : null}
      </li>
    );
  };

  const SuccessPanel = ({ data, onClose }: any) => (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4">
      <div className="fade-in max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-3xl bg-white p-6 shadow-xl">
        <div className="flex items-center gap-2">
          <span className="flex h-9 w-9 items-center justify-center rounded-full bg-lime text-ink">✓</span>
          <h3 className="text-[17px] font-extrabold tracking-tight">{data.message}</h3>
        </div>
        <div className="mt-4 space-y-4 text-sm">
          {[["created", "Создано"], ["updated", "Обновлено"], ["failed", "Не удалось"],
            ["report_only", "Только в отчёте по встрече"]].map(([key, label]) => (
            (data[key] || []).length ? (
              <div key={key}>
                <div className="text-xs font-semibold uppercase tracking-wide text-ink-soft">{label}</div>
                <ul className="mt-1 space-y-1">
                  {data[key].map((t: any, i: number) => <IssueRow key={t.key + i} t={t} />)}
                </ul>
              </div>
            ) : null
          ))}
        </div>
        <div className="mt-6 flex justify-end">
          <Button variant="primary" onClick={onClose}>Готово</Button>
        </div>
      </div>
    </div>
  );

  (window as any).Results = { ActionCard, TextList, ConfirmModal, SuccessPanel, KIND_META };
})();