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

import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { UserImportDialog } from "@/modules/users/components/user-import-dialog"

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

export default function UserImportPage() {
  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-amber-500" />
              <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 className="w-full text-sm">
              <thead>
                <tr className="border-b">
                  <th className="py-2 pr-4 text-left font-medium">列名</th>
                  <th className="py-2 pr-4 text-left font-medium">是否必填</th>
                  <th className="py-2 pr-4 text-left font-medium">说明</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                <tr>
                  <td className="py-2 pr-4 font-medium">姓名</td>
                  <td className="py-2 pr-4">必填</td>
                  <td className="py-2 pr-4 text-muted-foreground">用户姓名</td>
                </tr>
                <tr>
                  <td className="py-2 pr-4 font-medium">邮箱</td>
                  <td className="py-2 pr-4">必填</td>
                  <td className="py-2 pr-4 text-muted-foreground">登录账号，需符合邮箱格式且唯一</td>
                </tr>
                <tr>
                  <td className="py-2 pr-4 font-medium">角色</td>
                  <td className="py-2 pr-4">必填</td>
                  <td className="py-2 pr-4 text-muted-foreground">admin / teacher / student / parent / grade_head / teaching_head</td>
                </tr>
                <tr>
                  <td className="py-2 pr-4 font-medium">手机</td>
                  <td className="py-2 pr-4">选填</td>
                  <td className="py-2 pr-4 text-muted-foreground">联系电话</td>
                </tr>
                <tr>
                  <td className="py-2 pr-4 font-medium">班级邀请码</td>
                  <td className="py-2 pr-4">选填</td>
                  <td className="py-2 pr-4 text-muted-foreground">仅 student 角色有效，6 位邀请码</td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}