/* Add Job — sectioned mobile-first form */

function ItemRow({ item, onChange, onRemove, index }){
  const isAir = item.p==='air';
  return (
    <div className="rounded-xl ring-1 ring-slate-200 p-3 bg-slate-50/60">
      <div className="flex items-center justify-between mb-2.5">
        <span className="text-[12px] font-medium text-slate-500">รายการที่ {index+1}</span>
        {onRemove && <button onClick={onRemove} className="text-slate-400 hover:text-brand-600"><Icon name="Trash2" size={16}/></button>}
      </div>
      <div className="space-y-2.5">
        <ChipGroup options={CK.PRODUCT_TYPES} value={item.p} onChange={v=>onChange({...item,p:v})} getIcon={o=>o.icon} />
        <div className="grid grid-cols-2 gap-2">
          <Select value={item.brand||''} onChange={e=>onChange({...item,brand:e.target.value})}>
            <option value="">ยี่ห้อ</option>
            {CK.BRANDS.map(b=><option key={b} value={b}>{b}</option>)}
          </Select>
          <TextInput placeholder="รุ่น" value={item.model||''} onChange={e=>onChange({...item,model:e.target.value})} />
        </div>
        <div className="grid grid-cols-2 gap-2">
          {isAir ? (
            <Select value={item.btu||''} onChange={e=>onChange({...item,btu:e.target.value})}>
              <option value="">BTU</option>
              {CK.BTU.map(b=><option key={b} value={b}>{b} BTU</option>)}
            </Select>
          ) : <div className="flex items-center text-[12px] font-light text-slate-400 px-1">— ไม่ระบุ BTU —</div>}
          <div className="flex items-center gap-2">
            <span className="text-[13px] font-light text-slate-500">จำนวน</span>
            <div className="flex items-center rounded-xl ring-1 ring-slate-300 bg-white">
              <button onClick={()=>onChange({...item,qty:Math.max(1,(item.qty||1)-1)})} className="grid place-items-center w-9 h-9 text-slate-500"><Icon name="Minus" size={15}/></button>
              <span className="w-8 text-center text-[15px] font-medium tnum">{item.qty||1}</span>
              <button onClick={()=>onChange({...item,qty:(item.qty||1)+1})} className="grid place-items-center w-9 h-9 text-slate-500"><Icon name="Plus" size={15}/></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FormCard({ step, icon, title, children }){
  return (
    <Card className="p-4 sm:p-5">
      <div className="flex items-center gap-2.5 mb-4">
        <span className="grid place-items-center w-7 h-7 rounded-lg bg-brand-600 text-white text-[13px] font-medium">{step}</span>
        <h3 className="text-[15px] font-medium text-slate-800 flex items-center gap-1.5"><Icon name={icon} size={16} className="text-brand-600"/>{title}</h3>
      </div>
      <div className="space-y-3.5">{children}</div>
    </Card>
  );
}

function AddJobScreen(){
  const { device, addJob, navigate, jobs, role } = useCK();
  const isMobile = device==='mobile';
  const [f,setF] = React.useState({
    customer:'', phone:'', addr:'', district:'', routeNote:'',
    jobType:'install', items:[{p:'air',brand:'',model:'',btu:'',qty:1}],
    date:CK.TODAY, slot:'คิวแรก (09.00)', urgency:'normal', note:'',
    branch:'b1',
  });
  const set = (k,v)=>setF(s=>({...s,[k]:v}));
  const ds = computeDayStatus(jobs, f.date);
  const blocked = ds.status==='full' || ds.status==='closed';
  const valid = f.customer && f.phone && f.district && f.items.length>0;

  function save(){
    const job = {
      id: CK.nid(), code: CK.code(Math.floor(Math.random()*9000)+100),
      date:f.date, branch:f.branch, district:f.district, customer:f.customer, phone:f.phone,
      addr:f.addr||`ต.${f.district} อ.${f.district} จ.ศรีสะเกษ`, routeNote:f.routeNote,
      jobType:f.jobType, items:f.items, slot:f.slot, urgency:f.urgency, note:f.note,
      status:'pending', team:null, createdBy: role==='sales'?'มานี ใจดี':'สุดา (HQ)',
      createdAt: new Date().toLocaleString('th-TH'), prepared:false,
      log:[{by:'ผู้บันทึก', from:'—', to:'pending', note:'สร้างงานจากสาขา', at: new Date().toLocaleString('th-TH',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})}],
    };
    addJob(job);
    navigate('queue',{date:f.date});
  }

  return (
    <div className={isMobile?'pb-28':'pb-24'}>
      <div className={isMobile?'p-3':'p-6 max-w-[760px] mx-auto'}>
        {isMobile ? <h1 className="text-[18px] font-medium text-slate-900 mb-1">เพิ่มงานใหม่</h1>
          : <PageHeader icon="CirclePlus" title="เพิ่มงานใหม่" sub="บันทึกงานติดตั้ง / บริการ — ลดการลืมแจ้งงาน" />}
        {isMobile && <p className="text-[12px] font-light text-slate-400 mb-3">กรอกข้อมูลให้ครบเพื่อให้สำนักงานใหญ่จัดคิวได้ทันที</p>}

        <div className="space-y-4">
          <FormCard step="1" icon="UserRound" title="ข้อมูลลูกค้า">
            <Field label="ชื่อลูกค้า" required>
              <TextInput placeholder="เช่น คุณสมศรี ทองมา" value={f.customer} onChange={e=>set('customer',e.target.value)} />
            </Field>
            <Field label="เบอร์โทร" required>
              <TextInput type="tel" inputMode="tel" placeholder="08x-xxx-xxxx" value={f.phone} onChange={e=>set('phone',e.target.value)} />
            </Field>
            <Field label="ที่อยู่">
              <TextArea rows={2} placeholder="บ้านเลขที่ หมู่ ตำบล" value={f.addr} onChange={e=>set('addr',e.target.value)} />
            </Field>
            <div className="grid grid-cols-2 gap-3">
              <Field label="อำเภอ" required>
                <Select value={f.district} onChange={e=>set('district',e.target.value)}>
                  <option value="">เลือกอำเภอ</option>
                  {CK.DISTRICTS.map(d=><option key={d} value={d}>อ.{d}</option>)}
                </Select>
              </Field>
              <Field label="จังหวัด"><TextInput value="ศรีสะเกษ" disabled className="bg-slate-50 text-slate-400" /></Field>
            </div>
            <Field label="หมายเหตุเส้นทาง" hint="เช่น โทรก่อนไป, หลังตลาด">
              <TextInput placeholder="โทรหาก่อนไป 30 นาที" value={f.routeNote} onChange={e=>set('routeNote',e.target.value)} />
            </Field>
          </FormCard>

          <FormCard step="2" icon="Wrench" title="ประเภทงาน">
            <ChipGroup options={CK.JOB_TYPES} value={f.jobType} onChange={v=>set('jobType',v)} getIcon={o=>o.icon} />
          </FormCard>

          <FormCard step="3" icon="Package" title="สินค้า">
            {f.items.map((it,i)=>(
              <ItemRow key={i} item={it} index={i}
                onChange={ni=>set('items', f.items.map((x,j)=>j===i?ni:x))}
                onRemove={f.items.length>1?()=>set('items', f.items.filter((_,j)=>j!==i)):null} />
            ))}
            <button onClick={()=>set('items',[...f.items,{p:'air',brand:'',model:'',btu:'',qty:1}])}
              className="w-full rounded-xl ring-1 ring-dashed ring-slate-300 py-2.5 text-[13px] text-slate-500 hover:bg-slate-50 hover:ring-brand-300 inline-flex items-center justify-center gap-1.5">
              <Icon name="Plus" size={15}/> เพิ่มรายการสินค้า
            </button>
          </FormCard>

          <FormCard step="4" icon="CalendarClock" title="นัดหมาย">
            <Field label="วันที่เข้าบริการ" required>
              <div className="flex items-center gap-2">
                <Card className="flex-1 p-2 !shadow-none"><DateStepper date={f.date} onChange={d=>set('date',d)} compact /></Card>
              </div>
            </Field>
            {blocked && (
              <div className="flex items-start gap-2 rounded-xl bg-brand-50 ring-1 ring-brand-200 p-3 text-[12px] text-brand-700 font-light">
                <Icon name="TriangleAlert" size={15} className="mt-0.5 shrink-0"/>
                {ds.status==='closed' ? 'วันนี้งดรับงาน' : `วันนี้คิวเต็ม (${ds.used}/${ds.max} unit)`} — ไม่ควรรับเพิ่ม ต้องให้สำนักงานใหญ่/ผู้บริหารอนุมัติก่อน
              </div>
            )}
            <Field label="ช่วงเวลา">
              <ChipGroup options={CK.TIMESLOTS.map(t=>({id:t,th:t}))} value={f.slot} onChange={v=>set('slot',v)} />
            </Field>
            <div className="grid grid-cols-2 gap-3">
              <Field label="ความเร่งด่วน">
                <ChipGroup options={CK.URGENCY} value={f.urgency} onChange={v=>set('urgency',v)} />
              </Field>
              <Field label="สาขาที่ขาย">
                <Select value={f.branch} onChange={e=>set('branch',e.target.value)}>
                  {CK.BRANCHES.filter(b=>b.active).map(b=><option key={b.id} value={b.id}>{b.code} {b.name}</option>)}
                </Select>
              </Field>
            </div>
            <Field label="หมายเหตุเพิ่มเติม">
              <TextArea rows={2} placeholder="รายละเอียดหน้างาน เช่น ติดผนังปูน, มีนั่งร้าน" value={f.note} onChange={e=>set('note',e.target.value)} />
            </Field>
          </FormCard>

          <FormCard step="5" icon="Paperclip" title="ไฟล์แนบ (ถ่ายรูปได้)">
            <div className="grid grid-cols-4 gap-2">
              <PhotoSlot label="ใบงาน" /><PhotoSlot label="ใบเสร็จ" /><PhotoSlot label="ใบรับประกัน" /><PhotoSlot label="หน้างาน" />
            </div>
          </FormCard>
        </div>
      </div>

      {/* sticky save bar */}
      <div className={`fixed bottom-0 ${isMobile?'left-1/2 -translate-x-1/2 w-full':'left-60 right-0'} z-40`} style={isMobile?{maxWidth:430}:undefined}>
        <div className="bg-white/90 backdrop-blur border-t border-slate-200 px-4 py-3 flex items-center gap-3" style={isMobile?{marginBottom:56}:undefined}>
          <div className="text-[12px] font-light text-slate-500 flex-1">
            {valid ? <span className="text-green-600 inline-flex items-center gap-1"><Icon name="CircleCheck" size={14}/> พร้อมบันทึก</span>
                   : <span className="inline-flex items-center gap-1"><Icon name="CircleAlert" size={14}/> กรอกชื่อ เบอร์ และอำเภอ</span>}
          </div>
          <Btn variant="outline" size="lg" icon="Save">ร่าง</Btn>
          <Btn variant="primary" size="lg" icon="Check" disabled={!valid} onClick={save}>บันทึกงาน</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AddJobScreen });