import { useState, useEffect } from 'react';
import { api, S } from '../lib.js';

const GOLD = '#f59e0b';

function getMyRole() {
  try { return JSON.parse(atob(localStorage.getItem('sk_token').split('.')[1])).role; } catch { return null; }
}

function fmtDate(str) {
  if (!str) return null;
  try { return new Date(str).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' }); }
  catch { return str; }
}

function publisherColor(name) {
  if (!name) return '#555';
  const n = name.toLowerCase();
  if (n.includes('rewe'))      return '#e2001a';
  if (n.includes('edeka'))     return '#e8a800';
  if (n.includes('e center'))  return '#e8a800';
  if (n.includes('netto'))     return '#0057a8';
  if (n.includes('trinkgut'))  return '#e87722';
  if (n.includes('penny'))     return '#e2001a';
  if (n.includes('aldi'))      return '#00538f';
  if (n.includes('lidl'))      return '#f5c900';
  if (n.includes('hit'))       return '#e2001a';
  if (n.includes('alldrink'))  return '#2ecc71';
  if (n.includes('getränke'))  return '#3498db';
  return '#666';
}

// ── Prospekt-Angebot Karte ────────────────────────────────────────────────────
function BrochureOfferCard({ offer }) {
  const color = publisherColor(offer.store);
  return (
    <div style={{
      ...S.card, padding:0, overflow:'hidden',
      border:'1px solid rgba(255,255,255,0.08)',
      display:'flex', flexDirection:'column',
    }}>
      {/* Prospektseite als Bild */}
      {offer.productImage && (
        <div style={{ position:'relative', height:160, overflow:'hidden', flexShrink:0 }}>
          <img src={offer.productImage} alt={`König Pilsener bei ${offer.store}`}
            style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}
            onError={e => { e.target.style.display='none'; }}
          />
          {offer.isNew && (
            <span style={{ position:'absolute', top:8, left:8,
              background:'#4ecdc4', color:'#000', borderRadius:4,
              padding:'2px 7px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>
              NEU
            </span>
          )}
        </div>
      )}
      <div style={{ padding:'10px 12px', flex:1 }}>
        {/* Händler + Logo */}
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
          {offer.publisherLogo && (
            <img src={offer.publisherLogo} alt={offer.store}
              style={{ height:20, width:'auto', objectFit:'contain', flexShrink:0 }}
              onError={e => { e.target.style.display='none'; }}
            />
          )}
          <span style={{
            background:`${color}22`, border:`1px solid ${color}44`,
            borderRadius:4, padding:'2px 8px',
            color, fontFamily:'monospace', fontSize:10, fontWeight:700,
          }}>
            {offer.store}
          </span>
        </div>
        {/* Prospekttitel + Seite */}
        {offer.title && (
          <div style={{ color:'rgba(255,255,255,0.6)', fontFamily:'monospace', fontSize:11, marginBottom:4 }}>
            📄 „{offer.title}"
            {offer.page && <span style={{ color:'rgba(255,255,255,0.35)', marginLeft:4 }}>Seite {offer.page}</span>}
          </div>
        )}
        {/* Gültigkeit */}
        {offer.validity && (
          <div style={{ color: offer.validity.includes('Noch') ? '#f59e0b' : 'rgba(255,255,255,0.4)',
            fontFamily:'monospace', fontSize:10, marginTop:4 }}>
            🕐 {offer.validity}
          </div>
        )}
        {offer.dateRange && (
          <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10, marginTop:2 }}>
            {offer.dateRange}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Grid-Angebot Karte (mit Preis) ────────────────────────────────────────────
function GridOfferCard({ offer }) {
  const color = publisherColor(offer.store);
  return (
    <div style={{
      ...S.card, padding:0, overflow:'hidden',
      border:'1px solid rgba(255,255,255,0.08)',
      display:'flex', flexDirection:'column',
      background:'rgba(255,255,255,0.03)',
    }}>
      {offer.image && (
        <div style={{ height:130, overflow:'hidden', flexShrink:0, background:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <img src={offer.image} alt={offer.name}
            style={{ width:'auto', height:'100%', maxWidth:'100%', objectFit:'contain', display:'block' }}
            onError={e => { e.target.parentElement.style.display='none'; }}
          />
        </div>
      )}
      <div style={{ padding:'10px 12px', flex:1 }}>
        {offer.brand && (
          <div style={{ color:'rgba(255,255,255,0.4)', fontFamily:'monospace', fontSize:10, marginBottom:2 }}>
            {offer.brand}
          </div>
        )}
        <div style={{ color:'#fff', fontFamily:'monospace', fontSize:12, fontWeight:600, marginBottom:6, lineHeight:1.3 }}>
          {offer.name}
        </div>
        {offer.price && (
          <div style={{ color:GOLD, fontFamily:'Space Mono,monospace', fontSize:18, fontWeight:700, marginBottom:2 }}>
            {offer.price}
          </div>
        )}
        {offer.baseUnit && (
          <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9 }}>
            {offer.baseUnit}
          </div>
        )}
        {offer.store && (
          <div style={{
            marginTop:8, display:'inline-block',
            background:`${color}22`, border:`1px solid ${color}44`,
            borderRadius:4, padding:'2px 7px',
            color, fontFamily:'monospace', fontSize:10, fontWeight:700,
          }}>
            {offer.store}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Prospekt-Karte (shelf) ────────────────────────────────────────────────────
function ProspektCard({ b }) {
  const color = publisherColor(b.publisher);
  const expiring = b.badges?.includes('expiring_soon');
  const fresh    = b.badges?.includes('new');
  return (
    <a href={b.url} target="_blank" rel="noopener noreferrer" style={{ textDecoration:'none' }}>
      <div style={{
        ...S.card, padding:0, overflow:'hidden', cursor:'pointer',
        border: expiring ? '1px solid rgba(239,68,68,0.4)' : '1px solid rgba(255,255,255,0.08)',
      }}>
        <div style={{ position:'relative' }}>
          {b.image && (
            <img src={b.image} alt={b.title}
              style={{ width:'100%', height:110, objectFit:'cover', display:'block' }}
              onError={e => { e.target.style.display='none'; }}
            />
          )}
          <div style={{ position:'absolute', top:6, left:6, display:'flex', gap:4 }}>
            {fresh    && <span style={{ background:'#4ecdc4', color:'#000', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>NEU</span>}
            {expiring && <span style={{ background:'#ef4444', color:'#fff', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>ENDET BALD</span>}
          </div>
        </div>
        <div style={{ padding:'10px 12px' }}>
          <div style={{ display:'inline-block', background:`${color}22`, border:`1px solid ${color}44`,
            borderRadius:4, padding:'2px 8px', marginBottom:6,
            color, fontFamily:'monospace', fontSize:10, fontWeight:700 }}>
            {b.publisher}
          </div>
          <div style={{ color:'#fff', fontFamily:'monospace', fontSize:11, marginBottom:3, lineHeight:1.4 }}>{b.title}</div>
          <div style={{ color:'rgba(255,255,255,0.4)', fontFamily:'monospace', fontSize:10, marginBottom:2 }}>
            📍 {b.store}{b.city && b.store !== b.city ? ` · ${b.city}` : ''}
          </div>
          {b.street && <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9 }}>{b.street}</div>}
          {(b.validFrom || b.validTo) && (
            <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginTop:4 }}>
              {b.validFrom && `Ab ${fmtDate(b.validFrom)}`}{b.validFrom && b.validTo && ' · '}{b.validTo && `Bis ${fmtDate(b.validTo)}`}
            </div>
          )}
        </div>
      </div>
    </a>
  );
}

// ── Hauptkomponente ───────────────────────────────────────────────────────────
export default function Koepi({ toast }) {
  const [tab,       setTab]       = useState('angebote');
  const [offers,    setOffers]    = useState(null);
  const [prospekte, setProspekte] = useState(null);
  const [loading,   setLoading]   = useState(false);
  const [showAll,   setShowAll]   = useState(false);
  const isAdmin = getMyRole() === 'admin';

  const loadOffers = async () => {
    if (offers) return;
    setLoading(true);
    try { setOffers(await api('/tools/koepi/offers')); }
    catch(e) { toast?.(e.message || 'Fehler', 'error'); }
    finally { setLoading(false); }
  };

  const loadProspekte = async () => {
    if (prospekte) return;
    setLoading(true);
    try { setProspekte(await api('/tools/koepi/prospekte')); }
    catch(e) { toast?.(e.message || 'Fehler', 'error'); }
    finally { setLoading(false); }
  };

  useEffect(() => {
    if (tab === 'angebote') loadOffers();
    else loadProspekte();
  }, [tab]);

  const clearCache = async () => {
    try {
      await api('/tools/koepi/clear-cache', { body:{} });
      setOffers(null); setProspekte(null);
      toast('Cache geleert');
      if (tab === 'angebote') { setLoading(true); setOffers(await api('/tools/koepi/offers')); setLoading(false); }
      else { setLoading(true); setProspekte(await api('/tools/koepi/prospekte')); setLoading(false); }
    } catch(e) { toast?.(e.message, 'error'); }
  };

  return (
    <div style={{ maxWidth:700, margin:'0 auto' }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20, flexWrap:'wrap' }}>
        <h2 style={{ margin:0, fontSize:15, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400 }}>
          🍺 KÖPI — König Pilsener Angebote
        </h2>
        <div style={{ flex:1 }}/>
        {isAdmin && (
          <button onClick={clearCache} style={{ ...S.btn('#666666', true), fontSize:10 }}>🗑 Cache</button>
        )}
      </div>

      <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10, marginBottom:14 }}>
        Raum Duisburg/Essen/Düsseldorf · Quelle: kaufDA.de · Cache 1h
      </div>

      {/* Tabs */}
      <div style={{ display:'flex', gap:8, marginBottom:20 }}>
        {[['angebote','🍺 Angebote'],['prospekte','📋 Alle Prospekte']].map(([t, label]) => (
          <button key={t} onClick={() => setTab(t)} style={{
            ...S.btn(tab===t ? GOLD : '#444444', true), fontSize:12, padding:'6px 14px',
          }}>{label}</button>
        ))}
      </div>

      {loading && (
        <div style={{ color:'rgba(255,255,255,0.4)', fontFamily:'monospace', fontSize:13, textAlign:'center', padding:'40px 0' }}>
          ⏳ Lade Angebote… (kann bis zu 15 Sekunden dauern)
        </div>
      )}

      {/* Angebote Tab */}
      {!loading && tab === 'angebote' && offers && (
        <div>
          {/* Grid-Angebote mit Preisen */}
          {offers.gridOffers?.length > 0 && (
            <>
              <div style={{ ...S.head, marginBottom:10 }}>AKTUELLE ANGEBOTE MIT PREIS ({offers.gridOffers.length})</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(160px,1fr))', gap:12, marginBottom:24 }}>
                {offers.gridOffers.map((o, i) => <GridOfferCard key={i} offer={o} />)}
              </div>
            </>
          )}

          {/* BrochureBox: Prospektseiten mit KöPi */}
          {offers.brochureOffers?.length > 0 && (
            <>
              <div style={{ ...S.head, marginBottom:10 }}>
                KÖNIG PILSENER IN DIESEN PROSPEKTEN ({offers.brochureOffers.length})
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))', gap:12 }}>
                {offers.brochureOffers.map((o, i) => <BrochureOfferCard key={i} offer={o} />)}
              </div>
            </>
          )}

          {!offers.gridOffers?.length && !offers.brochureOffers?.length && (
            <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:13, textAlign:'center', padding:'40px 0' }}>
              Aktuell keine König Pilsener Angebote gefunden.
            </div>
          )}

          <div style={{ marginTop:20, textAlign:'center' }}>
            <a href="https://www.kaufda.de/Angebote/Koenig-Pilsener" target="_blank" rel="noopener noreferrer"
              style={{ color:GOLD, fontFamily:'monospace', fontSize:11 }}>
              → Alle Angebote auf kaufDA.de
            </a>
          </div>
        </div>
      )}

      {/* Prospekte Tab */}
      {!loading && tab === 'prospekte' && prospekte && (
        <div>
          {prospekte.targeted?.length > 0 && (
            <>
              <div style={{ ...S.head, marginBottom:10 }}>REWE · EDEKA · NETTO · TRINKGUT & mehr ({prospekte.targeted.length})</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))', gap:12, marginBottom:16 }}>
                {prospekte.targeted.map(b => <ProspektCard key={b.id} b={b} />)}
              </div>
            </>
          )}
          {prospekte.others?.length > 0 && (
            <>
              <button onClick={() => setShowAll(v => !v)} style={{ ...S.btn('#444444',true), marginBottom:10, fontSize:11 }}>
                {showAll ? '▾ Weniger' : `▸ Weitere Prospekte (${prospekte.others.length})`}
              </button>
              {showAll && (
                <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))', gap:12 }}>
                  {prospekte.others.map(b => <ProspektCard key={b.id} b={b} />)}
                </div>
              )}
            </>
          )}
          {!prospekte.targeted?.length && !prospekte.others?.length && (
            <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:13, textAlign:'center', padding:'40px 0' }}>
              Keine Prospekte gefunden.
            </div>
          )}
        </div>
      )}
    </div>
  );
}