/* ──────────────────────────────────────────────────────────────────
   SetupCantiereScreen — creazione di un cantiere PIANIFICATO,
   velocizzata (badge "demo 4×"). I campi si compilano da soli con la
   timeline, poi tap su "Crea e pianifica" → il cantiere appare nel
   programma con toast di conferma.
   ────────────────────────────────────────────────────────────────── */

function SetupField({ label, value, caret, children }) {
  return (
    <div style={{marginBottom:9}}>
      <div style={{fontSize:10.5,fontWeight:700,color:'#94A3B8',textTransform:'uppercase',letterSpacing:.5,marginBottom:4}}>{label}</div>
      {children || (
        <div style={{background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:10,padding:'9px 12px',fontSize:14,color: value ? '#0F172A' : '#CBD5E1',fontWeight:500,minHeight:19,display:'flex',alignItems:'center'}}>
          {value || ' '}
          {caret && <span style={{width:2,height:16,background:ACCENT,marginLeft:1,borderRadius:1}}/>}
        </div>
      )}
    </div>
  );
}

function SetupChip({ on, children, pop = 1 }) {
  return (
    <span style={{
      display:'inline-flex',alignItems:'center',gap:5,
      background: on ? '#FFF7ED' : '#F8FAFC',
      border: '1px solid ' + (on ? '#FED7AA' : '#E2E8F0'),
      color: on ? '#C2410C' : '#94A3B8',
      padding:'6px 11px',borderRadius:999,fontSize:12.5,fontWeight:600,
      transform:`scale(${0.6 + 0.4 * pop})`,opacity:pop,
    }}>{children}</span>
  );
}

