const {S,Head,I,P,PEOPLE,AV}=window.WFA;
const {UIButton,UIInput,UISelect,UICard,UIAvatar,UIPill,UITabs,UIModal,UIDataTable,UIStat,UIBanner,UIToggle,UIDrawer,UIEmptyState,UIProgress,UITextarea,UIToggleGroup,UIChart}=window.XCOPEDesignSystem_bf80f1;

const {TODAY:CI_TODAY,NOW:CI_NOW,SHIFT_IN:CI_IN,SHIFT_TARGET:CI_TARGET,SHIFT_BREAK:CI_BREAK,fmtLong:ciLong,wdIndex:ciWd}=window.WFA_TODAY;
const CI_WD=["Seg","Ter","Qua","Qui","Sex","Sáb","Dom"];
const ci2=n=>String(n).padStart(2,"0");
const ciHM=m=>ci2(Math.floor(m/60))+":"+ci2(m%60);
const ciDur=m=>Math.floor(m/60)+"h"+(m%60?" "+ci2(m%60):"");
const CI_LOCAIS=[
  {id:"porto",name:"Escritório Porto",addr:"Rua de Santa Catarina 120",radius:150},
  {id:"lisboa",name:"Escritório Lisboa",addr:"Av. da Liberdade 245",radius:120},
  {id:"remoto",name:"Trabalho remoto",addr:"Sem cerca geográfica",radius:null},
];
// today's punches, in minutes from midnight
const CI_HOJE=[
  {id:1,kind:"in",at:window.WFA_TODAY.SHIFT_IN,loc:"porto",via:"qr",ok:true},
  {id:2,kind:"break",at:11*60+30,loc:"porto",via:"app",ok:true},
  {id:3,kind:"resume",at:12*60+15,loc:"porto",via:"app",ok:true},
];
const CI_KIND={in:{label:"Entrada",tone:"success"},out:{label:"Saída",tone:"neutral"},break:{label:"Início de pausa",tone:"warning"},resume:{label:"Fim de pausa",tone:"info"}};
const CI_VIA={qr:"Código QR",app:"App",nfc:"Cartão",web:"Browser",manual:"Correção manual"};

const CI_DIAS=[
  {id:"2026-07-24",day:24,wd:4,in:8*60,out:null,pausa:45,total:525,extra:0,loc:"porto",state:"aberto"},
  {id:"2026-07-23",day:23,wd:3,in:8*60+2,out:17*60+28,pausa:45,total:521,extra:0,loc:"porto",state:"ok"},
  {id:"2026-07-22",day:22,wd:2,in:8*60+55,out:18*60+40,pausa:60,total:525,extra:45,loc:"porto",state:"extra"},
  {id:"2026-07-21",day:21,wd:1,in:9*60,out:17*60+30,pausa:30,total:480,extra:0,loc:"remoto",state:"ok"},
  {id:"2026-07-20",day:20,wd:0,in:8*60+58,out:17*60+2,pausa:45,total:439,extra:0,loc:"porto",state:"curto"},
  {id:"2026-07-17",day:17,wd:4,in:null,out:null,pausa:0,total:0,extra:0,loc:null,state:"falta"},
  {id:"2026-07-16",day:16,wd:3,in:8*60+30,out:17*60+30,pausa:45,total:495,extra:0,loc:"lisboa",state:"ok"},
  {id:"2026-07-15",day:15,wd:2,in:8*60+1,out:17*60+31,pausa:45,total:525,extra:0,loc:"porto",state:"ok"},
];
const CI_STATE={aberto:{label:"Em curso",tone:"info"},ok:{label:"Completo",tone:"success"},extra:{label:"Com extra",tone:"warning"},curto:{label:"Abaixo do previsto",tone:"warning"},falta:{label:"Falta",tone:"danger"}};

