import React from 'react';

export default function HouseholdFormModal({
  showHhModal,
  setShowHhModal,
  hhFormData,
  setHhFormData,
  handleSaveHh,
  hubs,
  imageFile,
  setImageFile,
  isUploading,
  isEditMode,
  profile
}) {
  if (!showHhModal) return null;

  return (
    <div className="modal-overlay active">
      <div className="modal-content">
        <div className="modal-header">
          <h2>{hhFormData.id ? 'Edit' : 'Tambah'} Data Warga</h2>
          <button className="close-btn" onClick={() => setShowHhModal(false)}>&times;</button>
        </div>
        <div className="modal-body">
          <form onSubmit={handleSaveHh} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
            <div className="form-group">
              <label>Nama Kepala Keluarga</label>
              <input type="text" className="form-control" value={hhFormData.head_name} onChange={e => setHhFormData({...hhFormData, head_name: e.target.value})} required />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
              <div className="form-group">
                <label>NIK</label>
                <input type="text" className="form-control" value={hhFormData.nik} onChange={e => setHhFormData({...hhFormData, nik: e.target.value})} required />
              </div>
              <div className="form-group">
                <label>No. KK</label>
                <input type="text" className="form-control" value={hhFormData.no_kk} onChange={e => setHhFormData({...hhFormData, no_kk: e.target.value})} required />
              </div>
            </div>
            <div className="form-group">
              <label>Jumlah Anggota Keluarga</label>
              <input type="number" className="form-control" value={hhFormData.family_size} onChange={e => setHhFormData({...hhFormData, family_size: e.target.value})} required min="1" />
            </div>
            <div className="form-group">
              <label>Pilih Hub Rumah Ibadah {profile?.role === 'pic' ? '(Terkunci untuk Hub Anda)' : '(Opsional)'}</label>
              <select 
                className="form-control" 
                value={hhFormData.assigned_hub_id || ''} 
                onChange={e => setHhFormData({...hhFormData, assigned_hub_id: e.target.value || null})}
                disabled={profile?.role === 'pic'}
              >
                <option value="">-- Tidak Ada --</option>
                {hubs.map(h => (
                  <option key={h.id} value={h.id}>{h.name}</option>
                ))}
              </select>
            </div>
            
            {/* Geotagging Photo Upload */}
            <div className="form-group" style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px dashed #cbd5e1' }}>
              <label style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}><i className="fas fa-camera"></i> Bukti Foto Lokasi / Rumah</label>
              <input 
                type="file" 
                accept="image/*" 
                capture="environment"
                onChange={(e) => {
                  if (e.target.files && e.target.files[0]) {
                    setImageFile(e.target.files[0]);
                  }
                }}
                style={{ width: '100%', fontSize: '0.9rem' }}
                required={false} 
              />
              {imageFile && <p style={{ fontSize: '0.8rem', color: '#10b981', marginTop: '5px' }}>File siap diunggah: {imageFile.name}</p>}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
              <div className="form-group">
                <label>Latitude</label>
                <input type="text" className="form-control" value={hhFormData.lat} readOnly />
              </div>
              <div className="form-group">
                <label>Longitude</label>
                <input type="text" className="form-control" value={hhFormData.lng} readOnly />
              </div>
            </div>
            {isEditMode && (
              <button type="submit" className="btn btn-primary" disabled={isUploading}>
                {isUploading ? 'Menyimpan...' : 'Simpan'}
              </button>
            )}
          </form>
        </div>
      </div>
    </div>
  );
}
