const CRM = {

dataKey: "crm_demo",

state: {
  screen: "dashboard",
  selected:null,
},

init(){
  this.data = JSON.parse(localStorage.getItem(this.dataKey)) || {
    messages:[
      {
        id:"1",
        name:"Ayşe",
        text:"çok bekledik",
        status:"new"
      }
    ],
    approvals:[]
  }

  this.render()
},

save(){
  localStorage.setItem(this.dataKey, JSON.stringify(this.data))
},

login(){
  document.getElementById("loginScreen").style.display="none"
  document.getElementById("app").style.display="block"
  this.init()
},

nav(screen){
  this.state.screen = screen
  this.render()
},

render(){
  document.querySelectorAll(".view").forEach(v=>v.style.display="none")
  document.getElementById(this.state.screen).style.display="block"

  this.renderDashboard()
  this.renderMessages()
  this.renderApproval()
  this.renderPerf()
},

// DASHBOARD
renderDashboard(){
  const el = document.getElementById("dashboard")

  const total = this.data.messages.length
  const pending = this.data.messages.filter(x=>x.status==="new").length

  el.innerHTML = `
    <div class="card">Toplam: ${total}</div>
    <div class="card">Bekleyen: ${pending}</div>
  `
},

// MESSAGES
renderMessages(){

  const list = document.getElementById("list")
  const detail = document.getElementById("detail")

  list.innerHTML = this.data.messages.map(m=>`
    <div class="card" onclick="CRM.select('${m.id}')">
      ${m.name} - ${m.text}
    </div>
  `).join("")

  if(!this.state.selected){
    detail.innerHTML = "Mesaj seç"
    return
  }

  const m = this.data.messages.find(x=>x.id===this.state.selected)

  const ai = this.ai(m.text)

  detail.innerHTML = `
    <div class="card">
      <div><b>${m.name}</b></div>
      <div>${m.text}</div>

      <div class="badge ${ai.severity}">${ai.severity}</div>

      <button onclick="CRM.reply('${m.id}')">AI cevap üret</button>
      <button onclick="CRM.toApproval('${m.id}')">Approval</button>

      <div>${m.reply || ""}</div>
    </div>
  `
},

select(id){
  this.state.selected = id
  this.render()
},

// AI
ai(text){

  text = text.toLowerCase()

  if(text.includes("bekle")) return {severity:"medium"}
  if(text.includes("iade")) return {severity:"high"}

  return {severity:"low"}
},

reply(id){
  const m = this.data.messages.find(x=>x.id===id)

  m.reply = "Geri bildiriminiz alınmıştır. En kısa sürede dönüş sağlanacaktır."

  this.save()
  this.render()
},

toApproval(id){
  this.data.approvals.push({messageId:id, status:"pending"})
  this.save()
  this.render()
},

// APPROVAL
renderApproval(){

  const el = document.getElementById("approval")

  el.innerHTML = this.data.approvals.map(a=>`
    <div class="card">
      ${a.messageId}
      <button onclick="CRM.approve('${a.messageId}')">Onayla</button>
    </div>
  `).join("")
},

approve(id){
  const msg = this.data.messages.find(x=>x.id===id)
  msg.status="answered"

  this.data.approvals = this.data.approvals.filter(x=>x.messageId!==id)

  this.save()
  this.render()
},

// PERFORMANCE
renderPerf(){

  const el = document.getElementById("performance")

  const answered = this.data.messages.filter(x=>x.status==="answered").length

  el.innerHTML = `
    <div class="card">Çözülen: ${answered}</div>
  `
}

}

// INIT
CRM.init()