function AnimSetupCantiere() {
  const time = useTime();
  const typed = (s, t0, t1) => s.slice(0, Math.round(s.length * clamp((time - t0) / (t1 - t0), 0, 1)));
  const pop = (t0, d = 0.35) => Easing.easeOutBack(clamp((time - t0) / d, 0, 1));
  const vis = (t0) => time >= t0;

  /* fasi */
  const fabTapDone = time >= 1.0;
  const sheetIn  = Easing.easeOutCubic(clamp((time - 1.0) / 0.45, 0, 1));
  const sheetOut = Easing.easeInQuad(clamp((time - 8.1) / 0.4, 0, 1));
  const sheetY   = (1 - sheetIn) * 720 + sheetOut * 720;
  const dimmed   = Math.min(sheetIn, 1 - sheetOut);

  const nome      = typed('Residenza Le Vele', 1.6, 2.5);
  const indirizzo = typed('Via Emilia 142, Forlì (FC)', 2.6, 3.5);
  const cliente   = typed('CMC Costruzioni', 3.6, 4.2);

  const btnPressed = time >= 7.35 && time <= 7.75;
  const cardPop = pop(8.55, 0.5);
  const toastIn = Easing.easeOutBack(clamp((time - 9.0) / 0.5, 0, 1));

  const newSite = {
    name: 'Residenza Le Vele',
    address: 'Via Emilia 142, Forlì (FC)',
    clr: '#0EA5E9',
    stato: 'Attivo',
    caposquadra: 'Daniele',
    attivita: 'Predisposizione impianti',
    vehicles: [{ name: 'Iveco Daily', seats: 3, type: 'Cassone', driver: 'Daniele' }],
    team: [
      { ini: 'DM', name: 'Daniele', preposto: true },
      { ini: 'AS', name: 'Andrea',  preposto: false },
      { ini: 'LP', name: 'Luigi',   preposto: false },
      { ini: 'MR', name: 'Marco',   preposto: false },
    ],
  };

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',background:'#F8FAFC',overflow:'hidden',position:'relative'}}>
      <AppHeader tenantLogo="/assets/tenant-logo-sg5.png" view="Settimana"/>
      <DayStrip days={[{dow:'LUN',day:11},{dow:'MAR',day:12},{dow:'MER',day:13},{dow:'GIO',day:14},{dow:'VEN',day:15}]} selectedIdx={0}/>

      <div style={{flex:1,overflow:'hidden'}}>
        <ProgramHeader
          label="Programma Lun 11 Mag"
          counts={[
            { icon: '🏗', n: cardPop > 0 ? 2 : 1, label: 'cantieri', bg: '#FFF7ED', fg: '#C2410C' },
            { icon: '👥', n: cardPop > 0 ? 7 : 3, label: 'in campo', bg: '#ECFDF5', fg: '#059669' },
            { icon: '🚚', n: cardPop > 0 ? 2 : 1, label: 'mezzi',    bg: '#FFF7ED', fg: '#D97706' },
          ]}
        />
        <div style={{padding:'0 14px'}}>
          {cardPop > 0 && (
            <div style={{transform:`scale(${0.8 + 0.2*cardPop})`,opacity:cardPop,transformOrigin:'top center',position:'relative'}}>
              <div style={{position:'absolute',inset:-3,borderRadius:17,border:'2px solid '+ACCENT,opacity:Math.max(0,1-(time-9.2)),pointerEvents:'none',zIndex:5}}/>
              <SiteCard site={newSite}/>
            </div>
          )}
          <SiteCard site={{
            name: 'Naturasì Cesena', address: 'Via Capannaguzzo 14, Cesena (FC)',
            clr: '#22C55E', stato: 'Attivo', caposquadra: 'Daniele', attivita: 'Posa pavimentazione sala',
            vehicles: [], team: [
              { ini: 'DM', name: 'Daniele', preposto: true },
              { ini: 'AS', name: 'Andrea',  preposto: false },
              { ini: 'LP', name: 'Luigi',   preposto: false },
            ],
          }}/>
        </div>
      </div>

      <FAB/>
      <BottomNav active="planner"/>

      {/* dim layer */}
      <div style={{position:'absolute',inset:0,background:'rgba(15,23,42,.45)',opacity:dimmed,pointerEvents:'none',zIndex:20,transition:'opacity .1s'}}/>

      {/* sheet "Nuovo cantiere" */}
      {sheetIn > 0 && sheetOut < 1 && (
        <div style={{
          position:'absolute',left:0,right:0,bottom:0,zIndex:25,
          background:'#fff',borderRadius:'20px 20px 0 0',
          boxShadow:'0 -12px 40px rgba(15,23,42,.25)',
          transform:`translateY(${sheetY}px)`,
          padding:'14px 16px 18px',
        }}>
          <div style={{width:40,height:4,borderRadius:2,background:'#E2E8F0',margin:'0 auto 12px'}}/>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:19,color:'#0F172A',margin:0,flex:1}}>Nuovo cantiere</h2>
            <span style={{fontSize:10.5,fontWeight:700,color:'#0369A1',background:'#F0F9FF',border:'1px solid #BAE6FD',padding:'3px 9px',borderRadius:999,letterSpacing:.3}}>⏩ demo 4×</span>
          </div>

          <SetupField label="Nome cantiere" value={nome} caret={time >= 1.6 && time < 2.6}/>
          <SetupField label="Indirizzo" value={indirizzo} caret={time >= 2.6 && time < 3.6}/>
          <SetupField label="Cliente" value={cliente} caret={time >= 3.6 && time < 4.3}/>

          <SetupField label="Periodo pianificato">
            <div style={{display:'flex',gap:8}}>
              <SetupChip on={vis(4.45)} pop={vis(4.45)?pop(4.45):1}><Icon.Calendar w={12}/> Lun 11 Mag</SetupChip>
              <span style={{alignSelf:'center',color:'#94A3B8'}}>→</span>
              <SetupChip on={vis(4.7)} pop={vis(4.7)?pop(4.7):1}><Icon.Calendar w={12}/> Ven 22 Mag</SetupChip>
            </div>
          </SetupField>

          <SetupField label="Caposquadra">
            <div style={{background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:10,padding:'8px 12px',display:'flex',alignItems:'center',gap:8,minHeight:22}}>
              {vis(5.1) ? (
                <span style={{display:'inline-flex',alignItems:'center',gap:7,opacity:pop(5.1)}}>
                  <span style={{width:22,height:22,borderRadius:'50%',background:'#EEF2FF',color:'#3730A3',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:700,fontFamily:"'Syne',sans-serif"}}>DM</span>
                  <span style={{fontSize:14,fontWeight:600,color:'#0F172A'}}>Daniele Mancini</span>
                  <Icon.Star w={11} color={ACCENT} fill={ACCENT}/>
                </span>
              ) : <span style={{fontSize:14,color:'#CBD5E1'}}>Seleziona…</span>}
              <span style={{marginLeft:'auto',color:'#94A3B8'}}><Icon.ChevronD w={14}/></span>
            </div>
          </SetupField>

          <SetupField label="Squadra e mezzo">
            <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
              <SetupChip on={vis(5.5)}  pop={vis(5.5)?pop(5.5):1}>Andrea S.</SetupChip>
              <SetupChip on={vis(5.75)} pop={vis(5.75)?pop(5.75):1}>Luigi P.</SetupChip>
              <SetupChip on={vis(6.0)}  pop={vis(6.0)?pop(6.0):1}>Marco R.</SetupChip>
              <SetupChip on={vis(6.35)} pop={vis(6.35)?pop(6.35):1}><Icon.Truck w={12}/> Iveco Daily · 3p</SetupChip>
            </div>
          </SetupField>

          <button style={{
            width:'100%',marginTop:4,minHeight:46,
            background: btnPressed ? ACCENT_2 : ACCENT, color:'#fff',
            border:'none',borderRadius:12,fontWeight:700,fontSize:15,fontFamily:'inherit',cursor:'pointer',
            display:'flex',alignItems:'center',justifyContent:'center',gap:8,
            transform: btnPressed ? 'scale(.97)' : 'scale(1)', transition:'all .12s',
            boxShadow:'0 6px 18px rgba(249,115,22,.3)',
          }}>
            <Icon.Check w={16}/> Crea e pianifica 2 settimane
          </button>
        </div>
      )}

      {/* toast finale */}
      {toastIn > 0 && (
        <div style={{position:'absolute',inset:0,zIndex:30,opacity:clamp((time-9.0)/0.3,0,1),transform:`translateY(${(1-toastIn)*40}px)`,pointerEvents:'none'}}>
          <Toast text="Cantiere creato. 2 settimane già nel programma." action="Apri"/>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AnimSetupCantiere });