"use client";

import { useEffect, useRef, useState } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { AlertTriangle, Loader2, MapPin, Search, Trash2 } from "lucide-react";
import { validar } from "@/lib/agenda/validacao";
import {
  ENDERECO_VAZIO as VAZIO,
  juntarEndereco,
  partirEndereco,
  type Endereco,
} from "@/lib/agenda/endereco";
import SeletorCor from "./seletor-cor";
import type { CategoriaAgenda } from "./tipos";
import { aviso } from "./aviso";

/* Reexporta para nao quebrar quem ja importava daqui. */
export { juntarEndereco, partirEndereco, type Endereco };

export type Compromisso = {
  id?: string;
  title: string;
  description: string | null;
  event_date: string;
  start_time: string | null;
  end_time: string | null;
  client_id: string | null;
  responsible_user_id: string | null;
  status: string;
  recurrence: string;
  recurrence_until: string | null;
  lembrete_minutos: number | null;
  location_address: string | null;
  location_lat: number | null;
  location_lng: number | null;
  category_id: string;
  color: string | null;
};

/* `hora` chega quando a pessoa clicou numa celula da grade, e nao no botao do
   topo: ali o clique ja disse o horario, e abrir o campo vazio faria redigitar
   o que acabou de ser escolhido. A hora de fim vem uma hora depois, que e a
   duracao mais comum — e continua editavel. */
export const COMPROMISSO_VAZIO = (
  data: string,
  categoryId: string,
  hora?: number | null
): Compromisso => ({
  title: "",
  description: "",
  event_date: data,
  start_time: hora === null || hora === undefined ? "" : `${String(hora).padStart(2, "0")}:00`,
  end_time: hora === null || hora === undefined ? "" : `${String(Math.min(hora + 1, 23)).padStart(2, "0")}:00`,
  client_id: null,
  responsible_user_id: null,
  status: "agendado",
  recurrence: "none",
  recurrence_until: null,
  /* Compromisso novo nasce com aviso de 15 minutos: quem marca uma hora
     costuma querer ser lembrado dela, e desligar e um clique. Sem padrao, o
     lembrete viraria um recurso que existe mas ninguem usa. */
  lembrete_minutos: 15,
  location_address: "",
  location_lat: null,
  location_lng: null,
  category_id: categoryId,
  color: null,
});

/* Os mesmos valores que `LEMBRETES_ACEITOS` valida no servidor. Em minutos
   porque e a unidade que o disparador usa; o rotulo e que fala em horas e
   dias, que e como a pessoa pensa. */
const ANTECEDENCIAS = [
  { minutos: 5, rotulo: "5 minutos antes" },
  { minutos: 10, rotulo: "10 minutos antes" },
  { minutos: 15, rotulo: "15 minutos antes" },
  { minutos: 30, rotulo: "30 minutos antes" },
  { minutos: 60, rotulo: "1 hora antes" },
  { minutos: 120, rotulo: "2 horas antes" },
  { minutos: 240, rotulo: "4 horas antes" },
  { minutos: 1440, rotulo: "1 dia antes" },
  { minutos: 2880, rotulo: "2 dias antes" },
];

const REPETICOES = [
  { valor: "none", rotulo: "Não repete" },
  { valor: "daily", rotulo: "Todo dia" },
  { valor: "weekly", rotulo: "Toda semana" },
  { valor: "monthly", rotulo: "Todo mês" },
];

type EstadoLocal = "ocioso" | "buscando" | "localizado" | "nao_encontrado";

/**
 * Formulario de compromisso — corpo da propria sidebar.
 *
 * Mora dentro do mesmo painel que mostra os detalhes: editar abria antes um
 * modal por cima da sidebar, dois paineis competindo pela mesma acao. Agora
 * o "editar" e "novo compromisso" so trocam o que aparece dentro do mesmo
 * painel deslizante.
 *
 * O endereco geocodifica sozinho: toda vez que o texto muda (CEP preenchendo
 * ou a pessoa digitando por cima), uma busca por extenso no Nominatim refina
 * o pino. O CEP sozinho so localiza a faixa dele — em cidade pequena, isso as
 * vezes e a cidade inteira; o endereco por extenso e o que da a rua certa.
 */
