import React from 'react';
import { supabase } from '@/lib/supabase';

export default function ApprovalQueueModal({
  showApprovalModal,
  setShowApprovalModal,
  households,
  selectedPhotoUrl,
  setSelectedPhotoUrl,
  handleVerifyAction,
  onFocusHousehold
}) {
  if (!showApprovalModal) return null;

  return (
    <>
      <div className="modal-overlay active">
        <div className="modal-content" style={{ maxWidth: '900px', width: '90%' }}>
          <div className="modal-header">
            <h2><i className="fas fa-list-check text-primary"></i> Antrean Verifikasi KK</h2>
            <button className="close-btn" onClick={() => setShowApprovalModal(false)}>&times;</button>
          </div>
          <div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
              <thead>
                <tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Kepala Keluarga</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Jml Anggota</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Wilayah</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Aksi Lokasi / Foto</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0', textAlign: 'right' }}>Aksi Status</th>
                </tr>
              </thead>
              <tbody>
                {households.filter(hh => hh.status === 'Pending').length === 0 ? (
                  <tr><td colSpan="5" style={{ textAlign: 'center', padding: '20px', color: '#64748b' }}>Tidak ada antrean pending.</td></tr>
                ) : (
                  households.filter(hh => hh.status === 'Pending').map(hh => (
                    <tr key={hh.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
                      <td style={{ padding: '10px' }}>
                        <span style={{ fontWeight: 'bold' }}>{hh.head_of_family}</span>
                        <br/><small style={{ color: '#64748b' }}>NIK: {hh.nik || '-'}</small>
                      </td>
                      <td style={{ padding: '10px' }}>{hh.family_size} Jiwa</td>
                      <td style={{ padding: '10px' }}>{hh.sub_district}</td>
                      <td style={{ padding: '10px' }}>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button onClick={async () => {
                            if (hh.photo_url && !hh.photo_url.startsWith('http')) {
                              const { data } = await supabase.storage.from('geotagging-photo').createSignedUrl(hh.photo_url, 3600);
                              if (data && data.signedUrl) setSelectedPhotoUrl(data.signedUrl);
                            } else {
                              setSelectedPhotoUrl(hh.photo_url || 'https://via.placeholder.com/150');
                            }
                          }} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem' }}>Lihat Foto</button>

                          <button onClick={() => onFocusHousehold(hh)} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: 'var(--primary)', borderColor: 'rgba(59, 130, 246, 0.3)' }} title="Fokus Peta ke Lokasi KK">
                            <i className="fas fa-crosshairs"></i> Lihat Lokasi
                          </button>
                        </div>
                      </td>
                      <td style={{ padding: '10px', textAlign: 'right' }}>
                        <button onClick={() => handleVerifyAction(hh.id, 'Verified')} className="btn btn-primary" style={{ padding: '4px 8px', fontSize: '0.8rem', background: '#10b981', borderColor: '#10b981', color: 'white', marginRight: '5px' }}>Terima</button>
                        <button onClick={() => handleVerifyAction(hh.id, 'Rejected')} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: '#ef4444', borderColor: '#ef4444' }}>Tolak</button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Photo Preview Overlay */}
      {selectedPhotoUrl && (
        <div className="modal-overlay active" style={{ zIndex: 9999 }} onClick={() => setSelectedPhotoUrl('')}>
          <div style={{ position: 'relative', maxWidth: '90%', maxHeight: '90%' }}>
            <button onClick={() => setSelectedPhotoUrl('')} style={{ position: 'absolute', top: '-40px', right: '0', background: 'none', border: 'none', color: 'white', fontSize: '2rem', cursor: 'pointer' }}>&times;</button>
            <img src={selectedPhotoUrl} alt="Bukti Foto" style={{ maxWidth: '100%', maxHeight: '90vh', borderRadius: '8px', boxShadow: '0 4px 20px rgba(0,0,0,0.5)' }} />
          </div>
        </div>
      )}
    </>
  );
}
