import { useState } from "react";
import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Loader2, Home, Users, FileText, Mail, LogOut, ChevronDown, MessageSquare, Image, BarChart3, Clock, Bell, Calendar } from "lucide-react";
import { useLocation } from "wouter";
import AdminStudents from "./AdminStudents";
import AdminParents from "./AdminParents";
import AdminFiles from "./AdminFiles";
import AdminFeedback from "./AdminFeedback";
import AdminSnippets from "./AdminSnippets";
import AdminReports from "./AdminReports";
import AdminApprovals from "./AdminApprovals";
import AdminNotifications from "./AdminNotifications";
import AdminSchedule from "./AdminSchedule";

type AdminTab = "overview" | "students" | "parents" | "files" | "submissions" | "feedback" | "snippets" | "reports" | "approvals" | "notifications" | "schedule";

export default function AdminDashboard() {
  const { user, loading: authLoading, logout } = useAuth();
  const [, setLocation] = useLocation();
  const [activeTab, setActiveTab] = useState<AdminTab>("overview");
  const [showUserMenu, setShowUserMenu] = useState(false);

  if (authLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="animate-spin w-8 h-8" />
      </div>
    );
  }

  if (!user || user.role !== "admin") {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Card className="p-8">
          <h1 className="text-2xl font-bold mb-4">访问被拒绝</h1>
          <p className="text-gray-600">您没有权限访问管理后台。</p>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation Bar */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <h2 className="text-lg font-semibold text-gray-900">管理后台</h2>
          </div>
          <div className="flex items-center gap-4">
            <Button 
              onClick={() => setLocation("/")} 
              variant="outline"
              className="gap-2"
            >
              <Home className="w-4 h-4" />
              返回首页
            </Button>
            
            {/* User Menu */}
            <div className="relative">
              <button
                onClick={() => setShowUserMenu(!showUserMenu)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
              >
                <div className="text-right">
                  <p className="text-sm font-medium text-gray-900">{user?.name || "管理员"}</p>
                  <p className="text-xs text-gray-500">{user?.email}</p>
                </div>
                <ChevronDown className="w-4 h-4 text-gray-600" />
              </button>
              
              {/* Dropdown Menu */}
              {showUserMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                  <div className="p-3 border-b border-gray-100">
                    <p className="text-sm font-medium text-gray-900">{user?.name || "管理员"}</p>
                    <p className="text-xs text-gray-500 mt-1">{user?.email}</p>
                  </div>
                  <button
                    onClick={async () => {
                      setShowUserMenu(false);
                      await logout();
                      setLocation("/");
                    }}
                    className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
                  >
                    <LogOut className="w-4 h-4" />
                    登出
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Close menu when clicking outside */}
        {showUserMenu && (
          <div
            className="fixed inset-0 z-40"
            onClick={() => setShowUserMenu(false)}
          />
        )}

        {/* Tabs */}
        <div className="mb-8 border-b border-gray-200">
          <div className="flex gap-8">
            <button
              onClick={() => setActiveTab("overview")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === "overview"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              概览
            </button>
            <button
              onClick={() => setActiveTab("students")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "students"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Users size={16} />
              学生管理
            </button>
            <button
              onClick={() => setActiveTab("parents")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "parents"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Users size={16} />
              家长管理
            </button>
            <button
              onClick={() => setActiveTab("files")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "files"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <FileText size={16} />
              档案管理
            </button>
            <button
              onClick={() => setActiveTab("submissions")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "submissions"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Mail size={16} />
              咨询表单
            </button>
            <button
              onClick={() => setActiveTab("feedback")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "feedback"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <MessageSquare size={16} />
              课后反馈
            </button>
            <button
              onClick={() => setActiveTab("snippets")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "snippets"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Image size={16} />
              课堂切片
            </button>
            <button
              onClick={() => setActiveTab("reports")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "reports"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <BarChart3 size={16} />
              月度报告
            </button>
            <button
              onClick={() => setActiveTab("approvals")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "approvals"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Clock size={16} />
              请假审批
            </button>
            <button
              onClick={() => setActiveTab("notifications")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "notifications"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Bell size={16} />
              通知中心
            </button>
            <button
              onClick={() => setActiveTab("schedule")}
              className={`pb-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
                activeTab === "schedule"
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
            >
              <Calendar size={16} />
              排课系统
            </button>
          </div>
        </div>

        {/* Content */}
        <div>
          {activeTab === "overview" && (
            <div className="space-y-6">
              <div>
                <h1 className="text-3xl font-bold text-gray-900">欢迎回来</h1>
                <p className="text-gray-600 mt-2">管理学生、家长和学习档案</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-gray-600 text-sm">学生总数</p>
                      <p className="text-3xl font-bold mt-2">-</p>
                    </div>
                    <Users className="w-8 h-8 text-indigo-600 opacity-50" />
                  </div>
                </Card>
                <Card className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-gray-600 text-sm">家长总数</p>
                      <p className="text-3xl font-bold mt-2">-</p>
                    </div>
                    <Users className="w-8 h-8 text-green-600 opacity-50" />
                  </div>
                </Card>
                <Card className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-gray-600 text-sm">档案总数</p>
                      <p className="text-3xl font-bold mt-2">-</p>
                    </div>
                    <FileText className="w-8 h-8 text-blue-600 opacity-50" />
                  </div>
                </Card>
                <Card className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-gray-600 text-sm">咨询表单</p>
                      <p className="text-3xl font-bold mt-2">-</p>
                    </div>
                    <Mail className="w-8 h-8 text-orange-600 opacity-50" />
                  </div>
                </Card>
              </div>

              <Card className="p-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">快速开始</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <button
                    onClick={() => setActiveTab("students")}
                    className="p-4 border border-gray-200 rounded-lg hover:border-indigo-600 hover:bg-indigo-50 transition-colors text-left"
                  >
                    <Users className="w-6 h-6 text-indigo-600 mb-2" />
                    <p className="font-medium text-gray-900">管理学生</p>
                    <p className="text-sm text-gray-600 mt-1">添加、编辑或删除学生信息</p>
                  </button>
                  <button
                    onClick={() => setActiveTab("parents")}
                    className="p-4 border border-gray-200 rounded-lg hover:border-green-600 hover:bg-green-50 transition-colors text-left"
                  >
                    <Users className="w-6 h-6 text-green-600 mb-2" />
                    <p className="font-medium text-gray-900">管理家长</p>
                    <p className="text-sm text-gray-600 mt-1">添加、编辑或删除家长信息</p>
                  </button>
                  <button
                    onClick={() => setActiveTab("files")}
                    className="p-4 border border-gray-200 rounded-lg hover:border-blue-600 hover:bg-blue-50 transition-colors text-left"
                  >
                    <FileText className="w-6 h-6 text-blue-600 mb-2" />
                    <p className="font-medium text-gray-900">管理档案</p>
                    <p className="text-sm text-gray-600 mt-1">上传和管理学生学习档案</p>
                  </button>
                  <button
                    onClick={() => setActiveTab("submissions")}
                    className="p-4 border border-gray-200 rounded-lg hover:border-orange-600 hover:bg-orange-50 transition-colors text-left"
                  >
                    <Mail className="w-6 h-6 text-orange-600 mb-2" />
                    <p className="font-medium text-gray-900">查看咨询</p>
                    <p className="text-sm text-gray-600 mt-1">查看和管理咨询表单提交</p>
                  </button>
                </div>
              </Card>
            </div>
          )}

          {activeTab === "students" && <AdminStudents />}
          {activeTab === "parents" && <AdminParents />}
          {activeTab === "files" && <AdminFiles />}
          {activeTab === "feedback" && <AdminFeedback />}
          {activeTab === "snippets" && <AdminSnippets />}
          {activeTab === "reports" && <AdminReports />}
          {activeTab === "approvals" && <AdminApprovals />}
          {activeTab === "notifications" && <AdminNotifications />}
          {activeTab === "schedule" && <AdminSchedule />}

          {activeTab === "submissions" && (
            <div className="text-center py-12">
              <p className="text-gray-600">咨询表单管理功能开发中...</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}