/* ──────────────────────────────────────────────────────────────────
   PlannerScreen — la giornata di cantieri (replica hero screenshot)
   Settimana → giorno → SiteCards + non assegnati + FAB
   ────────────────────────────────────────────────────────────────── */

function AnimPlanner() {
  const [selectedDay, setSelectedDay] = React.useState(2);
  const [view, setView] = React.useState('Settimana');

  const days = [
    { dow:'LUN', day:27 }, { dow:'MAR', day:28 }, { dow:'MER', day:29 },
    { dow:'GIO', day:30 }, { dow:'VEN', day:1 },
  ];

  const ferxSite = {
    name: 'FER-X Abruzzo',
    address: 'Via della Nocella 19 — Celano (AQ)',
    clr: '#6366F1',
    stato: 'Attivo',
    caposquadra: 'Raphael',
    meteo: 'Nuvoloso',
    attivita: 'Chiusura Cantieri (elettrico…)',
    vehicles: [
      { name: 'Ford/TRANSIT', seats: 7, type: 'Cassonato', driver: 'Raphael' },
    ],
    team: [
      { ini: 'AC', name: 'Ailton',  preposto: false },
      { ini: 'DS', name: 'Daniel',  preposto: true  },
      { ini: 'RL', name: 'Raphael', preposto: true  },
      { ini: 'TT', name: 'Thalys',  preposto: false },
      { ini: 'BK', name: 'Bakary',  preposto: true  },
    ],
  };

  const naturasi = {
    name: 'Naturasì Cesena',
    address: 'Via Capannaguzzo 14, Cesena (FC)',
    clr: '#22C55E',
    stato: 'Attivo',
    caposquadra: 'Daniele',
    meteo: 'Sereno',
    attivita: 'Posa pavimentazione sala',
    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 },
    ],
  };

  const sansavini = {
    name: 'Sansavini Centrale',
    address: 'Via Romea 33, Cesenatico (FC)',
    clr: '#F59E0B',
    stato: 'Sospeso',
    caposquadra: null,
    meteo: 'Pioggia',
    attivita: 'In attesa materiale frigo',
    vehicles: [],
    team: [],
  };

  const sites = [ferxSite, naturasi, sansavini];
  const totOp = sites.reduce((n, s) => n + s.team.length, 0);
  const totVeh = sites.reduce((n, s) => n + (s.vehicles?.length || 0), 0);

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',background:'#F8FAFC',overflow:'hidden'}}>
      <AppHeader tenantLogo="/assets/tenant-logo-sg5.png" view={view} onView={setView}/>
      <DayStrip days={days} selectedIdx={selectedDay} onSelect={setSelectedDay}/>
      <div style={{flex:1,overflowY:'auto',paddingBottom:8}}>
        <ProgramHeader
          label="Programma Domenica 03 Mag"
          counts={[
            { icon: '🏗', n: sites.length,           label: 'cantieri',  bg: '#FFF7ED', fg: '#C2410C' },
            { icon: '👥', n: totOp,                  label: 'in campo',  bg: '#ECFDF5', fg: '#059669' },
            { icon: '👤', n: 12,                     label: 'liberi',    bg: '#F1F5F9', fg: '#64748B' },
            { icon: '💼', n: 13,                     label: 'in ufficio',bg: '#EEF2FF', fg: '#3730A3' },
            { icon: '🚚', n: 7,                      label: 'mezzi liberi',bg:'#FFF7ED',fg:'#D97706' },
          ]}
        />
        <div style={{padding:'0 14px'}}>
          {sites.map((s, i) => <SiteCard key={i} site={s}/>)}
        </div>
        <div style={{background:'#fff',borderRadius:14,margin:'10px 14px',border:'1px solid #E5E7EB',overflow:'hidden'}}>
          <div style={{padding:'12px 14px',display:'flex',alignItems:'center',gap:8,borderBottom:'1px solid #F1F5F9'}}>
            <Icon.Users w={16} color="#64748B"/>
            <span style={{fontSize:14,fontWeight:700,color:'#1E293B',flex:1}}>Non assegnati <span style={{color:'#94A3B8',fontWeight:500}}>(12)</span></span>
          </div>
          <div style={{padding:'10px 14px',borderBottom:'1px solid #F1F5F9'}}>
            <div style={{position:'relative'}}>
              <Icon.Search w={14} style={{position:'absolute',left:12,top:'50%',transform:'translateY(-50%)',color:'#94A3B8'}}/>
              <input placeholder="Cerca persona..." style={{width:'100%',padding:'9px 12px 9px 34px',borderRadius:10,border:'1px solid #E2E8F0',background:'#F8FAFC',fontSize:14,fontFamily:'inherit',boxSizing:'border-box'}}/>
            </div>
          </div>
          <PersonRow ini="AB" name="Alberto Baldo Blotto" role="Elettricista"/>
          <PersonRow ini="AA" name="Anderson Aparecido Damazio" role="Magazziniere" color="#FEF3C7" textColor="#92400E"/>
          <PersonRow ini="GP" name="Giulio Pellegrini" role="Operaio specializzato" color="#EEF2FF" textColor="#3730A3"/>
          <PersonRow ini="MR" name="Marco Rossi" role="Impiantista" color="#ECFDF5" textColor="#065F46"/>
        </div>
      </div>
      <FAB/>
      <BottomNav active="planner"/>
    </div>
  );
}

Object.assign(window, { AnimPlanner });