"use client"

import { useTranslations } from "next-intl"
import { School } from "lucide-react"
import { type ReactElement } from "react"

import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Textarea } from "@/shared/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"

export interface SchoolInfoValues {
  schoolName: string
  schoolCode: string
  schoolPhone: string
  schoolEmail: string
  schoolAddress: string
  schoolDescription: string
}

interface SchoolInfoCardProps {
  values: SchoolInfoValues
  onChange: (key: keyof SchoolInfoValues, value: string) => void
}

/**
 * 管理员系统设置 - 学校信息卡片
 */
export function SchoolInfoCard({ values, onChange }: SchoolInfoCardProps): ReactElement {
  const t = useTranslations("settings.admin.schoolInfo")

  return (
    <Card className="shadow-none">
      <CardHeader>
        <div className="flex items-center gap-2">
          <School className="h-5 w-5 text-primary" />
          <div>
            <CardTitle className="text-base">{t("title")}</CardTitle>
            <CardDescription>{t("description")}</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="school-name">{t("name")}</Label>
            <Input
              id="school-name"
              name="schoolName"
              placeholder={t("namePlaceholder")}
              value={values.schoolName}
              onChange={(e) => onChange("schoolName", e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="school-code">{t("code")}</Label>
            <Input
              id="school-code"
              name="schoolCode"
              placeholder={t("codePlaceholder")}
              value={values.schoolCode}
              onChange={(e) => onChange("schoolCode", e.target.value)}
            />
          </div>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="school-phone">{t("phone")}</Label>
            <Input
              id="school-phone"
              name="schoolPhone"
              placeholder={t("phonePlaceholder")}
              value={values.schoolPhone}
              onChange={(e) => onChange("schoolPhone", e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="school-email">{t("email")}</Label>
            <Input
              id="school-email"
              name="schoolEmail"
              type="email"
              placeholder={t("emailPlaceholder")}
              value={values.schoolEmail}
              onChange={(e) => onChange("schoolEmail", e.target.value)}
            />
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="school-address">{t("address")}</Label>
          <Input
            id="school-address"
            name="schoolAddress"
            placeholder={t("addressPlaceholder")}
            value={values.schoolAddress}
            onChange={(e) => onChange("schoolAddress", e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="school-desc">{t("description2")}</Label>
          <Textarea
            id="school-desc"
            name="schoolDescription"
            placeholder={t("descriptionPlaceholder")}
            rows={3}
            value={values.schoolDescription}
            onChange={(e) => onChange("schoolDescription", e.target.value)}
          />
        </div>
      </CardContent>
    </Card>
  )
}