"use client";

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

const quickAccessItems = [
  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox" },
  { label: "메뉴 관리", icon: Menu, href: "/admin/menu" },
  { label: "사용자 관리", icon: Users, href: "/admin/userMng" },
  { label: "공지사항", icon: Bell, href: "/admin/system-notices" },
  { label: "감사 로그", icon: FileText, href: "/admin/audit-log" },
  { label: "화면 관리", icon: Layout, href: "/admin/screenMng" },
];

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

  const userName = user?.userName || "사용자";

  return (
    <div className="space-y-6 p-4 sm:p-6">
      {/* 환영 영역 */}
      <div className="rounded-xl bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-6 sm:p-8">
        <h1 className="text-xl font-bold sm:text-2xl">
          안녕하세요, {userName}님
        </h1>
        <p className="mt-2 text-sm text-muted-foreground">
          오늘도 효율적인 업무를 시작하세요.
        </p>
      </div>

      {/* 퀵 액세스 카드 */}
      <div>
        <h2 className="mb-4 text-lg font-semibold">바로가기</h2>
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
          {quickAccessItems.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.href}
                onClick={() => router.push(item.href)}
                className="group flex flex-col items-center gap-3 rounded-xl border bg-card p-4 shadow-sm transition-all hover:border-primary/30 hover:shadow-md sm:p-6"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20 sm:h-12 sm:w-12">
                  <Icon className="h-5 w-5 sm:h-6 sm:w-6" />
                </div>
                <span className="text-xs font-medium sm:text-sm">{item.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* 시스템 정보 */}
      <div className="rounded-xl border bg-card p-4 shadow-sm sm:p-6">
        <h2 className="mb-3 text-lg font-semibold">시스템 정보</h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
              <Server className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">플랫폼</p>
              <p className="text-sm font-medium">WACE ERP/PLM</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
              <Shield className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">버전</p>
              <p className="text-sm font-medium">v2.0.0</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">오늘 날짜</p>
              <p className="text-sm font-medium">
                {new Date().toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}