import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Building2,
  CheckCircle2,
  Handshake,
  HeartHandshake,
  Sparkles,
  UserRound,
  Mail,
  Phone,
  MapPin,
  Briefcase,
  PartyPopper,
} from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";

export const Route = createFileRoute("/acesso/parceiro/cadastrar-empresa")({
  head: () => ({
    meta: [
      { title: "Cadastrar empresa — Parceiro Comercial | Instituto Vida Segura" },
      {
        name: "description",
        content:
          "Área do representante: cadastre uma empresa que contratou os serviços do Instituto Vida Segura e acompanhe a jornada de transformação.",
      },
      { property: "og:title", content: "Cadastrar empresa — Parceiro Comercial" },
      {
        property: "og:description",
        content:
          "Cadastre uma nova empresa parceira do Instituto Vida Segura de forma rápida e acolhedora.",
      },
    ],
  }),
  component: CadastrarEmpresa,
});

type Solucao = "safe" | "mind" | "palestras";

function CadastrarEmpresa() {
  const [sent, setSent] = useState(false);
  const [solucoes, setSolucoes] = useState<Solucao[]>([]);

  const toggle = (s: Solucao) =>
    setSolucoes((prev) => (prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]));

  if (sent) {
    return (
      <SiteShell>
        <section className="relative min-h-[calc(100vh-72px)] overflow-hidden bg-gradient-to-br from-[color:var(--safe)] via-[color:var(--safe)] to-[color:var(--safe-gold)]/30">
          <div className="container-page relative grid place-items-center py-24 text-center">
            <div className="max-w-2xl rounded-3xl border border-white/15 bg-white/10 p-10 backdrop-blur-xl sm:p-14">
              <div className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-[color:var(--safe-gold)] text-[color:var(--safe)]">
                <PartyPopper className="h-7 w-7" />
              </div>
              <h1 className="mt-6 font-display text-4xl font-medium tracking-tight text-white sm:text-5xl">
                Bem-vinda à <span className="italic text-[color:var(--safe-gold)]">família</span>.
              </h1>
              <p className="mt-4 text-white/85">
                Recebemos o cadastro. Em até 1 dia útil nosso time de onboarding entrará em
                contato com a empresa e com você para iniciar a jornada juntos.
              </p>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                <button
                  onClick={() => {
                    setSent(false);
                    setSolucoes([]);
                  }}
                  className="inline-flex items-center gap-2 rounded-full bg-[color:var(--safe-gold)] px-6 py-3 text-sm font-semibold text-[color:var(--safe)]"
                >
                  Cadastrar outra empresa
                  <ArrowRight className="h-4 w-4" />
                </button>
                <Link
                  to="/acesso/parceiro"
                  className="inline-flex items-center gap-2 rounded-full border border-white/30 px-6 py-3 text-sm font-medium text-white hover:bg-white/10"
                >
                  Voltar ao portal
                </Link>
              </div>
            </div>
          </div>
        </section>
      </SiteShell>
    );
  }

  return (
    <SiteShell>
      <section className="relative overflow-hidden bg-gradient-to-br from-[color:var(--safe)] via-[color:var(--safe)] to-[color:var(--safe-gold)]/25">
        <div className="pointer-events-none absolute -right-32 -top-32 h-96 w-96 rounded-full bg-[color:var(--life)]/20 blur-3xl" />
        <div className="pointer-events-none absolute -left-32 bottom-0 h-96 w-96 rounded-full bg-[color:var(--safe-gold)]/20 blur-3xl" />

        <div className="container-page relative py-16 lg:py-20">
          <Link
            to="/acesso/parceiro"
            className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.18em] text-white/80 hover:text-white"
          >
            <ArrowLeft className="h-3 w-3" /> Portal do parceiro
          </Link>

          <div className="mt-6 grid gap-12 lg:grid-cols-[0.95fr_1.15fr] lg:gap-16">
            {/* Left: belonging narrative */}
            <div>
              <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-xs font-medium uppercase tracking-[0.18em] text-white backdrop-blur">
                <Handshake className="h-3 w-3" /> Cadastro de empresa
              </span>
              <h1 className="mt-6 font-display text-4xl font-medium leading-[1.05] tracking-tight text-white sm:text-5xl">
                Cada empresa que entra é uma{" "}
                <span className="italic text-[color:var(--safe-gold)]">história</span> que começa
                com você.
              </h1>
              <p className="mt-6 max-w-md text-white/85">
                Você é parte essencial do movimento. Preencha os dados da empresa que contratou
                nossos serviços e nosso time de onboarding cuidará do restante — sempre lado a
                lado com você.
              </p>

              <ul className="mt-10 space-y-5">
                {[
                  {
                    icon: HeartHandshake,
                    title: "Acolhimento desde o primeiro contato",
                    desc: "Onboarding humano com você presente em cada etapa.",
                  },
                  {
                    icon: Sparkles,
                    title: "Comissão lançada automaticamente",
                    desc: "Assim que o contrato é assinado, sua remuneração entra no painel.",
                  },
                  {
                    icon: CheckCircle2,
                    title: "Você acompanha a jornada",
                    desc: "Veja em tempo real o avanço da implantação na empresa indicada.",
                  },
                ].map(({ icon: Icon, title, desc }) => (
                  <li key={title} className="flex gap-4">
                    <span className="mt-0.5 grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-white/10 text-[color:var(--safe-gold)] backdrop-blur">
                      <Icon className="h-5 w-5" />
                    </span>
                    <div>
                      <p className="font-medium text-white">{title}</p>
                      <p className="text-sm text-white/70">{desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            {/* Right: form card */}
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSent(true);
              }}
              className="rounded-3xl border border-white/20 bg-white/95 p-8 shadow-2xl backdrop-blur-xl sm:p-10"
            >
              <div className="flex items-center gap-3">
                <span className="grid h-12 w-12 place-items-center rounded-2xl bg-[color:var(--safe)] text-white">
                  <Building2 className="h-5 w-5" />
                </span>
                <div>
                  <h2 className="font-display text-2xl font-medium tracking-tight text-[color:var(--safe)]">
                    Dados da empresa
                  </h2>
                  <p className="text-xs text-foreground/60">
                    Leva menos de 3 minutos — prometemos.
                  </p>
                </div>
              </div>

              {/* Section: empresa */}
              <div className="mt-8 space-y-5">
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--safe)]/70">
                  Sobre a empresa
                </p>

                <Field label="Razão social" icon={Briefcase}>
                  <input required type="text" placeholder="Empresa LTDA" className={inputCls} />
                </Field>

                <div className="grid gap-5 sm:grid-cols-2">
                  <Field label="CNPJ">
                    <input
                      required
                      inputMode="numeric"
                      placeholder="00.000.000/0000-00"
                      className={inputCls}
                    />
                  </Field>
                  <Field label="Nº de colaboradores">
                    <select required className={inputCls} defaultValue="">
                      <option value="" disabled>
                        Selecione
                      </option>
                      <option>Até 50</option>
                      <option>51 a 200</option>
                      <option>201 a 500</option>
                      <option>501 a 1.000</option>
                      <option>1.001+</option>
                    </select>
                  </Field>
                </div>

                <div className="grid gap-5 sm:grid-cols-[1fr_140px]">
                  <Field label="Cidade" icon={MapPin}>
                    <input required type="text" placeholder="Teresópolis" className={inputCls} />
                  </Field>
                  <Field label="UF">
                    <input
                      required
                      maxLength={2}
                      placeholder="RJ"
                      className={`${inputCls} uppercase`}
                    />
                  </Field>
                </div>
              </div>

              {/* Section: contato */}
              <div className="mt-10 space-y-5">
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--safe)]/70">
                  Contato responsável
                </p>

                <Field label="Nome do responsável" icon={UserRound}>
                  <input required type="text" placeholder="Nome completo" className={inputCls} />
                </Field>

                <div className="grid gap-5 sm:grid-cols-2">
                  <Field label="E-mail corporativo" icon={Mail}>
                    <input
                      required
                      type="email"
                      placeholder="nome@empresa.com.br"
                      className={inputCls}
                    />
                  </Field>
                  <Field label="Telefone / WhatsApp" icon={Phone}>
                    <input
                      required
                      type="tel"
                      placeholder="(00) 00000-0000"
                      className={inputCls}
                    />
                  </Field>
                </div>

                <Field label="Cargo">
                  <input required type="text" placeholder="Ex: Diretor de RH" className={inputCls} />
                </Field>
              </div>

              {/* Section: soluções */}
              <div className="mt-10 space-y-4">
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--safe)]/70">
                  Soluções contratadas
                </p>
                <div className="grid gap-3 sm:grid-cols-3">
                  {(
                    [
                      { id: "safe", label: "Safe Company", color: "var(--safe)" },
                      { id: "mind", label: "Mind Family", color: "var(--life)" },
                      { id: "palestras", label: "Palestras & Workshops", color: "var(--safe-gold)" },
                    ] as { id: Solucao; label: string; color: string }[]
                  ).map((opt) => {
                    const active = solucoes.includes(opt.id);
                    return (
                      <button
                        type="button"
                        key={opt.id}
                        onClick={() => toggle(opt.id)}
                        className={`rounded-2xl border px-4 py-3 text-left text-sm font-medium transition ${
                          active
                            ? "border-[color:var(--safe)] bg-[color:var(--safe)]/5 text-[color:var(--safe)]"
                            : "border-foreground/15 text-foreground/70 hover:border-[color:var(--safe)]/40"
                        }`}
                      >
                        <span
                          className="mb-2 block h-1.5 w-8 rounded-full"
                          style={{ background: opt.color }}
                        />
                        {opt.label}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Section: mensagem */}
              <div className="mt-8">
                <Field label="Uma mensagem para nosso time (opcional)">
                  <textarea
                    rows={3}
                    placeholder="Conte um pouco do contexto da empresa, expectativas ou próximos passos combinados."
                    className={`${inputCls} resize-none`}
                  />
                </Field>
              </div>

              <label className="mt-8 flex items-start gap-3 text-xs text-foreground/70">
                <input
                  type="checkbox"
                  required
                  className="mt-0.5 h-4 w-4 rounded border-foreground/30 accent-[color:var(--safe)]"
                />
                <span>
                  Confirmo que a empresa foi informada deste cadastro e autorizo o Instituto Vida
                  Segura a entrar em contato para iniciar a implantação.
                </span>
              </label>

              <button
                type="submit"
                className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-[color:var(--safe)] px-6 py-3.5 text-sm font-semibold text-white transition hover:bg-[color:var(--safe)]/90"
              >
                Enviar cadastro e iniciar jornada
                <ArrowRight className="h-4 w-4" />
              </button>
              <p className="mt-3 text-center text-xs text-foreground/60">
                Nosso time entra em contato em até 1 dia útil.
              </p>
            </form>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}

const inputCls =
  "w-full rounded-2xl border border-foreground/15 bg-white px-4 py-3 text-sm text-foreground placeholder:text-foreground/40 outline-none transition focus:border-[color:var(--safe)] focus:ring-2 focus:ring-[color:var(--safe)]/15";

function Field({
  label,
  icon: Icon,
  children,
}: {
  label: string;
  icon?: React.ComponentType<{ className?: string }>;
  children: React.ReactNode;
}) {
  return (
    <label className="block">
      <span className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-[0.14em] text-foreground/60">
        {Icon ? <Icon className="h-3 w-3" /> : null}
        {label}
      </span>
      {children}
    </label>
  );
}