/* FrontCall Hub — Equipe & acessos.
   Modelo: dono (tudo) · equipe fixa (próprios jobs) · convidado (1 job, expira).
   Convite por SMS com link mágico — sem conta, sem instalação. A identidade é
   do cleaner (celular): se atende várias empresas, vê tudo no perfil dele.
   Telas: TeamAccessScreen · InviteScreen · AssignScreen · WorkerJobView */

const ROLE_META = {
  dono: { label: "Dono", badge: <Badge tone="brand">Dono</Badge>, desc: "Acesso total" },
  cleaner: { label: "Equipe", badge: <Badge tone="success" dot>Equipe fixa</Badge>, desc: "Vê os próprios jobs · sem financeiro" },
  guest: { label: "Convidado", badge: <Badge tone="warning" dot>Convidada · 1 job</Badge>, desc: "Só o job convidado · expira sozinho" },
};

function teamJobLabel(jobId) {
  const a = D.appointments.find((x) => x.id === jobId);
  return a ? `${a.date} · ${a.time} · ${a.name}` : "";
}

/* ================= equipe & acessos ================= */
function TeamAccessScreen({ go }) {
  const [, force] = React.useState(0);
  const fixos = D.team.filter((m) => m.role !== "guest");
  const guests = D.team.filter((m) => m.role === "guest");
  const revoke = (id) => { const i = D.team.findIndex((m) => m.id === id); if (i >= 0) D.team.splice(i, 1); force((n) => n + 1); };
  return (
    <div style={{ padding: "16px 16px 28px", display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ background: "var(--surface-brand-subtle)", borderRadius: "var(--radius-md)", padding: "12px 14px", display: "flex", gap: 10, alignItems: "flex-start" }}>
        <Icon name="zap" size={17} color="var(--brand)" style={{ marginTop: 2, flexShrink: 0 }} />
        <span style={{ fontSize: "var(--fs-caption)", color: "var(--text-secondary)", lineHeight: 1.45 }}>Precisa de alguém amanhã? Convida por SMS — a pessoa vê <strong>só o job</strong>, sem instalar nada, e o acesso <strong>expira sozinho</strong>.</span>
      </div>

      <div>
        <SectionLabel>Equipe fixa</SectionLabel>
        <Card inset>
          {fixos.map((m, i) => {
            const meta = ROLE_META[m.role];
            return (
              <div key={m.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: i < fixos.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                <Avatar name={m.name} size={40} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{m.name}</div>
                  <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)", marginTop: 2 }}>{meta.desc}{m.jobsDone ? ` · ${m.jobsDone} jobs` : ""}</div>
                </div>
                {meta.badge}
              </div>
            );
          })}
        </Card>
      </div>

      <div>
        <SectionLabel>Acessos temporários</SectionLabel>
        {guests.length === 0
          ? <Card inset><EmptyState art={<WaveBars />} title="Nenhum convidado agora" description="Convida alguém pra um job e o acesso aparece aqui." /></Card>
          : (
            <Card inset>
              {guests.map((m, i) => (
                <div key={m.id} style={{ padding: "13px 16px", borderBottom: i < guests.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <Avatar name={m.name} size={40} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{m.name}</div>
                      <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)", marginTop: 2 }}>{teamJobLabel(m.jobId)}</div>
                    </div>
                    {ROLE_META.guest.badge}
                  </div>
                  {m.multiCompany && (
                    <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 9, fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>
                      <Icon name="sparkles" size={12} color="var(--brand)" /> Também atende outras empresas pelo FrontCall — esse job entra no perfil dela.
                    </div>
                  )}
                  <div style={{ display: "flex", gap: 8, marginTop: 11 }}>
                    <Button size="sm" variant="secondary" onClick={() => go("workerview", m.jobId)} iconLeft={<Icon name="search" size={14} color="var(--text-strong)" />}>Ver como ela vê</Button>
                    <Button size="sm" variant="ghost" onClick={() => revoke(m.id)} style={{ color: "var(--danger-600)" }}>Revogar</Button>
                  </div>
                </div>
              ))}
            </Card>
          )}
      </div>

      <Button block size="lg" onClick={() => go("invite")} iconLeft={<Icon name="plus" size={18} color="#fff" />}>Convidar cleaner</Button>
    </div>
  );
}

/* ================= convite ================= */
function InviteScreen({ go, jobId }) {
  const upcoming = D.appointments.filter((a) => a.kind === "job");
  const [f, setF] = React.useState({ name: "", phone: "", scope: "job", jobId: jobId || (upcoming[0] && upcoming[0].id), showPrice: false });
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const canSend = f.name.trim().length > 1 && f.phone.trim().length >= 8;
  const send = () => {
    D.team.push({ id: "t" + Math.floor(Math.random() * 9000 + 100), name: f.name.trim(), role: f.scope === "team" ? "cleaner" : "guest", phone: f.phone.trim(), access: f.scope, jobId: f.scope === "job" ? f.jobId : undefined, status: "convite enviado", invited: "agora" });
    if (f.scope === "job") {
      const a = D.appointments.find((x) => x.id === f.jobId);
      if (a) a.cleaner = f.name.trim().split(" ")[0];
    }
    go("team");
  };
  return (
    <div style={{ padding: "16px 16px 28px" }}>
      <Card>
        <FormField label="Nome *">
          <input {...leadInputFocus} style={leadInputStyle} value={f.name} onChange={(e) => set("name", e.target.value)} placeholder="Ex: Paula Rodrigues" />
        </FormField>
        <FormField label="Celular * (recebe o convite por SMS)">
          <input {...leadInputFocus} style={{ ...leadInputStyle, fontFamily: "var(--font-mono)" }} type="tel" value={f.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+1 (___) ___-____" />
        </FormField>
        <FormField label="Nível de acesso">
          <PickChips value={f.scope} onChange={(v) => set("scope", v)} options={[
            { value: "job", label: "Só um job (expira sozinho)" },
            { value: "team", label: "Equipe fixa" },
          ]} />
        </FormField>
        {f.scope === "job" && (
          <FormField label="Qual job?">
            <PickChips value={f.jobId} onChange={(v) => set("jobId", v)} options={upcoming.map((a) => ({ value: a.id, label: `${a.date} · ${a.name}` }))} />
          </FormField>
        )}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "4px 0 16px" }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>Mostrar o valor do job?</div>
            <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>Desligado, ela vê só endereço e tarefas</div>
          </div>
          <Toggle on={f.showPrice} onChange={(v) => set("showPrice", v)} />
        </div>
        <div style={{ background: "var(--surface-sunken)", borderRadius: "var(--radius-md)", padding: "12px 14px", marginBottom: 16 }}>
          <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-secondary)", lineHeight: 1.5 }}>
            Ela recebe um <strong>SMS com link mágico</strong> — abre no navegador, sem conta e sem instalar nada. O telefone do cliente fica mascarado. {f.scope === "job" ? "Quando o job termina, o acesso expira sozinho." : "Como equipe fixa, ela vê os próprios jobs no app."}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 9, fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>
            <Icon name="sparkles" size={12} color="var(--brand)" /> Se ela já atende outras empresas pelo FrontCall, esse job aparece junto no perfil dela.
          </div>
        </div>
        <Button block size="lg" disabled={!canSend} onClick={send} iconLeft={<Icon name="message-circle" size={18} color="#fff" />}>Enviar convite por SMS</Button>
      </Card>
    </div>
  );
}