function CiRelogio({inN,pausa,onPunch,now,local,setLocal}){
  const entrada=CI_HOJE[0].at;
  const decorrido=Math.max(0,now-entrada-CI_BREAK);
  return <UICard style={{display:"flex",flexDirection:"column",gap:16}}>
    <div className="row" style={{gap:10}}>
      <span style={{width:8,height:8,borderRadius:999,background:inN?(pausa?"var(--ui-warning)":"var(--ui-success)"):"var(--ui-text-3)",flexShrink:0}}/>
      <span style={{fontSize:"var(--ui-fs-sm)",fontWeight:600}}>{!inN?"Fora de serviço":pausa?"Em pausa":"Em serviço"}</span>
      <div className="spring"/>
      <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{ciLong(CI_TODAY)}</span>
    </div>

    <div>
      <div style={{fontSize:"clamp(40px,10cqi,56px)",fontWeight:600,letterSpacing:"var(--ui-ls-display)",lineHeight:1,fontVariantNumeric:"tabular-nums"}}>{ciHM(now)}</div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:6}}>
        {inN?"Entrada às "+ciHM(entrada)+" · "+ciDur(decorrido)+" de trabalho":"Sem registo de entrada hoje"}
      </div>
    </div>

    <div>
      <div className="row" style={{marginBottom:6}}>
        <span style={{fontSize:"var(--ui-fs-sm)",fontWeight:500}}>Jornada de hoje</span>
        <div className="spring"/>
        <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums"}}>{ciDur(decorrido)} de {ciDur(CI_TARGET)}</span>
      </div>
      <UIProgress value={decorrido} max={CI_TARGET} tone={decorrido>CI_TARGET?"warning":"accent"}/>
    </div>

    <div>
      <div style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,marginBottom:8}}>Onde estás</div>
      <UISelect value={local} onChange={e=>setLocal(e.target.value)} options={CI_LOCAIS.map(l=>({value:l.id,label:l.name}))}/>
      <div className="row" style={{gap:8,marginTop:10,fontSize:"var(--ui-fs-sm)"}}>
        <I d={["M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z","M12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"]} size={15} c={local==="remoto"?"var(--ui-text-3)":"var(--ui-success)"}/>
        <span className="muted">{local==="remoto"?"Sem verificação de local":"Dentro da cerca · "+CI_LOCAIS.find(l=>l.id===local).addr}</span>
      </div>
    </div>

    <div className="row" style={{gap:8,flexWrap:"wrap"}}>
      {!inN
        ? <UIButton size="lg" style={{flex:1,minWidth:160}} onClick={()=>onPunch("in")}>Registar entrada</UIButton>
        : <React.Fragment>
            <UIButton size="lg" variant="destructive" style={{flex:1,minWidth:150}} onClick={()=>onPunch("out")}>Registar saída</UIButton>
            <UIButton size="lg" variant="outline" style={{flex:1,minWidth:130}} onClick={()=>onPunch(pausa?"resume":"break")}>{pausa?"Retomar":"Iniciar pausa"}</UIButton>
          </React.Fragment>}
    </div>
  </UICard>;
}

function CiQR({open,onClose}){
  const [seg,setSeg]=React.useState(28);
  React.useEffect(()=>{if(!open)return;setSeg(28);const id=setInterval(()=>setSeg(s=>s>0?s-1:30),1000);return ()=>clearInterval(id);},[open]);
  // deterministic pattern, drawn from a fixed seed so it reads as a code, not noise
  const cells=React.useMemo(()=>{const out=[];for(let y=0;y<21;y++)for(let x=0;x<21;x++){
    const corner=(x<7&&y<7)||(x>13&&y<7)||(x<7&&y>13);
    const ring=corner&&((x%7===0||x%7===6||y%7===0||y%7===6)||(x%7>=2&&x%7<=4&&y%7>=2&&y%7<=4));
    const on=corner?ring:((x*7+y*13+((x*y)%5))%3===0);
    if(on)out.push([x,y]);}return out;},[]);
  return <UIModal open={open} onClose={onClose} title="Registar por código QR" width={420}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Renova em {seg}s</span><div className="spring"/><UIButton variant="ghost" onClick={onClose}>Fechar</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:16}}>
      <div style={{padding:16,background:"#fff",borderRadius:"var(--ui-r-md)",border:"1px solid var(--ui-border)"}}>
        <svg width="176" height="176" viewBox="0 0 21 21" shapeRendering="crispEdges">
          {cells.map(([x,y],i)=><rect key={i} x={x} y={y} width="1" height="1" fill="#141a1c"/>)}
        </svg>
      </div>
      <div style={{textAlign:"center"}}>
        <div style={{fontWeight:600}}>Escritório Porto</div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:4}}>Aponta a câmara ao leitor à entrada. O código muda a cada 30 segundos para não poder ser reutilizado.</div>
      </div>
      <UIProgress value={seg} max={30} size="sm" style={{width:"100%"}}/>
    </div>
  </UIModal>;
}

