import { Outlet } from 'react-router-dom'
import { getAdminDomain, isAllowedAdminHost } from '../lib/config'
import styles from './AdminDomainGuard.module.css'

/** Protects manage-only routes. Public invoice routes stay outside this guard. */
export function AdminDomainGuard() {
  if (isAllowedAdminHost()) {
    return <Outlet />
  }

  const expectedDomain = getAdminDomain()

  return (
    <div className={styles.page}>
      <div className={styles.card}>
        <h1 className={styles.title}>Wrong domain</h1>
        <p className={styles.text}>
          This dashboard is only available at{' '}
          <strong>{expectedDomain}</strong>.
        </p>
        <p className={styles.hint}>
          Add <code>127.0.0.1 {expectedDomain}</code> to your hosts file, then open{' '}
          <code>
            https://{expectedDomain}
            {window.location.port ? `:${window.location.port}` : ''}
          </code>
          . Your browser may show a certificate warning on first visit — that is expected for local HTTPS.
        </p>
      </div>
    </div>
  )
}
