import { useState, type FormEvent } from "react";
import { Link } from "@tanstack/react-router";
import { FaIcon } from "./FaIcon";
import { categories, countByCategory } from "@/content/posts";
import { subscribeNewsletter } from "@/lib/forms";

export { categories };

function useNewsletter(origem: string) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState<{ s: "idle" | "sending" | "ok" | "err"; msg?: string }>({ s: "idle" });
  async function submit(e: FormEvent) {
    e.preventDefault();
    setState({ s: "sending" });
    try {
      await subscribeNewsletter(email, origem);
      setEmail("");
      setState({ s: "ok", msg: "Inscrição confirmada! Obrigado." });
    } catch (err) {
      setState({ s: "err", msg: (err as Error).message });
    }
  }
  return { email, setEmail, state, submit };
}

export function BlogSidebar({ active }: { active?: string | undefined }) {
  const n = useNewsletter("blog-sidebar");
  return (
    <aside className="space-y-5">
      <div className="rounded-[20px] border border-accent bg-blush p-5">
        <h3 className="mb-6 mt-2 font-display text-[18px] font-bold text-ink">Categorias</h3>
        <ul className="space-y-4 px-3 pb-8">
          {categories.map((c) => (
            <li key={c}>
              <Link
                to="/blog"
                search={{ categoria: active === c ? undefined : c }}
                className={`flex items-center justify-between text-[13px] font-semibold transition-colors hover:text-primary ${active === c ? "text-primary" : "text-muted-foreground"}`}
              >
                {c}
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-[11px] text-ink">
                  {countByCategory(c)}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
      <div className="rounded-[20px] bg-primary p-5">
        <h3 className="mt-1 font-display text-[18px] font-bold text-primary-foreground">Receba conteúdos sobre inovação</h3>
        <p className="mt-3 text-[14px] leading-[1.55] text-accent/80">
          Assine nossa newsletter e receba análises exclusivas sobre ativos reais.
        </p>
        <form className="mt-5 space-y-[6px]" onSubmit={n.submit}>
          <input
            type="email"
            required
            value={n.email}
            onChange={(e) => n.setEmail(e.target.value)}
            placeholder="E-mail..."
            aria-label="Email"
            className="h-10 w-full rounded-[4px] border border-accent/40 bg-primary-foreground/10 px-4 text-[15px] text-primary-foreground placeholder:text-accent/80 focus:outline-none"
          />
          <button
            disabled={n.state.s === "sending"}
            className="flex h-10 w-full items-center justify-center gap-3 rounded-[4px] bg-ink font-cond text-[12px] font-bold uppercase tracking-[0.3em] text-primary-foreground disabled:opacity-70"
          >
            {n.state.s === "sending" ? "Enviando..." : "Inscreva-se"} <FaIcon name="arrow-right" size={12} />
          </button>
          {n.state.msg && <p className="pt-1 text-[13px] text-accent">{n.state.msg}</p>}
        </form>
      </div>
    </aside>
  );
}

export function NewsletterBand() {
  const n = useNewsletter("blog-rodape");
  return (
    <section className="bg-wine-dark">
      <div className="mx-auto flex max-w-[1140px] flex-col gap-8 px-5 py-[70px] md:flex-row md:items-center md:justify-between xl:px-0">
        <div className="max-w-[650px]">
          <h2 className="font-display text-[30px] font-black leading-[1.15] text-primary-foreground">
            Inscreva-se para receber conteúdos sobre{" "}
            <em className="font-normal text-rose">oportunidades de investimento</em> antes do mercado
          </h2>
          <p className="mt-4 text-[17px] leading-[1.6] text-primary-foreground/80">
            Assine nossa newsletter e receba análises exclusivas sobre ativos reais, dados estratégicos de
            enoturismo e atualizações do desenvolvimento das nossas ventures.
          </p>
        </div>
        <form className="w-full max-w-[420px]" onSubmit={n.submit}>
          <div className="flex">
            <input
              type="email"
              required
              value={n.email}
              onChange={(e) => n.setEmail(e.target.value)}
              placeholder="E-mail..."
              aria-label="Email"
              className="h-10 min-w-0 flex-1 rounded-l-[6px] border border-muted-foreground bg-primary-foreground/10 px-4 text-[15px] text-primary-foreground placeholder:text-primary-foreground/60 focus:outline-none"
            />
            <button
              disabled={n.state.s === "sending"}
              className="h-10 rounded-r-[6px] bg-primary px-8 font-cond text-[11px] font-bold uppercase tracking-[0.3em] text-primary-foreground disabled:opacity-70"
            >
              {n.state.s === "sending" ? "Enviando..." : "Assinar agora"}
            </button>
          </div>
          {n.state.msg && <p className="mt-2 text-[14px] text-accent">{n.state.msg}</p>}
        </form>
      </div>
    </section>
  );
}
