262 lines
13 KiB
React
262 lines
13 KiB
React
import React, { useState, useEffect, useRef } from 'react';
|
||
import { useApp } from '../../context/AppContext';
|
||
import { TelegramBaglanti } from './TelegramBaglanti';
|
||
import { BriefTercihi } from './BriefTercihi';
|
||
import { getToken } from '../../services/auth';
|
||
import {accountRequest,requireArray} from '../../services/accountRequest';
|
||
|
||
import { BellRing, Plus, Trash2, Loader2, AlertTriangle, Info, Globe, Sparkles, ChevronDown, ChevronUp, X } from 'lucide-react';
|
||
|
||
/**
|
||
* Otomatik e-posta bildirimi — KONU odaklı.
|
||
* Kullanıcı hangi konularda ihale alabildiğini seçer; il/kurum gibi daraltmalar
|
||
* isteğe bağlıdır (varsayılan: tüm Türkiye).
|
||
*/
|
||
export const NotifySubscriptions = () => {
|
||
const {authUser}=useApp();
|
||
return authUser ? <SubscriptionForm key={`${authUser.email}:${getToken()}`} /> : null;
|
||
};
|
||
const SubscriptionForm = () => {
|
||
const { authUser, favoriteKurumlar, userProfile, sektorListesi } = useApp();
|
||
|
||
const [abonelikler, setAbonelikler] = useState(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState(null);
|
||
const [konular, setKonular] = useState([]);
|
||
const [ozelKonu, setOzelKonu] = useState('');
|
||
const [gelismis, setGelismis] = useState(false);
|
||
const [daralt, setDaralt] = useState({ sehir: '', alimTuru: '', favoriKurumlar: false });
|
||
|
||
const alive=useRef(true),mutation=useRef(false),scan=useRef(false);
|
||
|
||
// Site tarama
|
||
const [site, setSite] = useState(userProfile?.website || '');
|
||
const [tarama, setTarama] = useState(null);
|
||
const [taraniyor, setTaraniyor] = useState(false);
|
||
const [taramaHata, setTaramaHata] = useState(null);
|
||
|
||
const yukle=async()=>{
|
||
if(mutation.current)return;
|
||
mutation.current=true;setBusy(true);setError(null);
|
||
try {const data=await accountRequest('/api/notify/subscriptions');const rows=requireArray(data,'abonelikler');if(alive.current)setAbonelikler(rows);}
|
||
catch(e){if(alive.current)setError(e.message);}
|
||
finally {mutation.current=false;if(alive.current)setBusy(false);}
|
||
};
|
||
useEffect(()=>{alive.current=true;void yukle();return()=>{alive.current=false;};},[]);
|
||
|
||
const konuEkle = (k) => {
|
||
const t = String(k || '').trim();
|
||
if (!t || konular.some((x) => x.toLocaleLowerCase('tr-TR') === t.toLocaleLowerCase('tr-TR'))) return;
|
||
setKonular([...konular, t]);
|
||
};
|
||
const konuCikar = (k) => setKonular(konular.filter((x) => x !== k));
|
||
|
||
const siteyiTara=async()=>{
|
||
if(scan.current)return;scan.current=true;setTaraniyor(true);setTaramaHata(null);setTarama(null);
|
||
try {
|
||
const data=await accountRequest('/api/company/scan',{method:'POST',timeoutMs:120000,body:JSON.stringify({url:site})});
|
||
if(!Number.isFinite(data.karakter)||!Number.isFinite(data.tarananSayfa)||!Array.isArray(data.sonuc?.ihaleKonulari))throw new Error('Site tarama sonucu geçersiz.');
|
||
if(alive.current)setTarama(data);
|
||
}catch(e){if(alive.current)setTaramaHata(e.message);}
|
||
finally {scan.current=false;if(alive.current)setTaraniyor(false);}
|
||
};
|
||
const kaydet=async()=>{
|
||
if(mutation.current)return;
|
||
if(!konular.length){setError('En az bir konu seçin.');return;}
|
||
mutation.current=true;setBusy(true);setError(null);
|
||
try {
|
||
const data=await accountRequest('/api/notify/subscriptions',{method:'POST',body:JSON.stringify({kriter:{konular,sehir:daralt.sehir,alimTuru:daralt.alimTuru,kurumlar:daralt.favoriKurumlar?favoriteKurumlar:[]}})});
|
||
const rows=requireArray(data,'abonelikler');
|
||
if(alive.current){setAbonelikler(rows);setKonular([]);setDaralt({sehir:'',alimTuru:'',favoriKurumlar:false});}
|
||
}catch(e){if(alive.current)setError(e.message);}
|
||
finally {mutation.current=false;if(alive.current)setBusy(false);}
|
||
};
|
||
const sil=async id=>{
|
||
if(mutation.current)return;mutation.current=true;setBusy(true);setError(null);
|
||
try {
|
||
const data=await accountRequest('/api/notify/subscriptions?'+new URLSearchParams({id}),{method:'DELETE'});
|
||
const rows=requireArray(data,'abonelikler');if(alive.current)setAbonelikler(rows);
|
||
}catch(e){if(alive.current)setError(e.message);}
|
||
finally {mutation.current=false;if(alive.current)setBusy(false);}
|
||
};
|
||
|
||
const ozet = (a) => [
|
||
a.konular?.length ? a.konular.join(' · ') : null,
|
||
a.sehir && `📍 ${a.sehir}`,
|
||
a.alimTuru && `(${a.alimTuru})`,
|
||
a.kurumlar?.length && `${a.kurumlar.length} favori kurum`,
|
||
].filter(Boolean).join(' ') || 'Tüm ihaleler';
|
||
|
||
if (!authUser) return null;
|
||
|
||
const oneriler = tarama?.sonuc?.ihaleKonulari || [];
|
||
|
||
return (
|
||
<>
|
||
<BriefTercihi />
|
||
<TelegramBaglanti />
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-5">
|
||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||
<BellRing className="w-4 h-4 text-emerald-600" /> Otomatik E-posta Bildirimi
|
||
</h3>
|
||
{abonelikler && (
|
||
<span className="bg-emerald-100 text-emerald-800 font-extrabold text-[10px] px-2 py-0.5 rounded-full">
|
||
{abonelikler.length} kayıt
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<p className="text-xs text-slate-600 leading-relaxed">
|
||
Hangi <strong>konularda</strong> ihale alabiliyorsanız onları seçin — <strong>tüm Türkiye</strong> taranır,
|
||
E-posta gönderim hizmeti etkin olduğunda, eşleşen yeni ihaleler <strong>{authUser.email}</strong> adresine gönderilir.
|
||
</p>
|
||
|
||
{/* Mevcut kayıtlar */}
|
||
{abonelikler === null ? (!error && (
|
||
<div className="flex items-center gap-2 text-xs text-slate-400"><Loader2 className="w-3.5 h-3.5 animate-spin" /> yükleniyor…</div>
|
||
)) : abonelikler.length > 0 && (
|
||
<div className="space-y-2">
|
||
{abonelikler.map((a) => (
|
||
<div key={a.id} className="flex items-start justify-between gap-2 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
|
||
<div className="min-w-0">
|
||
<p className="text-xs font-bold text-slate-800">{ozet(a)}</p>
|
||
<p className="text-[10px] text-slate-400 mt-0.5">
|
||
{a.sonGonderim ? `son gönderim: ${new Date(a.sonGonderim).toLocaleString('tr-TR')}` : 'ilk tur bekleniyor'}
|
||
{a.deliveryStatus && <span className="block text-amber-700">{a.deliveryStatus.state==='uncertain'?'Gönderim sonucu belirsiz. Uygulama yöneticisinin sağlayıcı kaydını kontrol etmesi gerekiyor.':'E-posta gönderimi bekliyor.'}</span>}
|
||
</p>
|
||
</div>
|
||
<button onClick={() => sil(a.id)} disabled={busy} className="text-slate-400 hover:text-red-500 shrink-0 mt-0.5" aria-label={`Aboneliği sil: ${ozet(a)}`} title="Sil">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Site tarama → konu önerisi */}
|
||
<div className="bg-blue-50/60 border border-blue-200 rounded-xl p-3.5 space-y-2.5">
|
||
<p className="text-[11px] font-bold text-blue-900 flex items-center gap-1.5">
|
||
<Globe className="w-3.5 h-3.5" /> Sitenizi tarayıp konuları otomatik önerelim
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<input value={site} onChange={(e) => setSite(e.target.value)}
|
||
placeholder="firmasitesi.com"
|
||
className="flex-1 bg-white border border-blue-200 rounded-lg px-2.5 py-2 text-xs" />
|
||
<button onClick={siteyiTara} disabled={taraniyor || !site.trim()}
|
||
className="bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white font-bold text-xs px-3.5 rounded-lg flex items-center gap-1.5">
|
||
{taraniyor ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
|
||
{taraniyor ? 'Taranıyor…' : 'Tara'}
|
||
</button>
|
||
</div>
|
||
|
||
{taramaHata && <p className="text-[11px] text-red-700">⚠ {taramaHata}</p>}
|
||
|
||
{tarama && (
|
||
<div className="space-y-2">
|
||
<p className="text-[11px] text-blue-900">
|
||
<strong>{tarama.tarananSayfa} sayfa</strong> tarandı ({tarama.karakter.toLocaleString('tr-TR')} karakter).
|
||
{tarama.sonuc?.ozet && <> {tarama.sonuc.ozet}</>}
|
||
</p>
|
||
{oneriler.length > 0 && (
|
||
<>
|
||
<p className="text-[10px] text-blue-700 font-semibold">Önerilen konular — eklemek için tıklayın:</p>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{oneriler.map((k) => (
|
||
<button key={k} onClick={() => konuEkle(k)}
|
||
className="text-[11px] bg-white hover:bg-blue-100 border border-blue-300 text-blue-900 px-2 py-1 rounded-md font-medium">
|
||
+ {k}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Seçilen konular */}
|
||
<div className="space-y-2">
|
||
<p className="text-[11px] font-bold text-slate-700 uppercase tracking-wide">Seçilen konular</p>
|
||
{konular.length === 0 ? (
|
||
<p className="text-[11px] text-slate-400">Henüz konu seçilmedi.</p>
|
||
) : (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{konular.map((k) => (
|
||
<span key={k} className="text-[11px] bg-emerald-50 border border-emerald-300 text-emerald-900 px-2 py-1 rounded-md font-semibold flex items-center gap-1">
|
||
{k}
|
||
<button onClick={() => konuCikar(k)} className="text-emerald-700 hover:text-red-600"><X className="w-3 h-3" /></button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 pt-1">
|
||
<input value={ozelKonu} onChange={(e) => setOzelKonu(e.target.value)}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') { konuEkle(ozelKonu); setOzelKonu(''); } }}
|
||
placeholder="Kendi konunuzu yazın ve Enter'a basın"
|
||
className="flex-1 bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-xs" />
|
||
<button onClick={() => { konuEkle(ozelKonu); setOzelKonu(''); }}
|
||
className="bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs px-3 rounded-lg">Ekle</button>
|
||
</div>
|
||
|
||
<p className="text-[10px] text-slate-400 pt-1">Hazır sektörler:</p>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{sektorListesi.map((s) => (
|
||
<button key={s} onClick={() => konuEkle(s)}
|
||
className="text-[11px] bg-slate-100 hover:bg-slate-200 text-slate-700 px-2 py-1 rounded-md">
|
||
+ {s}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Gelişmiş daraltma (isteğe bağlı) */}
|
||
<div>
|
||
<button onClick={() => setGelismis(!gelismis)} className="text-[11px] font-bold text-slate-500 hover:text-slate-800 flex items-center gap-1">
|
||
{gelismis ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
|
||
Daha da daralt (isteğe bağlı) — varsayılan: tüm Türkiye
|
||
</button>
|
||
{gelismis && (
|
||
<div className="grid grid-cols-2 gap-2 mt-2">
|
||
<input value={daralt.sehir} onChange={(e) => setDaralt({ ...daralt, sehir: e.target.value })}
|
||
placeholder="Yalnızca bu il" className="bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-xs" />
|
||
<input value={daralt.alimTuru} onChange={(e) => setDaralt({ ...daralt, alimTuru: e.target.value })}
|
||
placeholder="Alım türü (ör. Doğrudan Temin)" className="bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-xs" />
|
||
{favoriteKurumlar?.length > 0 && (
|
||
<label className="col-span-2 flex items-center gap-2 text-xs text-slate-700 cursor-pointer">
|
||
<input type="checkbox" checked={daralt.favoriKurumlar}
|
||
onChange={(e) => setDaralt({ ...daralt, favoriKurumlar: e.target.checked })}
|
||
className="w-3.5 h-3.5 accent-emerald-600 rounded" />
|
||
Yalnızca favori kurumlarım ({favoriteKurumlar.length})
|
||
</label>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<button onClick={kaydet} disabled={busy || abonelikler===null || !konular.length}
|
||
className="w-full bg-emerald-600 hover:bg-emerald-500 disabled:opacity-40 text-white font-bold text-xs py-2.5 rounded-xl flex items-center justify-center gap-2">
|
||
{busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Plus className="w-3.5 h-3.5" />}
|
||
Bildirimi Kaydet
|
||
</button>
|
||
|
||
{error && (
|
||
<div role="alert" className="bg-red-50 border border-red-200 rounded-lg p-2.5 flex gap-2">
|
||
<AlertTriangle className="w-3.5 h-3.5 text-red-600 shrink-0 mt-0.5" />
|
||
<p className="text-[11px] text-red-800">{error} <button disabled={busy} onClick={yukle} className="underline">Abonelikleri yeniden yükle</button></p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-3 flex gap-2">
|
||
<Info className="w-3.5 h-3.5 text-slate-500 shrink-0 mt-0.5" />
|
||
<p className="text-[11px] text-slate-600 leading-relaxed">
|
||
İlk kayıtta mevcut ihaleler <strong>bildirilmez</strong> — yalnızca temel alınır, sonrasında çıkan
|
||
yeni ihaleler gönderilir. Sonuçlanmış arşiv kayıtları bildirime girmez. Aboneliği kaydetmek, e-postanın teslim edildiği anlamına gelmez.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|