"use client"
import { getApiUrl } from "@/config/api"

import { useEffect, useState } from "react"
import { useRouter, useParams } from "next/navigation"
import { ArrowLeft, FileIcon, Upload, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ProtectedRoute } from "@/components/protected-route"
import { FileUpload } from "@/components/file-upload"
import type { Device, DeviceFile } from "@/types/device"
import { ScrollArea } from "@/components/ui/scroll-area"
import { getDeviceImage } from "@/components/device-images"
import axios from "axios"
import Image from "next/image"

interface ApiCapture {
  id: number
  filename: string
  upload: string
  firmware_version: string
  ip: string
  state: string
}

const getDeviceById = async (deviceId: string) => {
  try {
    const deviceResponse = await axios.get(getApiUrl(`get_device_by_id/${deviceId}`))
    const deviceData = deviceResponse.data

    const filesResponse = await axios.get(getApiUrl(`get_file_by_device/${deviceId}`))
    const filesData = filesResponse.data

    const files: DeviceFile[] = filesData.map((file: ApiCapture) => ({
      id: String(file.id),
      name: file.filename,
      uploadedAt: file.upload,
      firmwareVersion: file.firmware_version,
      ipAddress: file.ip,
      status: file.state === "pending" ? "pending" : "scanned",
    }))

    return {
      id: String(deviceData.id),
      name: deviceData.product.product_name,
      type: deviceData.product.device_type.device_type,
      manufacturer: deviceData.product.manufacturer.name,
      serialNumber: deviceData.serial,
      comment: deviceData.comment,
      lastScanned: new Date(deviceData.created).toLocaleDateString("en-GB"),
      files,
    }
  } catch (error) {
    console.error("Failed to fetch device details:", error)
    return null
  }
}

export default function DeviceDetailPage() {
  const params = useParams()
  const id = params?.id as string
  const router = useRouter()
  const [device, setDevice] = useState<Device | null>(null)
  const [showUpload, setShowUpload] = useState(false)

  useEffect(() => {
    const fetchDeviceDetails = async () => {
      const deviceDetails = await getDeviceById(id)
      if (!deviceDetails) {
        router.push("/devices")
      } else {
        setDevice(deviceDetails)
      }
    }

    fetchDeviceDetails()
  }, [id, router])

  const handleViewResults = (fileId: string) => {
    router.push(`/scan-results?fileId=${fileId}`)
  }

  if (!device) {
    return <div className="min-h-screen bg-background" />
  }

  return (
    <ProtectedRoute>
      {({ logout }) => (
        <div className="min-h-screen bg-background p-4 flex items-start">
          <div className="flex gap-4 max-w-[1400px] mx-auto justify-center w-full h-[calc(100vh-32px)]">
            <div className="flex-1 space-y-8">
              <Card className="w-full h-full flex flex-col">
                <CardHeader>
                  <div className="flex justify-end items-center mb-8">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => {
                        logout()
                        router.push("/login")
                      }}
                    >
                      <LogOut className="h-4 w-4" />
                      <span className="sr-only">Logout</span>
                    </Button>
                  </div>
                  {!showUpload && (
                    <div className="flex items-start gap-4">
                      <div className="flex-1 space-y-2">
                        <CardTitle className="text-2xl">{device.name}</CardTitle>
                        <CardDescription className="space-y-1">
                          <span className="block">Type: {device.type}</span>
                          <span className="block">Manufacturer: {device.manufacturer}</span>
                          <span className="block">Serial Number: {device.serialNumber}</span>
                          {device.comment && <span className="block">Comment: {device.comment}</span>}
                          {device.lastScanned && (
                            <span className="block">Last Scanned: {device.lastScanned}</span>
                          )}
                        </CardDescription>
                      </div>
                      <div className="w-40 h-40 rounded-full overflow-hidden flex-shrink-0 border">
                        <Image
                          src={getDeviceImage(device.type) || "/images/logos/Placeholder.png"}
                          alt={device.name}
                          width={160}
                          height={160}
                          className="w-full h-full object-cover"
                        />
                      </div>
                    </div>
                  )}
                </CardHeader>
                <CardContent className="flex-grow overflow-hidden relative">
                  {showUpload ? (
                    <FileUpload onBack={() => setShowUpload(false)} deviceId={id} />
                  ) : (
                    <div className="space-y-6 h-full flex flex-col">
                      <Button onClick={() => setShowUpload(true)} className="w-auto">
                        <Upload className="mr-2 h-4 w-4" />
                        Upload New File
                      </Button>

                      <div className="space-y-4 flex-grow overflow-hidden">
                        <h3 className="text-lg font-semibold">Device Files</h3>
                        <ScrollArea className="h-[calc(100%-60px)] pr-4">
                          {device.files && device.files.length > 0 ? (
                            <div className="space-y-2">
                              {device.files.map((file) => (
                                <div key={file.id} className="flex items-center justify-between p-4 border rounded-lg">
                                  <div className="flex items-center space-x-4">
                                    <FileIcon className="h-6 w-6 text-muted-foreground" />
                                    <div className="space-y-1">
                                      <p className="font-medium">{file.name}</p>
                                      <div className="text-sm text-muted-foreground space-y-0.5">
                                        <p>Uploaded: {new Date(file.uploadedAt).toLocaleDateString("de-DE")}</p>
                                        {file.firmwareVersion && <p>Firmware: {file.firmwareVersion}</p>}
                                        {file.ipAddress && <p>IP Address: {file.ipAddress}</p>}
                                      </div>
                                    </div>
                                  </div>
                                  <Button
                                    variant="default"
                                    className="bg-emerald-600 hover:bg-emerald-700"
                                    onClick={() => handleViewResults(file.id)}
                                  >
                                    View Results
                                  </Button>
                                </div>
                              ))}
                            </div>
                          ) : (
                            <div className="text-center py-8 text-muted-foreground">
                              No files uploaded yet. Upload a file to start scanning.
                            </div>
                          )}
                        </ScrollArea>
                      </div>

                      <div className="flex justify-end mt-auto pt-4">
                        <Button onClick={() => router.push("/devices")}>
                          <ArrowLeft className="mr-2 h-4 w-4" />
                          Back to Devices
                        </Button>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      )}
    </ProtectedRoute>
  )
}