import { Metadata } from "next"
import type { JSX } from "react"
import Link from "next/link"
import { ArrowLeft, Users, FileSpreadsheet, Info } from "lucide-react"

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"
import { UserImportDialog } from "@/modules/users/components/user-import-dialog"

export const metadata: Metadata = {
  title: "批量导入用户 - Next_Edu",
  description: "通过 Excel 批量导入用户",
}

export const dynamic = "force-dynamic"

export default async function UserImportPage(): Promise<JSX.Element> {
  await requirePermission(Permissions.USER_MANAGE)
  return (
    <div className="h-full flex-1 flex-col space-y-6 p-8 md:flex">
      <div className="flex items-center justify-between space-y-2">
        <div>
          <div className="flex items-center gap-2">
            <Button asChild variant="ghost" size="sm">
              <Link href="/admin/dashboard">
                <ArrowLeft className="mr-1 h-4 w-4" />
                返回
              </Link>
            </Button>
            <h2 className="text-2xl font-bold tracking-tight">批量导入用户</h2>
          </div>
          <p className="text-muted-foreground mt-1">
            通过 Excel 文件批量创建用户账号，支持学生自动加入班级。
          </p>
        </div>
        <UserImportDialog />
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5 text-primary" />
              <CardTitle className="text-base">导入说明</CardTitle>
            </div>
            <CardDescription>使用 Excel 批量导入用户的步骤</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex gap-3">
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">1</span>
              <p>点击「批量导入用户」按钮，下载导入模板。</p>
            </div>
            <div className="flex gap-3">
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">2</span>
              <p>按模板格式填写用户信息（姓名、邮箱、角色、手机、班级邀请码）。</p>
            </div>
            <div className="flex gap-3">
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">3</span>
              <p>上传填写好的 Excel 文件，系统将解析并预览数据。</p>
            </div>
            <div className="flex gap-3">
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">4</span>
              <p>确认预览数据无误后，点击「确认导入」完成批量创建。</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <Info className="h-5 w-5 text-muted-foreground" />
              <CardTitle className="text-base">注意事项</CardTitle>
            </div>
            <CardDescription>导入前请仔细阅读</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-muted-foreground">
            <p>• 默认密码为 <code className="rounded bg-muted px-1 py-0.5 text-xs">123456</code>，请提示用户首次登录后修改。</p>
            <p>• 邮箱必须唯一，重复邮箱将被跳过并记录在错误报告中。</p>
            <p>• 角色可选：admin / teacher / student / parent / grade_head / teaching_head。</p>
            <p>• 班级邀请码仅对 student 角色有效，填写后学生将自动加入对应班级。</p>
            <p>• 单次最多导入 10MB 的文件，建议单次不超过 500 条记录。</p>
            <p>• 导入完成后将显示成功数、失败数及详细错误信息。</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <Users className="h-5 w-5 text-primary" />
            <CardTitle className="text-base">模板字段说明</CardTitle>
          </div>
          <CardDescription>Excel 模板各列含义与要求</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>列名</TableHead>
                  <TableHead>是否必填</TableHead>
                  <TableHead>说明</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">姓名</TableCell>
                  <TableCell>必填</TableCell>
                  <TableCell className="text-muted-foreground">用户姓名</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">邮箱</TableCell>
                  <TableCell>必填</TableCell>
                  <TableCell className="text-muted-foreground">登录账号，需符合邮箱格式且唯一</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">角色</TableCell>
                  <TableCell>必填</TableCell>
                  <TableCell className="text-muted-foreground">admin / teacher / student / parent / grade_head / teaching_head</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">手机</TableCell>
                  <TableCell>选填</TableCell>
                  <TableCell className="text-muted-foreground">联系电话</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">班级邀请码</TableCell>
                  <TableCell>选填</TableCell>
                  <TableCell className="text-muted-foreground">仅 student 角色有效，6 位邀请码</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
