// App.jsx v2
// Ændringer fra v1:
// - State for åben/lukket preview modal (previewState)
// - Renderer PreviewModal når previewState er sat
// - Sender onOpenPreview callback til AdCard

const App = () => {
  const [ads, setAds] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  // NYT i v2: { previewUrl, adName } eller null
  const [previewState, setPreviewState] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/ads')
      .then(r => r.json())
      .then(data => {
        setAds(data.ads || []);
        setLoading(false);
      })
      .catch(err => {
        setError(String(err));
        setLoading(false);
      });
  }, []);

  const handleOpenPreview = (previewUrl, adName) => {
    setPreviewState({ previewUrl, adName });
  };

  const handleClosePreview = () => {
    setPreviewState(null);
  };

  if (loading) {
    return (
      <>
        <header>
          <h1>Annoncebibliotek</h1>
        </header>
        <div className="state">Henter annoncer...</div>
      </>
    );
  }

  if (error) {
    return (
      <>
        <header>
          <h1>Annoncebibliotek</h1>
        </header>
        <div className="state state--error">Fejl: {error}</div>
      </>
    );
  }

  return (
    <>
      <header>
        <h1>Annoncebibliotek</h1>
        <p>{ads.length} annoncer</p>
      </header>
      <div className="grid">
        {ads.map(ad => (
          <AdCard
            key={ad.ad_id}
            ad={ad}
            onOpenPreview={handleOpenPreview}
          />
        ))}
      </div>
      {previewState && (
        <PreviewModal
          previewUrl={previewState.previewUrl}
          adName={previewState.adName}
          onClose={handleClosePreview}
        />
      )}
    </>
  );
};