meti-frontend/components/api-test.tsx

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { TestTube, CheckCircle, XCircle } from "lucide-react"
import apiClient from "@/lib/api-client"
import { API_CONFIG } from "@/lib/config"

export function ApiTest() {
  const [testResult, setTestResult] = useState<string>("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string>("")

  const testApiConnection = async () => {
    setLoading(true)
    setError("")
    setTestResult("")

    try {
      console.log("🧪 Testing API connection...")
      
      // Test the login endpoint (this will fail but we can see the request)
      const response = await apiClient.post('/api/v1/auth/login', {
        email: "test@example.com",
        password: "test123"
      })
      
      setTestResult("✅ API connection successful!")
      console.log("✅ Test response:", response.data)
      
    } catch (error: any) {
      console.log("❌ Test error:", error)
      
      if (error.response) {
        // Server responded with error status - this is expected for invalid credentials
        setTestResult(`✅ API connection working! Server responded with status: ${error.response.status}`)
        setError(`Expected error: ${error.response.data?.message || 'Invalid credentials'}`)
      } else if (error.request) {
        // Request was made but no response received
        setTestResult("❌ API connection failed")
        setError("No response from server. Check if backend is running.")
      } else {
        // Something else happened
        setTestResult("❌ API connection failed")
        setError(error.message || "Unknown error occurred")
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <TestTube className="h-5 w-5" />
          API Connection Test
        </CardTitle>
        <CardDescription>
          Test the connection to your backend API
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="text-sm space-y-2">
          <div><strong>Backend URL:</strong> {API_CONFIG.BASE_URL}</div>
          <div><strong>Login Endpoint:</strong> {API_CONFIG.ENDPOINTS.LOGIN}</div>
          <div><strong>Full URL:</strong> {API_CONFIG.BASE_URL}{API_CONFIG.ENDPOINTS.LOGIN}</div>
          <div><strong>Auth Header:</strong> {API_CONFIG.AUTH_HEADER ? "✅ Set" : "❌ Not Set"}</div>
        </div>

        <Button 
          onClick={testApiConnection} 
          disabled={loading}
          className="w-full"
        >
          {loading ? "Testing..." : "Test API Connection"}
        </Button>

        {testResult && (
          <Alert variant={testResult.includes("✅") ? "default" : "destructive"}>
            {testResult.includes("✅") ? (
              <CheckCircle className="h-4 w-4" />
            ) : (
              <XCircle className="h-4 w-4" />
            )}
            <AlertDescription>{testResult}</AlertDescription>
          </Alert>
        )}

        {error && (
          <Alert variant="destructive">
            <XCircle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}
      </CardContent>
    </Card>
  )
}