"use client";

import { useState } from "react";
import countriesData from "./countries.json";

export default function CountriesPage() {
  const [selectedRegion, setSelectedRegion] = useState("all");
  const [selectedCountry, setSelectedCountry] = useState<string | null>(null);

  const filteredRegions =
    selectedRegion === "all"
      ? countriesData.regions
      : countriesData.regions.filter(
          (region) => region.name === selectedRegion,
        );

  const handleCountryClick = (countryId: string) => {
    setSelectedCountry(selectedCountry === countryId ? null : countryId);
  };

  const getCountryById = (id: string) => {
    for (const region of countriesData.regions) {
      const country = region.countries.find((c) => c.id === id);
      if (country) return country;
    }
    return null;
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            {countriesData.title}
          </h1>
          <p className="text-xl text-gray-600">{countriesData.subtitle}</p>
        </div>

        {/* Popular Countries */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
            Quốc Gia Phổ Biến
          </h2>
          <div className="grid md:grid-cols-4 gap-6">
            {countriesData.popularCountries.map((country) => (
              <div
                key={country.id}
                className="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition-shadow cursor-pointer"
                onClick={() => handleCountryClick(country.id)}
              >
                <div className="text-4xl mb-3">{country.flag}</div>
                <h3 className="font-semibold text-gray-900 mb-2">
                  {country.name}
                </h3>
                <p className="text-gray-600 text-sm">{country.reason}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Region Filter */}
        <div className="mb-8">
          <div className="flex flex-wrap gap-4 justify-center">
            <button
              onClick={() => setSelectedRegion("all")}
              className={`px-6 py-2 rounded-full transition-colors ${
                selectedRegion === "all"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
              }`}
            >
              Tất cả
            </button>
            {countriesData.regions.map((region) => (
              <button
                key={region.name}
                onClick={() => setSelectedRegion(region.name)}
                className={`px-6 py-2 rounded-full transition-colors ${
                  selectedRegion === region.name
                    ? "bg-blue-600 text-white"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                {region.name}
              </button>
            ))}
          </div>
        </div>

        {/* Countries by Region */}
        <div className="space-y-12">
          {filteredRegions.map((region) => (
            <div key={region.name}>
              <h2 className="text-2xl font-bold text-gray-900 mb-6">
                {region.name}
              </h2>
              <div className="grid md:grid-cols-2 gap-6">
                {region.countries.map((country) => (
                  <div
                    key={country.id}
                    className="bg-white rounded-lg shadow-md overflow-hidden"
                  >
                    {/* Country Header */}
                    <div
                      className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
                      onClick={() => handleCountryClick(country.id)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <span className="text-3xl mr-4">{country.flag}</span>
                          <div>
                            <h3 className="text-xl font-semibold text-gray-900">
                              {country.name}
                            </h3>
                            <p className="text-gray-600">
                              {country.description}
                            </p>
                          </div>
                        </div>
                        <span className="text-gray-400">
                          {selectedCountry === country.id ? "▼" : "▶"}
                        </span>
                      </div>

                      {/* Quick Info */}
                      <div className="grid grid-cols-2 gap-4 mt-4 text-sm">
                        <div>
                          <span className="text-gray-500">
                            Thời gian xử lý:
                          </span>
                          <div className="font-medium">
                            {country.processingTime}
                          </div>
                        </div>
                        <div>
                          <span className="text-gray-500">Phí visa:</span>
                          <div className="font-medium text-blue-600">
                            {country.fee}
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Detailed Info */}
                    {selectedCountry === country.id && (
                      <div className="border-t bg-gray-50 p-6">
                        <div className="grid md:grid-cols-2 gap-6">
                          {/* Visa Types */}
                          <div>
                            <h4 className="font-semibold text-gray-900 mb-3">
                              Loại visa:
                            </h4>
                            <div className="flex flex-wrap gap-2">
                              {country.visaTypes.map((type, index) => (
                                <span
                                  key={index}
                                  className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm"
                                >
                                  {type}
                                </span>
                              ))}
                            </div>
                          </div>

                          {/* Validity */}
                          <div>
                            <h4 className="font-semibold text-gray-900 mb-3">
                              Thời hạn visa:
                            </h4>
                            <p className="text-gray-700">
                              {country.validityPeriod}
                            </p>
                          </div>
                        </div>

                        {/* Requirements */}
                        <div className="mt-6">
                          <h4 className="font-semibold text-gray-900 mb-3">
                            Yêu cầu hồ sơ:
                          </h4>
                          <ul className="space-y-2">
                            {country.requirements.map((req, index) => (
                              <li
                                key={index}
                                className="flex items-start text-gray-700"
                              >
                                <span className="text-green-500 mr-2 mt-1">
                                  ✓
                                </span>
                                {req}
                              </li>
                            ))}
                          </ul>
                        </div>

                        {/* CTA */}
                        <div className="mt-6 flex gap-4">
                          <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                            Tư vấn ngay
                          </button>
                          <button className="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200 transition-colors">
                            Xem chi tiết
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Contact CTA */}
        <div className="text-center mt-12 bg-blue-50 rounded-lg p-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            Không Tìm Thấy Quốc Gia Bạn Cần?
          </h2>
          <p className="text-gray-700 mb-6">
            Chúng tôi hỗ trợ visa cho hơn 50 quốc gia. Liên hệ để được tư vấn
            chi tiết
          </p>
          <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
            Liên hệ tư vấn
          </button>
        </div>
      </div>
    </div>
  );
}