export default function FormularioCompromisso({
  inicial,
  clientes,
  categorias,
  aoApagar,
  aoSalvou,
  aoCancelar,
}: {
  inicial: Compromisso;
  clientes: { id: string; nome: string }[];
  categorias: CategoriaAgenda[];
  aoApagar?: () => void;
  aoSalvou: () => void;
  aoCancelar: () => void;
}) {
  const [dados, setDados] = useState<Compromisso>(inicial);
  const [salvando, setSalvando] = useState(false);
  const primeiroCampo = useRef<HTMLInputElement>(null);
  const [cep, setCep] = useState("");
  const [buscandoCep, setBuscandoCep] = useState(false);
  const [avisoCep, setAvisoCep] = useState<string | null>(null);
  const [estadoLocal, setEstadoLocal] = useState<EstadoLocal>(
    inicial.location_lat ? "localizado" : "ocioso"
  );
  const enderecoAnterior = useRef(inicial.location_address);

  /* Quem pode ficar responsavel. Com uma pessoa so na empresa o campo nem
     aparece — nao ha escolha a fazer. */
  const [equipe, setEquipe] = useState<{ id: string; nome: string }[]>([]);
  useEffect(() => {
    carregarEquipe().then(setEquipe);
  }, []);

  /* Endereco em partes, e nao num campo de texto so.
     Metade das cidades do interior tem um CEP unico para tudo: o CEP acha a
     cidade e para por ai, e o pino cai no centro em vez da porta do cliente.
     Com rua e numero separados, o que vai para o mapa e um endereco completo,
     e o CEP volta a ser o atalho que ele deveria ser — preenche o que sabe e
     deixa a pessoa completar o resto. */
  const [partes, setPartes] = useState<Endereco>(() => partirEndereco(inicial.location_address));
  const [abertoLocal, setAbertoLocal] = useState(Boolean(inicial.location_address?.trim()));

  useEffect(() => {
    const t = setTimeout(() => primeiroCampo.current?.focus(), 80);
    return () => clearTimeout(t);
  }, []);

  const editando = Boolean(dados.id);
  const categoriaAtual = categorias.find((c) => c.id === dados.category_id) || null;

  function mudar<C extends keyof Compromisso>(campo: C, valor: Compromisso[C]) {
    setDados((d) => ({ ...d, [campo]: valor }));
  }

  /* Uma parte muda: remonta o texto que vai para o banco e para o mapa. O
     campo unico continua existindo no `location_address` — as partes sao a
     forma de preencher, nao um formato novo de armazenamento. */
  function mudarParte(campo: keyof Endereco, valor: string) {
    setPartes((p) => {
      const novo = { ...p, [campo]: valor };
      setDados((d) => ({ ...d, location_address: juntarEndereco(novo) }));
      return novo;
    });
  }

  /* CEP preenche as partes que conhece e nao apaga o que a pessoa ja digitou:
     quem escreveu o numero antes de buscar nao perde o numero. A coordenada
     vem do efeito abaixo, que geocodifica o endereco por extenso — devolver a
     coordenada do CEP direto repetiria a mesma imprecisao de sempre. */
  async function buscarCep(valor?: string) {
    const limpo = (valor ?? cep).replace(/\D/g, "");
    if (limpo.length !== 8) {
      setAvisoCep("Digite os 8 dígitos do CEP.");
      return;
    }
    setBuscandoCep(true);
    setAvisoCep(null);
    try {
      const r = await fetch(`/api/agenda/cep?cep=${limpo}`);
      const j = await r.json();
      if (!r.ok) throw new Error(j?.error || "CEP não encontrado.");

      setPartes((p) => {
        const novo: Endereco = {
          ...p,
          rua: j.rua || p.rua,
          bairro: j.bairro || p.bairro,
          cidade: j.cidade || p.cidade,
          uf: j.uf || p.uf,
        };
        setDados((d) => ({ ...d, location_address: juntarEndereco(novo) }));
        return novo;
      });

      setAvisoCep(
        j.rua
          ? null
          : "Esse CEP cobre a cidade inteira. Preencha rua e número para o pino cair no lugar certo."
      );
    } catch (e) {
      setAvisoCep(e instanceof Error ? e.message : "Não consegui buscar o CEP.");
    } finally {
      setBuscandoCep(false);
    }
  }

  function limparEndereco() {
    setPartes(VAZIO);
    setCep("");
    setAvisoCep(null);
    setEstadoLocal("ocioso");
    setAbertoLocal(false);
    setDados((d) => ({ ...d, location_address: "", location_lat: null, location_lng: null }));
  }

  /* CEP busca sozinho assim que os 8 digitos estao la — sem precisar clicar
     em nada. O botao continua existindo para tentar de novo se a rede falhar. */
  useEffect(() => {
    const limpo = cep.replace(/\D/g, "");
    if (limpo.length !== 8) return;
    const t = setTimeout(() => buscarCep(limpo), 400);
    return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cep]);

  /* Geocodifica o endereco por extenso sempre que ele muda de verdade — CEP
     preenchendo ou a pessoa completando a mao. Compara com o texto anterior,
     em vez de so pular a primeira execucao: o StrictMode do React roda todo
     efeito duas vezes em desenvolvimento (monta, desmonta, monta de novo), e
     um simples "ja rodei uma vez" seria enganado por isso — a segunda
     passagem dispararia uma busca desnecessaria so por ter aberto um
     compromisso que ja tinha endereco salvo. */
  useEffect(() => {
    if (dados.location_address === enderecoAnterior.current) return;
    enderecoAnterior.current = dados.location_address;

    const endereco = (dados.location_address || "").trim();
    if (endereco.length < 6) {
      setEstadoLocal("ocioso");
      return;
    }
    setEstadoLocal("buscando");
    const t = setTimeout(async () => {
      try {
        const r = await fetch(`/api/agenda/geocodificar?endereco=${encodeURIComponent(endereco)}`);
        const j = (await r.json().catch(() => null)) as { lat?: number | null; lng?: number | null } | null;
        if (r.ok && j?.lat && j?.lng) {
          setDados((d) => ({ ...d, location_lat: j.lat!, location_lng: j.lng! }));
          setEstadoLocal("localizado");
        } else {
          setEstadoLocal("nao_encontrado");
        }
      } catch {
        setEstadoLocal("nao_encontrado");
      }
    }, 900);
    return () => clearTimeout(t);
  }, [dados.location_address]);

  async function salvar() {
    if (dados.recurrence !== "none" && !dados.recurrence_until) {
      aviso.erro("Falta a data final", {
        descricao: "Compromisso que se repete precisa saber quando parar.",
      });
      return;
    }

    const corpo = {
      title: dados.title.trim(),
      description: dados.description || null,
      event_date: dados.event_date,
      start_time: dados.start_time || null,
      end_time: dados.end_time || null,
      client_id: dados.client_id || null,
      status: dados.status,
      recurrence: dados.recurrence,
      recurrence_until: dados.recurrence === "none" ? null : dados.recurrence_until,
      location_address: dados.location_address || null,
      location_lat: dados.location_lat,
      location_lng: dados.location_lng,
      category_id: dados.category_id,
      color: dados.color,
      lembrete_minutos: dados.lembrete_minutos,
      responsible_user_id: dados.responsible_user_id,
    };

    /* Mesma regra que o servidor aplica, checada aqui antes: quando da erro,
       a pessoa sabe na hora, sem esperar a ida e volta da rede. */
    const check = validar(corpo);
    if (!check.ok) {
      aviso.erro(check.erro);
      return;
    }

    setSalvando(true);
    try {
      const resposta = await fetch(dados.id ? `/api/agenda/events/${dados.id}` : "/api/agenda/events", {
        method: dados.id ? "PATCH" : "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(corpo),
      });
      const json = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(json?.error || "Não foi possível salvar.");
      aviso.sucesso(editando ? "Compromisso atualizado" : "Compromisso criado", {
        descricao: dados.title,
      });
      aoSalvou();
    } catch (e) {
      aviso.erro(e instanceof Error ? e.message : "Não foi possível salvar.");
    } finally {
      setSalvando(false);
    }
  }

  const rotuloCampo = "mb-1 block text-[11px] font-bold uppercase tracking-wide text-[var(--ks-color-text-muted)]";
  const campo =
    "w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-3 py-2.5 text-sm text-[var(--ks-color-text-primary)] focus:border-[var(--ks-color-primary)] focus:outline-none";

  return (
    <>
      <div className="min-h-0 flex-1 overflow-y-auto p-4">
        <div className="space-y-3.5">
          <div>
            <label className={rotuloCampo} htmlFor="ag-titulo">O que é</label>
            <input
              id="ag-titulo"
              ref={primeiroCampo}
              value={dados.title}
              onChange={(e) => mudar("title", e.target.value)}
              placeholder="Visita técnica, reunião, entrega..."
              className={campo}
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className={rotuloCampo} htmlFor="ag-data">Dia</label>
              <input
                id="ag-data"
                type="date"
                value={dados.event_date}
                onChange={(e) => mudar("event_date", e.target.value)}
                className={campo}
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className={rotuloCampo} htmlFor="ag-inicio">Início</label>
                <input
                  id="ag-inicio"
                  type="time"
                  value={dados.start_time || ""}
                  onChange={(e) => mudar("start_time", e.target.value)}
                  className={campo}
                />
              </div>
              <div>
                <label className={rotuloCampo} htmlFor="ag-fim">Fim</label>
                <input
                  id="ag-fim"
                  type="time"
                  value={dados.end_time || ""}
                  onChange={(e) => mudar("end_time", e.target.value)}
                  className={campo}
                />
              </div>
            </div>
          </div>

          <div>
            <label className={rotuloCampo} htmlFor="ag-cliente">Cliente (opcional)</label>
            <select
              id="ag-cliente"
              value={dados.client_id || ""}
              onChange={(e) => mudar("client_id", e.target.value || null)}
              className={campo}
            >
              <option value="">Sem cliente</option>
              {clientes.map((c) => (
                <option key={c.id} value={c.id}>{c.nome}</option>
              ))}
            </select>
          </div>

          {/* So aparece quando ha com quem dividir: empresa de uma pessoa nao
              precisa escolher responsavel, e o campo so ocuparia espaco. */}
          {equipe.length > 1 && (
            <div>
              <label className={rotuloCampo} htmlFor="ag-responsavel">Responsável</label>
              <select
                id="ag-responsavel"
                value={dados.responsible_user_id || ""}
                onChange={(e) => mudar("responsible_user_id", e.target.value || null)}
                className={campo}
              >
                <option value="">Sem responsável definido</option>
                {equipe.map((p) => (
                  <option key={p.id} value={p.id}>{p.nome}</option>
                ))}
              </select>
              {dados.lembrete_minutos !== null && (
                <p className="mt-1 text-[11px] text-[var(--ks-color-text-muted)]">
                  O lembrete vai só para o celular de quem estiver aqui.
                </p>
              )}
            </div>
          )}

          <div>
            <label className={rotuloCampo} htmlFor="ag-categoria">Categoria</label>
            <select
              id="ag-categoria"
              value={dados.category_id}
              onChange={(e) => mudar("category_id", e.target.value)}
              className={campo}
            >
              {categorias.length === 0 && <option value="">Nenhuma categoria</option>}
              {categorias.map((c) => (
                <option key={c.id} value={c.id}>{c.name}</option>
              ))}
            </select>
          </div>

          <div>
            <div className="flex items-center justify-between">
              <span className={rotuloCampo}>Cor</span>
              <button
                type="button"
                onClick={() => mudar("color", dados.color ? null : categoriaAtual?.color || "#4425A7")}
                className="mb-1 text-[11px] font-bold text-[var(--ks-color-primary)] hover:underline"
              >
                {dados.color ? "Usar a cor da categoria" : "Escolher outra cor"}
              </button>
            </div>
            {dados.color ? (
              <SeletorCor valor={dados.color} aoMudar={(c) => mudar("color", c)} tamanho="sm" />
            ) : (
              <p className="flex items-center gap-2 text-xs text-[var(--ks-color-text-muted)]">
                <span
                  aria-hidden
                  className="h-4 w-4 rounded-full"
                  style={{ background: categoriaAtual?.color || "#4425A7" }}
                />
                {categoriaAtual?.name || "Escolha uma categoria"}
              </p>
            )}
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className={rotuloCampo} htmlFor="ag-repete">Repetir</label>
              <select
                id="ag-repete"
                value={dados.recurrence}
                onChange={(e) => mudar("recurrence", e.target.value)}
                className={campo}
              >
                {REPETICOES.map((r) => (
                  <option key={r.valor} value={r.valor}>{r.rotulo}</option>
                ))}
              </select>
            </div>
            {dados.recurrence !== "none" && (
              <div>
                <label className={rotuloCampo} htmlFor="ag-ate">Até</label>
                <input
                  id="ag-ate"
                  type="date"
                  value={dados.recurrence_until || ""}
                  onChange={(e) => mudar("recurrence_until", e.target.value || null)}
                  className={campo}
                />
              </div>
            )}
          </div>

          {/* Lembrete. Fica junto do horario, e nao no fim do formulario: a
              antecedencia so faz sentido ao lado da hora que ela antecede. */}
          <div>
            <span className={rotuloCampo}>Me lembrar antes</span>
            <label className="mb-2 flex cursor-pointer items-center gap-2">
              <input
                type="checkbox"
                checked={dados.lembrete_minutos !== null}
                onChange={(e) => mudar("lembrete_minutos", e.target.checked ? 15 : null)}
                className="h-4 w-4 rounded border-[var(--ks-color-border-strong)] accent-[var(--ks-color-primary)]"
              />
              <span className="text-xs font-semibold text-[var(--ks-color-text-primary)]">
                Avisar no celular antes de começar
              </span>
            </label>

            {dados.lembrete_minutos !== null && (
              <>
                <select
                  aria-label="Antecedência do lembrete"
                  value={dados.lembrete_minutos}
                  onChange={(e) => mudar("lembrete_minutos", Number(e.target.value))}
                  className={campo}
                >
                  {ANTECEDENCIAS.map((a) => (
                    <option key={a.minutos} value={a.minutos}>{a.rotulo}</option>
                  ))}
                </select>
                {!dados.start_time && (
                  <p className="mt-1 text-[11px] text-[var(--ks-color-text-muted)]">
                    Sem horário marcado, o aviso sai às 9h do dia.
                  </p>
                )}
              </>
            )}
          </div>

          {/* Local. Fica depois do cliente porque, quando ha cliente, o
              endereco dele costuma ser a resposta. */}
          <div>
            <span className={rotuloCampo}>Onde é (opcional)</span>

            {/* Fechado por padrao em compromisso novo: a maioria e reuniao ou
                ligacao, sem lugar. Seis campos de endereco sempre abertos
                fariam o formulario parecer um cadastro de entrega. */}
            {!abertoLocal ? (
              <button
                type="button"
                onClick={() => setAbertoLocal(true)}
                className="flex min-h-[44px] w-full items-center gap-2 rounded-xl border border-dashed border-[var(--ks-color-border-subtle)] px-3 text-xs font-bold text-[var(--ks-color-text-muted)] transition-colors hover:border-[var(--ks-color-primary)] hover:text-[var(--ks-color-primary)]"
              >
                <MapPin className="h-4 w-4" />
                Inserir endereço
              </button>
            ) : (
              <div className="space-y-2 rounded-xl border border-[var(--ks-color-border-subtle)] p-3">
                <div className="flex gap-2">
                  <input
                    id="ag-cep"
                    value={cep}
                    inputMode="numeric"
                    placeholder="CEP"
                    onChange={(e) => setCep(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        buscarCep();
                      }
                    }}
                    className={`${campo} max-w-[140px]`}
                  />
                  <button
                    type="button"
                    onClick={() => buscarCep()}
                    disabled={buscandoCep}
                    className="flex min-h-[44px] items-center gap-1.5 rounded-xl border border-[var(--ks-color-border-subtle)] px-3 text-xs font-bold text-[var(--ks-color-text-primary)] hover:bg-[var(--ks-color-bg-soft)] disabled:opacity-50"
                  >
                    {buscandoCep ? (
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                      <Search className="h-3.5 w-3.5" />
                    )}
                    Buscar
                  </button>
                  <button
                    type="button"
                    onClick={limparEndereco}
                    className="ml-auto flex min-h-[44px] items-center px-2 text-xs font-semibold text-[var(--ks-color-text-muted)] hover:text-rose-600"
                  >
                    Remover
                  </button>
                </div>

                <div className="flex gap-2">
                  <input
                    value={partes.rua}
                    onChange={(e) => mudarParte("rua", e.target.value)}
                    placeholder="Rua / avenida"
                    className={`${campo} flex-1`}
                  />
                  <input
                    value={partes.numero}
                    onChange={(e) => mudarParte("numero", e.target.value)}
                    placeholder="Nº"
                    className={`${campo} max-w-[92px]`}
                  />
                </div>

                <div className="flex gap-2">
                  <input
                    value={partes.bairro}
                    onChange={(e) => mudarParte("bairro", e.target.value)}
                    placeholder="Bairro"
                    className={`${campo} flex-1`}
                  />
                  <input
                    value={partes.complemento}
                    onChange={(e) => mudarParte("complemento", e.target.value)}
                    placeholder="Complemento"
                    className={`${campo} flex-1`}
                  />
                </div>

                <div className="flex gap-2">
                  <input
                    value={partes.cidade}
                    onChange={(e) => mudarParte("cidade", e.target.value)}
                    placeholder="Cidade"
                    className={`${campo} flex-1`}
                  />
                  <input
                    value={partes.uf}
                    onChange={(e) => mudarParte("uf", e.target.value.toUpperCase().slice(0, 2))}
                    placeholder="UF"
                    maxLength={2}
                    className={`${campo} max-w-[76px] uppercase`}
                  />
                </div>

                {avisoCep && (
                  <p className="text-[11px] font-semibold text-amber-600 dark:text-amber-400">{avisoCep}</p>
                )}
                {estadoLocal === "buscando" && (
                  <p className="flex items-center gap-1.5 text-[11px] font-semibold text-[var(--ks-color-text-muted)]">
                    <Loader2 className="h-3 w-3 animate-spin" /> Localizando endereço no mapa…
                  </p>
                )}
                {estadoLocal === "localizado" && (
                  <p className="flex items-center gap-1.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400">
                    <MapPin className="h-3 w-3" /> Localizado no mapa
                  </p>
                )}
                {estadoLocal === "nao_encontrado" && (
                  <p className="flex items-center gap-1.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400">
                    <AlertTriangle className="h-3 w-3" /> Não encontrei esse endereço exato — confira a rua e o
                    número.
                  </p>
                )}
              </div>
            )}
          </div>

          <div>
            <label className={rotuloCampo} htmlFor="ag-obs">Observação</label>
            <textarea
              id="ag-obs"
              rows={3}
              value={dados.description || ""}
              onChange={(e) => mudar("description", e.target.value)}
              className={campo}
            />
          </div>

          {editando && (
            <div>
              <label className={rotuloCampo} htmlFor="ag-status">Situação</label>
              <select
                id="ag-status"
                value={dados.status}
                onChange={(e) => mudar("status", e.target.value)}
                className={campo}
              >
                <option value="agendado">Agendado</option>
                <option value="concluido">Concluído</option>
                <option value="cancelado">Cancelado</option>
              </select>
            </div>
          )}
        </div>
      </div>

      {/* Acoes na base, ao alcance do polegar. */}
      <footer className="flex items-center gap-2 border-t border-[var(--ks-color-border-subtle)] p-4">
        {editando && aoApagar && (
          <button
            type="button"
            onClick={aoApagar}
            disabled={salvando}
            aria-label="Apagar compromisso"
            className="flex min-h-[48px] min-w-[48px] items-center justify-center rounded-xl border border-rose-200 text-rose-600 hover:bg-rose-50 disabled:opacity-50 dark:border-rose-500/30 dark:hover:bg-rose-500/10"
          >
            <Trash2 className="h-4 w-4" />
          </button>
        )}
        <button
          type="button"
          onClick={aoCancelar}
          disabled={salvando}
          className="flex min-h-[48px] items-center justify-center rounded-xl px-4 text-sm font-bold text-[var(--ks-color-text-muted)] hover:bg-[var(--ks-color-bg-soft)] disabled:opacity-50"
        >
          Cancelar
        </button>
        <button
          type="button"
          onClick={salvar}
          disabled={salvando}
          className="flex min-h-[48px] flex-1 items-center justify-center gap-2 rounded-xl bg-[var(--ks-color-primary)] px-4 text-sm font-black text-white hover:opacity-90 disabled:opacity-50"
        >
          {salvando && <Loader2 className="h-4 w-4 animate-spin" />}
          {editando ? "Salvar alterações" : "Criar compromisso"}
        </button>
      </footer>
    </>
  );
}

