"use client"

import { useState } from "react"
import { MoreHorizontal, Pencil, Settings, Share2 } from "lucide-react"
import { useTranslations } from "next-intl"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { EditClassDialog } from "./edit-class-dialog"

interface ClassHeaderProps {
  classId: string
  name: string
  grade: string
  homeroom?: string | null
  room?: string | null
  schoolName?: string | null
  studentCount: number
}

export function ClassHeader({
  classId,
  name,
  grade,
  homeroom,
  room,
  schoolName,
  studentCount,
}: ClassHeaderProps) {
  const [showEdit, setShowEdit] = useState(false)
  const t = useTranslations("classes")

  return (
    <>
      <div className="flex flex-col gap-4 border-b bg-background px-6 py-4">
        <div className="flex items-start justify-between">
          <div className="space-y-1">
            <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
              {name}
            </h1>
            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
              {schoolName && (
                <>
                   <span>{schoolName}</span>
                   <span className="text-muted-foreground/40">•</span>
                </>
              )}
              <Badge variant="secondary" className="font-medium">
                {grade}
              </Badge>
              {homeroom && (
                <>
                  <span className="text-muted-foreground/40">•</span>
                  <span>{t("detail.header.homeroom", { name: homeroom })}</span>
                </>
              )}
              {room && (
                <>
                  <span className="text-muted-foreground/40">•</span>
                  <span>{t("detail.header.room", { room })}</span>
                </>
              )}
              <span className="text-muted-foreground/40">•</span>
              <span>{t("detail.header.students", { count: studentCount })}</span>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" className="hidden sm:flex">
              <Share2 className="mr-2 h-4 w-4" />
              {t("detail.header.invite")}
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon" className="h-8 w-8">
                  <MoreHorizontal className="h-4 w-4" />
                  <span className="sr-only">{t("detail.header.moreActions")}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setShowEdit(true)}>
                  <Pencil className="mr-2 h-4 w-4" />
                  {t("detail.header.editDetails")}
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Share2 className="mr-2 h-4 w-4" />
                  {t("detail.header.inviteStudents")}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive focus:text-destructive">
                  <Settings className="mr-2 h-4 w-4" />
                  {t("detail.header.classSettings")}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

      <EditClassDialog
        open={showEdit}
        onOpenChange={setShowEdit}
        classId={classId}
        initialData={{
          name,
          grade,
          homeroom,
          room,
          schoolName
        }}
      />
    </>
  )
}
