import { useEffect, useState } from "react";
import { useParams, Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { apiGet } from "../api/client";

export default function SalonDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams();
  const [salon, setSalon] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!id) return;
    apiGet(`/salons/${id}/`)
      .then(setSalon)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <p>{t("results.loading")}</p>;
  if (error) return <p className="error">{error}</p>;
  if (!salon) return null;

  return (
    <section className="salon-detail">
      <h1>{salon.name}</h1>
      <p>{salon.description || t("card.noDescription")}</p>
      <div className="meta">
        <span>{salon.city}</span>
        <span>{salon.phone_number || t("card.phoneUnavailable")}</span>
      </div>

      <h2>{t("salon.services")}</h2>
      <ul className="service-list">
        {salon.services?.map((s) => (
          <li key={s.id}>
            {s.name} – {s.duration_minutes} min, {s.price_amount} {s.currency}
          </li>
        ))}
      </ul>

      <h2>{t("salon.staff")}</h2>
      <ul className="staff-list">
        {salon.staff?.map((s) => (
          <li key={s.id}>{s.name || s.title || t("salon.unknownStaff", { id: s.id })}</li>
        ))}
      </ul>

      <Link to={`/book?salon=${salon.id}`} className="book-cta">
        {t("book.cta")}
      </Link>
    </section>
  );
}