/* Technician mobile view */

function TechJobCard({ job, onStatus, onOpenPhoto }){
  const [open,setOpen] = React.useState(false);
  const jt = CK.jobType(job.jobType);
  const done = job.status==='completed';
  return (
    <Card className={`overflow-hidden ${done?'opacity-80':''}`}>
      <div className="p-3.5">
        <div className="flex items-start gap-3">
          <span className="grid place-items-center w-11 h-11 rounded-xl bg-brand-50 text-brand-600 shrink-0"><ProductIcon p={job.items[0]?.p} size={22}/></span>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2">
              <span className="text-[16px] font-medium text-slate-800">{job.customer}</span>
              {job.urgency==='urgent' && <Icon name="Flame" size={14} className="text-brand-600"/>}
            </div>
            <div className="text-[12px] font-light text-slate-500 flex items-center gap-1"><Icon name="Clock" size={12}/>{job.slot}</div>
          </div>
          <StatusBadge status={job.status}/>
        </div>

        <div className="mt-3 flex items-start gap-1.5 text-[13px] font-light text-slate-600">
          <Icon name="MapPin" size={14} className="mt-0.5 text-slate-400 shrink-0"/> {job.addr}
        </div>
        <div className="mt-2 flex items-center gap-2 flex-wrap">
          <span className="inline-flex items-center gap-1 text-[12px] text-slate-700 bg-slate-100 rounded-lg px-2 py-1"><Icon name={jt?jt.icon:'Wrench'} size={13}/>{jt?.th}</span>
          <span className="text-[12px] font-light text-slate-500">{itemsShort(job.items)}</span>
        </div>
        {job.routeNote && <div className="mt-2 flex items-start gap-1.5 text-[12px] font-light text-amber-700 bg-amber-50 rounded-lg px-2 py-1.5"><Icon name="Info" size={13} className="mt-0.5 shrink-0"/>{job.routeNote}</div>}

        {/* quick actions */}
        <div className="mt-3 grid grid-cols-2 gap-2">
          <a href={'tel:'+job.phone} className="inline-flex items-center justify-center gap-1.5 rounded-xl bg-green-50 text-green-700 ring-1 ring-green-200 py-2.5 text-[14px] whitespace-nowrap active:scale-[.98]"><Icon name="Phone" size={16}/>โทรหาลูกค้า</a>
          <button className="inline-flex items-center justify-center gap-1.5 rounded-xl bg-blue-50 text-blue-700 ring-1 ring-blue-200 py-2.5 text-[14px] whitespace-nowrap active:scale-[.98]"><Icon name="Navigation" size={16}/>เปิดแผนที่</button>
        </div>

        <button onClick={()=>setOpen(o=>!o)} className="mt-2 w-full inline-flex items-center justify-center gap-1 text-[13px] text-slate-500 py-1.5">
          {open?'ซ่อน':'อัปเดตงาน'} <Icon name={open?'ChevronUp':'ChevronDown'} size={15}/>
        </button>
      </div>

      {open && (
        <div className="px-3.5 pb-3.5 pt-1 border-t border-slate-100 space-y-3">
          <div>
            <div className="text-[12px] font-medium text-slate-500 mb-1.5">เปลี่ยนสถานะงาน</div>
            <div className="grid grid-cols-3 gap-2">
              <button onClick={()=>onStatus(job.id,'inprogress')} className="rounded-xl bg-orange-50 text-orange-700 ring-1 ring-orange-200 py-2.5 text-[13px] active:scale-95">เริ่มงาน</button>
              <button onClick={()=>onStatus(job.id,'completed')} className="rounded-xl bg-green-600 text-white py-2.5 text-[13px] active:scale-95">เสร็จงาน</button>
              <button onClick={()=>onStatus(job.id,'issue')} className="rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200 py-2.5 text-[13px] active:scale-95">ติดปัญหา</button>
            </div>
          </div>
          <div>
            <div className="text-[12px] font-medium text-slate-500 mb-1.5">รูปหลังทำงาน</div>
            <div className="grid grid-cols-3 gap-2">
              <PhotoSlot label="ก่อน" h={72}/><PhotoSlot label="หลัง" h={72}/><PhotoSlot label="ใบงาน" h={72}/>
            </div>
          </div>
          <Field label="บันทึกปัญหาหน้างาน">
            <TextArea rows={2} placeholder="เช่น ไม่มีไฟ, ต้องเดินท่อเพิ่ม, ลูกค้าไม่อยู่" />
          </Field>
        </div>
      )}
    </Card>
  );
}