/* Lista enxuta de clientes para o seletor. Traz so id e nome: o painel nao
   precisa de endereco nem historico, e a agenda abre em celular com rede
   ruim. */
/**
 * Quem pode ser responsavel por um compromisso.
 *
 * Vem de `/api/company/users`, a mesma lista da tela de funcionarios — em vez
 * de uma consulta propria que amanha divergiria dela. Sem acesso a essa rota,
 * devolve vazio e o formulario esconde o campo: uma empresa de uma pessoa so
 * nao precisa escolher responsavel.
 */
export async function carregarEquipe() {
  try {
    const r = await fetch("/api/company/users");
    if (!r.ok) return [];
    const j = (await r.json()) as { users?: { user_id: string; email: string; active: boolean }[] };
    return (j.users ?? [])
      .filter((u) => u.active)
      .map((u) => ({ id: String(u.user_id), nome: String(u.email || "Sem e-mail") }));
  } catch {
    return [];
  }
}

export async function carregarClientes(tenantIds: string[]) {
  const supabase = getSupabaseClient();
  const { data } = await supabase
    .from("clients")
    .select("id,name,company_name")
    .in("user_id", tenantIds)
    .eq("active", true)
    .order("name")
    .limit(500);
  return (data ?? []).map((c) => ({
    id: String(c.id),
    nome: String(c.company_name || c.name || "Cliente"),
  }));
}