"use client";

import { useAuth } from "@/components/AuthProvider";
import { en } from "@/lib/i18n/en";
import { getAdminDashboardOrigin } from "@/lib/host";
import { openBusinessDashboardAsUser } from "@/lib/session-handoff";
import { getDisplayName, getFirstName } from "@/lib/userName";
import styles from "./CustomerHome.module.css";

export default function CustomerHome() {
  const { user, isBusinessOwner, isSuperAdmin } = useAuth();
  const firstName = getFirstName(user);

  return (
    <div className={styles.page}>
      <header className={styles.head}>
        <div>
          <h1 className={styles.title}>
            {en.customerHome.title}, {firstName}
          </h1>
          <p className={styles.lead}>{en.customerHome.lead}</p>
        </div>
      </header>

      <section className={styles.card}>
        <h2 className={styles.cardTitle}>{getDisplayName(user)}</h2>
        <p className={styles.cardCopy}>{en.customerHome.lead}</p>
      </section>

      {isSuperAdmin ? (
        <section className={styles.card}>
          <h2 className={styles.cardTitle}>{en.openAdminDashboard}</h2>
          <p className={styles.cardCopy}>{en.customerHome.adminLead}</p>
          <a
            href={`${getAdminDashboardOrigin()}/`}
            className={styles.cta}
          >
            {en.customerHome.adminCta}
          </a>
        </section>
      ) : null}

      {isBusinessOwner ? (
        <section className={styles.card}>
          <h2 className={styles.cardTitle}>{en.openBusinessDashboard}</h2>
          <p className={styles.cardCopy}>{en.customerHome.businessLead}</p>
          <button
            type="button"
            className={styles.cta}
            onClick={() => openBusinessDashboardAsUser("/profile")}
          >
            {en.customerHome.businessCta}
          </button>
        </section>
      ) : null}
    </div>
  );
}