i tried to add this but it wont show in console

 console.log("API Response Data:", response.data); // Add this
import axios from "axios"

const api = axios.create({
  baseURL: "http://localhost:8000/api",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  },
})

export const sightingService = {
  getSightings: async (params = {}) => {
    try {
      const response = await api.get("/sightings", { params })
      console.log("Sightings API Response:", response.data) // Add this
      return response.data
    } catch (error) {
      console.error("Error fetching sightings:", error)
      throw error.response?.data || error.message
    }
  },

  getAddress: async (lat, lng) => {
    try {
      const response = await api.get("/sightings/geocode", {
        params: { lat, lng },
      })
      return response.data.address
    } catch (error) {
      console.error("Geocoding error:", error)
      return "Unknown location"
    }
  },

  reportSighting: async (data) => {
    try {
      const response = await api.post("/sightings/create", data)
      return response.data
    } catch (error) {
      console.error("Error reporting sighting:", error)
      throw error.response?.data || error.message
    }
  },
}

import React, { useState } from "react"
import { useMonster } from "../context/MonsterContext"
import { monsterService } from "../services/monsterService"
import { useSightings } from "../context/SightingContext"
import {
  Loader,
  AlertCircle,
  Camera,
  Check,
  Skull,
  MapPin,
  Shield,
} from "lucide-react"

