"use client"

import { useEffect, useState, useCallback } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Download, ArrowLeft } from "lucide-react"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { useI18n } from "@/contexts/I18nContext"
import jsPDF from "jspdf"

export default function QRCodePage() {
  const params = useParams()
  const router = useRouter()
  const { t } = useI18n()
  const [qrCode, setQrCode] = useState<string | null>(null)
  const [equipamento, setEquipamento] = useState<{
    tipo: string
    matricula?: string
    parque?: string
    marca: string
    modelo: string
  } | null>(null)
  const [loading, setLoading] = useState(true)

  const fetchEquipamento = useCallback(async () => {
    try {
      const res = await fetch(`/api/equipamentos/${params.id}`)
      if (res.ok) {
        const data = await res.json()
        setQrCode(data.qrCode)
        setEquipamento({
          tipo: data.tipo,
          matricula: data.matricula,
          parque: data.parque,
          marca: data.marca,
          modelo: data.modelo,
        })
      }
    } catch (error) {
    } finally {
      setLoading(false)
    }
  }, [params.id])

  useEffect(() => {
    fetchEquipamento()
  }, [fetchEquipamento])

  const handleDownload = () => {
    if (!qrCode || !equipamento) return

    const identificador = equipamento.tipo === "VEICULO" 
      ? equipamento.matricula 
      : equipamento.parque

    const label = equipamento.tipo === "VEICULO" 
      ? t("pdf.qrCode.license")
      : t("pdf.qrCode.park")

    try {
      const pdf = new jsPDF({
        orientation: "portrait",
        unit: "mm",
        format: "a4",
      })

      const pageWidth = 210
      const pageHeight = 297
      const margin = 20
      const qrSize = 80 
      const qrX = (pageWidth - qrSize) / 2 
      const qrY = (pageHeight - qrSize) / 2 - 20

      pdf.addImage(qrCode, "PNG", qrX, qrY, qrSize, qrSize)

      const textY = qrY + qrSize + 15
      pdf.setFontSize(16)
      pdf.setFont("helvetica", "bold")
      pdf.text(`${label}: ${identificador}`, pageWidth / 2, textY, {
        align: "center",
      })

      pdf.save(`QRCode-${identificador}.pdf`)
    } catch (error) {
    }
  }

  if (loading) {
    return <LoadingSpinner />
  }

  if (!qrCode || !equipamento) {
    return (
      <div className="max-w-md mx-auto py-8 px-4">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 text-center">
          <p className="text-gray-600 dark:text-gray-400 mb-4">
            {t("equipment.list.qrNotAvailable")}
          </p>
          <Link href={`/module-equipament/admin/equipment/${params.id}`}>
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" />
              {t("common.back")}
            </Button>
          </Link>
        </div>
      </div>
    )
  }

  const identificador = equipamento.tipo === "VEICULO" 
    ? equipamento.matricula 
    : equipamento.parque

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 px-4">
      <div className="max-w-md mx-auto space-y-4">
        <Link href={`/module-equipament/admin/equipment/${params.id}`}>
          <Button variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            {t("common.back")}
          </Button>
        </Link>

        <Card className="shadow-lg dark:bg-gray-800">
          <CardHeader>
            <CardTitle className="text-center">
              {t("pdf.qrCode.title")}
            </CardTitle>
            <div className="text-center mt-2">
              <p className="text-lg font-semibold dark:text-white">
                {equipamento.marca} {equipamento.modelo}
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {equipamento.tipo === "VEICULO" 
                  ? `${t("pdf.qrCode.license")}: ${equipamento.matricula}`
                  : `${t("pdf.qrCode.park")}: ${equipamento.parque}`}
              </p>
            </div>
          </CardHeader>
          <CardContent className="flex flex-col items-center gap-6">
            <div className="relative w-64 h-64 bg-white p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700">
              <Image
                src={qrCode}
                alt={`QR Code para ${identificador}`}
                fill
                className="object-contain p-2"
              />
            </div>
            <Button onClick={handleDownload} size="lg" className="w-full">
              <Download className="mr-2 h-4 w-4" />
              {t("equipment.list.downloadQR")}
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}