// Author: Shiv
// Date: April 2026

"use client";

import Link from "next/link";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import PetProfile from "@/components/PetProfile";

const API_BASE = "";

//Pet detail page
//Fetches a single pet by ID and passes it to PetProfile
export default function PetDetailPage() {
  const { id } = useParams();
  const [pet, setPet] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!id) return;
    fetch(`${API_BASE}/api/v1/pets/${id}`)
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status} – ${res.statusText}`);
        return res.json();
      })
      .then((data) => setPet(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  return (
    <main className="min-h-screen py-12 px-8 pb-20">
      <div className="max-w-[860px] mx-auto">
        <Link href="/adopt" className="inline-block mb-8 text-[#e68672] no-underline text-base font-semibold transition-colors hover:text-[#d4705e]">← Back to Pets</Link>

        {loading && <p className="text-center text-[#666] text-[1.1rem] py-12">Loading pet details...</p>}
        {error && <p className="text-center text-[#c0392b] text-[1.1rem] py-12">{error}</p>}

        {!loading && !error && pet && (
          <PetProfile
            petId={pet.petId}
            petName={pet.petName}
            petSpecies={pet.petSpecies}
            petBreed={pet.petBreed}
            petAge={pet.petAge}
            petStatus={pet.petStatus}
            petPrice={pet.petPrice}
            imageUrl={pet.imageUrl}
            storeId={pet.storeId}
            storeName={pet.storeName}
          />
        )}
      </div>
    </main>
  );
}