'use client';

import { useState } from "react";
import AdminSidebar from "@/app/components/AdminSidebar";

type TabType = 'all' | 'learner' | 'instructor' | 'admin';

export default function AdminIdPage() {
  const [activeTab, setActiveTab] = useState<TabType>('all');

  return (
    <div className="min-h-screen flex flex-col bg-white">
      {/* 메인 레이아웃 */}
      <div className="flex flex-1 min-h-0">
        {/* 사이드바 */}
        <AdminSidebar />

        {/* 메인 콘텐츠 */}
        <main className="flex-1 min-w-0 bg-white">
          <div className="h-full flex flex-col">
            {/* 제목 영역 */}
            <div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
              <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
                권한 설정
              </h1>
            </div>

            {/* 탭 네비게이션 */}
            <div className="px-8 pt-6">
              <div className="flex items-center gap-8 border-b border-[#dee1e6]">
                {[
                  { id: 'all' as TabType, label: '전체' },
                  { id: 'learner' as TabType, label: '학습자' },
                  { id: 'instructor' as TabType, label: '강사' },
                  { id: 'admin' as TabType, label: '관리자' },
                ].map((tab) => (
                  <button
                    key={tab.id}
                    type="button"
                    onClick={() => setActiveTab(tab.id)}
                    className={[
                      "pb-4 px-1 text-[16px] font-medium leading-[1.5] transition-colors relative",
                      activeTab === tab.id
                        ? "text-[#1f2b91] font-semibold"
                        : "text-[#6c7682]",
                    ].join(" ")}
                  >
                    {tab.label}
                    {activeTab === tab.id && (
                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#1f2b91]" />
                    )}
                  </button>
                ))}
              </div>
            </div>

            {/* 콘텐츠 영역 */}
            <div className="flex-1 px-8 pt-8 pb-20">
              <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
                <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
                  현재 관리할 수 있는 회원 계정이 없습니다.
                </p>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}