"use client";

import { useState, useEffect } from "react";
import { Plus, Pencil, Trash2, Loader2, Cpu, UserCog, X, Save, AlertTriangle, Search } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { custoHoraDeTrabalho } from "@/lib/precificacao/custo-por-hora";
import { ModalDeMaquina } from "@/components/producao/modal-de-maquina";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { InfoTooltip } from "@/components/ui/info-tooltip";
import { formatMoneyInput, parseMoneyInput, formatMoney } from "@/utils/formatters";
import { numeroDoTexto, textoDecimalValido } from "@/components/ui/campo-decimal";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";

interface Machine {
  id: string;
  name: string;
  hourly_cost: number;
  acquisition_value?: number | null;
  useful_life_years?: number | null;
  residual_value?: number | null;
  power_kw?: number | null;
  energy_cost_kwh?: number | null;
  maintenance_monthly?: number | null;
  productive_hours_month?: number | null;
  hourly_cost_manual?: boolean | null;
  setup_minutes_default: number;
  is_active: boolean;
}

interface LaborRole {
  id: string;
  role_name: string;
  hourly_rate: number;
  monthly_salary?: number | null;
  charges_percent?: number | null;
  productive_hours_month?: number | null;
  hourly_rate_manual?: boolean | null;
  efficiency_pct: number;
  is_active: boolean;
}

/* Avatar vivo para linha sem ícone da casa: a inicial num gradiente saturado,
   estável pelo nome (o mesmo desenho das listas de estoque). */
const VIVOS = [
  "bg-gradient-to-br from-violet-500 to-purple-600",
  "bg-gradient-to-br from-sky-500 to-blue-600",
  "bg-gradient-to-br from-emerald-500 to-teal-600",
  "bg-gradient-to-br from-amber-400 to-orange-500",
  "bg-gradient-to-br from-rose-500 to-pink-600",
  "bg-gradient-to-br from-indigo-500 to-violet-600",
];
const corDoNome = (nome: string) => {
  let soma = 0;
  for (let i = 0; i < nome.length; i++) soma += nome.charCodeAt(i);
  return VIVOS[soma % VIVOS.length];
};

/* Ícone da casa quando o nome da máquina diz o que ela faz: quem imprime
   leva a impressora, quem corta ou grava leva o corte. O resto fica com a
   inicial. */
const iconeDaMaquina = (nome: string): string | null => {
  const n = nome.toLowerCase();
  if (/laser|corte|cnc|router|guilhotina|fresa|cortadora/.test(n)) return "/icones/servicos/corte.svg";
  if (/impress|plotter|dtf|sublim|\buv\b|offset|digital/.test(n)) return "/icones/servicos/impressao.svg";
  return null;
};

function AvatarDoItem({ nome, icone }: { nome: string; icone: string | null }) {
  if (icone) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={icone} alt="" className="h-10 w-10 object-contain shrink-0" />;
  }
  return (
    <span className={`h-9 w-9 rounded-xl flex items-center justify-center text-sm font-bold text-white shadow-sm shrink-0 ${corDoNome(nome)}`}>
      {nome.trim().charAt(0).toUpperCase() || "?"}
    </span>
  );
}

/* De onde veio a hora da função: o cálculo, com o que entrou nele, ou a mão. */
const origemDaHoraDaFuncao = (role: LaborRole) => {
  if (role.hourly_rate_manual !== false) return "hora informada por você";
  const partes: string[] = [];
  if (role.monthly_salary) partes.push(`${formatMoney(role.monthly_salary)} de salário`);
  if (role.charges_percent) partes.push(`${role.charges_percent}% de encargos`);
  if (role.productive_hours_month) partes.push(`${role.productive_hours_month} h/mês`);
  return partes.length ? partes.join(" · ") : "hora calculada pelo sistema";
};

/* Campo vazio vira nulo, e nao zero: "nao informei" e diferente de "e zero",
   e so o primeiro deve impedir a conta de rodar. */
