import { useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import type { IntentBand, Opportunity } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Badge, Button } from "../ui";
import { PrimaryProductPicker } from "./PrimaryProductPicker";
import { ProductMatchDetails } from "./ProductMatchDetails";
import { ReplyComposer } from "./ReplyComposer";

/** 殼層 overflow-x: clip 會把 fixed 鎖在整頁座標；量頂欄／底欄，抽屜才不會衝過頭。 */
function pinDrawerToChrome(el: HTMLElement) {
  const header = document.querySelector<HTMLElement>(".hb-shell__header");
  const dock = document.querySelector<HTMLElement>(".hb-dock");
  const top = header?.getBoundingClientRect().height ?? 0;
  const dockHidden = !dock || getComputedStyle(dock).display === "none";
  const bottom = dockHidden ? 0 : dock.getBoundingClientRect().height;
  el.style.top = `${Math.round(top)}px`;
  el.style.bottom = `${Math.round(bottom)}px`;
}

const BANDS: IntentBand[] = ["high", "mid", "low"];

type Props = {
  opportunity: Opportunity;
  onClose: () => void;
  onAccept?: (opportunity: Opportunity) => void;
  onComplete?: (opportunity: Opportunity) => void;
  /** 改主推產品（多產品匹配時）；沒給就不顯示。 */
  onSetPrimary?: (opportunity: Opportunity, productId: string, reason: string) => void;
  /** 覆寫意向分級；沒給就不顯示。 */
  onOverrideBand?: (opportunity: Opportunity, band: IntentBand) => void;
  busy?: boolean;
};

export function OpportunityDetailDrawer({
  opportunity,
  onClose,
  onAccept,
  onComplete,
  onSetPrimary,
  onOverrideBand,
  busy = false,
}: Props) {
  const { t } = useI18n();
  const [overrideOpen, setOverrideOpen] = useState(false);
  const drawerRef = useRef<HTMLElement>(null);
  const pending = (opportunity.review_state || "pending") === "pending";
  const accepted = opportunity.status === "accepted" || Boolean(opportunity.contact_id);
  const matches = opportunity.product_matches ?? [];

  useLayoutEffect(() => {
    const el = drawerRef.current;
    if (!el) return;
    const apply = () => pinDrawerToChrome(el);
    apply();
    const header = document.querySelector(".hb-shell__header");
    const dock = document.querySelector(".hb-dock");
    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(apply);
    if (ro && header) ro.observe(header);
    if (ro && dock) ro.observe(dock);
    window.addEventListener("resize", apply);
    return () => {
      ro?.disconnect();
      window.removeEventListener("resize", apply);
    };
  }, []);

  const drawer = (
    <aside ref={drawerRef} className="hb-opp-drawer" role="dialog" aria-modal="true" aria-label={t("radar.drawer.aria")}>
      <div className="hb-opp-drawer__head">
        <div>
          <span className="hb-radar-section__hint">{t("radar.drawer.title")}</span>
          <h2>{opportunity.primary_product_label || t("radar.drawer.noProduct")}</h2>
        </div>
        <Button type="button" variant="ghost" aria-label={t("radar.drawer.closeAria")} onClick={onClose}>{t("radar.drawer.close")}</Button>
      </div>
      <div className="hb-opp-drawer__body">
        <p className="hb-opp-card__text">{opportunity.text}</p>
        <div className="hb-opp-card__meta">
          <Badge tone="brand">{t("radar.drawer.intent", { n: opportunity.intent_score })}</Badge>
          {opportunity.priority_score !== undefined ? <Badge tone="warning">{t("radar.drawer.priority", { n: opportunity.priority_score })}</Badge> : null}
          <span>@{opportunity.author_handle || t("radar.card.unknownAuthor")}</span>
        </div>

        {/* 回覆放在證據上方：看完原文最想做的事就是回他。 */}
        <section className="hb-opp-drawer__section">
          <h3>{t("radar.drawer.reply")}</h3>
          <ReplyComposer opportunity={opportunity} />
        </section>

        {opportunity.demand_evidence?.length ? (
          <section className="hb-opp-drawer__section"><h3>{t("radar.drawer.evidence")}</h3><ul>{opportunity.demand_evidence.map((item) => <li key={item}>{item}</li>)}</ul></section>
        ) : null}
        <section className="hb-opp-drawer__section">
          <h3>{t("radar.drawer.matches")}</h3>
          {matches.length ? matches.map((match) => <ProductMatchDetails key={match.product_id} match={match} />) : <p className="hb-radar-section__hint">{t("radar.drawer.generic")}</p>}
          {matches.length > 1 && onSetPrimary ? (
            <PrimaryProductPicker
              matches={matches}
              currentId={opportunity.primary_product_id}
              busy={busy}
              onSet={(productId, reason) => onSetPrimary(opportunity, productId, reason)}
            />
          ) : null}
        </section>
        {opportunity.reasons.length ? <section className="hb-opp-drawer__section"><h3>{t("radar.drawer.judge")}</h3><div className="hb-opp-reasons">{opportunity.reasons.map((reason) => <div className="hb-opp-reason" key={reason.dimension}><strong>{reason.dimension}</strong><span>{reason.score}</span><span>{reason.reason}</span></div>)}</div></section> : null}
        <div className="hb-opp-drawer__actions">
          {pending && onComplete ? (
            <Button type="button" disabled={busy} onClick={() => onComplete(opportunity)}>{t("radar.card.keep")}</Button>
          ) : null}
          {pending && !accepted && onAccept ? (
            <Button type="button" variant="ghost" disabled={busy} onClick={() => onAccept(opportunity)}>{t("radar.card.accept")}</Button>
          ) : null}
          <a className="hb-btn hb-btn--ghost" href={opportunity.permalink} target="_blank" rel="noreferrer">{t("radar.drawer.openOriginal")}</a>
          {onOverrideBand ? (
            <Button type="button" variant="ghost" aria-expanded={overrideOpen} onClick={() => setOverrideOpen((value) => !value)}>
              {t("radar.today.action.override")}
            </Button>
          ) : null}
        </div>
        {overrideOpen && onOverrideBand ? (
          <div className="hb-radar-actions">
            {BANDS.map((band) => (
              <Button
                key={band}
                type="button"
                variant="secondary"
                disabled={busy || opportunity.intent_band === band}
                onClick={() => onOverrideBand(opportunity, band)}
              >
                {t(`radar.today.band.${band}`)}
              </Button>
            ))}
          </div>
        ) : null}
        {pending ? <p className="hb-field__hint">{t("radar.drawer.hint")}</p> : null}
      </div>
    </aside>
  );

  return createPortal(drawer, document.body);
}