import React, { useEffect, useMemo, useState, useCallback } from 'react';
import DataTable from '../components/DataTable';
import { countryAPI, provinceAPI, cityAPI, currencyAPI } from '../services/api';
import { Plus, Search, Pencil, Trash2, MapPin, Globe, Building2 } from 'lucide-react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { getErrorMessage, getSuccessMessage } from '../utils/errorHandler';

const Location = () => {
  const [activeTab, setActiveTab] = useState('country'); // 'country', 'province', 'city'
  
  // Country states
  const [countries, setCountries] = useState([]);
  const [countriesLoading, setCountriesLoading] = useState(true);
  const [countryFilter, setCountryFilter] = useState('');
  const [isCountryModalOpen, setIsCountryModalOpen] = useState(false);
  const [editingCountry, setEditingCountry] = useState(null);
  const [countryForm, setCountryForm] = useState({ name: '', phoneCode: '', currencyCode: '', timeZoneName: '' });
  const [currencies, setCurrencies] = useState([]);

  // Province states
  const [provinces, setProvinces] = useState([]);
  const [provincesLoading, setProvincesLoading] = useState(true);
  const [provinceFilter, setProvinceFilter] = useState('');
  const [isProvinceModalOpen, setIsProvinceModalOpen] = useState(false);
  const [editingProvince, setEditingProvince] = useState(null);
  const [provinceForm, setProvinceForm] = useState({ countryId: '', provinceName: '' });
  const [selectedCountryForProvince, setSelectedCountryForProvince] = useState(null);

  // City states
  const [cities, setCities] = useState([]);
  const [citiesLoading, setCitiesLoading] = useState(true);
  const [cityFilter, setCityFilter] = useState('');
  const [isCityModalOpen, setIsCityModalOpen] = useState(false);
  const [editingCity, setEditingCity] = useState(null);
  const [cityForm, setCityForm] = useState({ provinceId: '', cityName: '' });
  const [selectedProvinceForCity, setSelectedProvinceForCity] = useState(null);
  const [provincesForCity, setProvincesForCity] = useState([]);

  // دریافت ارزها برای dropdown
  useEffect(() => {
    const fetchCurrencies = async () => {
      try {
        const list = await currencyAPI.list();
        setCurrencies(Array.isArray(list) ? list : []);
      } catch (err) {
        console.error('Failed to load currencies:', err);
      }
    };
    fetchCurrencies();
  }, []);

  // دریافت کشورها
  const fetchCountries = useCallback(async () => {
    try {
      setCountriesLoading(true);
      const list = await countryAPI.listAll();
      setCountries(Array.isArray(list) ? list : []);
    } catch (err) {
      toast.error(getErrorMessage(err));
    } finally {
      setCountriesLoading(false);
    }
  }, []);

  // دریافت استان‌ها
  const fetchProvinces = useCallback(async () => {
    try {
      setProvincesLoading(true);
      const list = await provinceAPI.list();
      setProvinces(Array.isArray(list) ? list : []);
    } catch (err) {
      toast.error(getErrorMessage(err));
    } finally {
      setProvincesLoading(false);
    }
  }, []);

  // دریافت شهرها
  const fetchCities = useCallback(async () => {
    try {
      setCitiesLoading(true);
      const list = await cityAPI.list();
      setCities(Array.isArray(list) ? list : []);
    } catch (err) {
      toast.error(getErrorMessage(err));
    } finally {
      setCitiesLoading(false);
    }
  }, []);

  useEffect(() => {
    if (activeTab === 'country') {
      fetchCountries();
    } else if (activeTab === 'province') {
      fetchProvinces();
      fetchCountries(); // برای dropdown
    } else if (activeTab === 'city') {
      fetchCities();
      fetchProvinces(); // برای dropdown
    }
  }, [activeTab, fetchCountries, fetchProvinces, fetchCities]);

  // ========== Country Functions ==========
  const openCountryModal = (country = null) => {
    if (country) {
      setEditingCountry(country);
      setCountryForm({
        name: country.name || '',
        phoneCode: country.phoneCode || '',
        currencyCode: country.currencyCode || '',
        timeZoneName: country.timeZoneName || country.timeZone || '',
      });
    } else {
      setEditingCountry(null);
      setCountryForm({ name: '', phoneCode: '', currencyCode: '', timeZoneName: '' });
    }
    setIsCountryModalOpen(true);
  };

  const onSaveCountry = async (e) => {
    e.preventDefault();
    try {
      if (editingCountry) {
        const countryId = editingCountry.id || editingCountry.countryId;
        if (!countryId) {
          toast.error('Country ID is missing');
          console.error('Editing country:', editingCountry);
          return;
        }
        console.log('Updating country with ID:', countryId, 'Payload:', countryForm);
        await countryAPI.update(countryId, countryForm);
        toast.success(getSuccessMessage({ data: { message: 'Country updated successfully' } }) || 'Country updated successfully');
      } else {
        await countryAPI.create(countryForm);
        toast.success(getSuccessMessage({ data: { message: 'Country added successfully' } }) || 'Country added successfully');
      }
      await fetchCountries();
      setIsCountryModalOpen(false);
      setEditingCountry(null);
      setCountryForm({ name: '', phoneCode: '', currencyCode: '', timeZoneName: '' });
    } catch (err) {
      console.error('Error saving country:', err);
      toast.error(getErrorMessage(err));
    }
  };

  // ========== Province Functions ==========
  const openProvinceModal = (province = null) => {
    if (province) {
      setEditingProvince(province);
      setProvinceForm({
        countryId: province.countryId || '',
        provinceName: province.name || '',
      });
      setSelectedCountryForProvince(province.countryId);
    } else {
      setEditingProvince(null);
      setProvinceForm({ countryId: '', provinceName: '' });
      setSelectedCountryForProvince(null);
    }
    setIsProvinceModalOpen(true);
  };

  const onSaveProvince = async (e) => {
    e.preventDefault();
    if (!provinceForm.countryId) {
      toast.error('Please select a country');
      return;
    }
    try {
      if (editingProvince) {
        const provinceId = editingProvince.id || editingProvince.provinceId;
        if (!provinceId) {
          toast.error('Province ID is missing');
          console.error('Editing province:', editingProvince);
          return;
        }
        console.log('Updating province with ID:', provinceId, 'Payload:', provinceForm);
        await provinceAPI.update(provinceId, provinceForm);
        toast.success(getSuccessMessage({ data: { message: 'Province updated successfully' } }) || 'Province updated successfully');
      } else {
        await provinceAPI.create(provinceForm);
        toast.success(getSuccessMessage({ data: { message: 'Province added successfully' } }) || 'Province added successfully');
      }
      await fetchProvinces();
      setIsProvinceModalOpen(false);
      setEditingProvince(null);
      setProvinceForm({ countryId: '', provinceName: '' });
      setSelectedCountryForProvince(null);
    } catch (err) {
      console.error('Error saving province:', err);
      toast.error(getErrorMessage(err));
    }
  };

  // ========== City Functions ==========
  const openCityModal = (city = null) => {
    if (city) {
      setEditingCity(city);
      setCityForm({
        provinceId: city.provinceId || '',
        cityName: city.name || '',
      });
      setSelectedProvinceForCity(city.provinceId);
    } else {
      setEditingCity(null);
      setCityForm({ provinceId: '', cityName: '' });
      setSelectedProvinceForCity(null);
    }
    setIsCityModalOpen(true);
  };

  const onSaveCity = async (e) => {
    e.preventDefault();
    if (!cityForm.provinceId) {
      toast.error('Please select a province');
      return;
    }
    try {
      if (editingCity) {
        const cityId = editingCity.id || editingCity.cityId;
        if (!cityId) {
          toast.error('City ID is missing');
          console.error('Editing city:', editingCity);
          return;
        }
        console.log('Updating city with ID:', cityId, 'Payload:', cityForm);
        await cityAPI.update(cityId, cityForm);
        toast.success(getSuccessMessage({ data: { message: 'City updated successfully' } }) || 'City updated successfully');
      } else {
        await cityAPI.create(cityForm);
        toast.success(getSuccessMessage({ data: { message: 'City added successfully' } }) || 'City added successfully');
      }
      await fetchCities();
      setIsCityModalOpen(false);
      setEditingCity(null);
      setCityForm({ provinceId: '', cityName: '' });
      setSelectedProvinceForCity(null);
    } catch (err) {
      console.error('Error saving city:', err);
      toast.error(getErrorMessage(err));
    }
  };

  // ========== Table Columns ==========
  const countryColumns = useMemo(() => [
    { key: 'name', header: 'Name' },
    { key: 'phoneCode', header: 'Phone Code' },
    { key: 'currencyCode', header: 'Currency' },
    { key: 'timeZoneName', header: 'Time Zone', render: (val, row) => val || row.timeZone || '—' },
    {
      key: 'actions',
      header: 'Actions',
      render: (_val, row) => (
        <div className="flex gap-2">
          <button
            onClick={() => openCountryModal(row)}
            className="inline-flex items-center px-2 py-1 text-xs rounded-md bg-blue-100 text-blue-700 hover:opacity-90"
          >
            <Pencil className="h-3 w-3 mr-1" /> Edit
          </button>
        </div>
      ),
    },
  ], []);

  const provinceColumns = useMemo(() => [
    { key: 'name', header: 'Province Name' },
    { key: 'countryName', header: 'Country' },
    {
      key: 'actions',
      header: 'Actions',
      render: (_val, row) => (
        <div className="flex gap-2">
          <button
            onClick={() => openProvinceModal(row)}
            className="inline-flex items-center px-2 py-1 text-xs rounded-md bg-blue-100 text-blue-700 hover:opacity-90"
          >
            <Pencil className="h-3 w-3 mr-1" /> Edit
          </button>
        </div>
      ),
    },
  ], []);

  const cityColumns = useMemo(() => [
    { key: 'name', header: 'City Name' },
    { key: 'provinceName', header: 'Province' },
    {
      key: 'actions',
      header: 'Actions',
      render: (_val, row) => (
        <div className="flex gap-2">
          <button
            onClick={() => openCityModal(row)}
            className="inline-flex items-center px-2 py-1 text-xs rounded-md bg-blue-100 text-blue-700 hover:opacity-90"
          >
            <Pencil className="h-3 w-3 mr-1" /> Edit
          </button>
        </div>
      ),
    },
  ], []);

  // Filtered data
  const filteredCountries = useMemo(() => {
    if (!countryFilter) return countries;
    const filter = countryFilter.toLowerCase();
    return countries.filter(c => 
      c.name?.toLowerCase().includes(filter) ||
      c.phoneCode?.toLowerCase().includes(filter) ||
      c.currencyCode?.toLowerCase().includes(filter)
    );
  }, [countries, countryFilter]);

  const filteredProvinces = useMemo(() => {
    if (!provinceFilter) return provinces;
    const filter = provinceFilter.toLowerCase();
    return provinces.filter(p => 
      p.name?.toLowerCase().includes(filter) ||
      p.countryName?.toLowerCase().includes(filter)
    );
  }, [provinces, provinceFilter]);

  const filteredCities = useMemo(() => {
    if (!cityFilter) return cities;
    const filter = cityFilter.toLowerCase();
    return cities.filter(c => 
      c.name?.toLowerCase().includes(filter) ||
      c.provinceName?.toLowerCase().includes(filter)
    );
  }, [cities, cityFilter]);

  return (
    <div className="p-6">
      <ToastContainer position="top-right" autoClose={3000} />

      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Location Management</h1>
        <p className="text-gray-600 dark:text-gray-400">Manage countries, provinces, and cities</p>
      </div>

      {/* Tabs */}
      <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
        <nav className="flex space-x-8">
          <button
            onClick={() => setActiveTab('country')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'country'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            <Globe className="inline h-4 w-4 mr-2" />
            Countries
          </button>
          <button
            onClick={() => setActiveTab('province')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'province'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            <MapPin className="inline h-4 w-4 mr-2" />
            Provinces
          </button>
          <button
            onClick={() => setActiveTab('city')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'city'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            <Building2 className="inline h-4 w-4 mr-2" />
            Cities
          </button>
        </nav>
      </div>

      {/* Country Tab */}
      {activeTab === 'country' && (
        <>
          <div className="mb-4 flex justify-between items-center">
            <div className="relative max-w-md flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                value={countryFilter}
                onChange={(e) => setCountryFilter(e.target.value)}
                placeholder="Filter countries..."
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <button
              onClick={() => openCountryModal()}
              className="btn-primary inline-flex items-center ml-4"
            >
              <Plus className="h-4 w-4 mr-2" /> Add Country
            </button>
          </div>

          <DataTable
            data={filteredCountries}
            columns={countryColumns}
            loading={countriesLoading}
            searchable={false}
          />
        </>
      )}

      {/* Province Tab */}
      {activeTab === 'province' && (
        <>
          <div className="mb-4 flex justify-between items-center">
            <div className="relative max-w-md flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                value={provinceFilter}
                onChange={(e) => setProvinceFilter(e.target.value)}
                placeholder="Filter provinces..."
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <button
              onClick={() => openProvinceModal()}
              className="btn-primary inline-flex items-center ml-4"
            >
              <Plus className="h-4 w-4 mr-2" /> Add Province
            </button>
          </div>

          <DataTable
            data={filteredProvinces}
            columns={provinceColumns}
            loading={provincesLoading}
            searchable={false}
          />
        </>
      )}

      {/* City Tab */}
      {activeTab === 'city' && (
        <>
          <div className="mb-4 flex justify-between items-center">
            <div className="relative max-w-md flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                value={cityFilter}
                onChange={(e) => setCityFilter(e.target.value)}
                placeholder="Filter cities..."
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <button
              onClick={() => openCityModal()}
              className="btn-primary inline-flex items-center ml-4"
            >
              <Plus className="h-4 w-4 mr-2" /> Add City
            </button>
          </div>

          <DataTable
            data={filteredCities}
            columns={cityColumns}
            loading={citiesLoading}
            searchable={false}
          />
        </>
      )}

      {/* Country Modal */}
      {isCountryModalOpen && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setIsCountryModalOpen(false)} />
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="w-full max-w-md card p-6 relative bg-white rounded-2xl shadow-lg">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                {editingCountry ? 'Edit Country' : 'Add Country'}
              </h3>
              <form onSubmit={onSaveCountry} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Name *</label>
                  <input
                    value={countryForm.name}
                    onChange={(e) => setCountryForm({ ...countryForm, name: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Phone Code *</label>
                  <input
                    value={countryForm.phoneCode}
                    onChange={(e) => setCountryForm({ ...countryForm, phoneCode: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Currency Code *</label>
                  <select
                    value={countryForm.currencyCode}
                    onChange={(e) => setCountryForm({ ...countryForm, currencyCode: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    required
                  >
                    <option value="">Select Currency</option>
                    {currencies.map((curr) => (
                      <option key={curr.currencyCode?.code} value={curr.currencyCode?.code}>
                        {curr.currencyCode?.code} - {curr.currencyCode?.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Time Zone *</label>
                  <input
                    value={countryForm.timeZoneName}
                    onChange={(e) => setCountryForm({ ...countryForm, timeZoneName: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    placeholder="e.g., UTC+3:30"
                    required
                  />
                </div>
                <div className="flex justify-end gap-x-2">
                  <button type="button" onClick={() => setIsCountryModalOpen(false)} className="px-4 py-2 border rounded-lg">
                    Cancel
                  </button>
                  <button type="submit" className="btn-primary px-4 py-2 rounded-lg">
                    {editingCountry ? 'Update' : 'Add'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </>
      )}

      {/* Province Modal */}
      {isProvinceModalOpen && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setIsProvinceModalOpen(false)} />
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="w-full max-w-md card p-6 relative bg-white rounded-2xl shadow-lg">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                {editingProvince ? 'Edit Province' : 'Add Province'}
              </h3>
              <form onSubmit={onSaveProvince} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Country *</label>
                  <select
                    value={provinceForm.countryId}
                    onChange={(e) => {
                      setProvinceForm({ ...provinceForm, countryId: e.target.value });
                      setSelectedCountryForProvince(e.target.value);
                    }}
                    className="w-full p-2 border rounded-lg"
                    required
                  >
                    <option value="">Select Country</option>
                    {countries.map((country) => (
                      <option key={country.id} value={country.id}>
                        {country.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Province Name *</label>
                  <input
                    value={provinceForm.provinceName}
                    onChange={(e) => setProvinceForm({ ...provinceForm, provinceName: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    required
                  />
                </div>
                <div className="flex justify-end gap-x-2">
                  <button type="button" onClick={() => setIsProvinceModalOpen(false)} className="px-4 py-2 border rounded-lg">
                    Cancel
                  </button>
                  <button type="submit" className="btn-primary px-4 py-2 rounded-lg">
                    {editingProvince ? 'Update' : 'Add'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </>
      )}

      {/* City Modal */}
      {isCityModalOpen && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setIsCityModalOpen(false)} />
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="w-full max-w-md card p-6 relative bg-white rounded-2xl shadow-lg">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                {editingCity ? 'Edit City' : 'Add City'}
              </h3>
              <form onSubmit={onSaveCity} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Province *</label>
                  <select
                    value={cityForm.provinceId}
                    onChange={(e) => {
                      setCityForm({ ...cityForm, provinceId: e.target.value });
                      setSelectedProvinceForCity(e.target.value);
                    }}
                    className="w-full p-2 border rounded-lg"
                    required
                  >
                    <option value="">Select Province</option>
                    {provinces.map((province) => (
                      <option key={province.id} value={province.id}>
                        {province.name} - {province.countryName}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">City Name *</label>
                  <input
                    value={cityForm.cityName}
                    onChange={(e) => setCityForm({ ...cityForm, cityName: e.target.value })}
                    className="w-full p-2 border rounded-lg"
                    required
                  />
                </div>
                <div className="flex justify-end gap-x-2">
                  <button type="button" onClick={() => setIsCityModalOpen(false)} className="px-4 py-2 border rounded-lg">
                    Cancel
                  </button>
                  <button type="submit" className="btn-primary px-4 py-2 rounded-lg">
                    {editingCity ? 'Update' : 'Add'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default Location;