S["clock-in"]=()=>{
  const [tab,setTab]=React.useState("hoje");
  const [punches,setPunches]=React.useState(CI_HOJE);
  const [local,setLocal]=React.useState("porto");
  const [qr,setQr]=React.useState(false);
  const [correcao,setCorrecao]=React.useState(null);
  const [enviado,setEnviado]=React.useState(false);
  const [sel,setSel]=React.useState(null);
  const now=CI_NOW;

  const last=punches[punches.length-1];
  const inN=last&&last.kind!=="out";
  const pausa=last&&last.kind==="break";
  const punch=kind=>setPunches(p=>[...p,{id:Date.now(),kind,at:now,loc:local,via:"app",ok:true}]);

  const semana=CI_DIAS.slice(0,5);
  const PREVISTO=5*8*60;                                     // 40h
  const totalSemana=semana.reduce((n,d)=>n+d.total,0);       // 41h30
  const extraSemana=semana.reduce((n,d)=>n+d.extra,0);       // 45 min autorizadas
  // banco = excedente sobre o previsto, menos o que já foi pago como extra
  const banco=totalSemana-PREVISTO-extraSemana;              // 45 min
  const cur=sel?CI_DIAS.find(d=>d.id===sel):null;

  return <React.Fragment>
  <Head title="Registo de ponto" desc={inN?(pausa?"Em pausa desde as "+ciHM(last.at):"Em serviço desde as "+ciHM(punches[0].at)):"Fora de serviço"}
    actions={<div className="row" style={{gap:8}}>
      <UIButton variant="outline" icon={<I d={["M4 4h6v6H4z","M14 4h6v6h-6z","M4 14h6v6H4z","M14 14h2v2h-2z","M18 18h2v2h-2z","M14 18h2v2h-2z","M18 14h2v2h-2z"]} size={16}/>} onClick={()=>setQr(true)}>Código QR</UIButton>
      <UIButton variant="secondary" onClick={()=>setCorrecao({})}>Pedir correção</UIButton>
    </div>}/>

  {enviado&&<UIBanner tone="success" title="Pedido de correção enviado" style={{marginBottom:16}}>Segue para aprovação do teu responsável. Recebes resposta na Inbox.</UIBanner>}

  <UICard style={{marginBottom:16,padding:"14px 20px"}}>
    <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,flexWrap:"wrap",fontSize:"var(--ui-fs-sm)"}}>
      <div style={{display:"flex",alignItems:"center",gap:32,flexWrap:"wrap"}}>
        <span className="row" style={{gap:8}}><span className="muted">Esta semana</span><strong style={{fontVariantNumeric:"tabular-nums"}}>{ciDur(totalSemana)}</strong></span>
        <span className="row" style={{gap:8}}><span className="muted">Previsto</span><strong style={{fontVariantNumeric:"tabular-nums"}}>{ciDur(PREVISTO)}</strong></span>
        <span className="row" style={{gap:8}}><span className="muted">Extra</span><strong style={{fontVariantNumeric:"tabular-nums",color:extraSemana?"var(--ui-warning)":"var(--ui-text)"}}>{extraSemana?ciDur(extraSemana):"0h"}</strong></span>
        <span className="row" style={{gap:8}}><span className="muted">Banco de horas</span><strong style={{fontVariantNumeric:"tabular-nums",color:banco>0?"var(--ui-success)":banco<0?"var(--ui-danger)":"var(--ui-text)"}}>{banco?(banco>0?"+":"-")+ciDur(Math.abs(banco)):"0h"}</strong></span>
      </div>
      <span className="row" style={{gap:8}}><span className="muted">Local de hoje</span><UIPill dot tone={local==="remoto"?"neutral":"success"}>{CI_LOCAIS.find(l=>l.id===local).name}</UIPill></span>
    </div>
  </UICard>

  <UICard style={{padding:0,overflow:"hidden",flex:1,minHeight:0,display:"flex",flexDirection:"column"}}>
    <div className="row" style={{padding:"12px 16px",borderBottom:"1px solid var(--ui-divider)"}}>
      <UITabs value={tab} onChange={setTab} items={[
        {value:"hoje",label:"Hoje"},
        {value:"historico",label:"Histórico"},
        {value:"locais",label:"Locais"}]}/>
    </div>

    {tab==="hoje"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16}}>
      <div className="grid g2">
        <CiRelogio inN={inN} pausa={pausa} onPunch={punch} now={now} local={local} setLocal={setLocal}/>
        <UICard>
          <div className="row" style={{marginBottom:12}}>
            <span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Registos de hoje</span>
            <div className="spring"/>
            <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{punches.length} marcações</span>
          </div>
          <div style={{position:"relative",paddingLeft:22}}>
            <span style={{position:"absolute",left:5,top:8,bottom:14,width:2,background:"var(--ui-divider)"}}/>
            {punches.map((p,i)=>{const k=CI_KIND[p.kind];
              return <div key={p.id} style={{position:"relative",padding:"10px 0",borderBottom:i<punches.length-1?"1px solid var(--ui-divider)":"none"}}>
                <span style={{position:"absolute",left:-22,top:16,width:12,height:12,borderRadius:999,background:"var(--ui-surface)",border:"2px solid var(--ui-"+(k.tone==="neutral"?"border-2":k.tone)+")"}}/>
                <div className="row" style={{gap:10,flexWrap:"wrap"}}>
                  <span style={{fontWeight:600,fontVariantNumeric:"tabular-nums",minWidth:46}}>{ciHM(p.at)}</span>
                  <span style={{fontSize:"var(--ui-fs-sm)",flex:1,minWidth:0}}>{k.label}</span>
                  <UIPill>{CI_VIA[p.via]}</UIPill>
                  {p.loc&&<span className="muted row" style={{gap:5,fontSize:"var(--ui-fs-xs)"}}>
                    <I d={["M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z","M12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"]} size={12}/>
                    {CI_LOCAIS.find(l=>l.id===p.loc).name.replace("Escritório ","")}</span>}
                </div>
              </div>;})}
          </div>
          {!inN&&punches.length>1&&<div style={{marginTop:14,paddingTop:14,borderTop:"1px solid var(--ui-divider)"}}>
            <div className="row"><span style={{fontSize:"var(--ui-fs-sm)",fontWeight:500}}>Total do dia</span><div className="spring"/>
              <strong style={{fontVariantNumeric:"tabular-nums"}}>{ciDur(525)}</strong></div>
          </div>}
        </UICard>
      </div>
    </div>}

    {tab==="historico"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={CI_DIAS} rowKey="id" searchable pageSize={10} onRowClick={d=>setSel(d.id)}
        searchPlaceholder="Pesquisar por dia…"
        emptyState={<UIEmptyState title="Sem registos" description="Ainda não há marcações neste período."/>}
        columns={[
          {key:"day",label:"Dia",sortable:true,render:(v,r)=><span><span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{v} jul</span> <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{CI_WD[r.wd]}</span></span>},
          {key:"in",label:"Entrada",sortable:true,render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{v!=null?ciHM(v):"—"}</span>},
          {key:"out",label:"Saída",sortable:true,render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{v!=null?ciHM(v):"—"}</span>},
          {key:"pausa",label:"Pausas",align:"right",render:v=><span className="muted" style={{fontVariantNumeric:"tabular-nums"}}>{v?v+" min":"—"}</span>},
          {key:"total",label:"Trabalhado",sortable:true,align:"right",render:v=><span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{v?ciDur(v):"—"}</span>},
          {key:"extra",label:"Extra",align:"right",render:v=>v?<UIPill tone="warning">{ciDur(v)}</UIPill>:<span className="muted">—</span>},
          {key:"loc",label:"Local",render:v=>v?<span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{CI_LOCAIS.find(l=>l.id===v).name.replace("Escritório ","")}</span>:<span className="muted">—</span>},
          {key:"state",label:"Estado",align:"right",render:v=><UIPill tone={CI_STATE[v].tone} dot>{CI_STATE[v].label}</UIPill>},
        ]}/>
    </div>}

    {tab==="locais"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:16}}>
      <UIBanner tone="info" title="Cerca geográfica">Só é possível registar entrada dentro do raio definido para cada local. Fora do raio, o registo fica marcado para validação do responsável.</UIBanner>
      {CI_LOCAIS.map(l=><UICard key={l.id} elevation={0}>
        <div className="row" style={{gap:14,flexWrap:"wrap"}}>
          <span style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"grid",placeItems:"center",color:"var(--ui-text-3)",flexShrink:0}}>
            <I d={["M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z","M12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"]} size={18}/>
          </span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontWeight:600}}>{l.name}</div>
            <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:2}}>{l.addr}</div>
          </div>
          {l.radius!=null
            ? <UIPill dot tone="success">Raio de {l.radius} m</UIPill>
            : <UIPill>Sem cerca</UIPill>}
          <UIButton size="sm" variant="outline" onClick={()=>setQr(true)}>Ver QR</UIButton>
        </div>
      </UICard>)}
    </div>}
  </UICard>

  <UIDrawer open={!!cur} width={420} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:10}}><span style={{fontWeight:600}}>{cur.day} de julho</span><UIPill tone={CI_STATE[cur.state].tone} dot>{CI_STATE[cur.state].label}</UIPill></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton><UIButton onClick={()=>{setSel(null);setCorrecao(cur);}}>Pedir correção</UIButton></React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:24}}>
      <div>
        <div style={{fontSize:"var(--ui-fs-h1)",fontWeight:600,letterSpacing:"var(--ui-ls-h1)",fontVariantNumeric:"tabular-nums"}}>{cur.total?ciDur(cur.total):"Sem registo"}</div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:4}}>{cur.in!=null?ciHM(cur.in)+" às "+ciHM(cur.out)+" · "+cur.pausa+" min de pausa":"Nenhuma marcação neste dia"}</div>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"116px minmax(0,1fr)",gap:"12px 16px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
        <span className="muted">Previsto</span><span>8h</span>
        <span className="muted">Diferença</span><span style={{color:cur.total>480?"var(--ui-warning)":cur.total<480?"var(--ui-danger)":"var(--ui-success)"}}>{cur.total?(cur.total>=480?"+":"")+ciDur(Math.abs(cur.total-480)):"—"}</span>
        {cur.loc&&<React.Fragment><span className="muted">Local</span><span>{CI_LOCAIS.find(l=>l.id===cur.loc).name}</span></React.Fragment>}
        <span className="muted">Validação</span><span>{cur.state==="falta"?"Sem justificação":"Dentro da cerca"}</span>
      </div>
      {cur.state==="falta"&&<UIBanner tone="danger" title="Dia sem marcações">Se trabalhaste neste dia, pede uma correção para o responsável validar.</UIBanner>}
    </div>}
  </UIDrawer>

  <CiQR open={qr} onClose={()=>setQr(false)}/>

  <UIModal open={!!correcao} onClose={()=>setCorrecao(null)} title="Pedir correção de ponto" width={520}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Vai para aprovação do responsável</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setCorrecao(null)}>Cancelar</UIButton><UIButton onClick={()=>{setCorrecao(null);setEnviado(true);setTimeout(()=>setEnviado(false),3600);}}>Enviar pedido</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UIInput label="Dia" defaultValue={correcao&&correcao.day?correcao.day+"/07":CI_TODAY.getDate()+"/07"}/>
        <UISelect label="O que corrigir" options={["Hora de entrada","Hora de saída","Pausa","Dia inteiro em falta"]}/>
        <UIInput label="Hora correta" placeholder="08:00"/>
        <UISelect label="Local" options={CI_LOCAIS.map(l=>l.name)}/>
      </div>
      <UITextarea label="Motivo" description="Visível para o teu responsável." placeholder="Ex.: esqueci-me de registar a saída ao sair para o cliente."/>
    </div>
  </UIModal>
  </React.Fragment>;
};