import { fetchApi, API_BASE_URL } from "@/lib/api";
import PhotoEditor from "@/components/PhotoEditor";
import { ChevronLeft, Download } from "lucide-react";
import Link from "next/link";

export default async function PhotoDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: encodedId } = await params;
  const id = decodeURIComponent(encodedId);
  let photo = null;

  try {
    const response = await fetchApi('/api/all-data');
    photo = response.data.find((p: any) => p.filename === id);
  } catch (error) {
    console.error("Error fetching photo detail:", error);
  }

  if (!photo) {
    return <div className="p-12 text-center">Session non trouvée.</div>;
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="flex items-center justify-between">
        <Link 
          href="/" 
          className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors"
        >
          <ChevronLeft size={20} />
          Retour à la galerie
        </Link>
        
        <div className="flex gap-3">
          <a 
            href={`${API_BASE_URL}/uploads/images/${id}`}
            download
            className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
          >
            <Download size={18} />
            Image Originale
          </a>
        </div>
      </div>

      <PhotoEditor initialPhoto={photo} />
    </div>
  );
}