'use client'
import React, { useEffect, useState } from 'react'

const DashboardFooter: React.FC = () => {
  const [health, setHealth] = useState<'loading' | 'healthy' | 'unhealthy'>('loading')
  const version = process.env.NEXT_PUBLIC_APP_VERSION

  useEffect(() => {
    const checkHealth = async () => {
      try {
        // Adding a small delay to show the "checking" state if it's too fast
        const response = await fetch('/api/health-check')
        if (response.ok) {
          setHealth('healthy')
        } else {
          setHealth('unhealthy')
        }
      } catch (error) {
        setHealth('unhealthy')
      }
    }

    checkHealth()
  }, [])

  return (
    <div className="mt-12 pt-8 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center text-sm text-gray-500 gap-4">
      <div className="flex items-center gap-2">
        <span className="font-semibold text-gray-900">Build Version</span>
        <span className="bg-blue-50 text-blue-700 border border-blue-100 px-2 py-0.5 rounded text-xs font-mono">
          v{version}
        </span>
        <span className="ml-4 text-gray-300">|</span>
        <span className="ml-2 text-gray-600 font-medium italic">Karma @ 2026</span>
      </div>
      <div className="flex items-center gap-3">
        <span className="font-semibold text-gray-900">Backend System</span>
        <div className="flex items-center gap-2 bg-white border border-gray-200 px-3 py-1 rounded-lg shadow-sm">
          <div className="relative flex items-center justify-center">
            {health === 'healthy' && (
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
            )}
            <span
              className={`relative inline-flex h-2.5 w-2.5 rounded-full ${
                health === 'healthy'
                  ? 'bg-green-500'
                  : health === 'unhealthy'
                    ? 'bg-red-500'
                    : 'bg-yellow-500'
              }`}
            />
          </div>
          <span
            className={`font-medium ${
              health === 'healthy'
                ? 'text-green-700'
                : health === 'unhealthy'
                  ? 'text-red-700'
                  : 'text-yellow-700'
            }`}
          >
            {health === 'healthy' ? 'Operational' : health === 'unhealthy' ? 'Offline' : 'Verifying...'}
          </span>
        </div>
      </div>
    </div>
  )
}

export default DashboardFooter