"use client";

import { useRouter } from "next/navigation";
import { useAuth } from "@/hooks/useAuth";
import {
  FileCheck,
  Menu as MenuIcon,
  Users,
  Bell,
  FileText,
  Layout,
  Server,
  Shield,
  Calendar,
  ArrowUpRight,
} from "lucide-react";
import { PageHead } from "@/components/v5";

type QuickItem = {
  label: string;
  icon: typeof FileCheck;
  href: string;
  tone: "primary" | "cyan" | "green" | "amber" | "pink" | "red";
  badge?: number;
};

const QUICK_ITEMS: QuickItem[] = [
  { label: "결재함",     icon: FileCheck, href: "/admin/approvalBox",  tone: "primary", badge: 3 },
  { label: "메뉴 관리",  icon: MenuIcon,  href: "/admin/menu",         tone: "cyan" },
  { label: "사용자 관리", icon: Users,     href: "/admin/userMng",      tone: "green" },
  { label: "공지사항",    icon: Bell,      href: "/admin/system-notices", tone: "amber" },
  { label: "감사 로그",   icon: FileText,  href: "/admin/audit-log",    tone: "pink" },
  { label: "화면 관리",   icon: Layout,    href: "/admin/screenMng",    tone: "red" },
];

const TONE_BG: Record<QuickItem["tone"], string> = {
  primary: "rgba(var(--v5-primary-rgb), .12)",
  cyan:    "rgba(var(--v5-cyan-rgb), .12)",
  green:   "rgba(var(--v5-green-rgb), .12)",
  amber:   "rgba(var(--v5-amber-rgb), .18)",
  pink:    "rgba(var(--v5-pink-rgb), .14)",
  red:     "rgba(var(--v5-red-rgb), .12)",
};
const TONE_FG: Record<QuickItem["tone"], string> = {
  primary: "var(--v5-primary)",
  cyan:    "rgb(var(--v5-cyan-rgb))",
  green:   "rgb(var(--v5-green-rgb))",
  amber:   "rgb(var(--v5-amber-rgb))",
  pink:    "rgb(var(--v5-pink-rgb))",
  red:     "rgb(var(--v5-red-rgb))",
};

export default function MainHomePage() {
  const router = useRouter();
  const { user } = useAuth();

  const userName = user?.user_name || "사용자";
  const today = new Date();
  const dateStr = today.toLocaleDateString("ko-KR", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });
  const dateShort = today.toLocaleDateString("ko-KR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <div style={{ padding: "var(--v5-sp-5)", display: "flex", flexDirection: "column", gap: "var(--v5-sp-5)" }}>
      <PageHead
        crumbs={[{ label: "홈" }]}
        title={`${userName}님, 좋은 하루 되세요`}
        sub={dateStr}
      />

      {/* 바로가기 */}
      <section>
        <div className="v5-card-title" style={{ marginBottom: "var(--v5-sp-3)" }}>
          바로가기
        </div>
        <div
          className="v5-grid"
          style={{
            gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
            gap: "var(--v5-sp-3)",
          }}
        >
          {QUICK_ITEMS.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.href}
                onClick={() => router.push(item.href)}
                className="v5-card"
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "flex-start",
                  gap: "var(--v5-sp-2)",
                  padding: "var(--v5-sp-4)",
                  cursor: "pointer",
                  textAlign: "left",
                  position: "relative",
                  background: "var(--v5-surface-solid)",
                  border: "1px solid var(--v5-border)",
                  font: "inherit",
                  color: "inherit",
                  transition:
                    "border-color .2s var(--v5-ease-move), box-shadow .25s var(--v5-ease-move), transform .15s var(--v5-ease-move)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = "rgba(var(--v5-primary-rgb), .35)";
                  e.currentTarget.style.boxShadow = "var(--v5-glow-sm)";
                  e.currentTarget.style.transform = "translateY(-1px)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = "var(--v5-border)";
                  e.currentTarget.style.boxShadow = "";
                  e.currentTarget.style.transform = "";
                }}
              >
                <div
                  style={{
                    width: 36,
                    height: 36,
                    borderRadius: "var(--v5-radius-md-2)",
                    background: TONE_BG[item.tone],
                    color: TONE_FG[item.tone],
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                  }}
                >
                  <Icon size={18} strokeWidth={1.75} />
                </div>
                <div
                  style={{
                    fontSize: "var(--v5-fs-body)",
                    fontWeight: "var(--v5-fw-semi)",
                    color: "var(--v5-text)",
                    letterSpacing: "var(--v5-ls-tight)",
                  }}
                >
                  {item.label}
                </div>
                {typeof item.badge === "number" && item.badge > 0 && (
                  <span className="v5-bdg in" style={{ position: "absolute", top: 10, right: 10 }}>
                    {item.badge}
                  </span>
                )}
                <ArrowUpRight
                  size={13}
                  strokeWidth={1.75}
                  style={{
                    position: "absolute",
                    bottom: 10,
                    right: 10,
                    color: "var(--v5-text-muted)",
                  }}
                />
              </button>
            );
          })}
        </div>
      </section>

      {/* 시스템 정보 */}
      <section className="v5-card">
        <div className="v5-card-head">
          <div className="v5-card-title">시스템 정보</div>
        </div>
        <div
          className="v5-grid grid-3"
          style={{ gap: "var(--v5-sp-4)" }}
        >
          <SystemCell icon={Server}   label="플랫폼"  value="Invyone ERP/PLM" />
          <SystemCell icon={Shield}   label="버전"    value="v2.0.0" />
          <SystemCell icon={Calendar} label="오늘 날짜" value={dateShort} />
        </div>
      </section>
    </div>
  );
}

function SystemCell({
  icon: Icon,
  label,
  value,
}: {
  icon: typeof Server;
  label: string;
  value: string;
}) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "var(--v5-sp-3)" }}>
      <div
        style={{
          width: 36,
          height: 36,
          borderRadius: "var(--v5-radius-md-2)",
          background: "rgba(var(--v5-primary-rgb), .08)",
          color: "var(--v5-primary)",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        <Icon size={16} strokeWidth={1.75} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div
          style={{
            fontSize: "var(--v5-fs-caption)",
            fontWeight: "var(--v5-fw-bold)",
            textTransform: "uppercase",
            letterSpacing: "var(--v5-ls-wide)",
            color: "var(--v5-text-muted)",
            marginBottom: 2,
          }}
        >
          {label}
        </div>
        <div
          style={{
            fontSize: "var(--v5-fs-body)",
            fontWeight: "var(--v5-fw-semi)",
            color: "var(--v5-text)",
          }}
        >
          {value}
        </div>
      </div>
    </div>
  );
}
