"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { AdminSidebar } from "@/components/layout/admin-sidebar"
import { AdminHeader } from "@/components/layout/admin-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { useAuthStore } from "@/store/auth-store"
import { AuthGuard } from "@/components/auth/auth-guard"
import {
  IconFileUpload,
  IconUsers,
  IconChartBar,
  IconDatabase,
} from "@tabler/icons-react"

function AdminDashboardContent() {
  const { user } = useAuthStore()
  const router = useRouter()

  // 관리자 권한 체크
  React.useEffect(() => {
    const isAdmin = user?.userRole === 'ADMIN'
    if (user && !isAdmin) {
      alert('관리자만 접근 가능합니다.')
      router.push('/dashboard')
    }
  }, [user, router])

  const isAdmin = user?.userRole === 'ADMIN'
  if (!user || !isAdmin) {
    return null
  }

  const quickLinks = [
    {
      title: "파일 업로드",
      description: "유전체 데이터 파일 업로드",
      icon: IconFileUpload,
      href: "/admin/upload",
      color: "bg-blue-500",
    },
    {
      title: "농장주별 집계",
      description: "농장주별 유전체 데이터 조회",
      icon: IconChartBar,
      href: "/admin/genome-mapping",
      color: "bg-green-500",
    },
    {
      title: "사용자 관리",
      description: "시스템 사용자 관리",
      icon: IconUsers,
      href: "/admin/users",
      color: "bg-purple-500",
    },
  ]

  return (
    <SidebarInset>
      <AdminHeader
        breadcrumbs={[
          { label: "관리자 대시보드" }
        ]}
      />

      <div className="flex flex-1 flex-col gap-2">
        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
          {/* 헤더 */}
          <div className="px-4 lg:px-6">
            <div className="rounded-lg p-6 border" style={{ backgroundColor: '#3b82f610' }}>
              <h1 className="text-2xl font-bold mb-2">관리자 대시보드</h1>
              <p className="text-sm text-muted-foreground">
                시스템 관리 및 데이터 관리를 위한 관리자 페이지입니다.
              </p>
            </div>
          </div>

          {/* 빠른 링크 */}
          <div className="px-4 lg:px-6">
            <div className="grid gap-4 md:grid-cols-3">
              {quickLinks.map((link) => {
                const Icon = link.icon
                return (
                  <Card
                    key={link.href}
                    className="cursor-pointer hover:shadow-lg transition-shadow"
                    onClick={() => router.push(link.href)}
                  >
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">
                        {link.title}
                      </CardTitle>
                      <div className={`${link.color} p-2 rounded-lg`}>
                        <Icon className="h-5 w-5 text-white" />
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-xs text-muted-foreground">
                        {link.description}
                      </p>
                    </CardContent>
                  </Card>
                )
              })}
            </div>
          </div>

          {/* 최근 활동 */}
          <div className="px-4 lg:px-6">
            <Card>
              <CardHeader>
                <CardTitle>시스템 개요</CardTitle>
                <CardDescription>
                  유전체 데이터 관리 시스템 현황
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center gap-4 p-4 rounded-lg bg-muted/50">
                    <IconDatabase className="h-8 w-8 text-blue-500" />
                    <div className="flex-1">
                      <h3 className="font-semibold">데이터 파일 관리</h3>
                      <p className="text-sm text-muted-foreground">
                        5가지 유형의 데이터 파일을 업로드하고 관리할 수 있습니다.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 rounded-lg bg-muted/50">
                    <IconChartBar className="h-8 w-8 text-green-500" />
                    <div className="flex-1">
                      <h3 className="font-semibold">농장주별 집계</h3>
                      <p className="text-sm text-muted-foreground">
                        업로드된 데이터를 기반으로 농장주별 유전체 분석 결과를 조회할 수 있습니다.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 rounded-lg bg-muted/50">
                    <IconUsers className="h-8 w-8 text-purple-500" />
                    <div className="flex-1">
                      <h3 className="font-semibold">사용자 관리</h3>
                      <p className="text-sm text-muted-foreground">
                        시스템 사용자를 관리하고 권한을 설정할 수 있습니다.
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

        </div>
      </div>
    </SidebarInset>
  )
}

export default function AdminDashboardPage() {
  return (
    <AuthGuard>
      <SidebarProvider>
        <AdminSidebar />
        <AdminDashboardContent />
      </SidebarProvider>
    </AuthGuard>
  )
}