import React, { useState, useEffect } from 'react';
import { RefreshCw, Newspaper, ExternalLink, Calendar, Loader2, AlertCircle, Wheat } from 'lucide-react';
const API_KEY = "AIzaSyCv18tI_hJgKhyB6AyWstJdHE0ROhb6Eqo";
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${API_KEY}`;
const App = () => {
const [news, setNews] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [lastUpdated, setLastUpdated] = useState(null);
const fetchNews = async () => {
setLoading(true);
setError(null);
const systemPrompt = `Du bist ein spezialisierter Nachrichten-Analyst für den Sektor Landwirtschaft und AgriFood in Deutschland.
Deine Aufgabe ist es, die wichtigsten Ereignisse der LETZTEN 12 STUNDEN zusammenzufassen.
Gib die Antwort als valides JSON-Array zurück. Jedes Objekt im Array muss folgende Felder haben:
"title" (kurzer, prägnanter Titel),
"summary" (2-3 Sätze Zusammenfassung),
"relevance" (warum das für die Branche wichtig ist),
"sources" (ein Array mit URLs der gefundenen Quellen).
Konzentriere dich auf Themen wie Agrarpolitik, Marktpreise, technologische Innovationen (AgTech) und Ernährungsindustrie in Deutschland.`;
const userQuery = "Was sind die wichtigsten Nachrichten aus Landwirtschaft und AgriFood in Deutschland von heute? Suche gezielt nach Meldungen der letzten 12 Stunden.";
const payload = {
contents: [{ parts: [{ text: userQuery }] }],
tools: [{ "google_search": {} }],
systemInstruction: {
parts: [{ text: systemPrompt }]
},
generationConfig: {
responseMimeType: "application/json",
}
};
try {
const response = await fetch(apiUrlWithRetry(API_URL), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) throw new Error('API-Anfrage fehlgeschlagen. Bitte prüfen Sie den Schlüssel oder versuchen Sie es später erneut.');
const result = await response.json();
const rawText = result.candidates?.[0]?.content?.parts?.[0]?.text;
if (rawText) {
const parsedNews = JSON.parse(rawText);
setNews(parsedNews);
setLastUpdated(new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
}
} catch (err) {
console.error(err);
setError("Fehler beim Laden der Nachrichten. Stellen Sie sicher, dass der API-Key gültig ist und das Modell 'gemini-3-flash-preview' verfügbar ist.");
} finally {
setLoading(false);
}
};
// Helper for basic retry logic
const apiUrlWithRetry = (url) => url;
useEffect(() => {
fetchNews();
}, []);
return (
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
{}
<header className="max-w-5xl mx-auto mb-10 flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div className="flex items-center gap-2 mb-2">
<div className="p-2 bg-green-600 rounded-lg text-white">
<Wheat size={28} />
</div>
<h1 className="text-3xl font-extrabold tracking-tight text-slate-800">AgriFood Radar</h1>
</div>
<p className="text-slate-500 max-w-lg">
Die wichtigsten Updates aus der deutschen Landwirtschaft und Lebensmittelwirtschaft der letzten 12 Stunden – kuratiert durch KI.
</p>
</div>
<div className="flex items-center gap-4">
{lastUpdated && (
<div className="text-right hidden sm:block">
<p className="text-xs text-slate-400 uppercase font-bold tracking-wider">Letztes Update</p>
<p className="text-sm font-medium text-slate-600">{lastUpdated} Uhr</p>
</div>
)}
<button
onClick={fetchNews}
disabled={loading}
className="flex items-center gap-2 bg-white border border-slate-200 hover:border-green-500 hover:text-green-600 transition-all px-4 py-2.5 rounded-xl shadow-sm font-medium disabled:opacity-50"
>
{loading ? <Loader2 className="animate-spin" size={18} /> : <RefreshCw size={18} />}
Aktualisieren
</button>
</div>
</header>
{}
<main className="max-w-5xl mx-auto">
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 p-4 rounded-2xl mb-8 flex items-start gap-3">
<AlertCircle className="shrink-0 mt-0.5" size={20} />
<p className="text-sm">{error}</p>
</div>
)}
{loading && news.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-slate-400">
<Loader2 className="animate-spin mb-4" size={48} />
<p className="font-medium">Analysiere aktuelle Nachrichtenquellen...</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{news.map((item, index) => (
<div key={index} className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col h-full">
<div className="flex justify-between items-start mb-4">
<span className="bg-green-100 text-green-700 text-[10px] uppercase font-bold px-2 py-1 rounded-md tracking-wider">
DEUTSCHLAND
</span>
<Newspaper size={18} className="text-slate-300" />
</div>
<h3 className="text-xl font-bold text-slate-800 mb-3 leading-tight leading-6">
{item.title}
</h3>
<p className="text-slate-600 text-sm mb-4 leading-relaxed flex-grow">
{item.summary}
</p>
<div className="bg-slate-50 p-3 rounded-2xl mb-4">
<p className="text-[11px] font-bold text-slate-400 uppercase mb-1">Bedeutung</p>
<p className="text-xs text-slate-700 italic">
{item.relevance}
</p>
</div>
<div className="mt-auto pt-4 border-t border-slate-100">
<p className="text-[11px] font-bold text-slate-400 uppercase mb-2">Quellen</p>
<div className="flex flex-wrap gap-2">
{item.sources && item.sources.map((url, urlIndex) => (
<a
key={urlIndex}
href={url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-xs text-green-600 hover:text-green-700 bg-green-50 hover:bg-green-100 px-3 py-1.5 rounded-full font-medium transition-colors border border-green-100"
>
{new URL(url).hostname.replace('www.', '')}
<ExternalLink size={12} />
</a>
))}
</div>
</div>
</div>
))}
</div>
)}
{!loading && news.length === 0 && !error && (
<div className="text-center py-20 bg-white border border-dashed border-slate-300 rounded-3xl">
<Calendar className="mx-auto mb-4 text-slate-300" size={48} />
<h3 className="text-lg font-medium text-slate-800">Keine aktuellen Nachrichten gefunden</h3>
<p className="text-slate-500 text-sm px-4">Versuchen Sie es in ein paar Minuten erneut oder klicken Sie auf Aktualisieren.</p>
</div>
)}
</main>
<footer className="max-w-5xl mx-auto mt-20 pb-10 text-center border-t border-slate-200 pt-8">
<p className="text-xs text-slate-400">
Powered by Gemini 3 Flash & Google Search Technology.
Informationen basieren auf Echtzeit-Suchen und können Fehler enthalten.
</p>
</footer>
</div>
);
};
export default App;