/* global React, Icon, WaveBars, AILabel, AlbumCover, LANGS */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------- Shared catalog (used by search, trending, saved) ----------
const CATALOG = [
{ id: 'cassette-light', t: 'Cassette Light', a: 'Vela Maren', g: 'Indie pop', lang: 'EN', seed: 0, slug: 'vela-maren/cassette-light-meaning', hot: true, excerpt: 'Static is just love that didn\'t make it home' },
{ id: 'halo-driver', t: 'Halo Driver', a: 'Kestral', g: 'Synthwave', lang: 'EN', seed: 1, slug: 'kestral/halo-driver-meaning', hot: true, excerpt: 'Headlights argue with the rain' },
{ id: 'bintang-pulang', t: 'Bintang Pulang', a: 'Hara Mei', g: 'Indo R&B', lang: 'ID', seed: 2, slug: 'hara-mei/bintang-pulang-meaning', hot: true, excerpt: 'Pulang itu cuma arah, bukan tempat' },
{ id: 'glass-animal', t: 'Glass Animal', a: 'Mott Sun', g: 'Bedroom pop', lang: 'EN', seed: 3, slug: 'mott-sun/glass-animal-meaning', hot: true, excerpt: 'I am a window someone keeps forgetting' },
{ id: 'slow-tide', t: 'Slow Tide', a: 'Nori', g: 'Ambient pop', lang: 'EN', seed: 4, slug: 'nori/slow-tide-meaning', hot: false, excerpt: 'The sea was never in a hurry to want me' },
{ id: 'hotel-mileage', t: 'Hotel Mileage', a: 'June & Olive', g: 'Folk', lang: 'EN', seed: 5, slug: 'june-olive/hotel-mileage-meaning', hot: true, excerpt: 'We counted floors like they meant something' },
{ id: 'telegrama', t: 'Telegrama', a: 'Lía Vera', g: 'Latin alt', lang: 'ES', seed: 6, slug: 'lia-vera/telegrama-meaning', hot: false, excerpt: 'Te escribo en clave de no volver' },
{ id: 'quiet-room', t: 'Quiet Room', a: 'The Soft Coast', g: 'Dream pop', lang: 'EN', seed: 7, slug: 'the-soft-coast/quiet-room-meaning', hot: true, excerpt: 'I rented silence by the hour' },
{ id: 'august-letter', t: 'August Was a Letter', a: 'Vela Maren', g: 'Indie pop', lang: 'EN', seed: 5, slug: 'vela-maren/august-was-a-letter-meaning', hot: false, excerpt: 'I read the weather like it answered me' },
{ id: 'linoleum-bloom', t: 'Linoleum Bloom', a: 'Vela Maren', g: 'Indie pop', lang: 'EN', seed: 6, slug: 'vela-maren/linoleum-bloom-meaning', hot: false, excerpt: 'Kitchen light makes saints of anyone' },
{ id: 'indoor-weather', t: 'Indoor Weather', a: 'Vela Maren', g: 'Indie pop', lang: 'EN', seed: 3, slug: 'vela-maren/indoor-weather-meaning', hot: false, excerpt: 'The forecast on our ceiling said maybe' },
{ id: 'sayap-pagi', t: 'Sayap Pagi', a: 'Anjali Putri', g: 'Indo folk', lang: 'ID', seed: 2, slug: 'anjali-putri/sayap-pagi-meaning', hot: false, excerpt: 'Pagi ini pun masih berani jadi pagi' },
{ id: 'medianoche-club', t: 'Medianoche Club', a: 'Río Sastre', g: 'Latin pop', lang: 'ES', seed: 6, slug: 'rio-sastre/medianoche-club-meaning', hot: true, excerpt: 'Bailamos como si el reloj nos debiera algo' },
{ id: 'paper-radio', t: 'Paper Radio', a: 'Albatross Phone', g: 'Indie rock', lang: 'EN', seed: 4, slug: 'albatross-phone/paper-radio-meaning', hot: false, excerpt: 'Tune the static, kiss the noise goodnight' },
];
const TRENDING_SEARCHES = [
'cassette light meaning',
'arti lirik bintang pulang',
'medianoche club significado',
'halo driver meaning',
'"we ran out of summer"',
];
// ---------- Search combobox (typeahead) ----------
function SearchCombobox({ size = 'md', placeholder, autoFocus = false }) {
const [q, setQ] = useState('');
const [open, setOpen] = useState(false);
const [cursor, setCursor] = useState(-1);
const [mode, setMode] = useState('auto'); // auto | song | lyric
const inputRef = useRef(null);
const rootRef = useRef(null);
// Recent searches (localStorage)
const [recent, setRecent] = useState(() => {
try { return JSON.parse(localStorage.getItem('lyr:recent') || '[]'); } catch { return []; }
});
const pushRecent = (s) => {
if (!s.trim()) return;
const next = [s, ...recent.filter(x => x.toLowerCase() !== s.toLowerCase())].slice(0, 6);
setRecent(next);
try { localStorage.setItem('lyr:recent', JSON.stringify(next)); } catch {}
};
// Detect mode (lyric mode if 4+ words or contains quotes/punctuation suggesting a snippet)
const detectedMode = useMemo(() => {
if (mode !== 'auto') return mode;
const trimmed = q.trim();
if (!trimmed) return 'song';
if (/["']/.test(trimmed)) return 'lyric';
const words = trimmed.split(/\s+/).filter(Boolean);
if (words.length >= 5) return 'lyric';
return 'song';
}, [q, mode]);
// Suggestions
const suggestions = useMemo(() => {
const term = q.trim().toLowerCase();
if (!term) return [];
const isLyric = detectedMode === 'lyric';
return CATALOG
.map(s => {
let score = 0;
const hay = `${s.t} ${s.a}`.toLowerCase();
if (hay.startsWith(term)) score += 6;
if (s.t.toLowerCase().includes(term)) score += 4;
if (s.a.toLowerCase().includes(term)) score += 3;
if (isLyric && s.excerpt.toLowerCase().includes(term)) score += 5;
else if (s.excerpt.toLowerCase().includes(term)) score += 2;
return { s, score };
})
.filter(x => x.score > 0)
.sort((a, b) => b.score - a.score)
.slice(0, 6)
.map(x => x.s);
}, [q, detectedMode]);
useEffect(() => {
const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, []);
// ⌘K / Ctrl+K to focus
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
e.preventDefault();
inputRef.current?.focus();
setOpen(true);
} else if (e.key === 'Escape' && open) {
setOpen(false);
inputRef.current?.blur();
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
// Keyboard nav within listbox
const items = q.trim() ? suggestions : null;
const onKeyDown = (e) => {
if (!open) setOpen(true);
if (e.key === 'ArrowDown') {
e.preventDefault();
const max = (items ? items.length : (TRENDING_SEARCHES.length + recent.length)) - 1;
setCursor(c => Math.min(c + 1, max));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setCursor(c => Math.max(c - 1, -1));
} else if (e.key === 'Enter') {
e.preventDefault();
if (items && items[cursor]) {
go(items[cursor]);
} else if (q.trim()) {
pushRecent(q.trim());
// Fall back: go to first match if any, else stay
if (suggestions[0]) go(suggestions[0]);
}
}
};
const go = (song) => {
pushRecent(`${song.t} — ${song.a}`);
window.location.hash = `#/song/${song.slug}`;
setOpen(false);
setQ('');
};
const sizing = size === 'lg'
? { wrap: 'rounded-2xl', input: 'text-[17px] md:text-xl py-3 md:py-4', icon: 'w-5 h-5 md:w-6 md:h-6', pad: 'pl-4 md:pl-5 pr-2 py-2', cta: 'h-11 md:h-12 px-4 md:px-5 text-sm md:text-base' }
: { wrap: 'rounded-full', input: 'text-sm py-0', icon: 'w-4 h-4', pad: 'pl-3.5 pr-2 h-10', cta: 'h-8 px-3 text-xs' };
return (
{open && (
{!q.trim() ? (
{recent.length > 0 && (
Recent
{recent.map((r, i) => (
))}
)}
Trending searches
{TRENDING_SEARCHES.map((s, i) => {
const idx = recent.length + i;
return (
);
})}
Tip: paste a line from the song
↵
to open
) : (
{detectedMode === 'lyric' ? 'Matches by lyric' : 'Matches by song'}
{suggestions.length === 0 && (
No matches yet for "{q}". Try a different line or a partial title.
)}
{suggestions.map((s, i) => (
))}
)}
)}
);
}
function highlight(text, q) {
const term = q.trim();
if (!term) return text;
const idx = text.toLowerCase().indexOf(term.toLowerCase());
if (idx === -1) return text;
return (
<>
{text.slice(0, idx)}
{text.slice(idx, idx + term.length)}
{text.slice(idx + term.length)}
);
}
// ---------- Depth toggle ----------
function DepthToggle({ value = 'quick', onChange = () => {}, size = 'md', lang }) {
const code = lang || (typeof localStorage !== 'undefined' && localStorage.getItem('lyr:lang')) || 'EN';
const opts = [
{ v: 'quick', label: window.t('common.quick', code) },
{ v: 'deep', label: window.t('common.deep', code) },
];
const h = size === 'sm' ? 'h-8' : 'h-9';
const t = size === 'sm' ? 'text-xs' : 'text-sm';
return (
{opts.map(o => (
))}
);
}
// ---------- Feedback bar (thumbs + suggest + report) ----------
function FeedbackBar({ id, lang = 'EN' }) {
const [vote, setVote] = useState(null); // 'up' | 'down' | null
const [openSuggest, setOpenSuggest] = useState(false);
const [suggestion, setSuggestion] = useState('');
const [reported, setReported] = useState(false);
const [submitted, setSubmitted] = useState(false);
useEffect(() => { setVote(null); setOpenSuggest(false); setSuggestion(''); setReported(false); setSubmitted(false); }, [id]);
return (
{window.t('feedback.helpful', lang)}
{(vote === 'down' && !openSuggest && !submitted) && (
{window.t('feedback.thanksDown', lang)}
)}
{(vote === 'up' && !openSuggest && !submitted) && (
{window.t('feedback.thanksUp', lang)}
)}
{reported && (
{window.t('feedback.reported', lang)}
)}
{openSuggest && !submitted && (