<?php
/**
 * Web preview multi-país: /feed.php
 * Tabs 🇨🇴🇪🇨🇵🇪 — el inmigrante escoge su país.
 * Para Flutter: usa /api/practyco/feed (mismo dato, JSON).
 */
require_once dirname(__DIR__) . '/src/Database.php';

$pdo = Database::getInstance()->getConnection();

$country  = strtoupper($_GET['c'] ?? 'CO');
$category = $_GET['cat'] ?? 'todos';
$q        = trim($_GET['q'] ?? '');
$team     = trim($_GET['team'] ?? '');

if (!in_array($country, ['CO','EC','PE'], true)) $country = 'CO';

$countryMeta = [
    'CO' => ['flag' => '🇨🇴', 'name' => 'Colombia', 'greet' => 'Tu Colombia, en tu bolsillo',  'currency' => 'COP', 'rate_key' => 'cop', 'gradient' => 'linear-gradient(135deg,#fcd34d,#f59e0b 45%,#dc2626 85%)'],
    'EC' => ['flag' => '🇪🇨', 'name' => 'Ecuador',  'greet' => 'Tu Ecuador, todo el día',       'currency' => 'USD', 'rate_key' => null,  'gradient' => 'linear-gradient(135deg,#fcd34d,#0048b3 50%,#ed1c24 90%)'],
    'PE' => ['flag' => '🇵🇪', 'name' => 'Perú',     'greet' => 'Tu Perú siempre cerca',         'currency' => 'PEN', 'rate_key' => 'pen', 'gradient' => 'linear-gradient(135deg,#d91023,#fff 50%,#d91023 100%)'],
];
$meta = $countryMeta[$country];

$allowed = ['todos','deportes','farandula','economia','politica','breaking','regional','general','tecnologia','loteria'];
if (!in_array($category, $allowed, true)) $category = 'todos';

$where  = ["fi.country = ?", "fi.status IN ('processed','published','new')", "fi.published_at IS NOT NULL"];
$params = [$country];

if ($category !== 'todos') {
    $where[] = "(fi.llm_category = ? OR (fi.llm_category IS NULL AND fs.category = ?))";
    $params[] = $category;
    $params[] = $category;
}
if ($q !== '') {
    $where[] = "(fi.title LIKE ? OR fi.llm_headline LIKE ?)";
    $params[] = "%$q%";
    $params[] = "%$q%";
}
if ($team !== '') {
    $where[] = "(fi.title LIKE ? OR fi.llm_entities LIKE ?)";
    $params[] = "%$team%";
    $params[] = "%\"$team\"%";
}
$whereSql = implode(' AND ', $where);

