"use client"

import { useEffect, useState } from "react"
import { CheckCircle2, XCircle, Loader2 } from "lucide-react"

type ConnectionStatus = "checking" | "connected" | "error"

interface ConnectionStatusProps {
  onStatusChange?: (status: ConnectionStatus) => void
}

export function ConnectionStatus({ onStatusChange }: ConnectionStatusProps) {
  const [status, setStatus] = useState<ConnectionStatus>("checking")
  const [errorMessage, setErrorMessage] = useState<string>("")
  const [version] = useState<string>("1.1.2")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    checkConnection()
    // Check every 30 seconds
    const interval = setInterval(checkConnection, 30000)
    return () => clearInterval(interval)
  }, [])

  const checkConnection = async () => {
    try {
      const response = await fetch("/api/test-connection")
      const data = await response.json()

      if (response.ok && data.status === "connected") {
        setStatus("connected")
        setErrorMessage("")
        onStatusChange?.("connected")
      } else {
        setStatus("error")
        setErrorMessage(data.message || "Connection failed")
        onStatusChange?.("error")
      }
    } catch (error) {
      setStatus("error")
      setErrorMessage("Unable to reach server")
      onStatusChange?.("error")
    }
  }

  return (
    <div className="flex items-center justify-between gap-4 px-4 py-2 bg-slate-100 border-b border-slate-200">
      <div className="flex items-center gap-2">
        {status === "checking" && (
          <>
            <Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
            <span className="text-sm text-slate-600">Checking connection...</span>
          </>
        )}
        {status === "connected" && (
          <>
            <CheckCircle2 className="h-4 w-4 text-green-500" />
            <span className="text-sm text-green-700 font-medium">Airtable Connected</span>
          </>
        )}
        {status === "error" && (
          <>
            <XCircle className="h-4 w-4 text-red-500" />
            <div className="flex flex-col">
              <span className="text-sm text-red-700 font-medium">Connection Error</span>
              {errorMessage && (
                <span className="text-xs text-red-600">{errorMessage}</span>
              )}
            </div>
          </>
        )}
      </div>
      <span className="text-xs text-slate-500">v{version}</span>
    </div>
  )
}