function MyTasksScreen(){
  const { jobs, setStatus, device } = useCK();
  const isMobile = device==='mobile';
  const team = CK.TEAMS[0]; // current technician = ทีม A
  const [date,setDate] = React.useState(CK.TODAY);
  const mine = sortQueue(jobs.filter(j=>j.team===team.id && j.date===date));
  const done = mine.filter(j=>j.status==='completed').length;
  const inprog = mine.filter(j=>j.status==='inprogress').length;

  const banner = (
    <div className={`rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700 text-white ${isMobile?'p-4 mb-3':'p-5'}`}>
      <div className="flex items-center gap-2.5">
        <span className="w-3 h-3 rounded-full" style={{background:team.color}}/>
        <div className="flex-1">
          <div className={isMobile?'text-[15px] font-medium':'text-[18px] font-medium'}>{team.name}</div>
          <div className="text-[12px] font-light text-white/80 flex items-center gap-1.5">{CK.thDate(date,{withDow:true})}<span className="text-white/40">·</span><Icon name="MapPin" size={12}/>{team.zone}</div>
        </div>
        <Icon name="Wrench" size={isMobile?22:26} className="text-white/70"/>
      </div>
      <div className={`mt-3 flex items-center ${isMobile?'gap-4':'gap-6'}`}>
        <div><div className="text-[24px] font-medium leading-none tnum">{mine.length}</div><div className="text-[11px] font-light text-white/80 mt-1">งานวันนี้</div></div>
        <div className="w-px h-8 bg-white/20"/>
        <div><div className="text-[24px] font-medium leading-none tnum">{inprog}</div><div className="text-[11px] font-light text-white/80 mt-1">กำลังทำ</div></div>
        <div className="w-px h-8 bg-white/20"/>
        <div><div className="text-[24px] font-medium leading-none tnum">{done}</div><div className="text-[11px] font-light text-white/80 mt-1">เสร็จแล้ว</div></div>
        <div className="w-px h-8 bg-white/20"/>
        <div className="flex-1"><div className="text-[24px] font-medium leading-none tnum">{mine.length-done}</div><div className="text-[11px] font-light text-white/80 mt-1">คงเหลือ</div></div>
      </div>
    </div>
  );

  if (!isMobile) {
    return (
      <div className="p-6 max-w-[1100px] mx-auto">
        <div className="flex flex-wrap items-center justify-between gap-3 mb-5">
          <h1 className="text-[22px] font-medium text-slate-900">งานของฉัน</h1>
          <DateStepper date={date} onChange={setDate} />
        </div>
        {banner}
        <div className="mt-5">
          {mine.length===0
            ? <Card className="py-2"><Empty icon="CalendarCheck" title="ไม่มีงานในวันนี้" sub="พักผ่อนได้เลย หรือเลือกวันอื่น"/></Card>
            : <div className="grid sm:grid-cols-2 gap-4 items-start">{mine.map(j=><TechJobCard key={j.id} job={j} onStatus={setStatus}/>)}</div>}
        </div>
      </div>
    );
  }

  return (
    <div className="p-3 pb-4">
      {banner}
      <Card className="p-2 mb-3"><DateStepper date={date} onChange={setDate} compact/></Card>
      <div className="space-y-3">
        {mine.length===0 ? <Card className="py-2"><Empty icon="CalendarCheck" title="ไม่มีงานในวันนี้" sub="พักผ่อนได้เลย"/></Card>
          : mine.map(j=><TechJobCard key={j.id} job={j} onStatus={setStatus}/>)}
      </div>
    </div>
  );
}

Object.assign(window, { MyTasksScreen, TechJobCard });