/* ===== Calendar (iOS-style, navigable + range + add) ===== */
const { useState:useStateCal } = React;

// events keyed "y-m-d" (BE year, 1-index month)
const CAL_EVENTS = {
  '2568-6-9':[{t:'10:00',title:'นัดพบลูกค้า',who:'วีระ สุขใจ',todo:'นำเสนอแผนเกษียณ',type:'meet',c:'#1e40af'}],
  '2568-6-12':[{t:'09:30',title:'โทรติดตาม',who:'มานี รักดี',todo:'สอบถามการตัดสินใจ',type:'call',c:'#16a34a'},{t:'14:00',title:'ส่งใบเสนอราคา',who:'ชัยวัฒน์ พูนทรัพย์',todo:'อีเมลใบเสนอราคา',type:'doc',c:'#f59e0b'}],
  '2568-6-15':[{t:'ทั้งวัน',title:'กรมธรรม์ครบกำหนด',who:'สมชาย วัฒนกุล',todo:'แจ้งเตือนชำระเบี้ย',type:'due',c:'#dc2626'}],
  '2568-6-18':[{t:'13:30',title:'นำเสนอแผน',who:'อรทัย แสงทอง',todo:'พีระมิดการเงิน',type:'meet',c:'#1e40af'}],
  '2568-6-23':[{t:'10:00',title:'โทรติดตาม',who:'สุภาพร ทองดี',todo:'นัดเซ็นสัญญา',type:'call',c:'#16a34a'}],
  '2568-6-27':[{t:'15:00',title:'ทบทวนพอร์ต',who:'ธนกร อินทรพานิช',todo:'review ความคุ้มครอง',type:'meet',c:'#7c3aed'}],
  '2568-5-28':[{t:'11:00',title:'ปิดการขาย',who:'กนกพร วงศ์ทอง',todo:'รับเอกสาร',type:'meet',c:'#16a34a'}],
  '2568-7-3':[{t:'09:00',title:'สัมมนาลูกค้า',who:'กลุ่มลูกค้า VIP',todo:'เตรียมสไลด์',type:'meet',c:'#7c3aed'}],
};
const TASK_ICON={meet:'calendar',call:'phone',doc:'doc',due:'alert'};
const TH_MO=['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
// days in month (Gregorian-ish for layout), BE year
function daysInMonth(beY,m){ const gY=beY-543; return new Date(gY,m,0).getDate(); }
function firstDow(beY,m){ const gY=beY-543; return new Date(gY,m-1,1).getDay(); }

const AddEventSheet = ({dkey, onClose, toast}) => {
  const [title,setTitle]=useStateCal('');
  const [who,setWho]=useStateCal('');
  const [time,setTime]=useStateCal('10:00');
  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet slide-up" onClick={e=>e.stopPropagation()}>
        <div className="grab"/>
        <div style={{fontSize:18,fontWeight:800,marginBottom:14}}>เพิ่มนัดหมาย</div>
        <div className="field"><label>หัวข้อ</label><input className="input" value={title} onChange={e=>setTitle(e.target.value)} placeholder="เช่น นัดพบลูกค้า"/></div>
        <div className="grid2" style={{gap:12}}>
          <div className="field"><label>ลูกค้า</label>
            <select className="select" value={who} onChange={e=>setWho(e.target.value)}><option value="">— เลือก —</option>{CUSTOMERS.map(c=>(<option key={c.id}>{c.name}</option>))}</select>
          </div>
          <div className="field"><label>เวลา</label><input className="input" value={time} onChange={e=>setTime(e.target.value)} placeholder="10:00"/></div>
        </div>
        <button className="btn btn-primary block" style={{marginTop:6}} disabled={!title} onClick={()=>{onClose();toast('เพิ่มนัดหมายแล้ว');}}><Icon name="check" size={19}/> บันทึกนัดหมาย</button>
        <div className="grid2" style={{gap:10,marginTop:10}}>
          <button className="btn btn-outline" onClick={()=>toast('เพิ่มเข้า iOS Calendar แล้ว (เดโม)')}><Icon name="calendar" size={17}/> iOS Calendar</button>
          <button className="btn btn-outline" onClick={()=>toast('เพิ่มเข้า Google Calendar แล้ว (เดโม)')}><Icon name="calendar" size={17}/> Google</button>
        </div>
      </div>
    </div>
  );
};

