import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { fetchTrek } from '../api';

export default function TrekDetail() {
  const { id } = useParams();
  const [trek, setTrek] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTrek(id)
      .then(setTrek)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <p className="text-stone-500">Loading...</p>;
  if (error) return <p className="text-red-600">Error: {error}</p>;
  if (!trek) return <p className="text-stone-500">Trek not found</p>;

  return (
    <div className="max-w-2xl">
      <Link to="/" className="text-sm text-amber-700 hover:text-amber-800">&larr; Back to treks</Link>
      <h1 className="text-3xl font-bold text-stone-800 mt-4">{trek.name}</h1>
      <p className="text-stone-500 mt-1">{trek.destination}</p>

      <div className="mt-6 grid grid-cols-2 gap-4 text-sm">
        <div>
          <span className="text-stone-500">Duration</span>
          <p className="font-medium text-stone-800">{trek.duration_days} days</p>
        </div>
        <div>
          <span className="text-stone-500">Max group size</span>
          <p className="font-medium text-stone-800">{trek.max_group_size} people</p>
        </div>
        <div>
          <span className="text-stone-500">Difficulty</span>
          <p className="font-medium text-stone-800 capitalize">{trek.difficulty}</p>
        </div>
        <div>
          <span className="text-stone-500">Price</span>
          <p className="font-medium text-stone-800">
            NPR {trek.price_npr?.toLocaleString()} / USD {trek.price_usd}
          </p>
        </div>
      </div>

      {trek.description && (
        <div className="mt-6">
          <h2 className="text-lg font-semibold text-stone-800">About this trek</h2>
          <p className="mt-2 text-stone-600 leading-relaxed">{trek.description}</p>
        </div>
      )}

      <Link
        to={`/book/${trek.id}`}
        className="mt-6 inline-block bg-amber-600 text-white px-6 py-2 rounded hover:bg-amber-700 transition-colors"
      >
        Book this trek
      </Link>
    </div>
  );
}