import { type RefObject, useLayoutEffect, useRef, useState } from "react";
import { ApiError } from "../api/client.ts";
import { useClosedStatuses } from "../api/closed.ts";
import { useIssue, useSettings } from "../api/queries.ts";
import type { IssueComment, IssueDetail } from "../api/types.ts";
import { JIRA_URL } from "../board/constants.ts";
import { fmtDate, fmtStamp } from "../board/model/util.ts";
import { groupLinks, isOverdue, todayISO } from "./card.ts";
import { useCommentsHidden } from "./commentsPref.ts";
import { IssueLink } from "./IssueLink.tsx";
import { Badge, Button, IconButton, IconClose, IconExternal, Notice, Panel } from "../ui/index.ts";
import { Notes } from "./Notes.tsx";
import { dueOf } from "./options.ts";
import { WikiText } from "./wiki/WikiText.tsx";
import "./issues.css";

const DESC_LINES = 8;

export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClose: () => void }) {
  const issue = useIssue(key);
  const settings = useSettings();
  const closed = useClosedStatuses();
  const close = <IconButton label="Закрыть" icon={<IconClose />} onClick={onClose} />;
  if (issue.isPending) {
    return <div className="issue" data-testid="issue-card"><div className="issue-head"><div className="row1"><span className="key">{key}</span><span className="spacer" />{close}</div><p className="hint">загрузка {key}…</p></div></div>;
  }
  if (issue.error instanceof ApiError && issue.error.status === 404) {
    return (
      <div className="issue issue--state" data-testid="issue-card">
        <Notice tone="info" action={<Button onClick={onClose}>Закрыть</Button>}>Задачи {key} нет в зеркале хаба.</Notice>
      </div>
    );
  }
  if (issue.isError && !issue.data) {
    return (
      <div className="issue issue--state" data-testid="issue-card">
        <Notice tone="error" action={<><Button onClick={() => void issue.refetch()}>Повторить</Button><Button onClick={onClose}>Закрыть</Button></>}>
          {issue.error.message}
        </Notice>
      </div>
    );
  }
  const i = issue.data!;
  const due = dueOf(i);
  const facts = [
    i.assignee && <span key="who">{i.assignee}</span>,
    due && <span key="due">срок {fmtDate(due)}{isOverdue(due, i.status, closed, todayISO()) && <> <Badge tone="error">просрочено</Badge></>}</span>,
    i.sprint && <span key="sprint">{i.sprint}</span>,
    i.epic_key && <span key="epic">эпик: {i.epic_summary ?? i.epic_key}</span>,
  ].filter(Boolean);
  return (
    <div className="issue" data-testid="issue-card">
      <header className="issue-head" data-testid="issue-head">
        <div className="row1">
          <span className="key">{i.key}</span>
          {i.status && <Badge>{i.status}</Badge>}
          <span className="spacer" />
          <a className="ui-btn ui-btn--secondary ui-btn--md" href={`${JIRA_URL}/browse/${i.key}`} target="_blank" rel="noopener"><IconExternal size={16} />Открыть в Jira</a>
          {close}
        </div>
        <h2 id="issue-modal-title">{i.summary || i.key}</h2>
        {facts.length > 0 && <p className="facts" data-testid="issue-facts">{facts.flatMap((f, n) => (n ? [" · ", f] : [f]))}</p>}
        {issue.isError && (
          <Notice tone="error" action={<Button onClick={() => void issue.refetch()}>Повторить</Button>}>{issue.error.message}</Notice>
        )}
      </header>
      <div className="cols">
        <div className="main">
          <Links issue={i} linkTypes={(settings.data?.link_types ?? {}) as Record<string, string>} />
          {i.description && <Description text={i.description} projectKey={settings.data?.project_key} />}
          <Comments items={i.comments ?? []} projectKey={settings.data?.project_key} />
        </div>
        <Panel className="side">
          <Notes key={i.key} issue={i} />
          <OtherFields issue={i} />
          <Commands issue={i} />
        </Panel>
      </div>
    </div>
  );
}