/* ================= atribuir cleaner (do job) ================= */
function AssignScreen({ go, jobId }) {
  const a = D.appointments.find((x) => x.id === jobId);
  if (!a) return null;
  const pick = (m) => { a.cleaner = m.name.split(" ")[0] + (m.name.split(" ")[1] ? " " + m.name.split(" ")[1] : ""); go("job", jobId); };
  const members = D.team.filter((m) => m.role !== "dono" || true);
  return (
    <div style={{ padding: "16px 16px 28px", display: "flex", flexDirection: "column", gap: 18 }}>
      <Card style={{ padding: "13px 16px", display: "flex", alignItems: "center", gap: 12 }}>
        <Avatar name={a.name} size={38} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{a.service} · {a.name}</div>
          <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>{a.date} · {a.time} · {a.address}</div>
        </div>
      </Card>
      <div>
        <SectionLabel>Quem vai fazer?</SectionLabel>
        <Card inset>
          {members.map((m, i) => {
            const meta = ROLE_META[m.role];
            const current = a.cleaner && m.name.startsWith(a.cleaner.split(" ")[0]);
            return (
              <div key={m.id} onClick={() => pick(m)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: i < members.length - 1 ? "1px solid var(--border-subtle)" : "none", cursor: "pointer", background: current ? "var(--surface-brand-subtle)" : "transparent" }}>
                <Avatar name={m.name} size={38} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{m.name}</div>
                  <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>{meta.label}{m.jobsDone ? ` · ${m.jobsDone} jobs` : ""}</div>
                </div>
                {current ? <Badge tone="brand" dot>Nesse job</Badge> : <Icon name="chevron-right" size={16} color="var(--text-faint)" />}
              </div>
            );
          })}
        </Card>
      </div>
      <Button block variant="secondary" onClick={() => go("invite")} iconLeft={<Icon name="plus" size={17} color="var(--text-strong)" />}>Convidar alguém novo</Button>
    </div>
  );
}

