travelplanning/AddLocationModal.tsx

import React, { useState, useEffect } from 'react';
import { X, MapPin, Loader2, Clock } from 'lucide-react';
import { useTourStore } from './useTourStore.js';

export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string }) => {
  const [formData, setFormData] = useState({
    name: '',
    address: '',
    latitude: 10.7769,
    longitude: 106.7009,
    type: 'VISIT',
    legId: '',
    plannedStart: '',
    plannedEnd: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  
  // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
  const { legs, addLocation } = useTourStore();

  // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
  useEffect(() => {
    // Chỉ cập nhật nếu giá trị thực sự thay đổi để tránh vòng lặp re-render
    if (initialLegId && formData.legId !== initialLegId) {
      setFormData(prev => ({ ...prev, legId: initialLegId }));
    }
  }, [initialLegId, isOpen]);

  // 2. Thực hiện các tính toán phụ trợ
  const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
  const targetLeg = legs.find(l => l.id === currentLegId);
  const titleText = initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới';
  const buttonText = initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm';

  // 3. Early return phải nằm SAU tất cả các khai báo Hook
  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      await addLocation(tourId, {
        ...formData,
        legId: currentLegId,
        latitude: parseFloat(formData.latitude as any),
        longitude: parseFloat(formData.longitude as any),
      });
      onClose();
    } catch (error) {
      alert('Lỗi khi thêm địa điểm');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] overflow-y-auto">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
            <MapPin className="w-6 h-6 text-blue-600" /> {titleText}
          </h2>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-6 h-6 text-gray-400" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
            <input required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
              value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Địa chỉ</label>
            <input className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
              value={formData.address} onChange={e => setFormData({...formData, address: e.target.value})} />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Gán vào chặng</label>
            <select required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
              value={currentLegId} onChange={e => setFormData({...formData, legId: e.target.value})}>
              {legs.map(leg => (
                <option key={leg.id} value={leg.id}>Chặng {leg.sequence}: {leg.note || 'Không có tên'}</option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Vĩ độ</label>
              <input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.latitude} onChange={e => setFormData({...formData, latitude: e.target.value as any})} />
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Kinh độ</label>
              <input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.longitude} onChange={e => setFormData({...formData, longitude: e.target.value as any})} />
            </div>
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Loại</label>
            <select className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
              value={formData.type} onChange={e => setFormData({...formData, type: e.target.value as any})}>
              <option value="VISIT">Tham quan</option>
              <option value="EAT">Ăn uống</option>
              <option value="REST">Nghỉ ngơi</option>
              <option value="MOVE">Di chuyển</option>
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
              <input type="datetime-local" className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.plannedStart} onChange={e => setFormData({...formData, plannedStart: e.target.value})} />
            </div>
          </div>
          <button disabled={isLoading} className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl flex items-center justify-center gap-2 mt-4">
            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : buttonText}
          </button>
        </form>
      </div>
    </div>
  );
};