"use client";

import { useState, useEffect } from "react";
import React from "react";
import VisaDetail from "./VisaDetail";
import { fetchVisaData, type VisaCountry } from "@/api/visa";

interface CountryDetailsProps {
  params: Promise<{
    slug: string;
  }>;
}

export default function CountryDetailsPage({ params }: CountryDetailsProps) {
  // 1. Quản lý trạng thái dữ liệu
  const [country, setCountry] = useState<VisaCountry | null>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const initPage = async () => {
      try {
        setLoading(true);

        // 2. Giải nén params (Vì params là Promise trong Next.js mới)
        const resolvedParams = await params;
        const currentSlug = resolvedParams.slug;

        // 3. Lấy dữ liệu từ API bên trong useEffect
        const visaData = await fetchVisaData();

        // 4. Tìm nước trong danh sách summaryList dựa trên slug từ URL
        const found = visaData.hero.summaryList.find(
          (item: VisaCountry) => item.slug === currentSlug,
        );

        if (found) {
          setCountry(found);
        }
      } catch (error) {
        console.error("Lỗi khi tải dữ liệu:", error);
      } finally {
        setLoading(false);
      }
    };

    initPage();
  }, [params]);
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="spinner"></div>
      </div>
    );
  }

  // Xử lý khi không tìm thấy dữ liệu
  if (!country || !country.detailedView?.activeCountry) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <h1>Country details not found</h1>
      </div>
    );
  }

  return <VisaDetail country={country} />;
}