/* ================= a visão do convidado ================= */
function WorkerJobView({ jobId, go }) {
  const a = D.appointments.find((x) => x.id === jobId);
  const [, force] = React.useState(0);
  if (!a) return null;
  const client = a.clientId ? D.clients.find((c) => c.id === a.clientId) : null;
  const job = window.FCJobs[jobId] || { stage: "scheduled", ts: {}, sms: [], notify: true };
  const advanceW = () => {
    const next = JOB_ORDER[JOB_ORDER.indexOf(job.stage) + 1];
    if (!next) return;
    const now = Date.now();
    const sms = [...job.sms, { stage: next, text: jobSMS(next, a), at: now }];
    if (window.FCThreads) {
      let th = window.FCThreads.find((t) => (a.clientId && t.clientId === a.clientId) || t.name === a.name);
      if (!th) { th = { id: "th-" + a.id, clientId: a.clientId, name: a.name, phone: a.phone, unread: 0, msgs: [] }; window.FCThreads.unshift(th); }
      th.msgs.push({ who: "auto", text: jobSMS(next, a), at: new Date(now).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), tag: "Riley · automática" });
    }
    window.FCJobs[jobId] = { ...job, stage: next, ts: { ...job.ts, [next]: now }, sms };
    force((n) => n + 1);
  };
  const actionLabel = { scheduled: "Estou a caminho", enroute: "Cheguei — começar", onsite: "Terminei o job" }[job.stage];
  const guest = D.team.find((m) => m.role === "guest" && m.jobId === jobId);
  return (
    <div style={{ minHeight: "100%", background: "var(--surface-page)", padding: "18px 16px 28px", display: "flex", flexDirection: "column", gap: 16 }}>
      {/* header da empresa (escopo) */}
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <img src="../assets/logos/frontcall-hub-symbol-blue.svg" alt="" width="26" height="26" />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-bold)", color: "var(--text-strong)" }}>{D.tenant.company}</div>
          <div style={{ fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>Acesso de cleaner · só esse job · expira sozinho</div>
        </div>
        <Badge tone="warning" dot>Temporário</Badge>
      </div>

      <div style={{ fontSize: "var(--fs-h3)", fontWeight: "var(--fw-bold)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)" }}>
        Oi, {guest ? guest.name.split(" ")[0] : "cleaner"}! Seu job:
      </div>

      <Card>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
          <div style={{ fontSize: "var(--fs-h3)", fontWeight: "var(--fw-bold)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)" }}>{a.date}</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--fs-h4)", fontWeight: "var(--fw-bold)", color: "var(--brand)" }}>{a.time}</div>
        </div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px dashed var(--border-subtle)", display: "flex", flexDirection: "column", gap: 9 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>
            <Icon name="sparkles" size={15} color="var(--text-faint)" /> {a.service} <span style={{ color: "var(--text-faint)" }}>· {a.est}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 9, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>
            <Icon name="map-pin" size={15} color="var(--text-faint)" /> {a.address}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 9, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>
            <Icon name="user-round" size={15} color="var(--text-faint)" /> Cliente: {a.name} <span style={{ fontSize: "var(--fs-micro)", color: "var(--text-faint)" }}>(contato via app)</span>
          </div>
        </div>
        {client && client.house.notes.length > 0 && (
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 12 }}>
            {client.house.notes.map((n) => (
              <span key={n} style={{ fontSize: "var(--fs-caption)", fontWeight: "var(--fw-medium)", color: "var(--text-secondary)", background: "var(--surface-sunken)", borderRadius: "var(--radius-full)", padding: "5px 11px" }}>{n}</span>
            ))}
          </div>
        )}
        <Button block variant="secondary" size="sm" style={{ marginTop: 14 }} iconLeft={<Icon name="map-pin" size={16} color="var(--text-strong)" />}>Abrir no Maps</Button>
      </Card>

      {job.stage !== "done" ? (
        <Button block size="lg" onClick={advanceW} iconLeft={<Icon name={{ scheduled: "map-pin", enroute: "house", onsite: "circle-check-big" }[job.stage]} size={18} color="#fff" />}>{actionLabel}</Button>
      ) : (
        <div style={{ background: "var(--success-bg)", border: "1px solid color-mix(in oklab, var(--success-500) 28%, white)", borderRadius: "var(--radius-md)", padding: "14px 16px", textAlign: "center" }}>
          <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-bold)", color: "var(--text-strong)" }}>Job concluído — valeu! 🎉</div>
          <div style={{ fontSize: "var(--fs-caption)", color: "var(--text-secondary)", marginTop: 2 }}>Seu acesso a esse job expira agora. Até a próxima!</div>
        </div>
      )}
      {job.stage !== "scheduled" && job.stage !== "done" && (
        <div style={{ textAlign: "center", fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>O cliente foi avisado por SMS automaticamente ✓</div>
      )}

      <div style={{ flex: 1 }} />
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: "var(--fs-micro)", color: "var(--text-faint)" }}>Você também atende pra outras empresas? Seus jobs ficam juntos no seu perfil.</div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginTop: 8, opacity: 0.55 }}>
          <img src="../assets/logos/frontcall-hub-horizontal.svg" alt="FrontCall Hub" style={{ height: 16 }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TeamAccessScreen, InviteScreen, AssignScreen, WorkerJobView, ROLE_META });