$stmt = $pdo->prepare("
    SELECT fi.id, fi.title, fi.summary, fi.image_url, fi.url, fi.published_at,
           fi.llm_headline, fi.llm_category, fi.llm_importance, fi.llm_cross_sell,
           fs.name AS source_name, fs.category AS source_category, fi.raw_category
    FROM feed_items fi
    JOIN feed_sources fs ON fs.id = fi.source_id
    WHERE $whereSql
    ORDER BY fi.published_at DESC, fi.id DESC
    LIMIT 40
");
$stmt->execute($params);
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Stats por país (para los tabs)
$countStmt = $pdo->query("
    SELECT country, COUNT(*) AS total, SUM(llm_processed) AS llm_done
    FROM feed_items WHERE country IN ('CO','EC','PE') GROUP BY country");
$countByCountry = [];
foreach ($countStmt as $r) $countByCountry[$r['country']] = $r;

// Tipo cambio
$ratesFile = '/tmp/practyco_rates.json';
$rate = null;
if ($meta['rate_key'] && file_exists($ratesFile)) {
    $data = json_decode(file_get_contents($ratesFile), true);
    $rate = $data['data']['tether'][$meta['rate_key']] ?? null;
}

function timeAgo(string $datetime): string {
    $diff = time() - strtotime($datetime);
    if ($diff < 60)    return "ahora";
    if ($diff < 3600)  return floor($diff / 60) . " min";
    if ($diff < 86400) return floor($diff / 3600) . " h";
    if ($diff < 604800) return floor($diff / 86400) . " d";
    return date('d M', strtotime($datetime));
}

function categoryColor(string $cat): array {
    return match($cat) {
        'deportes'    => ['bg' => '#10b981', 'fg' => '#fff', 'emoji' => '⚽'],
        'farandula'   => ['bg' => '#ec4899', 'fg' => '#fff', 'emoji' => '🎭'],
        'economia'    => ['bg' => '#0891b2', 'fg' => '#fff', 'emoji' => '💵'],
        'politica'    => ['bg' => '#7c3aed', 'fg' => '#fff', 'emoji' => '🏛️'],
        'breaking'    => ['bg' => '#ef4444', 'fg' => '#fff', 'emoji' => '🚨'],
        'regional'    => ['bg' => '#f59e0b', 'fg' => '#fff', 'emoji' => '📍'],
        'tecnologia'  => ['bg' => '#06b6d4', 'fg' => '#fff', 'emoji' => '💻'],
        'loteria'     => ['bg' => '#eab308', 'fg' => '#000', 'emoji' => '🎰'],
        default       => ['bg' => '#475569', 'fg' => '#fff', 'emoji' => '📰'],
    };
}

function crossSellCta(?string $cs, string $country): ?array {
    $sendLabel = match($country) {
        'CO' => 'Enviar a Colombia',
        'EC' => 'Enviar a Ecuador',
        'PE' => 'Enviar a Perú',
        default => 'Enviar remesa',
    };
    return match($cs) {
        'dollar_up'        => ['icon' => '💵', 'text' => 'Buen momento para enviar plata',      'color' => '#10b981', 'label' => $sendLabel],
        'goal'             => ['icon' => '⚽', 'text' => 'Manda algo para celebrar',             'color' => '#10b981', 'label' => $sendLabel],
        'breaking'         => ['icon' => '🆘', 'text' => 'Envía ayuda a tu familia',            'color' => '#ef4444', 'label' => $sendLabel],
        'farandula_compra' => ['icon' => '🎁', 'text' => 'Regálale entradas',                    'color' => '#ec4899', 'label' => $sendLabel],
        'lottery'          => ['icon' => '🎉', 'text' => '¿Ganaste? Compártelo',                'color' => '#eab308', 'label' => $sendLabel],
        default            => null,
    };
}

$qsBase = function(array $override = []) use ($country, $category, $q, $team) {
    $params = array_merge(['c' => $country, 'cat' => $category, 'q' => $q, 'team' => $team], $override);
    $params = array_filter($params, fn($v) => $v !== '' && $v !== null);
    return http_build_query($params);
};
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Mi <?= $meta['name'] ?> · Practyco</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0e13;color:#e4e9f0;min-height:100vh;padding-bottom:80px}
.container{max-width:480px;margin:0 auto;background:#0a0e13;min-height:100vh;position:relative}

/* Country selector tabs */
.country-tabs{display:flex;background:#000;border-bottom:1px solid #1f2731;position:sticky;top:0;z-index:60}
.country-tab{flex:1;padding:12px 8px;text-align:center;color:#64748b;text-decoration:none;font-size:.78rem;font-weight:600;border-bottom:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .15s}
.country-tab .flag-big{font-size:1.4rem;line-height:1}
.country-tab .lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}
.country-tab .count{font-size:.6rem;color:#475569;margin-top:1px}
.country-tab.active{color:#fff;border-bottom-color:#fcd34d;background:rgba(252,211,77,.05)}
.country-tab.active .count{color:#94a3b8}

.header{padding:18px 20px 14px;position:sticky;top:60px;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.header.theme-bg{background:var(--country-grad)}
.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.flag-greet{display:flex;align-items:center;gap:10px}
.flag-greet .flag{font-size:1.5rem}
.flag-greet h1{font-size:1.05rem;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.flag-greet .sub{font-size:.72rem;color:rgba(255,255,255,.85);margin-top:2px}
.rate-pill{background:rgba(0,0,0,.35);backdrop-filter:blur(8px);padding:6px 12px;border-radius:14px;font-size:.78rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:5px}
.rate-pill .arrow{color:#86efac;font-size:.7rem}
.search-row{display:flex;gap:8px;margin-top:10px}
.search-input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 14px;border-radius:18px;font-size:.85rem;outline:none}
.search-input::placeholder{color:rgba(255,255,255,.6)}
.send-btn{background:#fff;color:#000;border:none;padding:8px 16px;border-radius:18px;font-weight:700;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:4px}

.cats{display:flex;overflow-x:auto;gap:8px;padding:14px 16px 4px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat-chip{background:#1a2028;border:1px solid #2a3441;color:#9aa5b1;padding:8px 14px;border-radius:18px;font-size:.78rem;font-weight:600;white-space:nowrap;text-decoration:none;transition:all .15s}
.cat-chip:hover{border-color:#475569;color:#cbd5e1}
.cat-chip.active{background:#fff;color:#0a0e13;border-color:#fff}

.stats-bar{padding:10px 20px 6px;font-size:.7rem;color:#64748b;display:flex;justify-content:space-between}
.feed{padding:8px 14px}
.card{background:#141a22;border:1px solid #1f2731;border-radius:14px;overflow:hidden;margin-bottom:14px;transition:transform .15s}
.card:active{transform:scale(.985)}
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0f1419;display:block}
.card-body{padding:14px}
.card-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cat-badge{padding:3px 9px;border-radius:11px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:3px}
.source{font-size:.7rem;color:#64748b;font-weight:600}
.time{font-size:.7rem;color:#64748b;margin-left:auto}
.imp-star{color:#fbbf24;font-size:.7rem}
.title{font-size:1rem;font-weight:700;color:#fff;line-height:1.32;letter-spacing:-.01em;margin-bottom:6px}
.title a{color:inherit;text-decoration:none}
.summary{font-size:.82rem;color:#94a3b8;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.llm-tag{display:inline-block;background:rgba(124,58,237,.15);color:#a78bfa;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:6px;margin-left:6px;letter-spacing:.05em}

.cta{display:flex;align-items:center;justify-content:space-between;background:#0d1218;padding:10px 14px;border-top:1px solid #1f2731;font-size:.8rem;font-weight:600;color:#cbd5e1}
.cta-text{display:flex;align-items:center;gap:8px}
.cta-icon{font-size:1.1rem}
.cta-btn{background:#10b981;color:#fff;padding:6px 14px;border-radius:14px;font-size:.75rem;font-weight:700;border:none;cursor:pointer;text-decoration:none}

.empty{text-align:center;padding:60px 20px;color:#64748b}
.fab{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#10b981,#0891b2);color:#fff;padding:14px 26px;border-radius:30px;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 8px 24px rgba(16,185,129,.4);display:flex;align-items:center;gap:8px;z-index:40}
.demo-banner{background:linear-gradient(90deg,#7c3aed,#0891b2);color:#fff;padding:6px 16px;font-size:.72rem;text-align:center;font-weight:600}
</style>
</head>
<body>
<div class="container">

<div class="demo-banner">🚧 DEMO Practyco · Mi País — el inmigrante latino siempre conectado</div>

<!-- Selector de país -->
<div class="country-tabs">
  <?php foreach ($countryMeta as $cCode => $cMeta):
    $isActive = $cCode === $country ? 'active' : '';
    $total = $countByCountry[$cCode]['total'] ?? 0;
  ?>
    <a href="?<?= $qsBase(['c' => $cCode, 'cat' => 'todos']) ?>" class="country-tab <?= $isActive ?>">
      <span class="flag-big"><?= $cMeta['flag'] ?></span>
      <span class="lbl"><?= $cMeta['name'] ?></span>
      <span class="count"><?= number_format($total) ?> news</span>
    </a>
  <?php endforeach; ?>
</div>

<div class="header theme-bg" style="--country-grad: <?= $meta['gradient'] ?>; background: <?= $meta['gradient'] ?>">
  <div class="header-top">
    <div class="flag-greet">
      <div class="flag"><?= $meta['flag'] ?></div>
      <div>
        <h1><?= $meta['greet'] ?></h1>
        <div class="sub"><?= count($items) ?> noticias frescas</div>
      </div>
    </div>
    <?php if ($rate): ?>
      <div class="rate-pill"><?= $meta['currency'] ?> $<?= number_format($rate, 2) ?> <span class="arrow">▲</span></div>
    <?php elseif ($country === 'EC'): ?>
      <div class="rate-pill">💵 USD</div>
    <?php endif; ?>
  </div>
  <form class="search-row" method="get">
    <input type="hidden" name="c" value="<?= $country ?>">
    <input type="text" name="q" class="search-input" placeholder="Buscar en <?= $meta['name'] ?>..." value="<?= htmlspecialchars($q) ?>">
    <?php if ($category !== 'todos'): ?><input type="hidden" name="cat" value="<?= $category ?>"><?php endif; ?>
    <button class="send-btn">💸 Enviar</button>
  </form>
</div>

<div class="cats">
  <?php foreach (['todos','breaking','deportes','politica','economia','farandula','regional'] as $c):
    $active = $c === $category ? 'active' : '';
    $col = categoryColor($c);
  ?>
    <a href="?<?= $qsBase(['cat' => $c]) ?>" class="cat-chip <?= $active ?>">
      <?= $col['emoji'] ?> <?= ucfirst($c) ?>
    </a>
  <?php endforeach; ?>
</div>

<div class="stats-bar">
  <span>📰 <?= number_format($countByCountry[$country]['total'] ?? 0) ?> total <?= $meta['name'] ?></span>
  <span>🤖 <?= number_format($countByCountry[$country]['llm_done'] ?? 0) ?> con LLM</span>
</div>

<div class="feed">
  <?php if (empty($items)): ?>
    <div class="empty">
      <div style="font-size:3rem;margin-bottom:12px">🔍</div>
      <div>Sin resultados en <?= $meta['name'] ?>. Prueba otra categoría.</div>
    </div>
  <?php else: ?>
    <?php foreach ($items as $item):
      $cat = $item['llm_category'] ?: ($item['source_category'] ?: 'general');
      $col = categoryColor($cat);
      $cta = crossSellCta($item['llm_cross_sell'], $country);
      $title = $item['llm_headline'] ?: $item['title'];
      $isLlm = !empty($item['llm_headline']);
    ?>
    <div class="card">
      <?php if ($item['image_url']): ?>
        <img src="<?= htmlspecialchars($item['image_url']) ?>" class="card-img" loading="lazy" onerror="this.style.display='none'">
      <?php endif; ?>
      <div class="card-body">
        <div class="card-meta">
          <span class="cat-badge" style="background:<?= $col['bg'] ?>;color:<?= $col['fg'] ?>"><?= $col['emoji'] ?> <?= strtoupper($cat) ?></span>
          <span class="source"><?= htmlspecialchars($item['source_name']) ?></span>
          <?php if ($item['llm_importance'] !== null && $item['llm_importance'] >= 70): ?>
            <span class="imp-star">★ <?= $item['llm_importance'] ?></span>
          <?php endif; ?>
          <span class="time"><?= timeAgo($item['published_at']) ?></span>
        </div>
        <div class="title">
          <a href="<?= htmlspecialchars($item['url']) ?>" target="_blank" rel="noopener"><?= htmlspecialchars($title) ?></a>
          <?php if ($isLlm): ?><span class="llm-tag">AI</span><?php endif; ?>
        </div>
        <?php if ($item['summary']): ?>
          <div class="summary"><?= htmlspecialchars(mb_substr($item['summary'], 0, 180)) ?></div>
        <?php endif; ?>
      </div>
      <?php if ($cta): ?>
        <div class="cta">
          <div class="cta-text">
            <span class="cta-icon"><?= $cta['icon'] ?></span>
            <span><?= $cta['text'] ?></span>
          </div>
          <a href="#" class="cta-btn" style="background:<?= $cta['color'] ?>"><?= $cta['label'] ?> →</a>
        </div>
      <?php endif; ?>
    </div>
    <?php endforeach; ?>
  <?php endif; ?>
</div>

<a href="#" class="fab">💸 Enviar a <?= $meta['name'] ?></a>

</div>
</body>
</html>
