import { useEffect } from "react";
import { BUSINESS_CONTACT_INFO } from "../lib/contact";
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";

const STRINGS = {
  heading: "Link Invalid or Expired",
  body: "This confirmation link is invalid, has already been used, or your appointment has already passed. Please contact us if you need help.",
  newBooking: "Start a new booking",
  backToPortal: "Back to Portal",
  contactLabel: "Need help?",
} as const;

export function BookingErrorPage() {
  useEffect(() => {
    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, { step: "error", flow: "public" });
  }, []);

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: "system-ui, sans-serif",
        background: "var(--color-error-bg)",
      }}
    >
      <div
        style={{
          background: "var(--color-surface)",
          borderRadius: 12,
          padding: "2.5rem 3rem",
          boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
          textAlign: "center",
          maxWidth: 420,
        }}
      >
        <div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
        <h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
          {STRINGS.heading}
        </h1>
        <p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
          {STRINGS.body}
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
          <a
            href="/admin/book"
            style={{
              display: "inline-block",
              padding: "0.6rem 1.5rem",
              background: "var(--color-primary)",
              color: "#fff",
              borderRadius: 6,
              textDecoration: "none",
              fontWeight: 600,
              fontSize: 14,
            }}
          >
            {STRINGS.newBooking}
          </a>
          <a
            href="/"
            style={{
              display: "inline-block",
              padding: "0.6rem 1.5rem",
              background: "var(--color-error)",
              color: "#fff",
              borderRadius: 6,
              textDecoration: "none",
              fontWeight: 600,
              fontSize: 14,
            }}
          >
            {STRINGS.backToPortal}
          </a>
        </div>

        <div style={{ marginTop: "1.5rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb", fontSize: 13, color: "var(--color-text-secondary)" }}>
          <p style={{ margin: "0 0 0.25rem", fontWeight: 600 }}>{STRINGS.contactLabel}</p>
          <p style={{ margin: 0 }}>
            {BUSINESS_CONTACT_INFO.phone} · {BUSINESS_CONTACT_INFO.email}
          </p>
        </div>
      </div>
    </div>
  );
}