function Links({ issue, linkTypes }: { issue: IssueDetail; linkTypes: Record<string, string> }) {
  const groups = groupLinks(issue, linkTypes);
  return (
    <section className="links-sec">
      <h3>Связи</h3>
      {!groups.length && <p className="hint">связей нет</p>}
      {groups.map(([id, title, links]) => (
        <div key={id} className="group" role="group" aria-labelledby={`links-${id}`}>
          <h4 id={`links-${id}`}>{title}</h4>
          <ul className="links">
            {links.map((l, n) => (
              <li key={`${n}:${l.key}:${l.tag ?? ""}`}>
                {l.tag && <><span className="tag">{l.tag}</span>{" "}</>}
                <IssueLink issueKey={l.key} />{" "}
                {l.summary === null && l.status === null
                  ? <span className="sum absent">нет в зеркале</span>
                  : <><span className="sum">{l.summary}</span>{l.status && <>{" "}<Badge>{l.status}</Badge></>}</>}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  );
}

// переключатель блока «исходник» / «текст»; выбор живёт до размонтирования карточки (design wiki-render #7)
function SourceToggle({ source, onToggle }: { source: boolean; onToggle: () => void }) {
  return <Button variant="ghost" aria-pressed={source} onClick={onToggle}>{source ? "текст" : "исходник"}</Button>;
}

function Description({ text, projectKey }: { text: string; projectKey?: string }) {
  const ref = useRef<HTMLElement>(null);
  const [open, setOpen] = useState(false);
  const [source, setSource] = useState(false);
  const [overflow, setOverflow] = useState(false);
  useLayoutEffect(() => {
    const el = ref.current;
    if (!el || open) return;
    const measure = () => setOverflow(el.scrollHeight > el.clientHeight + 1);
    measure();
    // карточка из кэша монтируется до showModal (размеры нулевые), окно меняет ширину, догружаются шрифты — перемер (C-1)
    if (typeof ResizeObserver === "undefined") return;
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    if (el.firstElementChild) ro.observe(el.firstElementChild);
    return () => ro.disconnect();
  }, [text, open, source]);
  // в рендере «длинное» — только по измерению: пустые строки исходника высоты не дают (design #8)
  const long = (source && text.split("\n").length > DESC_LINES) || overflow;
  const cls = "description" + (open ? "" : " clamped");
  return (
    <section>
      <div className="sec-head">
        <h3>Описание</h3>
        <SourceToggle source={source} onToggle={() => setSource(!source)} />
      </div>
      {source
        ? <pre ref={ref as RefObject<HTMLPreElement>} className={cls}>{text}</pre>
        : <div ref={ref as RefObject<HTMLDivElement>} className={cls}><WikiText text={text} projectKey={projectKey} /></div>}
      {(long || open) && <Button variant="ghost" className="more" onClick={() => setOpen(!open)}>{open ? "свернуть" : "развернуть"}</Button>}
    </section>
  );
}

function Comment({ c, projectKey }: { c: IssueComment; projectKey?: string }) {
  const [source, setSource] = useState(false);
  return (
    <li>
      <div className="c-head">
        <span className="c-head__name">{c.author ?? "—"}{c.created ? `, ${fmtStamp(c.created)}` : ""}</span>
        <SourceToggle source={source} onToggle={() => setSource(!source)} />
      </div>
      {source
        ? <pre className="body">{c.body}</pre>
        : <div className="body"><WikiText text={c.body} projectKey={projectKey} /></div>}
    </li>
  );
}

function Comments({ items, projectKey }: { items: IssueComment[]; projectKey?: string }) {
  const [hidden, setHidden] = useCommentsHidden();
  return (
    <section className="comments" data-testid="comments">
      <div className="sec-head">
        <h3>Комментарии ({items.length})</h3>
        {items.length > 0 && <Button variant="ghost" onClick={() => setHidden(!hidden)}>{hidden ? "Показать" : "Скрыть"}</Button>}
      </div>
      {!items.length && <p className="hint">комментариев нет</p>}
      {items.length > 0 && !hidden && (
        <ul>
          {items.map((c) => <Comment key={c.comment_id} c={c} projectKey={projectKey} />)}
        </ul>
      )}
    </section>
  );
}

function OtherFields({ issue: i }: { issue: IssueDetail }) {
  const rows: [string, string | null][] = [
    ["Тип", i.issue_type], ["Приоритет", i.priority], ["Автор", i.reporter], ["Метки", i.labels.join(", ") || null],
    ["Плановое начало", i.planned_start], ["Обновлена в Jira", i.jira_updated ? fmtStamp(i.jira_updated) : null],
    ["Сосед по связям", i.neighbor ? "да" : null],
  ];
  return (
    <section className="other" aria-labelledby="other-title">
      <h3 id="other-title">Прочие поля</h3>
      <dl className="fields">{rows.filter(([, v]) => v).map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}</dl>
    </section>
  );
}

function Commands({ issue: i }: { issue: IssueDetail }) {
  if (!i.commands.length) {
    return <section className="commands"><h3>Команды моста</h3><p className="hint">команд по задаче не было</p></section>;
  }
  return (
    <section className="commands">
      <details>
        <summary>Команды моста ({i.commands.length})</summary>
        <div className="cmd-wrap"><table className="grid">
          <thead><tr><th>Команда</th><th>Пакет</th><th>Тип</th><th>Статус</th><th>Завершена</th><th>Ошибка</th></tr></thead>
          <tbody>{i.commands.map((c) => (
            <tr key={c.id}><td>#{c.id}</td><td>#{c.batch_id}</td><td>{c.type}</td><td>{c.status}</td>
              <td>{c.finished_at ? fmtStamp(c.finished_at) : ""}</td><td>{c.error}</td></tr>
          ))}</tbody>
        </table></div>
      </details>
    </section>
  );
}