"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Home,
  Compass,
  ArrowLeft,
  RefreshCw,
  LogIn,
  Phone,
  Mountain,
  Users,
  Image as ImageIcon,
  MessageCircle,
  ChevronRight,
} from "lucide-react";
import type {
  ErrorAction,
  ErrorConfigItem,
  IllustrationVariant,
  QuickNavItem,
} from "@/lib/errors/errorTypes";
import { DEFAULT_QUICK_NAV, getErrorConfig } from "@/lib/errors/errorConfig";
import ErrorIllustration from "./ErrorIllustration";
import styles from "./ErrorPage.module.css";

export interface ErrorPageProps {
  config?: ErrorConfigItem;
  code?: string | number;
  eyebrow?: string;
  title?: string;
  description?: string;
  illustrationVariant?: IllustrationVariant;
  handwrittenText?: string;
  primaryAction?: ErrorAction;
  secondaryAction?: ErrorAction;
  showQuickNav?: boolean;
  quickNavItems?: QuickNavItem[];
  referenceCode?: string;
  onRetry?: () => void;
  retryCountdown?: number;
}

export default function ErrorPage(props: ErrorPageProps) {
  const router = useRouter();

  // Ambil basis konfigurasi dari code atau fallback
  const baseConfig = props.config || (props.code ? getErrorConfig(props.code) : getErrorConfig(500));

  const code = props.code ?? baseConfig.code;
  const eyebrow = props.eyebrow ?? baseConfig.eyebrow;
  const title = props.title ?? baseConfig.title;
  const description = props.description ?? baseConfig.description;
  const illustrationVariant = props.illustrationVariant ?? baseConfig.illustrationVariant;
  const handwrittenText = props.handwrittenText ?? baseConfig.handwrittenText;
  const primaryAction = props.primaryAction ?? baseConfig.primaryAction;
  const secondaryAction = props.secondaryAction ?? baseConfig.secondaryAction;
  const showQuickNav = props.showQuickNav ?? baseConfig.showQuickNav ?? true;
  const quickNavItems = props.quickNavItems ?? DEFAULT_QUICK_NAV;

  // Real-time offline detection jika tidak ada error khusus yang dipaksakan
  const [isOffline, setIsOffline] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      const updateOnlineStatus = () => setIsOffline(!navigator.onLine);
      window.addEventListener("online", updateOnlineStatus);
      window.addEventListener("offline", updateOnlineStatus);
      setIsOffline(!navigator.onLine);
      return () => {
        window.removeEventListener("online", updateOnlineStatus);
        window.removeEventListener("offline", updateOnlineStatus);
      };
    }
  }, []);

  const effectiveVariant = isOffline ? "offline" : illustrationVariant;
  const effectiveTitle = isOffline ? "Sepertinya Anda sedang offline" : title;
  const effectiveDesc = isOffline
    ? "Periksa koneksi internet Anda lalu coba kembali untuk melanjutkan petualangan."
    : description;

  // Eksekusi aksi dinamis (retry, reload, back, dll)
  const handleAction = (action?: ErrorAction["action"], href?: string) => {
    if (action === "retry") {
      if (props.onRetry) {
        props.onRetry();
      } else {
        router.refresh();
      }
      return;
    }

    if (action === "reload") {
      if (typeof window !== "undefined") {
        window.location.reload();
      }
      return;
    }

    if (action === "back") {
      if (typeof window !== "undefined" && window.history.length > 1) {
        window.history.back();
      } else {
        router.push("/");
      }
      return;
    }

    if (action === "login") {
      if (typeof window !== "undefined") {
        window.location.href = href || "https://apps.pptadventure.com/login";
      }
      return;
    }

    if (href) {
      router.push(href);
    }
  };

  // Render icon untuk button
  const renderActionIcon = (iconName?: string) => {
    switch (iconName) {
      case "home":
        return <Home size={17} aria-hidden />;
      case "compass":
        return <Compass size={17} aria-hidden />;
      case "arrow-left":
        return <ArrowLeft size={17} aria-hidden />;
      case "refresh":
        return <RefreshCw size={17} aria-hidden />;
      case "log-in":
        return <LogIn size={17} aria-hidden />;
      case "phone":
        return <Phone size={17} aria-hidden />;
      default:
        return null;
    }
  };

  // Render icon untuk quick nav
  const renderNavIcon = (icon: QuickNavItem["icon"]) => {
    switch (icon) {
      case "mountain":
        return <Mountain size={16} aria-hidden />;
      case "users":
        return <Users size={16} aria-hidden />;
      case "gallery":
        return <ImageIcon size={16} aria-hidden />;
      case "contact":
        return <MessageCircle size={16} aria-hidden />;
      default:
        return <Compass size={16} aria-hidden />;
    }
  };

  return (
    <section className={styles.errorPageWrapper} aria-labelledby="error-heading">
      {/* Background Topographic Vector Overlay */}
      <div className={styles.bgTopography} aria-hidden="true">
        <svg
          viewBox="0 0 1440 600"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={styles.topoVector}
        >
          <path
            d="M-50 220 C 300 40 600 380 1000 180 C 1300 30 1450 250 1600 140"
            stroke="#3DAD3C"
            strokeWidth="1.2"
            strokeDasharray="6 8"
            opacity="0.08"
          />
          <path
            d="M-80 320 C 260 120 560 480 960 270 C 1260 110 1420 340 1650 210"
            stroke="#3DAD3C"
            strokeWidth="1.2"
            opacity="0.05"
          />
          <path
            d="M-30 140 C 340 -10 640 280 1040 100 C 1340 -40 1480 160 1630 60"
            stroke="#3DAD3C"
            strokeWidth="1"
            opacity="0.04"
          />
        </svg>
      </div>

      <div className={`container ${styles.innerContainer}`}>
        {/* Kolom Kiri: Visual Illustration */}
        <div className={styles.visualColumn}>
          <ErrorIllustration
            variant={effectiveVariant}
            handwrittenText={handwrittenText}
            code={code}
            altText={`${code ?? ""} — ${title}`}
          />
        </div>

        {/* Kolom Kanan: Error Content & Quick Navigation */}
        <div className={styles.contentColumn}>
          {/* Eyebrow */}
          <div className={styles.eyebrowWrap}>
            <span className={styles.eyebrowDash} aria-hidden="true" />
            <span className={styles.eyebrowText}>{eyebrow}</span>
          </div>

          {/* Heading */}
          <h1 id="error-heading" className={styles.title}>
            {effectiveTitle}
          </h1>

          {/* Description */}
          <p className={styles.description}>{effectiveDesc}</p>

          {/* Reference Code (jika tersedia dan aman) */}
          {props.referenceCode && (
            <div className={styles.referenceCode} title="Kode Referensi Error">
              Referensi: {props.referenceCode.startsWith("ERR-") ? props.referenceCode : `ERR-${props.referenceCode}`}
            </div>
          )}

          {/* CTA Actions */}
          <div className={styles.actionsRow}>
            {primaryAction.href && !primaryAction.action ? (
              <Link
                href={primaryAction.href}
                className={`${styles.btnCta} ${styles.btnPrimary}`}
                id="error-primary-link"
              >
                {renderActionIcon(primaryAction.icon)}
                <span>{primaryAction.label}</span>
              </Link>
            ) : (
              <button
                type="button"
                onClick={() => handleAction(primaryAction.action, primaryAction.href)}
                className={`${styles.btnCta} ${styles.btnPrimary}`}
                id="error-primary-btn"
              >
                {renderActionIcon(primaryAction.icon)}
                <span>{primaryAction.label}</span>
              </button>
            )}

            {secondaryAction && (
              secondaryAction.href && !secondaryAction.action ? (
                <Link
                  href={secondaryAction.href}
                  className={`${styles.btnCta} ${styles.btnSecondary}`}
                  id="error-secondary-link"
                >
                  {renderActionIcon(secondaryAction.icon)}
                  <span>{secondaryAction.label}</span>
                </Link>
              ) : (
                <button
                  type="button"
                  onClick={() => handleAction(secondaryAction.action, secondaryAction.href)}
                  className={`${styles.btnCta} ${styles.btnSecondary}`}
                  id="error-secondary-btn"
                >
                  {renderActionIcon(secondaryAction.icon)}
                  <span>{secondaryAction.label}</span>
                </button>
              )
            )}
          </div>

          {/* Quick Navigation Cards */}
          {showQuickNav && (
            <div className={styles.quickNavSection} aria-label="Navigasi Cepat">
              <h2 className={styles.quickNavTitle}>Atau jelajahi halaman lainnya</h2>
              <div className={styles.quickNavGrid}>
                {quickNavItems.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={styles.quickNavCard}
                    title={item.description}
                  >
                    <div className={styles.quickNavLeft}>
                      <span className={styles.quickNavIconBox}>
                        {renderNavIcon(item.icon)}
                      </span>
                      <span className={styles.quickNavCardLabel}>{item.title}</span>
                    </div>
                    <ChevronRight size={14} className={styles.quickNavArrow} aria-hidden />
                  </Link>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}