"use client"

import { useRef, useEffect, useState } from "react"
import { MemberCardData } from "@/templates/membership-card/types"
import config from "@/templates/membership-card/config.json"
import { generateQRDataURL } from "@/services/qrCode"
import { useParams } from "next/navigation"

const cardConfig = config as any

export function CardFront({ member, showQR = true }: { member: MemberCardData; showQR?: boolean }) {
  const params = useParams()
  const lang = (params?.lang as string) || "ar"
  const isRtl = lang === "ar"
  const el = cardConfig.front.elements

  const [qrDataURL, setQrDataURL] = useState<string>("")

  useEffect(() => {
    if (!showQR) return
    const origin = window.location.origin
    const value = member.qrValue || `${origin}/${lang}/verify?id=${member.membershipNumber}`
    generateQRDataURL(value).then(setQrDataURL).catch(console.error)
  }, [member.membershipNumber, member.qrValue, showQR, lang])

  const s = (name: string): React.CSSProperties => {
    const e = el[name]
    if (!e) return {}
    const style: React.CSSProperties = {
      position: "absolute",
      left: `${e.x}%`,
      top: `${e.y}%`,
    }
    if (e.width) style.width = typeof e.width === "number" ? `${e.width}%` : e.width
    if (e.height) style.height = typeof e.height === "number" ? `${e.height}%` : e.height
    if (e.fontSize) style.fontSize = e.fontSize
    if (e.fontWeight) style.fontWeight = e.fontWeight
    if (e.color) style.color = e.color
    if (e.textAlign) style.textAlign = e.textAlign as any
    if (e.fontFamily) style.fontFamily = e.fontFamily
    if (e.borderRadius !== undefined) style.borderRadius = e.borderRadius
    if (e.border) style.border = e.border
    if (e.clipPath === "circle") { style.borderRadius = "50%"; style.objectFit = "cover" }
    if (e.size) { style.width = `${e.size}%`; style.height = "auto" }
    if (e.lineHeight) style.lineHeight = e.lineHeight
    return style
  }

  const cardW = cardConfig.card.widthMm
  const cardH = cardConfig.card.heightMm

  return (
    <div
      className="card-face card-front"
      style={{
        position: "relative",
        width: `${cardW}mm`,
        height: `${cardH}mm`,
        overflow: "hidden",
        borderRadius: 4,
        backgroundImage: `url(${cardConfig.front.background})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        flexShrink: 0,
      }}
    >
      {member.photo && (
        <img
          src={member.photo}
          alt=""
          style={{
            ...s("photo"),
            objectFit: "cover",
          }}
        />
      )}
      <span style={s("nameAr")}>{isRtl ? member.nameAr : member.nameEn}</span>
      <span style={s("nameEn")}>{isRtl ? member.nameEn : member.nameAr}</span>
      <span style={s("membershipNumber")}>{member.membershipNumber}</span>
      <span style={s("specialization")}>{member.specialization || member.department || ""}</span>
      <span style={s("graduationYear")}>
        {member.graduationYear ? `${isRtl ? "تخرج" : "Grad."} ${member.graduationYear}` : ""}
      </span>
      {showQR && qrDataURL && (
        <img src={qrDataURL} alt="QR" style={s("qrCode")} />
      )}
    </div>
  )
}