const ReportMonsterForm = () => {
  const { types, regions } = useMonster()
  const {
    sightings,
    loading: sightingsLoading,
    error: sightingsError,
  } = useSightings()
  // Ensure we have array data
  const safeTypes = Array.isArray(types) ? types : []
  const safeRegions = Array.isArray(regions) ? regions : []
  const initialRegionId = safeRegions[0]?.id || ""

  const [formData, setFormData] = useState({
    name: "",
    type_id: "",
    danger_level: "Medium",
    address: "",
    region_id: initialRegionId,
    description: "",
    image: null,
    use_ai: false,
  })

  const [preview, setPreview] = useState("")
  const [errors, setErrors] = useState({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [success, setSuccess] = useState(false)

  const handleInputChange = (e) => {
    const { name, value, files } = e.target

    if (name === "image") {
      const file = files[0]
      setFormData((prev) => ({ ...prev, image: file }))
      setPreview(URL.createObjectURL(file))
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }))
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    setErrors({})
    setSuccess(false)

    const data = new FormData()

    // Append all form data directly
    Object.entries(formData).forEach(([key, value]) => {
      if (value !== null && value !== undefined) {
        data.append(key, value)
      }
    })

    try {
      await monsterService.reportMonster(data)
      setSuccess(true)
      // Reset form
      setFormData({
        name: "",
        type_id: "",
        danger_level: "Medium",
        region_id: initialRegionId,
        address: "",
        description: "",
        image: null,
        use_ai: false,
      })
      setPreview("")
    } catch (error) {
      console.log("Full error object:", error)
      if (error && error.errors) {
        setErrors(error.errors)
      } else if (error && error.error) {
        setErrors({ general: error.error })
      } else if (error && error.message) {
        setErrors({ general: error.message })
      } else {
        setErrors({ general: "Submission failed. Please try again." })
      }
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="min-h-screen bg-gray-950 py- px-4">
      {/* Page Title with Decorative Elements */}
      <div className="max-w-6xl mx-auto mb-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl md:text-3xl font-bold text-yellow-400 flex items-center">
            <Skull className="mr-3 text-yellow-500" size={28} />
            Monster Registry
          </h1>

          <div className="hidden md:flex items-center space-x-4 text-gray-400">
            <div className="flex items-center">
              <MapPin size={16} className="mr-1 text-yellow-500" />
              <span className="text-sm">{safeRegions.length} Regions</span>
            </div>
            <div className="flex items-center">
              <Shield size={16} className="mr-1 text-yellow-500" />
              <span className="text-sm">{safeTypes.length} Types</span>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content Area with Decorative Elements */}
      <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6">
        {/* Sidebar - Left */}
        <div className="hidden md:block">
          <div className="bg-gray-800/50 p-4 rounded-lg border border-gray-700 mb-4">
            <h3 className="text-lg font-semibold text-yellow-300 mb-3">
              Reporting Guidelines
            </h3>
            <ul className="text-gray-300 space-y-2 text-sm">
              <li className="flex items-start">
                <span className="text-yellow-500 mr-2">•</span>
                <span>
                  Include clear details about the monster's appearance
                </span>
              </li>
              <li className="flex items-start">
                <span className="text-yellow-500 mr-2">•</span>
                <span>Specify behavior patterns and any unique abilities</span>
              </li>
              <li className="flex items-start">
                <span className="text-yellow-500 mr-2">•</span>
                <span>Upload the clearest image possible</span>
              </li>
              <li className="flex items-start">
                <span className="text-yellow-500 mr-2">•</span>
                <span>
                  Select accurate danger level based on observed threats
                </span>
              </li>
            </ul>
          </div>

          <div className="bg-yellow-900/30 p-4 rounded-lg border border-yellow-800">
            <h3 className="text-lg font-semibold text-yellow-300 mb-3">
              Safety Notice
            </h3>
            <p className="text-yellow-100/80 text-sm">
              Do not approach dangerous monsters. Report sightings immediately
              to local authorities before submitting details to our registry.
            </p>
          </div>
        </div>

        {/* Main Form - Center */}
        <div className="md:col-span-2 lg:col-span-1">
          <div className="bg-gray-800 p-4 md:p-6 rounded-lg shadow-xl border border-gray-700 max-w-md mx-auto">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold text-yellow-400 flex items-center">
                <Camera size={20} className="mr-2" />
                Report New Monster
              </h2>
            </div>

            {success && (
              <div className="mb-4 p-3 bg-green-800/30 rounded-lg border border-green-700 text-green-300 flex items-center">
                <Check size={18} className="mr-2 flex-shrink-0" />
                <span className="text-sm">Monster reported successfully!</span>
              </div>
            )}

            {errors.general && (
              <div className="mb-4 p-3 bg-red-800/30 rounded-lg border border-red-700 text-red-300 flex items-center">
                <AlertCircle size={18} className="mr-2 flex-shrink-0" />
                <span className="text-sm">{errors.general}</span>
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-4">
              {/* Name Field */}
              <div>
                <label className="block text-sm font-semibold text-yellow-300 mb-1">
                  Monster Name
                </label>
                <input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  className="w-full px-3 py-2 rounded-lg bg-gray-700 border-2 border-gray-600 text-sm text-white
                     focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                  placeholder="Enter monster name"
                />
                {errors.name && (
                  <span className="text-red-400 text-xs mt-1 block">
                    {errors.name[0]}
                  </span>
                )}
              </div>

              {/* Image Upload */}
              <div>
                <label className="block text-sm font-semibold text-yellow-300 mb-1">
                  Monster Image
                </label>
                <div className="flex items-center gap-3">
                  <div className="relative flex-1">
                    <input
                      type="file"
                      name="image"
                      onChange={handleInputChange}
                      className="block w-full text-xs text-gray-400
                         file:mr-3 file:py-2 file:px-3
                         file:rounded-lg file:border-0
                         file:text-xs file:font-medium
                         file:bg-yellow-600 file:text-white
                         hover:file:bg-yellow-700 transition-colors"
                    />
                  </div>
                  {preview ? (
                    <div className="relative w-16 h-16 rounded-lg overflow-hidden border-2 border-yellow-600 flex-shrink-0">
                      <img
                        src={preview}
                        alt="Preview"
                        className="w-full h-full object-cover"
                      />
                    </div>
                  ) : (
                    <div className="relative w-16 h-16 rounded-lg overflow-hidden border-2 border-gray-600 bg-gray-700 flex-shrink-0 flex items-center justify-center">
                      <Camera size={20} className="text-gray-500" />
                    </div>
                  )}
                </div>
                {errors.image && (
                  <span className="text-red-400 text-xs mt-1 block">
                    {errors.image[0]}
                  </span>
                )}
              </div>

              {/* Type & Region Grid */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-semibold text-yellow-300 mb-1">
                    Monster Type
                  </label>
                  <select
                    name="type_id"
                    value={formData.type_id}
                    onChange={handleInputChange}
                    className="w-full px-3 py-2 rounded-lg bg-gray-700 border-2 border-gray-600 text-sm text-white
                       focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                  >
                    <option value="">Select Type</option>
                    {safeTypes.map((type) => (
                      <option key={type.id} value={type.id}>
                        {type.name}
                      </option>
                    ))}
                  </select>
                  {errors.type_id && (
                    <span className="text-red-400 text-xs mt-1 block">
                      {errors.type_id[0]}
                    </span>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-semibold text-yellow-300 mb-1">
                    Habitat Region
                  </label>
                  <select
                    name="region_id"
                    value={formData.region_id}
                    onChange={handleInputChange}
                    className="w-full px-3 py-2 rounded-lg bg-gray-700 border-2 border-gray-600 text-sm text-white
                       focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                  >
                    {safeRegions.map((region) => (
                      <option key={region.id} value={region.id}>
                        {region.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-semibold text-yellow-300 mb-1">
                  Sighting Address
                </label>
                <input
                  type="text"
                  name="address"
                  value={formData.address}
                  onChange={handleInputChange}
                  className="w-full px-3 py-2 rounded-lg bg-gray-700 border-2 border-gray-600 text-sm text-white
               focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                  placeholder="Enter sighting location address"
                />
                {errors.address && (
                  <span className="text-red-400 text-xs mt-1 block">
                    {errors.address[0]}
                  </span>
                )}
              </div>

              {/* Danger Level */}
              <div>
                <label className="block text-sm font-semibold text-yellow-300 mb-1">
                  Danger Level
                </label>
                <div className="grid grid-cols-3 gap-2">
                  {["Low", "Medium", "High"].map((level) => (
                    <label
                      key={level}
                      className={`flex items-center justify-center p-2 rounded-lg border-2 cursor-pointer transition-all
                        ${
                          formData.danger_level === level
                            ? "bg-gray-700 border-yellow-500 text-yellow-300"
                            : "bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700"
                        }`}
                    >
                      <input
                        type="radio"
                        name="danger_level"
                        value={level}
                        checked={formData.danger_level === level}
                        onChange={handleInputChange}
                        className="sr-only"
                      />
                      <span className="text-xs font-medium">{level}</span>
                    </label>
                  ))}
                </div>
              </div>

              {/* AI Toggle */}
              <div className="flex items-center gap-2 pt-1">
                <label className="flex items-center gap-2 cursor-pointer">
                  <div className="relative">
                    <input
                      type="checkbox"
                      name="use_ai"
                      checked={formData.use_ai}
                      onChange={(e) =>
                        setFormData((prev) => ({
                          ...prev,
                          use_ai: e.target.checked,
                        }))
                      }
                      className="sr-only peer"
                    />
                    <div
                      className="w-8 h-5 bg-gray-600 rounded-full peer-checked:bg-yellow-600 
                            peer-checked:after:translate-x-3 after:absolute after:top-0.5 after:left-0.5 
                            after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
                    ></div>
                  </div>
                  <span className="text-xs font-semibold text-yellow-300">
                    Generate AI Analysis
                  </span>
                </label>
              </div>

              {/* Description */}
              <div>
                <label className="block text-sm font-semibold text-yellow-300 mb-1">
                  Description {formData.use_ai && "(AI Generated)"}
                </label>
                <textarea
                  name="description"
                  value={formData.description}
                  onChange={handleInputChange}
                  disabled={formData.use_ai}
                  className="w-full px-3 py-2 rounded-lg bg-gray-700 border-2 border-gray-600 text-sm text-white
                     focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 disabled:opacity-50"
                  rows="3"
                  placeholder={
                    formData.use_ai
                      ? "AI will generate a description"
                      : "Describe the monster..."
                  }
                />
                {errors.description && (
                  <span className="text-red-400 text-xs mt-1 block">
                    {errors.description[0]}
                  </span>
                )}
              </div>

              {/* Submit Button */}
              <div className="pt-2">
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full py-2 px-4 bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-700 hover:to-yellow-800 
                     text-white text-sm font-bold rounded-lg shadow-lg transition-all duration-300
                     disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isSubmitting ? (
                    <span className="flex items-center justify-center gap-2">
                      <Loader size={16} className="animate-spin" />
                      <span>Submitting...</span>
                    </span>
                  ) : (
                    "Report Monster"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>

        {/* Info Box - Right */}
        <div className="hidden lg:block">
          <div className="bg-gray-800/50 p-4 rounded-lg border border-gray-700 mb-4">
            <h3 className="text-lg font-semibold text-yellow-300 mb-3">
              Recent Sightings
            </h3>
            <div className="space-y-3">
              {sightingsLoading ? (
                <div className="p-3 text-center text-gray-400 text-sm">
                  <Loader size={16} className="animate-spin mx-auto" />
                </div>
              ) : sightingsError ? (
                <div className="p-3 bg-red-900/20 rounded border border-red-800 text-red-300 text-sm">
                  Failed to load sightings
                </div>
              ) : sightings.length === 0 ? (
                <div className="p-3 text-center text-gray-400 text-sm">
                  No recent sightings reported
                </div>
              ) : (
                sightings.slice(0, 5).map((sighting) => (
                  <div
                    key={sighting.id}
                    className="flex items-center p-2 bg-gray-700/40 rounded border border-gray-600"
                  >
                    <div className="w-8 h-8 bg-gray-600 rounded-full mr-3 flex items-center justify-center">
                      <Skull size={16} className="text-yellow-400" />
                    </div>
                    <div className="flex-1">
                      <h4 className="text-sm font-medium text-white">
                        {sighting.monster || "Unknown Monster"}
                      </h4>
                      <p className="text-xs text-gray-400">
                        {sighting.address || "Unknown location"}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-xs text-gray-400">
                        {new Date(sighting.date).toLocaleDateString()}
                      </p>
                      <span
                        className={`text-xs px-2 py-1 rounded-full ${
                          (sighting.danger_level || "Medium") === "High"
                            ? "bg-red-900/60 text-red-300"
                            : (sighting.danger_level || "Medium") === "Medium"
                            ? "bg-yellow-900/60 text-yellow-300"
                            : "bg-green-900/60 text-green-300"
                        }`}
                      >
                        {sighting.danger_level || "Unknown"}
                      </span>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          <div className="bg-indigo-900/20 p-4 rounded-lg border border-indigo-800/50">
            <h3 className="text-lg font-semibold text-indigo-300 mb-3">
              Monster Hunting Tips
            </h3>
            <p className="text-indigo-100/70 text-sm mb-3">
              Always carry the appropriate protection based on monster type and
              danger level.
            </p>
            <div className="grid grid-cols-3 gap-2 text-center">
              <div className="p-2 bg-indigo-800/30 rounded-lg border border-indigo-700/50">
                <span className="block text-xs font-medium text-indigo-300">
                  Preparation
                </span>
                <span className="text-xs text-indigo-400/80">Essential</span>
              </div>
              <div className="p-2 bg-indigo-800/30 rounded-lg border border-indigo-700/50">
                <span className="block text-xs font-medium text-indigo-300">
                  Team Size
                </span>
                <span className="text-xs text-indigo-400/80">3-5 People</span>
              </div>
              <div className="p-2 bg-indigo-800/30 rounded-lg border border-indigo-700/50">
                <span className="block text-xs font-medium text-indigo-300">
                  Gear
                </span>
                <span className="text-xs text-indigo-400/80">Class II+</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Info Section */}
      <div className="md:hidden mt-6">
        <div className="bg-yellow-900/30 p-3 rounded-lg border border-yellow-800">
          <h3 className="text-base font-semibold text-yellow-300 mb-2">
            Safety Notice
          </h3>
          <p className="text-yellow-100/80 text-xs">
            Do not approach dangerous monsters. Report sightings immediately to
            local authorities.
          </p>
        </div>
      </div>
    </div>
  )
}

export default ReportMonsterForm

   <Route
        path="/report"
        element={
          <PrivateRoute>
            <SightingProvider>
              <MonsterProvider>
                <Header />
                <ReportPage />
                <Footer />
              </MonsterProvider>
            </SightingProvider>
          </PrivateRoute>
        }
      />