/* global React, ReactDOM, NOBBYO_ICONS, NOBBYO_DATA, PageHeader, PageTopBar, PageFooter, usePageLang */
const { useState, useMemo, useEffect } = React;
const I = window.NOBBYO_ICONS;

// =================== JOB DATA ===================
const ALL_JOBS = [
  { id:1, title:{bn:'সিনিয়র প্রোডাক্ট ডিজাইনার', en:'Senior Product Designer'}, co:'Pathao', logo:'P', logoBg:'#E81E2C', loc:'ঢাকা · বনানী', locEn:'Dhaka · Banani', area:'dhaka', remote:'hybrid', type:'full-time', exp:'senior', salary:'১.২–১.৮ লাখ', salaryNum:140, posted:'২ ঘন্টা', postedEn:'2h ago', tags:['Figma','Design Systems','Mobile'], match:96, applicants:43, urgent:true, verified:true, featured:true },
  { id:2, title:{bn:'ফ্রন্টএন্ড ডেভেলপার (React)', en:'Frontend Developer (React)'}, co:'bKash', logo:'b', logoBg:'#E2126B', loc:'ঢাকা · গুলশান', locEn:'Dhaka · Gulshan', area:'dhaka', remote:'onsite', type:'full-time', exp:'mid', salary:'৮০k–১.২ লাখ', salaryNum:100, posted:'৪ ঘন্টা', postedEn:'4h ago', tags:['React','TypeScript','Next.js'], match:91, applicants:127, verified:true, featured:true },
  { id:3, title:{bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist'}, co:'Brac Bank', logo:'BB', logoBg:'#003E70', loc:'ঢাকা · মতিঝিল', locEn:'Dhaka · Motijheel', area:'dhaka', remote:'onsite', type:'full-time', exp:'senior', salary:'১.৪–২.২ লাখ', salaryNum:180, posted:'১ দিন', postedEn:'1d ago', tags:['Python','ML','SQL'], match:88, applicants:89, verified:true },
  { id:4, title:{bn:'UX রিসার্চার', en:'UX Researcher'}, co:'Grameenphone', logo:'g', logoBg:'#0066B2', loc:'ঢাকা · বসুন্ধরা', locEn:'Dhaka · Bashundhara', area:'dhaka', remote:'hybrid', type:'full-time', exp:'mid', salary:'৭০k–১ লাখ', salaryNum:85, posted:'৬ ঘন্টা', postedEn:'6h ago', tags:['Research','Interviews','Analytics'], match:82, applicants:34, verified:true },
  { id:5, title:{bn:'মোবাইল অ্যাপ ডেভেলপার (Flutter)', en:'Mobile App Developer (Flutter)'}, co:'Chaldal', logo:'C', logoBg:'#10B981', loc:'ঢাকা · ধানমন্ডি', locEn:'Dhaka · Dhanmondi', area:'dhaka', remote:'remote', type:'full-time', exp:'mid', salary:'৬০k–৯০k', salaryNum:75, posted:'৩ দিন', postedEn:'3d ago', tags:['Flutter','Firebase','iOS'], match:79, applicants:201, verified:true },
  { id:6, title:{bn:'ব্যাকএন্ড ইঞ্জিনিয়ার (Node.js)', en:'Backend Engineer (Node.js)'}, co:'ShopUp', logo:'S', logoBg:'#F59E0B', loc:'ঢাকা · উত্তরা', locEn:'Dhaka · Uttara', area:'dhaka', remote:'remote', type:'full-time', exp:'senior', salary:'১.৩–২ লাখ', salaryNum:165, posted:'৫ ঘন্টা', postedEn:'5h ago', tags:['Node.js','PostgreSQL','AWS'], match:93, applicants:78, urgent:true, verified:true },
  { id:7, title:{bn:'ডিজিটাল মার্কেটিং ম্যানেজার', en:'Digital Marketing Manager'}, co:'Daraz BD', logo:'D', logoBg:'#F85606', loc:'ঢাকা · তেজগাঁও', locEn:'Dhaka · Tejgaon', area:'dhaka', remote:'onsite', type:'full-time', exp:'mid', salary:'৬৫k–৯৫k', salaryNum:80, posted:'২ দিন', postedEn:'2d ago', tags:['SEO','Meta Ads','Analytics'], match:74, applicants:312, verified:true },
  { id:8, title:{bn:'কন্টেন্ট রাইটার (বাংলা)', en:'Content Writer (Bangla)'}, co:'Robi Axiata', logo:'R', logoBg:'#E60028', loc:'ঢাকা · গুলশান', locEn:'Dhaka · Gulshan', area:'dhaka', remote:'hybrid', type:'full-time', exp:'junior', salary:'৩৫k–৫০k', salaryNum:42, posted:'১ দিন', postedEn:'1d ago', tags:['Writing','SEO','Bangla'], match:71, applicants:445, verified:true },
  { id:9, title:{bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer'}, co:'10 Minute School', logo:'10', logoBg:'#FB923C', loc:'রিমোট', locEn:'Remote', area:'remote', remote:'remote', type:'full-time', exp:'senior', salary:'১.৫–২.২ লাখ', salaryNum:185, posted:'৮ ঘন্টা', postedEn:'8h ago', tags:['AWS','Docker','K8s'], match:90, applicants:56, verified:true },
  { id:10, title:{bn:'প্রোডাক্ট ম্যানেজার', en:'Product Manager'}, co:'Foodi', logo:'F', logoBg:'#7E5E9F', loc:'চট্টগ্রাম · আগ্রাবাদ', locEn:'Chattogram · Agrabad', area:'chattogram', remote:'onsite', type:'full-time', exp:'senior', salary:'১.১–১.৬ লাখ', salaryNum:135, posted:'১ সপ্তাহ', postedEn:'1w ago', tags:['B2C','Roadmap','Analytics'], match:85, applicants:163, verified:true },
  { id:11, title:{bn:'গ্রাফিক ডিজাইনার', en:'Graphic Designer'}, co:'Kazi Farms', logo:'K', logoBg:'#0A6B3F', loc:'ঢাকা · বনানী', locEn:'Dhaka · Banani', area:'dhaka', remote:'onsite', type:'full-time', exp:'junior', salary:'৩০k–৪৫k', salaryNum:38, posted:'৩ দিন', postedEn:'3d ago', tags:['Photoshop','Illustrator','Branding'], match:68, applicants:589, verified:true },
  { id:12, title:{bn:'HR বিজনেস পার্টনার', en:'HR Business Partner'}, co:'IPDC Finance', logo:'I', logoBg:'#1B4789', loc:'ঢাকা · গুলশান', locEn:'Dhaka · Gulshan', area:'dhaka', remote:'hybrid', type:'full-time', exp:'mid', salary:'৭৫k–১.১ লাখ', salaryNum:93, posted:'৪ দিন', postedEn:'4d ago', tags:['Recruiting','L&D','Compensation'], match:76, applicants:124, verified:true },
];

const AREAS = [
  {id:'all', bn:'সব এলাকা', en:'All Areas'},
  {id:'dhaka', bn:'ঢাকা', en:'Dhaka'},
  {id:'chattogram', bn:'চট্টগ্রাম', en:'Chattogram'},
  {id:'sylhet', bn:'সিলেট', en:'Sylhet'},
  {id:'rajshahi', bn:'রাজশাহী', en:'Rajshahi'},
  {id:'remote', bn:'রিমোট', en:'Remote'},
];

const EXP_LEVELS = [
  {id:'all', bn:'সব', en:'All'},
  {id:'junior', bn:'জুনিয়র (০-২ বছর)', en:'Junior (0-2y)'},
  {id:'mid', bn:'মিড (২-৫ বছর)', en:'Mid (2-5y)'},
  {id:'senior', bn:'সিনিয়র (৫+ বছর)', en:'Senior (5+y)'},
];

const REMOTE_OPTS = [
  {id:'all', bn:'সব', en:'All'},
  {id:'onsite', bn:'অফিস', en:'On-site'},
  {id:'hybrid', bn:'হাইব্রিড', en:'Hybrid'},
  {id:'remote', bn:'রিমোট', en:'Remote'},
];

const TYPE_OPTS = [
  {id:'all', bn:'সব', en:'All'},
  {id:'full-time', bn:'ফুল-টাইম', en:'Full-time'},
  {id:'part-time', bn:'পার্ট-টাইম', en:'Part-time'},
  {id:'contract', bn:'কন্ট্রাক্ট', en:'Contract'},
  {id:'internship', bn:'ইন্টার্নশিপ', en:'Internship'},
];

// =================== SEARCH HEADER ===================
function SearchHero({ q, setQ, loc, setLoc, lang }) {
  const [matchPulse, setMatchPulse] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setMatchPulse(p => p + 1), 2400);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="srch-hero">
      <div className="srch-hero-bg" aria-hidden="true">
        <div className="srch-blob srch-blob-1"></div>
        <div className="srch-blob srch-blob-2"></div>
        <div className="srch-grid"></div>
      </div>
      <div className="container srch-hero-inner">
        <div className="srch-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">৪২,০০০+ লাইভ চাকরি · এই মুহূর্তে</span>
          <span className="t-en">42,000+ live jobs · right now</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">আপনার পরবর্তী চাকরি <em key={matchPulse} className="srch-rotate">খুঁজে নিন</em></span>
          <span className="t-en">Find your next <em key={matchPulse} className="srch-rotate">role</em></span>
        </h1>
        <div className="srch-bar">
          <div className="srch-bar-field">
            <span className="srch-bar-icon">{I.search}</span>
            <input
              value={q}
              onChange={(e)=>setQ(e.target.value)}
              placeholder={lang==='bn'?'টাইটেল, কোম্পানি বা স্কিল...':'Title, company, or skill...'}
            />
          </div>
          <div className="srch-bar-divider"></div>
          <div className="srch-bar-field">
            <span className="srch-bar-icon">{I.pin}</span>
            <input
              value={loc}
              onChange={(e)=>setLoc(e.target.value)}
              placeholder={lang==='bn'?'ঢাকা, চট্টগ্রাম, রিমোট...':'Dhaka, Chattogram, Remote...'}
            />
          </div>
          <button className="srch-bar-btn">
            <span className="t-bn">খুঁজুন</span>
            <span className="t-en">Search</span>
            {I.arrowRight}
          </button>
        </div>
        <div className="srch-quick">
          <span className="srch-quick-label">
            <span className="t-bn">দ্রুত:</span>
            <span className="t-en">Try:</span>
          </span>
          {['React Developer', 'Product Designer', 'বাংলা কন্টেন্ট', 'রিমোট', '২ লাখ+'].map((p,i) => (
            <button key={i} className="srch-quick-chip" onClick={()=>setQ(p)}>{p}</button>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== FILTERS SIDEBAR ===================
function Filters({ filters, setFilters, lang, count }) {
  const update = (k, v) => setFilters(prev => ({ ...prev, [k]: v }));
  const reset = () => setFilters({ area:'all', exp:'all', remote:'all', type:'all', salary:0, sort:'match' });
  return (
    <aside className="srch-filters">
      <div className="srch-filters-head">
        <div>
          <div className="srch-filters-title">
            <span className="t-bn">ফিল্টার</span>
            <span className="t-en">Filters</span>
          </div>
          <div className="srch-filters-count">
            <strong>{count}</strong>
            <span className="t-bn">টি চাকরি</span>
            <span className="t-en">jobs</span>
          </div>
        </div>
        <button className="srch-filters-reset" onClick={reset}>
          <span className="t-bn">রিসেট</span>
          <span className="t-en">Reset</span>
        </button>
      </div>

      <FilterGroup
        label={lang==='bn'?'এলাকা':'Area'}
        opts={AREAS}
        value={filters.area}
        onChange={v=>update('area',v)}
        lang={lang}
      />
      <FilterGroup
        label={lang==='bn'?'অভিজ্ঞতা':'Experience'}
        opts={EXP_LEVELS}
        value={filters.exp}
        onChange={v=>update('exp',v)}
        lang={lang}
      />
      <FilterGroup
        label={lang==='bn'?'কর্মপদ্ধতি':'Work mode'}
        opts={REMOTE_OPTS}
        value={filters.remote}
        onChange={v=>update('remote',v)}
        lang={lang}
      />
      <FilterGroup
        label={lang==='bn'?'কর্মের ধরন':'Job type'}
        opts={TYPE_OPTS}
        value={filters.type}
        onChange={v=>update('type',v)}
        lang={lang}
      />

      {/* Salary slider */}
      <div className="srch-fg">
        <div className="srch-fg-label">
          <span className="t-bn">সর্বনিম্ন বেতন (মাসিক)</span>
          <span className="t-en">Min salary (monthly)</span>
        </div>
        <div className="srch-salary-display">
          <span className="srch-salary-num">৳ {filters.salary === 0 ? '0' : (filters.salary >= 100 ? `${(filters.salary/100).toFixed(1)} লাখ+` : `${filters.salary}k+`)}</span>
        </div>
        <input
          type="range"
          min="0" max="200" step="10"
          value={filters.salary}
          onChange={e=>update('salary', parseInt(e.target.value))}
          className="srch-salary-slider"
        />
        <div className="srch-salary-marks">
          <span>৳0</span><span>৫০k</span><span>১ লাখ</span><span>১.৫ লাখ</span><span>২ লাখ+</span>
        </div>
      </div>

      {/* AI assist banner */}
      <div className="srch-ai-card">
        <div className="srch-ai-spark">{I.spark}</div>
        <div className="srch-ai-text">
          <div className="srch-ai-title">
            <span className="t-bn">AI ম্যাচ অন</span>
            <span className="t-en">AI Match on</span>
          </div>
          <div className="srch-ai-sub">
            <span className="t-bn">আপনার CV অনুযায়ী র‍্যাঙ্কিং</span>
            <span className="t-en">Ranked from your CV</span>
          </div>
        </div>
        <label className="srch-ai-toggle">
          <input type="checkbox" defaultChecked />
          <span></span>
        </label>
      </div>
    </aside>
  );
}

function FilterGroup({ label, opts, value, onChange, lang }) {
  return (
    <div className="srch-fg">
      <div className="srch-fg-label">{label}</div>
      <div className="srch-fg-opts">
        {opts.map(o => (
          <button
            key={o.id}
            className={'srch-fg-opt' + (value === o.id ? ' is-on' : '')}
            onClick={() => onChange(o.id)}
          >
            {o[lang]}
          </button>
        ))}
      </div>
    </div>
  );
}

// =================== JOB CARD ===================
function JobCard({ job, lang, saved, onSave, onClick }) {
  return (
    <article className={'srch-card' + (job.featured ? ' is-featured' : '')} onClick={onClick}>
      {job.featured && <div className="srch-card-rib"><span>{I.flame} {lang==='bn'?'ফিচার্ড':'Featured'}</span></div>}
      <div className="srch-card-top">
        <div className="srch-card-logo" style={{background: job.logoBg}}>{job.logo}</div>
        <div className="srch-card-meta">
          <div className="srch-card-co">
            {job.co}
            {job.verified && <span className="srch-card-verified" title="Verified">{I.check}</span>}
          </div>
          <div className="srch-card-loc">
            {I.pin}
            <span className="t-bn">{job.loc}</span>
            <span className="t-en">{job.locEn}</span>
          </div>
        </div>
        <div className="srch-card-actions">
          <div className="srch-card-match" data-tier={job.match >= 90 ? 'high' : job.match >= 80 ? 'mid' : 'low'}>
            <span className="srch-card-match-num">{job.match}%</span>
            <span className="srch-card-match-label">match</span>
          </div>
          <button
            className={'srch-card-save' + (saved ? ' is-saved' : '')}
            onClick={(e) => { e.stopPropagation(); onSave(); }}
            aria-label="Save"
          >
            {saved ? I.bookmarkFilled : I.bookmark}
          </button>
        </div>
      </div>
      <h3 className="srch-card-title">
        <span className="t-bn">{job.title.bn}</span>
        <span className="t-en">{job.title.en}</span>
        {job.urgent && <span className="srch-card-urgent">URGENT</span>}
      </h3>
      <div className="srch-card-tags">
        {job.tags.map((t,i) => <span key={i} className="srch-card-tag">{t}</span>)}
      </div>
      <div className="srch-card-bottom">
        <div className="srch-card-salary">
          <span className="srch-card-salary-cur">৳</span>
          <span className="srch-card-salary-num">{job.salary}</span>
          <span className="srch-card-salary-per">
            <span className="t-bn">/মাস</span>
            <span className="t-en">/mo</span>
          </span>
        </div>
        <div className="srch-card-foot-meta">
          <span className="srch-card-time">
            {I.clock}
            <span className="t-bn">{job.posted}</span>
            <span className="t-en">{job.postedEn}</span>
          </span>
          <span className="srch-card-app">
            {I.users}
            <span>{job.applicants}</span>
            <span className="t-bn">আবেদনকারী</span>
            <span className="t-en">applicants</span>
          </span>
          <span className="srch-card-mode" data-mode={job.remote}>
            {job.remote === 'remote' ? '🏠' : job.remote === 'hybrid' ? '⇄' : '🏢'}
            <span className="t-bn">{job.remote === 'remote' ? 'রিমোট' : job.remote === 'hybrid' ? 'হাইব্রিড' : 'অফিস'}</span>
            <span className="t-en">{job.remote === 'remote' ? 'Remote' : job.remote === 'hybrid' ? 'Hybrid' : 'On-site'}</span>
          </span>
        </div>
      </div>
    </article>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [q, setQ] = useState('');
  const [loc, setLoc] = useState('');
  const [filters, setFilters] = useState({ area:'all', exp:'all', remote:'all', type:'all', salary:0, sort:'match' });
  const [saved, setSaved] = useState(new Set([1, 6]));

  const filtered = useMemo(() => {
    let result = ALL_JOBS.filter(j => {
      if (q) {
        const ql = q.toLowerCase();
        const hit = j.title.bn.toLowerCase().includes(ql) || j.title.en.toLowerCase().includes(ql) ||
                    j.co.toLowerCase().includes(ql) || j.tags.some(t => t.toLowerCase().includes(ql));
        if (!hit) return false;
      }
      if (loc) {
        const ll = loc.toLowerCase();
        if (!j.loc.toLowerCase().includes(ll) && !j.locEn.toLowerCase().includes(ll)) return false;
      }
      if (filters.area !== 'all' && j.area !== filters.area) return false;
      if (filters.exp !== 'all' && j.exp !== filters.exp) return false;
      if (filters.remote !== 'all' && j.remote !== filters.remote) return false;
      if (filters.type !== 'all' && j.type !== filters.type) return false;
      if (filters.salary > 0 && j.salaryNum < filters.salary) return false;
      return true;
    });
    if (filters.sort === 'match') result.sort((a,b) => b.match - a.match);
    if (filters.sort === 'salary') result.sort((a,b) => b.salaryNum - a.salaryNum);
    if (filters.sort === 'recent') result.sort((a,b) => a.id - b.id);
    return result;
  }, [q, loc, filters]);

  const toggleSave = (id) => {
    setSaved(s => {
      const n = new Set(s);
      n.has(id) ? n.delete(id) : n.add(id);
      return n;
    });
  };

  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="jobs" />
      <SearchHero q={q} setQ={setQ} loc={loc} setLoc={setLoc} lang={lang} />

      <section className="srch-results">
        <div className="container srch-results-grid">
          <Filters filters={filters} setFilters={setFilters} lang={lang} count={filtered.length} />

          <main className="srch-main">
            <div className="srch-toolbar">
              <div className="srch-result-count">
                <strong>{filtered.length}</strong>
                <span className="t-bn">টি চাকরি পাওয়া গেছে</span>
                <span className="t-en">jobs found</span>
                {(q || loc || filters.area !== 'all') && (
                  <span className="srch-result-q">
                    {q && <span>· "{q}"</span>}
                    {loc && <span>· {loc}</span>}
                  </span>
                )}
              </div>
              <div className="srch-sort">
                <span className="srch-sort-label">
                  <span className="t-bn">সাজান:</span>
                  <span className="t-en">Sort by:</span>
                </span>
                <div className="srch-sort-pills">
                  {[
                    {id:'match', bn:'AI ম্যাচ', en:'AI Match'},
                    {id:'recent', bn:'সাম্প্রতিক', en:'Recent'},
                    {id:'salary', bn:'বেতন', en:'Salary'},
                  ].map(s => (
                    <button
                      key={s.id}
                      className={'srch-sort-pill' + (filters.sort === s.id ? ' is-on' : '')}
                      onClick={() => setFilters(f => ({...f, sort: s.id}))}
                    >
                      {s[lang]}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {filtered.length === 0 ? (
              <div className="srch-empty">
                <div className="srch-empty-icon">🔍</div>
                <div className="srch-empty-title">
                  <span className="t-bn">কিছু খুঁজে পাওয়া গেল না</span>
                  <span className="t-en">No matches yet</span>
                </div>
                <div className="srch-empty-sub">
                  <span className="t-bn">ফিল্টার রিসেট করুন বা কীওয়ার্ড পরিবর্তন করুন</span>
                  <span className="t-en">Try resetting filters or changing keywords</span>
                </div>
                <button className="btn btn-ink" onClick={() => { setQ(''); setLoc(''); setFilters({area:'all',exp:'all',remote:'all',type:'all',salary:0,sort:'match'}); }}>
                  <span className="t-bn">সব রিসেট করুন</span>
                  <span className="t-en">Reset all</span>
                </button>
              </div>
            ) : (
              <div className="srch-list">
                {filtered.map(j => (
                  <JobCard
                    key={j.id}
                    job={j}
                    lang={lang}
                    saved={saved.has(j.id)}
                    onSave={() => toggleSave(j.id)}
                    onClick={() => { window.location.href = 'job-detail.html?id=' + j.id; }}
                  />
                ))}
                <div className="srch-load-more">
                  <button className="btn btn-ghost btn-lg">
                    <span className="t-bn">আরো {Math.max(0, 42000 - filtered.length)} টি দেখুন</span>
                    <span className="t-en">Load {Math.max(0, 42000 - filtered.length)} more</span>
                  </button>
                </div>
              </div>
            )}
          </main>
        </div>
      </section>

      <PageFooter lang={lang} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);