import { Link, Navigate } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
import { PublicLocaleSwitch } from "../components/layout/PublicLocaleSwitch";
import { PublicProductPreview } from "../components/layout/PublicProductPreview";
import { BrandMark, Button } from "../components/ui";
import { useI18n } from "../i18n/I18nContext";
import { getPlanRights } from "../lib/planRights";
import { PLANS, type PlanId } from "../lib/usageMeter";

/** 首頁：效果 → 主打畫面 → 方案；登入只在頂欄。 */
const OUTCOMES = [
  { key: "find", title: "home.outcome.find.title", body: "home.outcome.find.body" },
  { key: "reply", title: "home.outcome.reply.title", body: "home.outcome.reply.body" },
  { key: "close", title: "home.outcome.close.title", body: "home.outcome.close.body" },
] as const;

const PLAN_ORDER: PlanId[] = ["free", "starter", "pro"];

/**
 * 公開首頁：能達到什麼、產品主畫面、方案差異。
 * 已登入會員進 /app/today。
 */
export function HomePage() {
  const { member, loading } = useAuth();
  const { t, formatPlanPrice } = useI18n();

  if (!loading && member) {
    return <Navigate to="/app/today" replace />;
  }

  return (
    <div className="hb-public hb-public--home" data-testid="public-home">
      <header className="hb-public__header">
        <div className="hb-public__brand">
          <BrandMark size={32} title={t("login.brandTitle")} />
          <div className="hb-public__brand-text">
            <strong>{t("app.name")}</strong>
            <span className="text-muted display-en">{t("app.nameEn")}</span>
          </div>
        </div>
        <nav className="hb-public__nav" aria-label={t("home.navLabel")}>
          <PublicLocaleSwitch />
          <Link to="/login" className="hb-public__nav-cta">
            <Button type="button">{t("home.ctaLogin")}</Button>
          </Link>
        </nav>
      </header>

      <main className="hb-public__main">
        <section className="hb-public__hero" aria-labelledby="home-hero-title">
          <h1 id="home-hero-title" className="hb-public__title">
            {t("home.heroTitle")}
          </h1>
          <p className="hb-public__lead">{t("home.heroLead")}</p>
        </section>

        <section
          className="hb-public__features"
          id="features"
          aria-labelledby="home-outcomes-title"
          data-testid="home-features"
        >
          <h2 id="home-outcomes-title" className="hb-public__section-title">
            {t("home.outcomesTitle")}
          </h2>
          <ul className="hb-public__feature-list">
            {OUTCOMES.map((item) => (
              <li key={item.key} className="hb-public__feature-item" data-outcome={item.key}>
                <h3 className="hb-public__feature-name">{t(item.title)}</h3>
                <p className="hb-public__feature-body">{t(item.body)}</p>
              </li>
            ))}
          </ul>
        </section>

        <section
          className="hb-public__product-section"
          id="product"
          aria-labelledby="home-product-title"
          data-testid="home-product"
        >
          <h2 id="home-product-title" className="hb-public__section-title">
            {t("home.productTitle")}
          </h2>
          <p className="hb-public__section-lead">{t("home.productLead")}</p>
          <PublicProductPreview />
        </section>

        <section
          className="hb-public__pricing-section"
          id="pricing"
          aria-labelledby="home-pricing-title"
          data-testid="home-pricing"
        >
          <h2 id="home-pricing-title" className="hb-public__section-title">
            {t("home.pricingTitle")}
          </h2>
          <p className="hb-public__section-lead">{t("home.pricingLead")}</p>
          <div className="hb-pricing hb-pricing--home">
            {PLAN_ORDER.map((id) => {
              const p = PLANS[id];
              const rights = getPlanRights(id, t, formatPlanPrice);
              const popular = id === "starter";
              return (
                <article
                  key={id}
                  className={`hb-pricing__card${popular ? " is-popular" : ""}`}
                  data-plan={id}
                >
                  <header className="hb-pricing__head">
                    <div className="hb-pricing__title-row">
                      <h3 className="hb-pricing__name">{p.name}</h3>
                      {popular ? (
                        <span className="hb-pricing__badge">{t("plans.recommended")}</span>
                      ) : null}
                    </div>
                    <p className="hb-pricing__blurb">{rights.headline}</p>
                    <p className="hb-pricing__price">
                      <strong>{formatPlanPrice(p.price_twd)}</strong>
                      <span className="hb-pricing__period">{t("plans.perMonth")}</span>
                    </p>
                    <div className="hb-pricing__credits-wrap">
                      <button
                        type="button"
                        className="hb-pricing__credits-trigger"
                        aria-describedby={`plan-tip-${id}`}
                      >
                        {t("plans.creditsPerMonth", { n: p.monthly_credits })}
                      </button>
                      <div
                        id={`plan-tip-${id}`}
                        className="hb-pricing__tip"
                        role="tooltip"
                        data-testid={`plan-tip-${id}`}
                      >
                        <p className="hb-pricing__tip-title">{rights.headline}</p>
                        <ul className="hb-pricing__tip-list">
                          {rights.bullets.map((b) => (
                            <li key={b}>{b}</li>
                          ))}
                        </ul>
                        <p className="hb-pricing__tip-meta">{rights.approxCallsLine}</p>
                        <p className="hb-pricing__tip-meta text-muted">{rights.softCapsLine}</p>
                      </div>
                    </div>
                  </header>
                </article>
              );
            })}
          </div>
          <p className="hb-public__section-lead hb-public__pricing-hint">{t("home.pricingHoverHint")}</p>
        </section>
      </main>

      <footer className="hb-public__footer">
        <span className="text-muted">
          {t("app.name")} · {t("app.tagline")}
        </span>
        <nav className="hb-public__footer-links" aria-label={t("legal.footerNav")}>
          <Link to="/privacy" className="hb-public__text-link">
            {t("home.privacyLink")}
          </Link>
          <Link to="/terms" className="hb-public__text-link">
            {t("home.termsLink")}
          </Link>
          <Link to="/data-deletion" className="hb-public__text-link">
            {t("home.dataDeletionLink")}
          </Link>
        </nav>
      </footer>
    </div>
  );
}
