// Marketplace screen
function Marketplace({ onSelect }) {
  const { t, lang } = useT();
  const [filter, setFilter] = useState('all');
  const [sort, setSort] = useState('yield');
  const [view, setView] = useState('grid');
  const [search, setSearch] = useState('');

  const opps = useMemo(() => {
    let list = window.DIVIDIS_DATA.opportunities.slice();
    if (filter !== 'all') list = list.filter(o => o.type === filter);
    if (search) {
      const q = search.toLowerCase();
      list = list.filter(o => o.issuer.toLowerCase().includes(q) || o.id.toLowerCase().includes(q));
    }
    if (sort === 'yield') list.sort((a, b) => (b.yield || 0) - (a.yield || 0));
    else if (sort === 'term') list.sort((a, b) => {
      const toDays = (o) => o.termUnit === 'days' ? o.term : o.termUnit === 'months' ? o.term * 30 : o.term * 365;
      return toDays(a) - toDays(b);
    });
    else if (sort === 'progress') list.sort((a, b) => (b.raised / b.total) - (a.raised / a.total));
    return list;
  }, [filter, sort, search]);

  const filterOpts = [
    { id: 'all', label: t('mkt_filter_all') },
    { id: 'invoice', label: t('mkt_filter_invoice') },
    { id: 'fixed', label: t('mkt_filter_fixed') },
    { id: 'equity', label: t('mkt_filter_equity') },
    { id: 'seed', label: t('mkt_filter_seed') },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('mkt_title')}</h1>
          <div className="page-sub">{t('mkt_sub')}</div>
        </div>
        <div className="mkt-search-wrap">
          <Icon name="search" size={14} color="var(--text-3)" />
          <input
            className="input"
            style={{ background: 'transparent', border: 'none', padding: '8px 0', flex: 1 }}
            placeholder={t('mkt_search')}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
      </div>

      {/* Filter / Sort bar */}
      <div className="mkt-bar">
        <div className="mkt-filters">
          {filterOpts.map(f => (
            <button
              key={f.id}
              className={`mkt-fbtn ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}
            >
              {f.label}
            </button>
          ))}
        </div>
        <div className="mkt-bar-right">
          <div className="mkt-select-wrap">
            <span style={{ color: 'var(--text-3)', fontSize: 12 }}>{t('mkt_sort')}:</span>
            <select className="mkt-select" value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="yield">{t('mkt_sort_yield')}</option>
              <option value="term">{t('mkt_sort_term')}</option>
              <option value="progress">{t('mkt_sort_progress')}</option>
              <option value="new">{t('mkt_sort_new')}</option>
            </select>
            <Icon name="chevron-down" size={12} color="var(--text-3)" />
          </div>
          <div className="mkt-view-toggle">
            <button className={`mkt-vbtn ${view === 'grid' ? 'active' : ''}`} onClick={() => setView('grid')} title={t('mkt_view_grid')}>
              <Icon name="grid" size={13} />
            </button>
            <button className={`mkt-vbtn ${view === 'list' ? 'active' : ''}`} onClick={() => setView('list')} title={t('mkt_view_list')}>
              <Icon name="list" size={13} />
            </button>
          </div>
        </div>
      </div>

      {view === 'grid' ? (
        <div className="opps-grid">
          {opps.map(o => <OppCard key={o.id} opp={o} onSelect={onSelect} />)}
        </div>
      ) : (
        <OppTable opps={opps} onSelect={onSelect} />
      )}

      <style>{`
        .mkt-search-wrap {
          display: flex; align-items: center; gap: 8px;
          padding: 8px 14px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 10px;
          width: 320px;
        }
        .mkt-bar {
          display: flex; align-items: center; justify-content: space-between;
          margin-bottom: 24px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--line);
          gap: 16px;
          flex-wrap: wrap;
        }
        .mkt-filters { display: flex; gap: 4px; }
        .mkt-fbtn {
          padding: 7px 14px;
          background: transparent;
          border: 1px solid transparent;
          color: var(--text-3);
          font-size: 13px; font-weight: 500;
          border-radius: 8px;
          cursor: pointer; transition: all .15s;
        }
        .mkt-fbtn:hover { color: var(--text-2); background: var(--surface); }
        .mkt-fbtn.active { color: var(--text); background: var(--surface-2); border-color: var(--line-2); }
        .mkt-bar-right { display: flex; gap: 16px; align-items: center; }
        .mkt-select-wrap {
          display: flex; align-items: center; gap: 8px;
          padding: 7px 12px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 8px;
        }
        .mkt-select {
          background: transparent; border: none; color: var(--text);
          font-family: var(--sans); font-size: 13px; cursor: pointer; outline: none;
          appearance: none; padding-right: 4px;
        }
        .mkt-select option { background: var(--surface); }
        .mkt-view-toggle {
          display: flex;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 2px;
        }
        .mkt-vbtn {
          padding: 6px 10px;
          background: transparent; border: none;
          color: var(--text-3);
          border-radius: 6px;
          cursor: pointer;
        }
        .mkt-vbtn.active { background: var(--surface-3); color: var(--text); }

        .opps-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 1100px) { .opps-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 720px) { .opps-grid { grid-template-columns: 1fr; } }
      `}</style>
    </div>
  );
}

function OppCard({ opp, onSelect }) {
  const { t, lang } = useT();
  const pct = Math.round((opp.raised / opp.total) * 100);
  const yieldDisplay = opp.yield != null ? `${opp.yield.toFixed(1)}%` : opp.yieldRange;

  return (
    <div className="opp-card" onClick={() => onSelect(opp.id)}>
      <div className="opp-card-head">
        <TypeBadge type={opp.type} />
        <RatingBadge rating={opp.rating} />
      </div>
      <div className="opp-card-id">{opp.id}</div>
      <div className="opp-issuer">{opp.issuer}</div>
      <div className="opp-sector">{opp.sector[lang]}</div>
      <p className="opp-desc">{opp.desc[lang]}</p>

      <div className="opp-metrics">
        <div className="opp-metric">
          <div className="opp-metric-l">{t('mkt_yield')}</div>
          <div className="opp-metric-v num" style={{ color: 'var(--emerald-2)' }}>{yieldDisplay}</div>
        </div>
        <div className="opp-metric">
          <div className="opp-metric-l">{t('mkt_term')}</div>
          <div className="opp-metric-v num">{termLabel(opp, t)}</div>
        </div>
      </div>

      <div className="opp-progress-wrap">
        <div className="opp-progress-meta">
          <span className="num">{fmtEUR(opp.raised)} {t('mkt_funded')}</span>
          <span className="num" style={{ color: 'var(--emerald-2)' }}>{pct}%</span>
        </div>
        <div className="progress"><div className="progress-fill" style={{ width: `${pct}%` }} /></div>
        <div className="opp-progress-foot">
          <span style={{ color: 'var(--text-3)' }}>{t('mkt_min')}: <span className="num" style={{ color: 'var(--text-2)' }}>{fmtEUR(opp.min)}</span></span>
          <RiskPill risk={opp.risk} />
        </div>
      </div>

      <div className="opp-card-foot">
        <span className="opp-view-link">
          {t('mkt_view_btn')}
          <Icon name="arrow-right" size={12} />
        </span>
      </div>

      <style>{`
        .opp-card {
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--r-lg);
          padding: 22px;
          cursor: pointer;
          transition: border-color .2s, transform .2s, background .2s;
          position: relative;
          display: flex; flex-direction: column; gap: 14px;
          overflow: hidden;
        }
        .opp-card::before {
          content: '';
          position: absolute; top: 0; left: 0; right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--emerald), transparent);
          opacity: 0;
          transition: opacity .25s;
        }
        .opp-card:hover {
          border-color: var(--line-3);
          background: var(--surface-2);
          transform: translateY(-1px);
        }
        .opp-card:hover::before { opacity: 0.6; }
        .opp-card-head { display: flex; justify-content: space-between; align-items: center; }
        .opp-card-id {
          font-family: var(--mono);
          font-size: 11px;
          color: var(--text-4);
          letter-spacing: 0.02em;
          margin-top: -8px;
        }
        .opp-issuer {
          font-family: var(--serif);
          font-size: 22px;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-top: -10px;
        }
        .opp-sector {
          font-size: 12px;
          color: var(--text-3);
          margin-top: -10px;
        }
        .opp-desc {
          font-size: 13px;
          color: var(--text-2);
          line-height: 1.55;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .opp-metrics {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          padding: 14px 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .opp-metric-l { font-size: 11px; color: var(--text-3); margin-bottom: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
        .opp-metric-v { font-size: 18px; font-weight: 500; }
        .opp-progress-wrap { display: flex; flex-direction: column; gap: 8px; }
        .opp-progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
        .opp-progress-foot { display: flex; justify-content: space-between; font-size: 12px; }
        .opp-card-foot { display: flex; align-items: center; }
        .opp-view-link {
          font-size: 12px; font-weight: 500;
          color: var(--emerald-2);
          display: flex; align-items: center; gap: 6px;
        }
      `}</style>
    </div>
  );
}

function OppTable({ opps, onSelect }) {
  const { t, lang } = useT();
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div className="opp-tbl">
        <div className="opp-tbl-head">
          <div>Emisor / ID</div>
          <div>Tipo</div>
          <div className="r">{t('mkt_yield')}</div>
          <div className="r">{t('mkt_term')}</div>
          <div className="r">{t('mkt_min')}</div>
          <div className="r">{t('mkt_risk')}</div>
          <div>Progreso</div>
          <div></div>
        </div>
        {opps.map(o => {
          const pct = Math.round((o.raised / o.total) * 100);
          const yd = o.yield != null ? `${o.yield.toFixed(1)}%` : o.yieldRange;
          return (
            <div key={o.id} className="opp-tbl-row" onClick={() => onSelect(o.id)}>
              <div>
                <div style={{ fontWeight: 500 }}>{o.issuer}</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--text-4)' }}>{o.id}</div>
              </div>
              <div><TypeBadge type={o.type} /></div>
              <div className="r num" style={{ color: 'var(--emerald-2)' }}>{yd}</div>
              <div className="r num">{termLabel(o, t)}</div>
              <div className="r num">{fmtEUR(o.min)}</div>
              <div className="r"><RatingBadge rating={o.rating} /></div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="progress" style={{ flex: 1 }}><div className="progress-fill" style={{ width: `${pct}%` }} /></div>
                  <span className="num" style={{ fontSize: 11, color: 'var(--text-2)' }}>{pct}%</span>
                </div>
              </div>
              <div className="r"><Icon name="arrow-right" size={14} color="var(--text-3)" /></div>
            </div>
          );
        })}
      </div>
      <style>{`
        .opp-tbl-head, .opp-tbl-row {
          display: grid;
          grid-template-columns: 2fr 1fr 0.7fr 0.8fr 0.8fr 0.7fr 1.4fr 0.3fr;
          gap: 14px;
          padding: 14px 22px;
          align-items: center;
        }
        .opp-tbl-head {
          font-size: 11px;
          color: var(--text-3);
          letter-spacing: 0.08em;
          text-transform: uppercase;
          border-bottom: 1px solid var(--line);
        }
        .opp-tbl-row {
          font-size: 13px;
          border-bottom: 1px solid var(--line);
          cursor: pointer;
          transition: background .15s;
        }
        .opp-tbl-row:last-child { border-bottom: none; }
        .opp-tbl-row:hover { background: var(--surface-2); }
        .opp-tbl-head .r, .opp-tbl-row .r { text-align: right; }
      `}</style>
    </div>
  );
}

window.Marketplace = Marketplace;