"use client";

import { motion } from "motion/react";
import {
  Activity,
  MonitorCheck,
  BookOpen,
  BarChart3,
  ArrowUpRight,
  Hexagon,
  Zap,
  Shield,
  Server,
} from "lucide-react";
import { useI18n } from "@/lib/i18n";

/* ═══════════════════════════════════════════════════════
   Configure service URLs here.
   Change these to your actual endpoints.
   ═══════════════════════════════════════════════════════ */
const SERVICES = [
  {
    key: "monitoring" as const,
    icon: MonitorCheck,
    accentVar: "--portal-accent-green",
    glowColor: "rgba(52,211,153,0.15)",
    decorIcon: Shield,
  },
  {
    key: "docs" as const,
    icon: BookOpen,
    accentVar: "--portal-accent-violet",
    glowColor: "rgba(139,92,246,0.15)",
    decorIcon: Hexagon,
  },
  {
    key: "analytics" as const,
    icon: BarChart3,
    accentVar: "--portal-accent-cyan",
    glowColor: "rgba(0,229,255,0.15)",
    decorIcon: Zap,
  },
];

const SERVICE_URLS: Record<string, string> = {
  monitoring: "http://192.168.111.90:8018",
  docs: "http://192.168.111.90:8017",
  analytics: "http://192.168.111.90:8019",
};

export default function PortalPage() {
  const { t } = useI18n();

  const i18nMap: Record<string, { title: string; desc: string }> = {
    monitoring: { title: t("portal.monitoring"), desc: t("portal.monitoringDesc") },
    docs: { title: t("portal.docs"), desc: t("portal.docsDesc") },
    analytics: { title: t("portal.analytics"), desc: t("portal.analyticsDesc") },
  };

  return (
    <div className="portal-page">
      {/* ── Background layers ── */}
      <div className="portal-grid" />
      <div className="portal-orb portal-orb--1" />
      <div className="portal-orb portal-orb--2" />
      <div className="portal-orb portal-orb--3" />

      {/* Decorative floating particles */}
      <div className="portal-particles">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="portal-particle" style={{
            left: `${15 + i * 14}%`,
            top: `${20 + (i % 3) * 25}%`,
            animationDelay: `${i * 1.5}s`,
            animationDuration: `${8 + i * 2}s`,
          }} />
        ))}
      </div>

      {/* ── Header / Branding ── */}
      <motion.div
        className="portal-header"
        initial={{ opacity: 0, y: -40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
      >
        {/* Logo mark */}
        <motion.div
          className="portal-logo-mark"
          initial={{ scale: 0.5, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.2, duration: 0.6, ease: "backOut" }}
        >
          <Activity className="h-6 w-6" />
        </motion.div>

        <h1 className="portal-title">
          <span className="portal-title-glow">Sino</span>
          <span className="portal-title-accent">Code</span>
        </h1>

        <motion.p
          className="portal-subtitle"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 0.8 }}
        >
          {t("portal.subtitle")}
        </motion.p>

        {/* Animated scan divider */}
        <motion.div
          className="portal-divider"
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ delay: 0.6, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
        >
          <div className="portal-divider-scan" />
        </motion.div>
      </motion.div>

      {/* ── Service Cards ── */}
      <div className="portal-cards">
        {SERVICES.map((service, i) => {
          const Icon = service.icon;
          const DecorIcon = service.decorIcon;
          const info = i18nMap[service.key];
          const url = SERVICE_URLS[service.key];

          return (
            <motion.a
              key={service.key}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="portal-card"
              style={{
                "--card-accent": `var(${service.accentVar})`,
                "--card-glow": service.glowColor,
              } as React.CSSProperties}
              initial={{ opacity: 0, y: 50, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{
                delay: 0.4 + i * 0.15,
                duration: 0.7,
                ease: [0.22, 1, 0.36, 1],
              }}
              whileHover={{
                y: -10,
                transition: { type: "spring", stiffness: 400, damping: 25 },
              }}
            >
              {/* Corner brackets */}
              <span className="portal-corner portal-corner--tl" />
              <span className="portal-corner portal-corner--tr" />
              <span className="portal-corner portal-corner--bl" />
              <span className="portal-corner portal-corner--br" />

              {/* Decorative bg icon */}
              <DecorIcon className="portal-card-decor" />

              {/* Icon container */}
              <div className="portal-card-icon">
                <Icon strokeWidth={1.5} />
              </div>

              {/* Text content */}
              <h3 className="portal-card-title">{info.title}</h3>
              <p className="portal-card-desc">{info.desc}</p>

              {/* Enter indicator */}
              <div className="portal-card-action">
                <span className="portal-card-action-text">{t("portal.enter")}</span>
                <ArrowUpRight className="portal-card-action-icon" />
              </div>

              {/* Bottom highlight bar */}
              <div className="portal-card-bar" />
            </motion.a>
          );
        })}
      </div>

      {/* ── Footer status ── */}
      <motion.div
        className="portal-footer"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.2, duration: 0.6 }}
      >
        <div className="portal-status-dot" />
        <span className="portal-status-text">
          <Server className="inline-block h-3 w-3 mr-1" style={{ verticalAlign: "-1px" }} />
          System Online
        </span>
      </motion.div>
    </div>
  );
}