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

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 async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("users")
  return {
    title: `${t("import.title")} - Next_Edu`,
    description: t("import.description"),
  }
}

export const dynamic = "force-dynamic"

export default async function UserImportPage(): Promise<JSX.Element> {
  const t = await getTranslations("users")
  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" />
                {t("import.back")}
              </Link>
            </Button>
            <h2 className="text-2xl font-bold tracking-tight">{t("import.title")}</h2>
          </div>
          <p className="text-muted-foreground mt-1">
            {t("import.subtitle")}
          </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">{t("import.instructionsTitle")}</CardTitle>
            </div>
            <CardDescription>{t("import.instructionsDescription")}</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>{t("import.step1")}</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>{t("import.step2")}</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>{t("import.step3")}</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>{t("import.step4")}</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">{t("import.notesTitle")}</CardTitle>
            </div>
            <CardDescription>{t("import.notesDescription")}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-muted-foreground">
            <p>{t("import.note1")}</p>
            <p>{t("import.note2")}</p>
            <p>{t("import.note3")}</p>
            <p>{t("import.note4")}</p>
            <p>{t("import.note5")}</p>
            <p>{t("import.note6")}</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">{t("import.templateTitle")}</CardTitle>
          </div>
          <CardDescription>{t("import.templateDescription")}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t("import.columnName")}</TableHead>
                  <TableHead>{t("import.columnRequired")}</TableHead>
                  <TableHead>{t("import.columnDescription")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">{t("import.fieldName")}</TableCell>
                  <TableCell>{t("import.fieldNameRequired")}</TableCell>
                  <TableCell className="text-muted-foreground">{t("import.fieldNameDescription")}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">{t("import.fieldEmail")}</TableCell>
                  <TableCell>{t("import.fieldEmailRequired")}</TableCell>
                  <TableCell className="text-muted-foreground">{t("import.fieldEmailDescription")}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">{t("import.fieldRole")}</TableCell>
                  <TableCell>{t("import.fieldRoleRequired")}</TableCell>
                  <TableCell className="text-muted-foreground">{t("import.fieldRoleDescription")}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">{t("import.fieldPhone")}</TableCell>
                  <TableCell>{t("import.fieldPhoneRequired")}</TableCell>
                  <TableCell className="text-muted-foreground">{t("import.fieldPhoneDescription")}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">{t("import.fieldInviteCode")}</TableCell>
                  <TableCell>{t("import.fieldInviteCodeRequired")}</TableCell>
                  <TableCell className="text-muted-foreground">{t("import.fieldInviteCodeDescription")}</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
