"use client";

import { useState, useEffect } from "react";

export default function ContactPage() {
  const [locations, setLocations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
    fetch(`/api/v1/stores?${params}`)
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data) => setLocations(data.content ?? []))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <main className="info-page">
      <section className="info-hero">
        <h1 className="info-title">Contact Us</h1>
        <p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
        <div className="title-decoration"></div>
      </section>

      <section className="info-content">
        <div className="info-card">
          <h2>General Contact</h2>
          <p>Email: hello@leonspetstore.com.au</p>
          <p>Phone: (03) 9000 0000</p>
          <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
        </div>

        <div className="info-card">
          <h2>Store Locations</h2>

          {loading && <p>Loading locations...</p>}

          {error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}

          {!loading && !error && locations.length === 0 && (
            <p>No store locations found.</p>
          )}

          {!loading && !error && locations.length > 0 && (
            <div className="info-card-grid">
              {locations.map((location) => (
                <article key={location.storeId} className="info-mini-card location-card">
                  <div className="location-card-image-wrapper">
                    <img
                      src={location.imageUrl || "/images/pet-placeholder.png"}
                      alt={location.storeName}
                      className="location-card-image"
                      onError={(e) => {
                        e.currentTarget.onerror = null;
                        e.currentTarget.src = "/images/pet-placeholder.png";
                      }}
                    />
                  </div>
                  <div className="location-card-body">
                    <h3>{location.storeName}</h3>
                    <p>{location.address}</p>
                    <p>{location.phone}</p>
                    <p>{location.email}</p>
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}