import { useI18n } from "../../i18n/I18nContext";

type ScreenDef = {
  id: string;
  titleKey: string;
  captionKey: string;
  variant: "radar" | "scout" | "studio" | "crm" | "outbox";
};

/** 主打流程：找需求 → 掃場 → 寫回覆 → 名單 → 發送 */
const SCREENS: ScreenDef[] = [
  {
    id: "radar",
    titleKey: "home.preview.radar.title",
    captionKey: "home.preview.radar.caption",
    variant: "radar",
  },
  {
    id: "scout",
    titleKey: "home.preview.scout.title",
    captionKey: "home.preview.scout.caption",
    variant: "scout",
  },
  {
    id: "studio",
    titleKey: "home.preview.studio.title",
    captionKey: "home.preview.studio.caption",
    variant: "studio",
  },
  {
    id: "crm",
    titleKey: "home.preview.crm.title",
    captionKey: "home.preview.crm.caption",
    variant: "crm",
  },
  {
    id: "outbox",
    titleKey: "home.preview.outbox.title",
    captionKey: "home.preview.outbox.caption",
    variant: "outbox",
  },
];

/**
 * 公開首頁產品畫面示意（非真實帳號截圖；避免外洩用戶資料）。
 * 視覺對齊 Harbor Desk，讓訪客一眼看出主流程。
 */
export function PublicProductPreview() {
  const { t } = useI18n();

  return (
    <div className="hb-public-previews" data-testid="home-product-preview">
      {SCREENS.map((screen) => (
        <figure key={screen.id} className="hb-public-preview" data-preview={screen.id}>
          <figcaption className="hb-public-preview__caption">
            <strong>{t(screen.titleKey)}</strong>
            <span className="text-muted">{t(screen.captionKey)}</span>
          </figcaption>
          <div
            className={`hb-public-preview__frame hb-public-preview__frame--${screen.variant}`}
            role="img"
            aria-label={t(screen.titleKey)}
          >
            <div className="hb-public-preview__chrome" aria-hidden>
              <span />
              <span />
              <span />
              <div className="hb-public-preview__chrome-bar" />
            </div>
            <div className="hb-public-preview__body" aria-hidden>
              {screen.variant === "radar" ? <MockRadar t={t} /> : null}
              {screen.variant === "scout" ? <MockScout t={t} /> : null}
              {screen.variant === "studio" ? <MockStudio t={t} /> : null}
              {screen.variant === "crm" ? <MockCrm t={t} /> : null}
              {screen.variant === "outbox" ? <MockOutbox t={t} /> : null}
            </div>
          </div>
        </figure>
      ))}
    </div>
  );
}

type TFn = (key: string, params?: Record<string, string | number>) => string;

function MockRadar({ t }: { t: TFn }) {
  return (
    <>
      <div className="hb-mock-row hb-mock-row--head">
        <span className="hb-mock-label">{t("home.preview.mock.radar.badge")}</span>
        <span className="hb-mock-meta">{t("home.preview.mock.radar.meta")}</span>
      </div>
      {[
        "home.preview.mock.radar.row1",
        "home.preview.mock.radar.row2",
        "home.preview.mock.radar.row3",
      ].map((key) => (
        <div key={key} className="hb-mock-card">
          <span className="hb-mock-text">{t(key)}</span>
          <div className="hb-mock-actions">
            <span className="hb-mock-btn hb-mock-btn--sm" />
            <span className="hb-mock-btn hb-mock-btn--ghost hb-mock-btn--sm" />
          </div>
        </div>
      ))}
    </>
  );
}

function MockScout({ t }: { t: TFn }) {
  return (
    <>
      <div className="hb-mock-row hb-mock-row--head">
        <span className="hb-mock-label">{t("home.preview.mock.scout.badge")}</span>
        <span className="hb-mock-pill" />
      </div>
      <div className="hb-mock-card">
        <span className="hb-mock-text">{t("home.preview.mock.scout.hit")}</span>
        <span className="hb-mock-text hb-mock-text--muted">{t("home.preview.mock.scout.snippet")}</span>
        <div className="hb-mock-actions">
          <span className="hb-mock-btn" />
          <span className="hb-mock-btn hb-mock-btn--ghost" />
        </div>
      </div>
      <div className="hb-mock-card hb-mock-card--dim">
        <span className="hb-mock-text">{t("home.preview.mock.scout.hit2")}</span>
        <span className="hb-mock-line hb-mock-line--short" />
      </div>
    </>
  );
}

function MockStudio({ t }: { t: TFn }) {
  return (
    <>
      <div className="hb-mock-row">
        <span className="hb-mock-chip hb-mock-chip--label">{t("home.preview.mock.studio.tab1")}</span>
        <span className="hb-mock-chip hb-mock-chip--label hb-mock-chip--active">
          {t("home.preview.mock.studio.tab2")}
        </span>
        <span className="hb-mock-chip hb-mock-chip--label">{t("home.preview.mock.studio.tab3")}</span>
      </div>
      <div className="hb-mock-editor">
        <span className="hb-mock-text">{t("home.preview.mock.studio.draft1")}</span>
        <span className="hb-mock-text">{t("home.preview.mock.studio.draft2")}</span>
        <span className="hb-mock-text hb-mock-text--muted">{t("home.preview.mock.studio.draft3")}</span>
      </div>
      <div className="hb-mock-actions">
        <span className="hb-mock-btn hb-mock-btn--wide" />
      </div>
    </>
  );
}

function MockCrm({ t }: { t: TFn }) {
  const cols = [
    { key: "new", label: "home.preview.mock.crm.col1", n: 2 },
    { key: "talk", label: "home.preview.mock.crm.col2", n: 1 },
    { key: "win", label: "home.preview.mock.crm.col3", n: 1 },
  ] as const;
  return (
    <>
      <div className="hb-mock-board">
        {cols.map((col) => (
          <div key={col.key} className="hb-mock-board__col">
            <span className="hb-mock-meta">{t(col.label)}</span>
            {Array.from({ length: col.n }).map((_, i) => (
              <div key={i} className="hb-mock-card hb-mock-card--compact">
                <span className="hb-mock-line hb-mock-line--med" />
                <span className="hb-mock-line hb-mock-line--short" />
              </div>
            ))}
          </div>
        ))}
      </div>
      <span className="hb-mock-meta">{t("home.preview.mock.crm.foot")}</span>
    </>
  );
}

function MockOutbox({ t }: { t: TFn }) {
  const rows = [
    { label: "home.preview.mock.outbox.r1", ready: true },
    { label: "home.preview.mock.outbox.r2", ready: false },
    { label: "home.preview.mock.outbox.r3", ready: false },
  ] as const;
  return (
    <>
      {rows.map((row) => (
        <div key={row.label} className="hb-mock-row hb-mock-row--list">
          <span className="hb-mock-dot" />
          <div className="hb-mock-stack">
            <span className="hb-mock-text">{t(row.label)}</span>
            <span className="hb-mock-line hb-mock-line--short" />
          </div>
          <span className={`hb-mock-status${row.ready ? " is-ready" : ""}`} />
        </div>
      ))}
    </>
  );
}
