const { Card, Button, Icon, Switch, Select, Input, Tabs, Avatar, Badge, DataTable, SectorTag, Checkbox } = window.ACRFlowDesignSystem_ba1e9c;

function SettingsScreen({ dark, onToggleDark, onNavigate, user }) {
  const [tab, setTab] = React.useState("aparencia");
  const [domains, setDomains] = React.useState(["acrcondominio.com.br", "acrcondo.com"]);
  const [novo, setNovo] = React.useState("");
  const [googleOn, setGoogleOn] = React.useState(true);
  const [localOn, setLocalOn] = React.useState(true);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)", maxWidth: 980 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
        <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Configurações</h1>
        <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Preferências pessoais, notificações e estrutura da empresa</span>
      </div>

      <Tabs value={tab} onChange={setTab} tabs={[
        { id: "aparencia", label: "Aparência" },
        { id: "notificacoes", label: "Notificações" },
        { id: "acesso", label: "Acesso e login" },
        { id: "setores", label: "Setores" },
        { id: "equipe", label: "Equipe" },
      ]} />

      {tab === "aparencia" ? (
        <Card title="Tema" subtitle="A alternância também está na topbar">
          <div style={{ display: "flex", gap: 14 }}>
            {[["Claro", false], ["Escuro", true]].map(([l, v]) => (
              <button key={l} type="button" onClick={() => dark !== v && onToggleDark()}
                style={{ flex: 1, padding: 12, borderRadius: "var(--radius-md)", cursor: "pointer", textAlign: "left", background: "var(--surface-card)", border: "1px solid " + (dark === v ? "var(--accent-primary)" : "var(--border-default)"), boxShadow: dark === v ? "var(--focus-ring)" : "none" }}>
                <div data-theme={v ? "dark" : undefined} style={{ height: 74, borderRadius: "var(--radius-sm)", background: "var(--bg-app)", border: "1px solid var(--border-subtle)", display: "flex", overflow: "hidden", marginBottom: 10 }}>
                  <div style={{ width: 42, background: "var(--surface-sidebar)" }} />
                  <div style={{ flex: 1, padding: 8, display: "flex", flexDirection: "column", gap: 5 }}>
                    <div style={{ height: 10, borderRadius: 3, background: "var(--surface-card)", border: "1px solid var(--border-subtle)" }} />
                    <div style={{ height: 26, borderRadius: 4, background: "var(--surface-card)", border: "1px solid var(--border-subtle)" }} />
                  </div>
                </div>
                <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{l}</span>
              </button>
            ))}
          </div>
          <Switch checked={dark} onChange={onToggleDark} label="Modo escuro" description="Aplica [data-theme=dark] em todo o app." />
          <Select label="Densidade das listas" options={["Confortável", "Compacta"]} />
        </Card>
      ) : null}

      {tab === "notificacoes" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
          <Card title="Canais">
            <Switch checked label="E-mail" description={(user && user.email) || "Sem e-mail cadastrado"} />
            <Switch checked={false} label="WhatsApp" description="Integração com provedor externo — não configurada neste servidor." />
            <Switch checked={false} label="Resumo diário às 08:00" description="Pendências do dia anterior: atrasadas, em andamento e checklists pendentes." />
          </Card>
          <Card title="Quando avisar" padding="0">
            <div style={{ padding: "var(--pad-card)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {["Nova demanda atribuída", "Nova responsabilidade", "Comentário recebido", "Prazo próximo (1 dia antes)", "Demanda atrasada", "Checklist pendente", "Aguardando aprovação", "Demanda devolvida", "Demanda encerrada"].map((l, i) => (
                <Checkbox key={l} checked={i !== 5} label={l} />
              ))}
            </div>
          </Card>
        </div>
      ) : null}

      {tab === "acesso" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
          <Card title="Métodos de entrada" subtitle="Como os colaboradores acessam o FlowTix">
            <Switch checked={localOn} onChange={() => setLocalOn((v) => !v)} label="Conta local (login e senha)" description="Credenciais criadas no cadastro de Equipe." />
            <Switch checked={googleOn} onChange={() => setGoogleOn((v) => !v)} label="Entrar com Google" description="Somente contas dos domínios autorizados abaixo e já cadastradas na Equipe." />
          </Card>
          <Card title="Domínios autorizados" subtitle="O acesso via Google só é liberado para e-mails destes domínios">
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {domains.map((d) => (
                <div key={d} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)" }}>
                  <Icon name="globe" size={15} style={{ color: "var(--text-muted)" }} />
                  <span style={{ flex: 1, font: "var(--type-body-strong)", color: "var(--text-strong)" }}>@{d}</span>
                  <Badge tone="success" size="sm">Autorizado</Badge>
                  <Button variant="ghost" size="sm" onClick={() => setDomains((s) => s.filter((x) => x !== d))}>Remover</Button>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
              <Input label="Novo domínio" value={novo} placeholder="acrcondo.com" style={{ flex: 1 }} onChange={(e) => setNovo(e.target.value.replace(/^@/, "").trim().toLowerCase())} />
              <Button variant="secondary" disabled={!novo || domains.includes(novo)} onClick={() => { setDomains((s) => [...s, novo]); setNovo(""); }}>Adicionar</Button>
            </div>
            <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Contas fora destes domínios, ou sem cadastro ativo em Equipe, são bloqueadas mesmo com login Google válido.</span>
          </Card>
          <Card title="Política de senha" subtitle="Aplicada no cadastro de colaboradores">
            <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>Mínimo de 8 caracteres, com letra maiúscula, minúscula, número e caractere especial. Troca obrigatória no primeiro acesso quando marcada.</span>
          </Card>
        </div>
      ) : null}

      {tab === "setores" ? (
        <Card title="Setores" subtitle="Cadastro completo em Áreas e Atividades" actions={<Button variant="secondary" size="sm" iconLeft={<Icon name="external-link" size={15} />} onClick={() => onNavigate && onNavigate("taxonomia")}>Abrir cadastro</Button>} padding="0">
          <DataTable
            columns={[
              { key: "n", label: "Setor", render: (r) => <SectorTag sector={r.k} label={r.name} /> },
              { key: "cats", label: "Categorias", render: (r) => r.cats },
              { key: "users", label: "Usuários", width: 100, align: "right" },
              { key: "open", label: "Em aberto", width: 110, align: "right", render: (r) => <Badge tone="neutral" size="sm">{r.open}</Badge> },
            ]}
            rows={window.ACRData.sectorsCfg.map((s) => ({ id: s.id, k: s.id, name: s.name, cats: s.categories.join(", "), users: window.ACRData.team.filter((t) => t.sector === s.id).length, open: window.ACRData.demands.filter((d) => d.sector === s.id).length }))} />
        </Card>
      ) : null}

      {tab === "equipe" ? (
        <Card title="Equipe" subtitle="Perfis: Supervisor aprova encerramentos; Operacional executa" padding="0">
          <DataTable
            columns={[
              { key: "name", label: "Usuário", render: (r) => <Avatar name={r.name} role={r.role} showName size="sm" /> },
              { key: "perfil", label: "Perfil", width: 150, render: (r) => <Badge tone={r.perfil === "Supervisor" ? "brand" : "neutral"} size="sm" dot>{r.perfil}</Badge> },
              { key: "carga", label: "Demandas ativas", width: 150, align: "right" },
            ]}
            rows={Object.values(window.ACRData.users).map((u, i) => ({ id: i, name: u.name, role: u.role, perfil: u.profile === "supervisor" ? "Supervisor" : "Operacional", carga: [3, 4, 2, 2][i] }))} />
        </Card>
      ) : null}
    </div>
  );
}

Object.assign(window, { SettingsScreen });