function numeroOuNulo(valor: string): number | null {
  const limpo = String(valor ?? "").replace(",", ".").trim();
  if (!limpo) return null;
  const n = Number(limpo);
  return Number.isFinite(n) ? n : null;
}

export default function OperationsPage() {
  const { pode } = usePermissoes();
  const podeMexerNaProducao = pode("production.costs.write");

  const [machines, setMachines] = useState<Machine[]>([]);
  const [roles, setRoles] = useState<LaborRole[]>([]);
  const [loading, setLoading] = useState(true);
  
  // Modals
  const [activeTab, setActiveTab] = useState("machines");
  const [isMachineModalOpen, setIsMachineModalOpen] = useState(false);
  const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
  
  const [editingMachine, setEditingMachine] = useState<Machine | null>(null);

  const [editingRole, setEditingRole] = useState<LaborRole | null>(null);
  const [roleForm, setRoleForm] = useState({
    role_name: "", hourly_rate: "0,00", efficiency_pct: "100",
    monthly_salary: "", charges_percent: "", productive_hours_month: "",
    hourly_rate_manual: true,
  });
  
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [busca, setBusca] = useState("");
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [excluindo, setExcluindo] = useState(false);

  /* O valor descoberto pelo calculo preenche o campo la de cima sozinho:
     descobrir a hora e ter que copiar no braco era pedir erro de digitacao.
     So sincroniza enquanto o calculo automatico esta ligado — desligou, o
     campo volta a ser da pessoa. */
  const previaRole = custoHoraDeTrabalho({
    salarioMensal: numeroOuNulo(roleForm.monthly_salary),
    encargosPct: numeroOuNulo(roleForm.charges_percent),
    horasProdutivasMes: numeroOuNulo(roleForm.productive_hours_month),
    eficienciaPct: numeroOuNulo(roleForm.efficiency_pct),
  });
  useEffect(() => {
    if (roleForm.hourly_rate_manual || previaRole === null) return;
    const formatado = formatMoneyInput(previaRole);
    if (roleForm.hourly_rate !== formatado) {
      setRoleForm((f) => ({ ...f, hourly_rate: formatado }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [previaRole, roleForm.hourly_rate_manual]);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    try {
      const [machinesRes, rolesRes] = await Promise.all([
        fetch("/api/production/operations?type=machines"),
        fetch("/api/production/operations?type=roles")
      ]);

      if (machinesRes.ok) {
        const data = await machinesRes.json();
        setMachines(data || []);
      }
      if (rolesRes.ok) {
        const data = await rolesRes.json();
        setRoles(data || []);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  }

  // --- Machine Handlers ---
  /* Formulário, cálculo da hora e gravação moraram aqui até virarem o
     ModalDeMaquina compartilhado com o assistente de precificação. */
  const openMachineModal = (machine?: Machine) => {
    setEditingMachine(machine ?? null);
    setIsMachineModalOpen(true);
  };

  const deleteMachine = async (id: string) => {
    setExcluindo(true);
    try {
      const res = await fetch(`/api/production/operations?id=${id}&type=machine`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Erro ao excluir.");
      await fetchData();
    } catch (err) { console.error(err); } finally {
      setExcluindo(false);
      setConfirmacao(null);
    }
  };

  const pedirParaExcluirMaquina = (machine: Machine) => {
    setConfirmacao({
      titulo: `Excluir a máquina "${machine.name}"?`,
      texto: "Ela sai da lista e dos cálculos novos. O que já foi precificado com ela continua como está.",
      confirmar: "Excluir máquina",
      tom: "perigo",
      aoConfirmar: () => deleteMachine(machine.id),
    });
  };

  // --- Role Handlers ---
  const openRoleModal = (role?: LaborRole) => {
    if (role) {
      setEditingRole(role);
      setRoleForm({
        monthly_salary: role.monthly_salary?.toString() ?? "",
        charges_percent: role.charges_percent?.toString() ?? "",
        productive_hours_month: role.productive_hours_month?.toString() ?? "",
        hourly_rate_manual: role.hourly_rate_manual !== false,
        role_name: role.role_name,
        hourly_rate: formatMoneyInput(role.hourly_rate),
        efficiency_pct: role.efficiency_pct.toString()
      });
    } else {
      setEditingRole(null);
      setRoleForm({
        role_name: "", hourly_rate: "0,00", efficiency_pct: "100",
        monthly_salary: "", charges_percent: "", productive_hours_month: "",
        hourly_rate_manual: true,
      });
    }
    setError("");
    setIsRoleModalOpen(true);
  };

  const saveRole = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      const payload = {
        role_name: roleForm.role_name,
        hourly_rate: parseMoneyInput(roleForm.hourly_rate),
        efficiency_pct: numeroDoTexto(roleForm.efficiency_pct) || 100,
        monthly_salary: numeroOuNulo(roleForm.monthly_salary),
        charges_percent: numeroOuNulo(roleForm.charges_percent),
        productive_hours_month: numeroOuNulo(roleForm.productive_hours_month),
        hourly_rate_manual: roleForm.hourly_rate_manual,
        type: 'role'
      };

      let res;
      if (editingRole) {
        res = await fetch("/api/production/operations", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ ...payload, id: editingRole.id }),
        });
      } else {
        res = await fetch("/api/production/operations", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });
      }

      if (!res.ok) {
        const json = await res.json().catch(() => null);
        throw new Error(json?.error || "Erro ao salvar.");
      }

      await fetchData();
      setIsRoleModalOpen(false);
    } catch (err) {
      const message = err instanceof Error ? err.message : "Erro ao salvar.";
      setError(message);
    } finally {
      setSaving(false);
    }
  };

  const deleteRole = async (id: string) => {
    setExcluindo(true);
    try {
      const res = await fetch(`/api/production/operations?id=${id}&type=role`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Erro ao excluir.");
      await fetchData();
    } catch (err) { console.error(err); } finally {
      setExcluindo(false);
      setConfirmacao(null);
    }
  };

  const pedirParaExcluirFuncao = (role: LaborRole) => {
    setConfirmacao({
      titulo: `Excluir a função "${role.role_name}"?`,
      texto: "Ela sai da lista e dos cálculos novos. O que já foi precificado com ela continua como está.",
      confirmar: "Excluir função",
      tom: "perigo",
      aoConfirmar: () => deleteRole(role.id),
    });
  };

  const termo = busca.trim().toLowerCase();
  const maquinasFiltradas = termo ? machines.filter((m) => m.name.toLowerCase().includes(termo)) : machines;
  const funcoesFiltradas = termo ? roles.filter((r) => r.role_name.toLowerCase().includes(termo)) : roles;
  const maquinasCalculadas = machines.filter((m) => m.hourly_cost_manual === false).length;
  const maquinasComSetup = machines.filter((m) => m.setup_minutes_default > 0).length;
  const funcoesCalculadas = roles.filter((r) => r.hourly_rate_manual === false).length;
  const funcoesAbaixoDe100 = roles.filter((r) => r.efficiency_pct < 100).length;
  const naAbaDeMaquinas = activeTab === "machines";

  const abas = [
    { id: "machines", rotulo: "Máquinas e equipamentos", icone: Cpu, contagem: machines.length },
    { id: "roles", rotulo: "Mão de obra", icone: UserCog, contagem: roles.length },
  ] as const;

  const colunas = "grid-cols-[minmax(0,1fr)_170px_150px_92px]";

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Produção"
        title="Processos e Custos"
        subtitle={
          naAbaDeMaquinas
            ? "As máquinas da produção e quanto custa cada hora delas."
            : "As funções da equipe e quanto custa cada hora de trabalho."
        }
      />

      {/* Abas no sublinhado da casa, com a contagem. */}
      <div className="flex items-center gap-6 border-b border-[var(--ks-color-border-subtle)]">
        {abas.map(({ id, rotulo, icone: Icone, contagem }) => {
          const ativa = activeTab === id;
          return (
            <button
              key={id}
              type="button"
              onClick={() => {
                setActiveTab(id);
                setBusca("");
              }}
              className={`-mb-px flex items-center gap-2 border-b-2 pb-3 text-sm font-semibold transition-colors ${
                ativa
                  ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]"
                  : "border-transparent text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)]"
              }`}
            >
              <Icone className="h-4 w-4" />
              {rotulo}
              {contagem > 0 ? (
                <span
                  className={`ks-num rounded-full px-1.5 text-[11px] font-bold ${
                    ativa ? "bg-[var(--ks-color-primary)] text-white" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]"
                  }`}
                >
                  {contagem}
                </span>
              ) : null}
            </button>
          );
        })}
      </div>

      <div className="ks-surface rounded-xl shadow-sm border border-[var(--ks-color-border-subtle)] overflow-hidden">
        {/* A barra: busca, contadores de relance e a ação principal. */}
        <div className="p-4 border-b border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30 flex flex-wrap items-center gap-x-4 gap-y-3 justify-between">
          <div className="max-w-xs flex-1 min-w-[200px] relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder={naAbaDeMaquinas ? "Buscar máquina..." : "Buscar função..."}
              value={busca}
              onChange={(e) => setBusca(e.target.value)}
              className="pl-9"
            />
          </div>
          <div className="flex items-center gap-4 text-xs font-medium text-slate-500">
            {naAbaDeMaquinas ? (
              <>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--ks-color-primary)]" />
                  <span className="ks-num">{machines.length}</span> máquinas
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
                  <span className="ks-num">{maquinasCalculadas}</span> com hora calculada
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-sky-500" />
                  <span className="ks-num">{maquinasComSetup}</span> com setup
                </span>
              </>
            ) : (
              <>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--ks-color-primary)]" />
                  <span className="ks-num">{roles.length}</span> funções
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
                  <span className="ks-num">{funcoesCalculadas}</span> com hora calculada
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-amber-500" />
                  <span className="ks-num">{funcoesAbaixoDe100}</span> abaixo de 100%
                </span>
              </>
            )}
          </div>
          {podeMexerNaProducao ? (
            naAbaDeMaquinas ? (
              <Button onClick={() => openMachineModal()} icon={<Plus size={16} />}>
                Nova máquina
              </Button>
            ) : (
              <Button onClick={() => openRoleModal()} icon={<Plus size={16} />}>
                Nova função
              </Button>
            )
          ) : null}
        </div>

        {loading ? (
          <div className="flex justify-center py-16">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        ) : naAbaDeMaquinas ? (
          maquinasFiltradas.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <div className="bg-slate-50 p-4 rounded-full mb-3">
                <Cpu className="h-8 w-8 text-slate-300" />
              </div>
              <h3 className="text-lg font-medium text-slate-900">
                {busca ? "Nenhuma máquina encontrada" : "Nenhuma máquina cadastrada"}
              </h3>
              <p className="text-slate-500 max-w-sm mt-1 mb-4">
                {busca
                  ? "Tente outro nome."
                  : "Cadastre os equipamentos e máquinas usados na sua produção para o custo por hora entrar nos cálculos."}
              </p>
              {podeMexerNaProducao && !busca ? (
                <Button variant="outline" onClick={() => openMachineModal()}>
                  Cadastrar máquina
                </Button>
              ) : null}
            </div>
          ) : (
            <div className="overflow-x-auto">
              <div className="min-w-[640px]">
                <div className={`grid ${colunas} gap-3 px-6 py-3 text-[10px] uppercase tracking-[0.14em] text-slate-400 font-semibold`}>
                  <span>Máquina</span>
                  <span>Custo por hora</span>
                  <span>Setup padrão</span>
                  <span />
                </div>
                {maquinasFiltradas.map((machine) => (
                  <div
                    key={machine.id}
                    onClick={podeMexerNaProducao ? () => openMachineModal(machine) : undefined}
                    title={podeMexerNaProducao ? "Editar máquina" : undefined}
                    className={`grid ${colunas} gap-3 items-center px-6 py-3.5 border-t border-slate-100/60 hover:bg-[var(--ks-color-bg-subtle)]/50 transition-colors ${
                      podeMexerNaProducao ? "cursor-pointer" : ""
                    }`}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <AvatarDoItem nome={machine.name} icone={iconeDaMaquina(machine.name)} />
                      <div className="min-w-0">
                        <p className="font-semibold text-sm text-[var(--ks-color-text-primary)] truncate">{machine.name}</p>
                        <p className="text-[11px] text-slate-400">
                          {machine.hourly_cost_manual === false ? "hora calculada pelo sistema" : "hora informada por você"}
                        </p>
                      </div>
                    </div>
                    <div>
                      <span className="text-base font-bold tabular-nums text-[var(--ks-color-text-primary)]">
                        {formatMoney(machine.hourly_cost)}
                      </span>
                      <span className="ml-1 text-xs text-slate-400">/h</span>
                    </div>
                    <div>
                      {machine.setup_minutes_default > 0 ? (
                        <>
                          <span className="text-base font-bold tabular-nums text-[var(--ks-color-text-primary)]">
                            {machine.setup_minutes_default}
                          </span>
                          <span className="ml-1 text-xs text-slate-400">min</span>
                        </>
                      ) : (
                        <span className="text-xs text-slate-400">sem setup</span>
                      )}
                    </div>
                    <div className="flex items-center justify-end gap-1">
                      {podeMexerNaProducao ? (
                        <>
                          <Button
                            size="icon"
                            variant="ghost"
                            title="Editar máquina"
                            onClick={(e) => {
                              e.stopPropagation();
                              openMachineModal(machine);
                            }}
                          >
                            <Pencil className="h-4 w-4 text-slate-500" />
                          </Button>
                          <Button
                            size="icon"
                            variant="ghost"
                            title="Excluir máquina"
                            onClick={(e) => {
                              e.stopPropagation();
                              pedirParaExcluirMaquina(machine);
                            }}
                          >
                            <Trash2 className="h-4 w-4 text-rose-500" />
                          </Button>
                        </>
                      ) : null}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )
        ) : funcoesFiltradas.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <div className="bg-slate-50 p-4 rounded-full mb-3">
              <UserCog className="h-8 w-8 text-slate-300" />
            </div>
            <h3 className="text-lg font-medium text-slate-900">
              {busca ? "Nenhuma função encontrada" : "Nenhuma função cadastrada"}
            </h3>
            <p className="text-slate-500 max-w-sm mt-1 mb-4">
              {busca
                ? "Tente outro nome."
                : "Cadastre os cargos e funções (ex.: marceneiro, pintor) e o que cada hora deles custa."}
            </p>
            {podeMexerNaProducao && !busca ? (
              <Button variant="outline" onClick={() => openRoleModal()}>
                Cadastrar função
              </Button>
            ) : null}
          </div>
        ) : (
          <div className="overflow-x-auto">
            <div className="min-w-[640px]">
              <div className={`grid ${colunas} gap-3 px-6 py-3 text-[10px] uppercase tracking-[0.14em] text-slate-400 font-semibold`}>
                <span>Função</span>
                <span>Custo por hora</span>
                <span>Eficiência</span>
                <span />
              </div>
              {funcoesFiltradas.map((role) => (
                <div
                  key={role.id}
                  onClick={podeMexerNaProducao ? () => openRoleModal(role) : undefined}
                  title={podeMexerNaProducao ? "Editar função" : undefined}
                  className={`grid ${colunas} gap-3 items-center px-6 py-3.5 border-t border-slate-100/60 hover:bg-[var(--ks-color-bg-subtle)]/50 transition-colors ${
                    podeMexerNaProducao ? "cursor-pointer" : ""
                  }`}
                >
                  <div className="flex items-center gap-3 min-w-0">
                    <AvatarDoItem nome={role.role_name} icone={null} />
                    <div className="min-w-0">
                      <p className="font-semibold text-sm text-[var(--ks-color-text-primary)] truncate">{role.role_name}</p>
                      <p className="text-[11px] text-slate-400 truncate">{origemDaHoraDaFuncao(role)}</p>
                    </div>
                  </div>
                  <div>
                    <span className="text-base font-bold tabular-nums text-[var(--ks-color-text-primary)]">
                      {formatMoney(role.hourly_rate)}
                    </span>
                    <span className="ml-1 text-xs text-slate-400">/h</span>
                  </div>
                  <div>
                    <span
                      className={`text-base font-bold tabular-nums ${
                        role.efficiency_pct < 100 ? "text-amber-600" : "text-[var(--ks-color-text-primary)]"
                      }`}
                    >
                      {role.efficiency_pct}%
                    </span>
                    <span className="ml-1 text-xs text-slate-400">do tempo produz</span>
                  </div>
                  <div className="flex items-center justify-end gap-1">
                    {podeMexerNaProducao ? (
                      <>
                        <Button
                          size="icon"
                          variant="ghost"
                          title="Editar função"
                          onClick={(e) => {
                            e.stopPropagation();
                            openRoleModal(role);
                          }}
                        >
                          <Pencil className="h-4 w-4 text-slate-500" />
                        </Button>
                        <Button
                          size="icon"
                          variant="ghost"
                          title="Excluir função"
                          onClick={(e) => {
                            e.stopPropagation();
                            pedirParaExcluirFuncao(role);
                          }}
                        >
                          <Trash2 className="h-4 w-4 text-rose-500" />
                        </Button>
                      </>
                    ) : null}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <CaixaDeConfirmacao pedido={confirmacao} ocupado={excluindo} aoFechar={() => setConfirmacao(null)} />

      <ModalDeMaquina
        aberta={isMachineModalOpen}
        maquina={editingMachine}
        aoFechar={() => setIsMachineModalOpen(false)}
        aoSalvar={() => void fetchData()}
      />

      {/* Role Modal */}
      {isRoleModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
             <div className="flex justify-between items-center p-4 border-b bg-slate-50/50">
               <h3 className="font-semibold text-lg text-slate-800">{editingRole ? 'Editar Função' : 'Nova Função'}</h3>
               <Button size="icon" variant="ghost" onClick={() => setIsRoleModalOpen(false)}><X className="h-4 w-4"/></Button>
             </div>
             <form onSubmit={saveRole} className="p-6 space-y-4">
               <div className="space-y-2">
                 <label className="text-sm font-medium text-slate-700">Nome da Função</label>
                 <Input required value={roleForm.role_name} onChange={e => setRoleForm({...roleForm, role_name: e.target.value})} placeholder="Ex: Marceneiro" />
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <label className="text-sm font-medium text-slate-700 inline-flex items-center">
                     Custo/Hora
                     <InfoTooltip text="O que uma hora desta função custa para a empresa: salário com encargos, dividido pelas horas produtivas. Com o cálculo automático ligado, este campo se preenche sozinho." />
                   </label>
                   <Input value={roleForm.hourly_rate}
                     onChange={e => setRoleForm({...roleForm, hourly_rate: formatMoneyInput(e.target.value)})}
                     placeholder="0,00"
                     disabled={!roleForm.hourly_rate_manual}
                     title={!roleForm.hourly_rate_manual ? "Preenchido pelo cálculo abaixo — desmarque para digitar" : undefined} />
                 </div>
                 <div className="space-y-2">
                   <label className="text-sm font-medium text-slate-700 inline-flex items-center">
                     Eficiência (%)
                     <InfoTooltip text="Quanto do tempo pago vira produção de verdade: 80% significa que de cada hora, 48 minutos produzem — e a hora útil custa 25% a mais. Entra no cálculo automático do Custo/Hora." />
                   </label>
                   <Input inputMode="decimal" value={roleForm.efficiency_pct} onChange={e => { if (textoDecimalValido(e.target.value)) setRoleForm({...roleForm, efficiency_pct: e.target.value}); }} placeholder="100" />
                 </div>
               </div>

               <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-inset)] p-4 space-y-3">
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={!roleForm.hourly_rate_manual}
                     onChange={e => setRoleForm({...roleForm, hourly_rate_manual: !e.target.checked})}
                   />
                   <span className="text-sm font-semibold text-slate-700">Calcular o valor por hora para mim</span>
                 </label>

                 {!roleForm.hourly_rate_manual && (
                   <>
                     <div className="grid grid-cols-2 gap-3">
                       <div className="space-y-1">
                         <label className="text-xs text-slate-500 inline-flex items-center">Salário mensal<InfoTooltip text="O salário bruto registrado, sem os encargos — eles entram no campo ao lado." /></label>
                         <Input inputMode="decimal" value={roleForm.monthly_salary}
                           onChange={e => setRoleForm({...roleForm, monthly_salary: e.target.value})} placeholder="0" />
                       </div>
                       <div className="space-y-1">
                         <label className="text-xs text-slate-500 inline-flex items-center">Encargos (%)<InfoTooltip text="FGTS, férias, 13º, INSS patronal. Num CLT típico fica entre 60% e 80% — ignorar isso subestima a hora em quase metade." /></label>
                         <Input inputMode="decimal" value={roleForm.charges_percent}
                           onChange={e => setRoleForm({...roleForm, charges_percent: e.target.value})} placeholder="Ex: 70" />
                       </div>
                     </div>
                     <div className="space-y-1">
                       <label className="text-xs text-slate-500 inline-flex items-center">
                         Horas produtivas por mês
                         <InfoTooltip text="As horas em que a pessoa realmente produz — descontando férias, feriados e o tempo parado. Usar a jornada cheia faz a hora parecer mais barata do que é." />
                       </label>
                       <Input inputMode="decimal" value={roleForm.productive_hours_month}
                         onChange={e => setRoleForm({...roleForm, productive_hours_month: e.target.value})} placeholder="Ex: 150" />
                     </div>
                     <div className="rounded-lg bg-white px-3 py-2 text-sm">
                       {previaRole === null ? (
                         <span className="text-slate-500">Informe as horas produtivas para ver o valor.</span>
                       ) : (
                         <span className="text-slate-700">
                           Valor por hora: <strong className="text-base">{formatMoney(previaRole)}</strong>
                           <span className="text-xs text-slate-400"> — já preenchido lá em cima</span>
                         </span>
                       )}
                     </div>
                   </>
                 )}
               </div>
               {error && (
                 <div className="text-sm text-red-600 bg-red-50 p-3 rounded-md flex items-center gap-2">
                   <AlertTriangle className="h-4 w-4" />
                   {error}
                 </div>
               )}
               <div className="flex justify-end gap-3 pt-4 border-t mt-6">
                 <Button type="button" variant="ghost" onClick={() => setIsRoleModalOpen(false)}>Cancelar</Button>
                 <Button type="submit" disabled={saving}>
                   {saving ? <Loader2 className="h-4 w-4 animate-spin mr-2"/> : <Save className="h-4 w-4 mr-2"/>}
                   Salvar
                 </Button>
               </div>
             </form>
          </div>
        </div>
      )}
    </div>
  );
}