import { Link } from "react-router-dom";
import { useAuthStore } from "@/stores/authStore";

const shortcuts = [
  {
    to: "/dashboard",
    icon: "dashboard",
    label: "대시보드",
    desc: "발송 현황 한눈에 보기",
    color: "blue" as const,
  },
  {
    to: "/services",
    icon: "manage_accounts",
    label: "서비스 관리",
    desc: "서비스 목록 및 설정",
    color: "blue" as const,
  },
  {
    to: "/services/register",
    icon: "add_circle",
    label: "서비스 등록",
    desc: "새 서비스 등록하기",
    color: "green" as const,
  },
  {
    to: "/statistics/history",
    icon: "send",
    label: "발송 내역",
    desc: "최근 메시지 발송 기록",
    color: "blue" as const,
  },
] as const;

export default function HomePage() {
  const userName = useAuthStore((s) => s.user?.name) ?? "관리자";

  return (
    <div className="flex-1 flex items-center justify-center pt-16">
      <div className="text-center max-w-lg px-8">
        {/* 아이콘 */}
        <div className="mx-auto mb-8 size-20 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
          <span
            className="material-symbols-outlined text-primary"
            style={{ fontSize: "50px" }}
          >
            grid_view
          </span>
        </div>

        {/* 인사말 */}
        <h1 className="text-3xl font-bold text-foreground tracking-tight mb-3">
          안녕하세요, {userName}님
        </h1>
        <p className="text-muted-foreground text-base leading-relaxed mb-10">
          SPMS Admin Console에 오신 것을 환영합니다.
          <br />
          아래 바로가기를 통해 원하는 메뉴로 이동하세요.
        </p>

        {/* 바로가기 */}
        <div className="grid grid-cols-2 gap-4">
          {shortcuts.map((item) => (
            <Link
              key={item.to}
              to={item.to}
              className="group flex items-center gap-3 p-4 bg-white border border-gray-200 rounded-xl hover:border-primary/30 hover:shadow-md transition-all"
            >
              <div
                className={`size-10 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors ${
                  item.color === "green"
                    ? "bg-green-50 group-hover:bg-green-100"
                    : "bg-blue-50 group-hover:bg-primary/10"
                }`}
              >
                <span
                  className={`material-symbols-outlined text-xl ${
                    item.color === "green" ? "text-green-600" : "text-primary"
                  }`}
                >
                  {item.icon}
                </span>
              </div>
              <div className="text-left">
                <p
                  className={`text-sm font-semibold text-foreground transition-colors ${
                    item.color === "green"
                      ? "group-hover:text-green-600"
                      : "group-hover:text-primary"
                  }`}
                >
                  {item.label}
                </p>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {item.desc}
                </p>
              </div>
            </Link>
          ))}
        </div>

        {/* 버전 */}
        <p className="text-xs text-gray-400 mt-10">
          Stein Push Messaging Service v1.0
        </p>
      </div>
    </div>
  );
}