const CalendarScreen = ({back, go, toast}) => {
  const TODAY={y:2568,m:6,d:2};
  const [cur,setCur]=useStateCal({y:2568,m:6}); // viewed month
  const [sel,setSel]=useStateCal({y:2568,m:6,d:12}); // selected day
  const [rangeMode,setRangeMode]=useStateCal(false);
  const [range,setRange]=useStateCal({a:null,b:null});
  const [add,setAdd]=useStateCal(false);

  const dim=daysInMonth(cur.y,cur.m), fdow=firstDow(cur.y,cur.m);
  const cells=[]; for(let i=0;i<fdow;i++)cells.push(null); for(let d=1;d<=dim;d++)cells.push(d);
  const dow=['อา','จ','อ','พ','พฤ','ศ','ส'];
  const k=(y,m,d)=>`${y}-${m}-${d}`;
  const prevMo=()=>setCur(c=>c.m===1?{y:c.y-1,m:12}:{y:c.y,m:c.m-1});
  const nextMo=()=>setCur(c=>c.m===12?{y:c.y+1,m:1}:{y:c.y,m:c.m+1});
  const goToday=()=>{ setCur({y:TODAY.y,m:TODAY.m}); setSel({...TODAY}); setRangeMode(false); };

  const inRange=(d)=>{ if(!range.a||!range.b)return false; const v=cur.y*10000+cur.m*100+d; const a=range.a.y*10000+range.a.m*100+range.a.d, b=range.b.y*10000+range.b.m*100+range.b.d; const lo=Math.min(a,b),hi=Math.max(a,b); return v>=lo&&v<=hi; };
  const pickDay=(d)=>{
    if(rangeMode){
      if(!range.a||range.b){ setRange({a:{y:cur.y,m:cur.m,d},b:null}); }
      else { setRange(r=>({...r,b:{y:cur.y,m:cur.m,d}})); }
    } else setSel({y:cur.y,m:cur.m,d});
  };

  // events for selected day or range
  let agenda;
  if(rangeMode && range.a){
    const lo=range.b?Math.min(range.a.d,range.b.d):range.a.d, hi=range.b?Math.max(range.a.d,range.b.d):range.a.d;
    agenda=[]; for(let d=lo;d<=hi;d++){ (CAL_EVENTS[k(cur.y,cur.m,d)]||[]).forEach(e=>agenda.push({...e,d})); }
  } else {
    agenda=(CAL_EVENTS[k(sel.y,sel.m,sel.d)]||[]).map(e=>({...e,d:sel.d}));
  }
  const isToday=d=>cur.y===TODAY.y&&cur.m===TODAY.m&&d===TODAY.d;
  const isSel=d=>!rangeMode&&cur.y===sel.y&&cur.m===sel.m&&d===sel.d;

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="ปฏิทินนัดหมาย" sub={`${TH_MO[cur.m-1]} ${cur.y}`}
        right={<button className="iconbtn" onClick={()=>go('notifications')} style={{position:'relative'}}><Icon name="bell" size={23}/><span style={{position:'absolute',top:9,right:10,width:9,height:9,borderRadius:9,background:'var(--gold)',border:'2px solid #fff'}}/></button>}/>
      <div className="scroll">
        <div className="pad maxw" style={{paddingTop:4}}>
          <div className="flexrow" style={{gap:10,marginBottom:14}}>
            <button className="btn btn-soft btn-sm" onClick={goToday}><Icon name="calendar" size={16}/> วันนี้</button>
            <button className={"fchip"+(rangeMode?" on":"")} style={{height:40}} onClick={()=>{setRangeMode(!rangeMode);setRange({a:null,b:null});}}>เลือกช่วงวัน</button>
            <div className="spacer"/>
            <button className="btn btn-primary btn-sm" onClick={()=>setAdd(true)}><Icon name="plus" size={17}/> เพิ่มนัด</button>
          </div>
          <div className="cols c-2" style={{alignItems:'start'}}>
            {/* calendar */}
            <div className="card">
              <div className="flexrow" style={{marginBottom:14}}>
                <button className="iconbtn" style={{boxShadow:'none',background:'var(--bg)'}} onClick={prevMo}><Icon name="chevL" size={20}/></button>
                <div className="spacer"/><div style={{fontSize:17,fontWeight:700}}>{TH_MO[cur.m-1]} {cur.y}</div><div className="spacer"/>
                <button className="iconbtn" style={{boxShadow:'none',background:'var(--bg)'}} onClick={nextMo}><Icon name="chevR" size={20}/></button>
              </div>
              <div className="calgrid">
                {dow.map(d=>(<div key={d} className="cal-dow">{d}</div>))}
                {cells.map((d,i)=>{
                  if(!d) return <div key={i} className="cal-cell empty"/>;
                  const has=CAL_EVENTS[k(cur.y,cur.m,d)];
                  const rangeA=rangeMode&&range.a&&range.a.d===d, rangeB=rangeMode&&range.b&&range.b.d===d;
                  const on=isSel(d)||rangeA||rangeB;
                  return (
                    <button key={i} className={"cal-cell"+(on?" on":"")+(inRange(d)&&!on?" inrange":"")} onClick={()=>pickDay(d)}>
                      <span style={isToday(d)&&!on?{color:'var(--navy-700)',fontWeight:800}:null}>{d}</span>
                      {isToday(d)&&!on && <span style={{position:'absolute',bottom:6,width:4,height:4,borderRadius:4,background:'var(--navy-700)'}}/>}
                      {has && !isToday(d) && <span className="cal-dot" style={{background:on?'#fff':has[0].c}}/>}
                      {has && isToday(d) && <span className="cal-dot" style={{background:on?'#fff':has[0].c,bottom:2}}/>}
                    </button>
                  );
                })}
              </div>
              <div className="flexrow" style={{gap:14,justifyContent:'center',marginTop:14,fontSize:12,color:'var(--muted)'}}>
                <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:7,height:7,borderRadius:7,background:'var(--navy-700)'}}/> วันนี้</span>
                <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:7,height:7,borderRadius:7,background:'#1e40af'}}/> มีนัดหมาย</span>
              </div>
            </div>
            {/* agenda */}
            <div className="card">
              <div className="card-h"><div>
                <div className="ch-title">{rangeMode&&range.a?(range.b?`${Math.min(range.a.d,range.b.d)}–${Math.max(range.a.d,range.b.d)} ${TH_MO[cur.m-1]}`:`เลือกวันสิ้นสุด`):`${sel.d} ${TH_MO[sel.m-1]} ${sel.y}`}</div>
                <div className="ch-sub">{agenda.length} นัดหมาย/งาน</div>
              </div></div>
              <div className="stack" style={{gap:0}}>
                {agenda.map((e,i)=>(
                  <div key={i} className="row" style={{padding:'14px 0',alignItems:'flex-start'}}>
                    <div style={{width:58,fontSize:13,fontWeight:700,color:'var(--ink-2)',paddingTop:7}}>{rangeMode?`${e.d}/${cur.m}`:e.t}</div>
                    <div style={{width:38,height:38,borderRadius:11,background:e.c+'18',color:e.c,display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name={TASK_ICON[e.type]} size={19}/></div>
                    <div className="r-main" style={{paddingTop:2}}>
                      <div className="r-name" style={{fontSize:14.5}}>{e.title}</div>
                      <div className="r-sub"><Icon name="user" size={12} style={{verticalAlign:'-2px'}}/> {e.who} · {e.todo}{!rangeMode&&` · ${e.t}`}</div>
                    </div>
                    <button className="iconbtn ghost" style={{width:36,height:36}} onClick={()=>toast('ทำเครื่องหมายเสร็จแล้ว')}><Icon name="checkCircle" size={20} c="var(--ok)"/></button>
                  </div>
                ))}
                {agenda.length===0 && <div className="center muted" style={{padding:'30px 0'}}>ไม่มีนัดหมายในวันนี้</div>}
              </div>
              <button className="btn btn-outline block" style={{marginTop:8}} onClick={()=>setAdd(true)}><Icon name="plus" size={19}/> เพิ่มนัดหมาย</button>
            </div>
          </div>
        </div>
      </div>
      {add && <AddEventSheet dkey={k(sel.y,sel.m,sel.d)} onClose={()=>setAdd(false)} toast={toast}/>}
    </div>
  );
};

Object.assign(window, { CalendarScreen });