app.js

/* JEE Mindmap - single page app (vanilla JS)
   - localStorage persistence
   - per-item date
   - customization stored in localStorage
   - export / import JSON
*/

const DATA_KEY = 'jee_mindmap_data_v1'
const THEME_KEY = 'jee_mindmap_theme_v1'

const initial = {
  subjects: {
    physics: {
      A:["Current Electricity","Electrostatics","Ray Optics","Magnetic Effects of Current","Thermodynamics","Dual Nature of Matter","Atomic Physics"],
      B:["Rotational Motion","Gravitation","Mechanical Properties of Fluids","Semiconductors","Work Power Energy","Units and Dimensions","Wave Optics","Laws of Motion","Motion In One Dimension"],
      C:["Alternating Current","Capacitance","Electromagnetic Induction","Nuclear Physics","Kinetic Theory of Gases","Oscillations","Electromagnetic Waves"],
      D:["Motion In Two Dimensions","Mechanical Properties of Solids","Waves and Sound","Mathematics in Physics","Center of Mass & Momentum","Thermal Properties of Matter","Magnetic Properties of Matter","Experimental Physics"]
    },
    chemistry: {
      A:["General Organic Chemistry","Coordination Compounds","Chemical Bonding","d and f Block Elements","Thermodynamics","Electrochemistry"],
      B:["Structure of Atom","Solutions","Hydrocarbons","Amines","p Block","Chemical Kinetics","Biomolecules"],
      C:["Mole Concept","Aldehydes and Ketones","Periodic Table","Haloalkanes and Haloarenes","Alcohols Phenols and Ethers"],
      D:["Ionic Equilibrium","Redox Reactions","Chemical Equilibrium","Practical Chemistry","Carboxylic Acid Derivatives"]
    },
    maths: {
      A:["Three-Dimensional Geometry","Sequences and Series","Matrices Determinants","Vector Algebra","Definite Integration","Functions","Binomial Theorem","Differential Equations"],
      B:["Probability","Permutation Combination","Straight Lines","Area Under Curves","Complex Number","Application of Derivatives","Sets and Relations","Quadratic Equation"],
      C:["Circle","Statistics","Limits","Parabola","Hyperbola","Continuity and Differentiability","Ellipse"],
      D:["Inverse Trigonometric Functions","Indefinite Integration","Trigonometric Equations","Differentiation","Trigonometric Ratios & Identities","Basics of Mathematics"]
    }
  }
}

// build runtime data with progress fields
function buildData(store){
  const out = {subjects:{}}
  Object.keys(store.subjects).forEach(sub=>{
    out.subjects[sub] = []
    Object.keys(store.subjects[sub]).forEach(pr=>{
      store.subjects[sub][pr].forEach((title, idx)=>{
        out.subjects[sub].push({
          id:`${sub}_${pr}_${idx}`,
          title, priority:pr, done:false, date:null
        })
      })
    })
  })
  return out
}

let data = loadData()
let theme = loadTheme()
let current = 'physics'

function loadData(){
  try{
    const raw = localStorage.getItem(DATA_KEY)
    if(raw) return JSON.parse(raw)
  }catch(e){}
  const built = buildData(initial)
  saveData(built)
  return built
}
function saveData(d){ localStorage.setItem(DATA_KEY, JSON.stringify(d)) }

function loadTheme(){
  try{
    const raw = localStorage.getItem(THEME_KEY)
    if(raw) return JSON.parse(raw)
  }catch(e){}
  const defaultTheme = {accent:'#ff8a65',accent2:'#8bc34a',accent3:'#4fc3f7',radius:12,fontsize:16}
  localStorage.setItem(THEME_KEY, JSON.stringify(defaultTheme))
  return defaultTheme
}
function saveTheme(t){ localStorage.setItem(THEME_KEY, JSON.stringify(t)) }

function $(sel){ return document.querySelector(sel) }
function $all(sel){ return Array.from(document.querySelectorAll(sel)) }

function slug(s){ return s.toLowerCase().replace(/[^a-z0-9]+/g,'-') }

// render functions
function renderCards(){
  const container = $('#cards'); container.innerHTML=''
  const priorities = ['A','B','C','D']
  priorities.forEach(p=>{
    const card = document.createElement('div'); card.className='priority-card'
    const h = document.createElement('div'); h.className='priority-title'; h.innerText = `Priority ${p}`
    // accent color
    if(current==='chemistry') h.style.color = theme.accent2
    else if(current==='maths') h.style.color = theme.accent3
    else h.style.color = theme.accent
    card.appendChild(h)
    const list = document.createElement('div'); list.className='list'
    const items = data.subjects[current].filter(i=>i.priority===p)
    items.forEach(it=>{
      const row = document.createElement('label'); row.className='item'
      const cb = document.createElement('input'); cb.type='checkbox'; cb.checked = it.done
      cb.addEventListener('change', ()=>{ it.done = cb.checked; saveData(data); updateOverview() })
      const span = document.createElement('span'); span.innerText = it.title; span.style.fontSize = theme.fontsize + 'px'
      const meta = document.createElement('div'); meta.className='meta'
      const datediv = document.createElement('div'); datediv.className='date'; datediv.id = `date-${it.id}`; datediv.innerText = it.date ? formatDate(it.date) : ''
      datediv.title = 'Click to set due date'
      datediv.addEventListener('click', ()=>{
        const d = prompt('Enter due date (YYYY-MM-DD) or blank to clear', it.date || '')
        if(d===null) return
        it.date = d || null
        datediv.innerText = it.date?formatDate(it.date):''
        saveData(data); updateOverview()
      })
      meta.appendChild(datediv)
      row.appendChild(cb); row.appendChild(span); row.appendChild(meta)
      list.appendChild(row)
    })
    card.appendChild(list)
    container.appendChild(card)
  })
  applyThemeToDOM()
}

