// Unidades page

const { useState: unState } = React;

/* ── Dias da semana (shared) ── */
const DIAS_SEMANA = [
  { key:'seg', label:'Seg' },
  { key:'ter', label:'Ter' },
  { key:'qua', label:'Qua' },
  { key:'qui', label:'Qui' },
  { key:'sex', label:'Sex' },
  { key:'sab', label:'Sáb' },
  { key:'dom', label:'Dom' },
];

/* ── Seção de disponibilidade (reutilizável) ── */
function DisponibilidadeSection({ form, setForm }) {
  const toggleDia = dia => setForm(f => {
    const dias = f.diasSelecionados.includes(dia)
      ? f.diasSelecionados.filter(d => d !== dia)
      : [...f.diasSelecionados, dia];
    return { ...f, diasSelecionados: dias };
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <div style={{ borderTop:'1px solid #e5e7eb', paddingTop:4 }}>
      <label style={{ fontSize:13, fontWeight:600, color:'#374151', display:'block', marginBottom:10 }}>
        Disponibilidade
      </label>
      <div style={{ marginBottom:12 }}>
        <label style={{ fontSize:12, fontWeight:500, color:'#6b7280', display:'block', marginBottom:7 }}>Dias disponíveis</label>
        <div style={{ display:'flex', gap:6 }}>
          {DIAS_SEMANA.map(({ key, label }) => {
            const ativo = form.diasSelecionados.includes(key);
            return (
              <button key={key} onClick={() => toggleDia(key)}
                style={{
                  flex:1, padding:'7px 0', borderRadius:6,
                  border: ativo ? `1.5px solid ${C.primary}` : '1.5px solid #d1d5db',
                  background: ativo ? C.primary : 'white',
                  color: ativo ? 'white' : '#6b7280',
                  fontSize:12, fontWeight:600, cursor:'pointer', transition:'all .15s',
                }}>
                {label}
              </button>
            );
          })}
        </div>
      </div>
      <div style={{ display:'flex', gap:12 }}>
        <FInput label="Horário de início" type="time" value={form.horaInicio} onChange={set('horaInicio')} half />
        <FInput label="Horário de término" type="time" value={form.horaFim} onChange={set('horaFim')} half />
      </div>
      {form.diasSelecionados.length > 0 && (
        <div style={{ marginTop:10, padding:'8px 12px', background:'#eff6ff', borderRadius:6, fontSize:12, color:'#2563a8', fontWeight:500 }}>
          📅 {form.diasSelecionados.map(d => DIAS_SEMANA.find(x => x.key === d)?.label).join(', ')} · {form.horaInicio} às {form.horaFim}
        </div>
      )}
    </div>
  );
}

/* ── Seção de endereço (reutilizável) ── */
function EnderecoSection({ form, setForm }) {
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const buscarCep = async () => {
    const cep = form.cep.replace(/\D/g,'');
    if (cep.length !== 8) return;
    try {
      const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await res.json();
      if (!d.erro) setForm(f => ({ ...f, logradouro: d.logradouro||'', bairro: d.bairro||'', cidade: d.localidade||'', estado: d.uf||'' }));
    } catch(_) {}
  };

  return (
    <div style={{ borderTop:'1px solid #e5e7eb', paddingTop:4 }}>
      <label style={{ fontSize:13, fontWeight:600, color:'#374151', display:'block', marginBottom:10 }}>Endereço</label>
      <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
        <FInput label="CEP" placeholder="00000-000" value={form.cep} onChange={set('cep')} onBlur={buscarCep} />
        <FInput label="Logradouro" placeholder="Rua, Avenida, Praça…" value={form.logradouro} onChange={set('logradouro')} />
        <div style={{ display:'flex', gap:10 }}>
          <FInput label="Número" placeholder="123" value={form.numero} onChange={set('numero')} style={{ flex:'0 0 100px' }} />
          <FInput label="Complemento" placeholder="Apto, Sala…" value={form.complemento} onChange={set('complemento')} style={{ flex:1 }} />
        </div>
        <FInput label="Bairro" placeholder="Bairro" value={form.bairro} onChange={set('bairro')} />
        <div style={{ display:'flex', gap:10 }}>
          <FInput label="Cidade" placeholder="Cidade" value={form.cidade} onChange={set('cidade')} style={{ flex:1 }} />
          <FInput label="Estado" placeholder="UF" value={form.estado} onChange={set('estado')} style={{ flex:'0 0 70px' }} />
        </div>
      </div>
    </div>
  );
}

/* ── Modal: Nova Unidade ── */
function ModalNovaUnidade({ onClose, onSave }) {
  const [form, setForm] = unState({
    nome:'', cep:'', logradouro:'', numero:'', complemento:'', bairro:'', cidade:'', estado:'',
    diasSelecionados: ['seg','ter','qua','qui','sex'], horaInicio:'08:00', horaFim:'18:00',
  });

  const handleSave = () => {
    const address = [form.logradouro, form.numero, form.complemento, form.bairro, form.cidade, form.estado]
      .filter(Boolean).join(', ');
    onSave({ nome: form.nome, address, cep: form.cep, logradouro: form.logradouro, numero: form.numero, complemento: form.complemento, bairro: form.bairro, cidade: form.cidade, estado: form.estado, disponibilidade: { dias: form.diasSelecionados, horaInicio: form.horaInicio, horaFim: form.horaFim } });
    onClose();
  };

  return (
    <Modal title="Cadastrar nova unidade" onClose={onClose} width={480}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FInput label="Nome da unidade" placeholder="Ex: Unidade Centro" value={form.nome}
          onChange={e => setForm(f => ({ ...f, nome: e.target.value }))} />
        <EnderecoSection form={form} setForm={setForm} />
        <DisponibilidadeSection form={form} setForm={setForm} />
      </div>
      <ModalActions onCancel={onClose} onConfirm={handleSave} confirmLabel="Cadastrar" />
    </Modal>
  );
}

/* ── Modal: Editar Unidade ── */
function ModalEditarUnidade({ unit, onClose, onSave }) {
  const [form, setForm] = unState({
    nome: unit.name,
    cep: unit.cep || '',
    logradouro: unit.logradouro || unit.address || '',
    numero: unit.numero || '',
    complemento: unit.complemento || '',
    bairro: unit.bairro || '',
    cidade: unit.cidade || '',
    estado: unit.estado || '',
    diasSelecionados: unit.disponibilidade?.dias || ['seg','ter','qua','qui','sex'],
    horaInicio: unit.disponibilidade?.horaInicio || '08:00',
    horaFim: unit.disponibilidade?.horaFim || '18:00',
  });

  const handleSave = () => {
    const address = [form.logradouro, form.numero, form.complemento, form.bairro, form.cidade, form.estado]
      .filter(Boolean).join(', ') || form.logradouro;
    onSave({ ...unit, name: form.nome, address, cep: form.cep, logradouro: form.logradouro, numero: form.numero, complemento: form.complemento, bairro: form.bairro, cidade: form.cidade, estado: form.estado, disponibilidade: { dias: form.diasSelecionados, horaInicio: form.horaInicio, horaFim: form.horaFim } });
    onClose();
  };

  return (
    <Modal title={`Editar unidade – ${unit.name}`} onClose={onClose} width={480}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FInput label="Nome da unidade" placeholder="Ex: Unidade Centro" value={form.nome}
          onChange={e => setForm(f => ({ ...f, nome: e.target.value }))} />
        <EnderecoSection form={form} setForm={setForm} />
        <DisponibilidadeSection form={form} setForm={setForm} />
      </div>
      <ModalActions onCancel={onClose} onConfirm={handleSave} confirmLabel="Salvar alterações" />
    </Modal>
  );
}

/* ── Modal: Confirmação de exclusão ── */
function ModalConfirmar({ titulo, descricao, onClose, onConfirm }) {
  return (
    <Modal title={titulo} onClose={onClose} width={360}>
      <p style={{ fontSize:14, color:'#374151', margin:'0 0 8px' }}>{descricao}</p>
      <p style={{ fontSize:13, color:'#9ca3af', margin:0 }}>Essa ação não pode ser desfeita.</p>
      <div style={{ display:'flex', justifyContent:'flex-end', gap:10, marginTop:22 }}>
        <button onClick={onClose}
          style={{ padding:'8px 20px', borderRadius:6, border:'1px solid #d1d5db', background:'white', color:'#374151', fontSize:14, fontWeight:500, cursor:'pointer' }}>
          Cancelar
        </button>
        <button onClick={() => { onConfirm(); onClose(); }}
          style={{ padding:'8px 20px', borderRadius:6, border:'none', background:'#dc2626', color:'white', fontSize:14, fontWeight:500, cursor:'pointer' }}>
          Excluir
        </button>
      </div>
    </Modal>
  );
}

/* ── Modal: Adicionar Sala ── */
function ModalAdicionarSala({ unitName, onClose, onSave }) {
  const [form, setForm] = unState({ nome:'', descricao:'' });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const handleSave = () => { onSave({ nome: form.nome, descricao: form.descricao }); onClose(); };
  return (
    <Modal title={`Adicionar sala – ${unitName}`} onClose={onClose}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FInput label="Nome da sala" placeholder="Ex: Sala 201" value={form.nome} onChange={set('nome')} />
        <FInput label="Descrição" placeholder="Descrição da sala" value={form.descricao} onChange={set('descricao')} />
      </div>
      <ModalActions onCancel={onClose} onConfirm={handleSave} confirmLabel="Cadastrar" />
    </Modal>
  );
}

/* ── Modal: Editar Sala ── */
function ModalEditarSala({ room, onClose, onSave }) {
  const [form, setForm] = unState({
    nome: room.name,
    capacidade: String(room.capacity),
    status: room.status,
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const handleSave = () => {
    onSave({ ...room, name: form.nome, capacity: Number(form.capacidade) || room.capacity, status: form.status });
    onClose();
  };
  return (
    <Modal title={`Editar sala – ${room.name}`} onClose={onClose}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FInput label="Nome da sala" placeholder="Ex: Sala 201" value={form.nome} onChange={set('nome')} />
        <FInput label="Capacidade (pessoas)" type="number" placeholder="2" value={form.capacidade} onChange={set('capacidade')} />
        <FSelect label="Status" value={form.status} onChange={set('status')}>
          <option value="Ativo">Ativo</option>
          <option value="Inativo">Inativo</option>
        </FSelect>
      </div>
      <ModalActions onCancel={onClose} onConfirm={handleSave} confirmLabel="Salvar alterações" />
    </Modal>
  );
}

/* ── Room row ── */
function RoomRow({ room, isLast, onEdit, onDelete }) {
  const [confirmDelete, setConfirmDelete] = unState(false);
  return (
    <>
      <div style={{
        display:'flex', alignItems:'center', padding:'13px 16px',
        borderBottom: isLast ? 'none' : '1px solid #f3f4f6',
      }}>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:14, fontWeight:500, color:'#111' }}>{room.name}</div>
          <div style={{ fontSize:12, color:'#9ca3af', marginTop:2 }}>Capacidade: {room.capacity} pessoas</div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <Badge variant="ativo">{room.status}</Badge>
          <button style={{ background:'none', border:'none', cursor:'pointer' }} title="Permissões">
            <Icon name="lock" size={16} color="#9ca3af" />
          </button>
          <button onClick={onEdit} style={{ background:'none', border:'none', cursor:'pointer' }} title="Editar">
            <Icon name="edit" size={16} color="#9ca3af" />
          </button>
          <button onClick={() => setConfirmDelete(true)} style={{ background:'none', border:'none', cursor:'pointer' }} title="Excluir">
            <Icon name="trash" size={16} color="#dc2626" />
          </button>
        </div>
      </div>
      {confirmDelete && (
        <ModalConfirmar
          titulo="Excluir sala"
          descricao={`Deseja excluir a sala "${room.name}"?`}
          onClose={() => setConfirmDelete(false)}
          onConfirm={onDelete}
        />
      )}
    </>
  );
}

/* ── Unit card ── */
function UnitCard({ unit, onUpdateUnit, onUpdateRoom, onAddRoom, onDeleteUnit }) {
  const [showAddRoom,    setShowAddRoom]    = unState(false);
  const [showEditUnit,   setShowEditUnit]   = unState(false);
  const [confirmDelUnit, setConfirmDelUnit] = unState(false);
  const [editingRoom,    setEditingRoom]    = unState(null);

  return (
    <Card style={{ padding:'20px 22px', flex:'1 1 0', minWidth:0 }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:18 }}>
        <div style={{ width:44, height:44, borderRadius:10, background:C.primary, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          <Icon name="building" size={22} color="white" />
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:16, fontWeight:700, color:'#111' }}>{unit.name}</div>
          <div style={{ fontSize:12, color:'#6b7280', display:'flex', alignItems:'center', gap:4, marginTop:2 }}>
            <Icon name="pin" size={12} color="#9ca3af" />
            {unit.address}
          </div>
        </div>
        {/* Botões editar / excluir unidade */}
        <button onClick={() => setShowEditUnit(true)}
          style={{ background:'none', border:'none', cursor:'pointer', padding:4 }} title="Editar unidade">
          <Icon name="edit" size={16} color="#9ca3af" />
        </button>
        <button onClick={() => setConfirmDelUnit(true)}
          style={{ background:'none', border:'none', cursor:'pointer', padding:4 }} title="Excluir unidade">
          <Icon name="trash" size={16} color="#dc2626" />
        </button>
      </div>

      {/* Rooms section */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <span style={{ fontSize:14, fontWeight:500, color:'#374151' }}>Salas ({unit.rooms.length})</span>
        <button onClick={() => setShowAddRoom(true)}
          style={{ display:'flex', alignItems:'center', gap:5, padding:'6px 12px', border:'1px solid #d1d5db', borderRadius:6, background:'white', cursor:'pointer', fontSize:13, color:'#374151', fontWeight:500 }}>
          + Adicionar sala
        </button>
      </div>

      <div style={{ border:'1px solid #e5e7eb', borderRadius:8, overflow:'hidden' }}>
        {unit.rooms.map((r, i) => (
          <RoomRow
            key={r.id}
            room={r}
            isLast={i === unit.rooms.length - 1}
            onEdit={() => setEditingRoom(r)}
            onDelete={() => onUpdateRoom(unit.id, null, r.id)}
          />
        ))}
      </div>

      {/* Modais */}
      {showAddRoom && (
        <ModalAdicionarSala
          unitName={unit.name}
          onClose={() => setShowAddRoom(false)}
          onSave={({ nome, descricao }) => {
            const newRoom = { id: Date.now(), name: nome, capacity: descricao || 2, status:'Ativo' };
            onAddRoom(unit.id, newRoom);
          }}
        />
      )}
      {showEditUnit && (
        <ModalEditarUnidade
          unit={unit}
          onClose={() => setShowEditUnit(false)}
          onSave={onUpdateUnit}
        />
      )}
      {confirmDelUnit && (
        <ModalConfirmar
          titulo="Excluir unidade"
          descricao={`Deseja excluir a unidade "${unit.name}" e todas as suas salas?`}
          onClose={() => setConfirmDelUnit(false)}
          onConfirm={onDeleteUnit}
        />
      )}
      {editingRoom && (
        <ModalEditarSala
          room={editingRoom}
          onClose={() => setEditingRoom(null)}
          onSave={updated => onUpdateRoom(unit.id, updated)}
        />
      )}
    </Card>
  );
}

/* ── Unidades page ── */
function Unidades() {
  const [units, setUnits] = unState(UNITS_DATA);
  const [showNew, setShowNew] = unState(false);

  const updateUnit = updated =>
    setUnits(us => us.map(u => u.id === updated.id ? updated : u));

  const updateRoom = (unitId, updatedRoom, deleteId) =>
    setUnits(us => us.map(u => u.id === unitId
      ? { ...u, rooms: deleteId
          ? u.rooms.filter(r => r.id !== deleteId)
          : u.rooms.map(r => r.id === updatedRoom.id ? updatedRoom : r) }
      : u));

  const deleteUnit = (unitId) =>
    setUnits(us => us.filter(u => u.id !== unitId));

  const addRoom = (unitId, newRoom) =>
    setUnits(us => us.map(u => u.id === unitId
      ? { ...u, rooms: [...u.rooms, newRoom] }
      : u));

  const addUnit = ({ nome, address, ...rest }) => {
    const newUnit = { id: Date.now(), name: nome, address, ...rest, rooms: [] };
    setUnits(us => [...us, newUnit]);
  };

  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Unidades" />
      <div style={{ flex:1, overflowY:'auto', padding:'20px 24px', display:'flex', flexDirection:'column', gap:14 }}>
        <div style={{ display:'flex', gap:16, alignItems:'flex-start' }}>
          {units.map(u => (
            <UnitCard
              key={u.id}
              unit={u}
              onUpdateUnit={updateUnit}
              onUpdateRoom={updateRoom}
              onAddRoom={addRoom}
              onDeleteUnit={() => deleteUnit(u.id)}
            />
          ))}
        </div>
        <div style={{ display:'flex', justifyContent:'flex-end' }}>
          <button onClick={() => setShowNew(true)}
            style={{ display:'flex', alignItems:'center', gap:6, padding:'9px 18px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer' }}>
            + Nova Unidade
          </button>
        </div>
      </div>

      {showNew && <ModalNovaUnidade onClose={() => setShowNew(false)} onSave={addUnit} />}
    </div>
  );
}

Object.assign(window, { Unidades });