function formatDate(d){
  try{ return new Date(d).toLocaleDateString() }catch(e){ return d }
}

function updateOverview(){
  const subj = data.subjects[current]
  const total = subj.length, done = subj.filter(x=>x.done).length, dated = subj.filter(x=>x.date).length
  $('#overviewText').innerText = `Total: ${total}\nCompleted: ${done}\nWith due date: ${dated}`
}

// tabs
$all('.tab').forEach(t=>{
  t.addEventListener('click', ()=>{
    $all('.tab').forEach(x=>x.classList.remove('active'))
    t.classList.add('active')
    current = t.dataset.sub
    renderCards(); updateOverview()
  })
})

// search
$('#search').addEventListener('input', e=>{
  const q = e.target.value.toLowerCase()
  $all('.item').forEach(it=>{
    const txt = it.textContent.toLowerCase()
    it.style.display = txt.includes(q)?'flex':'none'
  })
})

// customization controls
$('#accent').value = theme.accent; $('#accent2').value = theme.accent2; $('#accent3').value = theme.accent3; $('#radius').value = theme.radius; $('#fontsize').value = theme.fontsize
$('#accent').addEventListener('input', e=>{ theme.accent = e.target.value; saveTheme(theme); applyThemeToDOM() })
$('#accent2').addEventListener('input', e=>{ theme.accent2 = e.target.value; saveTheme(theme); applyThemeToDOM() })
$('#accent3').addEventListener('input', e=>{ theme.accent3 = e.target.value; saveTheme(theme); applyThemeToDOM() })
$('#radius').addEventListener('input', e=>{ theme.radius = e.target.value; saveTheme(theme); applyThemeToDOM() })
$('#fontsize').addEventListener('input', e=>{ theme.fontsize = parseInt(e.target.value); saveTheme(theme); applyThemeToDOM() })

function applyThemeToDOM(){
  document.documentElement.style.setProperty('--accent', theme.accent)
  document.documentElement.style.setProperty('--accent2', theme.accent2)
  document.documentElement.style.setProperty('--accent3', theme.accent3)
  document.documentElement.style.setProperty('--radius', theme.radius + 'px')
  document.documentElement.style.setProperty('--fs', theme.fontsize + 'px')
  // update font-size of existing items
  $all('.item span').forEach(s=> s.style.fontSize = theme.fontsize + 'px')
  $all('.priority-card').forEach(c => c.style.borderRadius = theme.radius + 'px')
}

// quick actions
$('#markAllA').addEventListener('click', ()=>{
  data.subjects[current].filter(i=>i.priority==='A').forEach(i=>i.done = true); saveData(data); renderCards(); updateOverview()
})
$('#clearDates').addEventListener('click', ()=>{ data.subjects[current].forEach(i=>i.date = null); saveData(data); renderCards(); updateOverview() })
$('#resetBtn').addEventListener('click', ()=>{ if(confirm('Reset all progress?')){ data.subjects = buildCleanSubjects(); saveData(data); renderCards(); updateOverview() } })

function buildCleanSubjects(){
  const out = {}
  Object.keys(initial.subjects).forEach(sub=>{
    out[sub] = []
    Object.keys(initial.subjects[sub]).forEach(pr=>{
      initial.subjects[sub][pr].forEach((title, idx)=>{
        out[sub].push({id:`${sub}_${pr}_${idx}`, title, priority:pr, done:false, date:null})
      })
    })
  })
  return out
}

// export / import
$('#exportBtn').addEventListener('click', ()=> {
  const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'})
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a'); a.href = url; a.download='jee_mindmap_export.json'; a.click(); URL.revokeObjectURL(url)
})

$('#importFile').addEventListener('change', e=>{
  const f = e.target.files[0]; if(!f) return
  const r = new FileReader()
  r.onload = () => {
    try{
      const parsed = JSON.parse(r.result)
      if(parsed && parsed.subjects){ data = parsed; saveData(data); renderCards(); updateOverview(); alert('Imported OK') }
      else alert('Invalid JSON format')
    }catch(err){ alert('Import failed') }
  }
  r.readAsText(f)
})

// reset toggle customization panel
$('#customBtn').addEventListener('click', ()=> {
  const panel = document.getElementById('sidepanel')
  panel.scrollIntoView({behavior:'smooth', block:'center'})
})

// init
renderCards(); updateOverview(); applyThemeToDOM()