"use client";

import { useState } from "react";
import { BookmarkPlus, CalendarClock, ChevronDown, Eye, Monitor, Smartphone, X } from "lucide-react";
import { ColorField } from "@/components/ui/color-field";
import type { SecaoDoEditor } from "@/lib/pagina-inicial";
import {
  comAgendamento,
  comDispositivo,
  comFundo,
  lerAgendamento,
  lerDispositivo,
  lerFundo,
  momentoDaAgenda,
  problemaDoAgendamento,
  textoDoAgendamento,
  type Dispositivo,
  type Espaco,
  type FundoDaSecao,
  type TipoDeFundo,
} from "@/lib/exibicao-da-secao";
import { textoDeBrasilia } from "@/lib/widgets-da-home";
import { Ajuste, CampoDeImagem, Chave, Segmentos } from "./campos";
import { useEditorDoPainel } from "./contexto";

/*
  "Como e quando aparece": os ajustes que valem para qualquer seção (agendar,
  aparelho, fundo e espaço), no fim do painel de ajustes. Fechado por
  padrão; abre sozinho quando a seção já usa algum deles.
*/

const CAMPO_DE_DATA =
  "h-[38px] w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-3 text-[13px] text-[var(--ks-color-text-primary)] outline-none focus:border-[var(--ks-color-primary)]";

function Atalho({ rotulo, onClick }: { rotulo: string; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="rounded-full bg-[var(--ks-color-bg-inset)] px-2.5 py-1 text-[11px] font-bold text-[var(--ks-color-text-secondary)] hover:text-[var(--ks-color-primary)]"
    >
      {rotulo}
    </button>
  );
}

export function AjustesDeExibicao({ secao, aoMudar }: { secao: SecaoDoEditor; aoMudar: (secao: SecaoDoEditor) => void }) {
  const painel = useEditorDoPainel();
  const config = secao.config;
  const agenda = lerAgendamento(config);
  const dispositivo = lerDispositivo(config);
  const fundo = lerFundo(config);
  const usaAlgum = Boolean(agenda.inicio || agenda.fim || dispositivo !== "todos" || fundo.tipo !== "nenhum" || fundo.acima || fundo.abaixo);
  const [aberto, setAberto] = useState(usaAlgum);
  const [agendar, setAgendar] = useState(Boolean(agenda.inicio || agenda.fim));

  const mudarConfig = (novo: Record<string, unknown>) => aoMudar({ ...secao, config: novo });
  const mudarFundo = (parcial: Partial<FundoDaSecao>) => mudarConfig(comFundo(config, { ...fundo, ...parcial }));
  const momento = momentoDaAgenda(agenda);
  const erroDaAgenda = problemaDoAgendamento(agenda);
  const foraDoAr = momento === "antes" || momento === "depois";
  const vendoNoAr = painel?.previaNoAr.has(secao.chave) ?? false;

  return (
    <div data-ajustes="exibicao" className="mt-2 border-t-[6px] border-[var(--ks-color-bg-inset)]">
      <button
        type="button"
        onClick={() => setAberto((a) => !a)}
        aria-expanded={aberto}
        className="flex w-full items-center gap-3 px-5 py-4 text-left transition hover:bg-[var(--ks-color-bg-hover)]"
      >
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] bg-[var(--ks-brand-50)] text-[var(--ks-color-primary)]">
          <CalendarClock size={16} />
        </span>
        <span className="min-w-0 flex-1">
          <span className="block text-[13px] font-extrabold text-[var(--ks-color-text-primary)]">Como e quando aparece</span>
          <span className="block truncate text-[11.5px] text-[var(--ks-color-text-soft)]">
            {usaAlgum
              ? [agenda.inicio || agenda.fim ? "agendada" : "", dispositivo !== "todos" ? (dispositivo === "celular" ? "só no celular" : "só no computador") : "", fundo.tipo !== "nenhum" ? "fundo próprio" : "", fundo.acima || fundo.abaixo ? "espaço" : ""]
                  .filter(Boolean)
                  .join(" · ")
              : "Agendar, aparelho, fundo e espaço"}
          </span>
        </span>
        <ChevronDown size={16} className={`shrink-0 text-[var(--ks-color-text-soft)] transition ${aberto ? "rotate-180" : ""}`} />
      </button>

      {aberto ? (
        <>
          {/* ------------------------------------------------ agendar */}
          <Chave
            ligada={agendar}
            aoMudar={(ligada) => {
              setAgendar(ligada);
              if (!ligada) mudarConfig(comAgendamento(config, { inicio: "", fim: "" }));
              else if (!agenda.inicio && !agenda.fim) {
                const agora = Date.now();
                mudarConfig(comAgendamento(config, { inicio: textoDeBrasilia(agora + 24 * 3600 * 1000).slice(0, 11) + "08:00", fim: textoDeBrasilia(agora + 8 * 24 * 3600 * 1000).slice(0, 11) + "23:59" }));
              }
            }}
            rotulo="Agendar a seção"
            dica="Ela entra e sai da loja sozinha, na hora marcada (hora de Brasília)."
          />
          {agendar ? (
            <Ajuste rotulo="Janela da seção" dica={erroDaAgenda ? undefined : "Deixe um dos dois vazio para só começar ou só terminar."}>
              <div className="grid grid-cols-1 gap-2">
                <label className="block">
                  <span className="mb-1 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Aparece a partir de</span>
                  <input
                    type="datetime-local"
                    value={agenda.inicio}
                    onChange={(e) => mudarConfig(comAgendamento(config, { ...agenda, inicio: e.target.value }))}
                    aria-label="Início do agendamento"
                    className={CAMPO_DE_DATA}
                  />
                </label>
                <label className="block">
                  <span className="mb-1 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Sai da loja em</span>
                  <input
                    type="datetime-local"
                    value={agenda.fim}
                    onChange={(e) => mudarConfig(comAgendamento(config, { ...agenda, fim: e.target.value }))}
                    aria-label="Fim do agendamento"
                    className={CAMPO_DE_DATA}
                  />
                </label>
              </div>
              <div className="mt-2 flex flex-wrap gap-1.5">
                <Atalho rotulo="Começa agora" onClick={() => mudarConfig(comAgendamento(config, { ...agenda, inicio: textoDeBrasilia(Date.now()) }))} />
                <Atalho rotulo="Até domingo 23:59" onClick={() => {
                  const agora = Date.now();
                  const diaDaSemana = new Date(agora - 3 * 3600 * 1000).getUTCDay();
                  const faltam = (7 - diaDaSemana) % 7;
                  mudarConfig(comAgendamento(config, { ...agenda, fim: `${textoDeBrasilia(agora + faltam * 24 * 3600 * 1000).slice(0, 11)}23:59` }));
                }} />
                <Atalho rotulo="+7 dias" onClick={() => mudarConfig(comAgendamento(config, { ...agenda, fim: textoDeBrasilia(Date.now() + 7 * 24 * 3600 * 1000) }))} />
                {agenda.inicio ? <Atalho rotulo="Sem início" onClick={() => mudarConfig(comAgendamento(config, { ...agenda, inicio: "" }))} /> : null}
                {agenda.fim ? <Atalho rotulo="Sem fim" onClick={() => mudarConfig(comAgendamento(config, { ...agenda, fim: "" }))} /> : null}
              </div>
              {erroDaAgenda ? (
                <p className="mt-2 text-[11.5px] font-semibold text-[var(--ks-color-status-danger)]">O fim precisa ser depois do início.</p>
              ) : agenda.inicio || agenda.fim ? (
                <div
                  className={`mt-3 flex items-start gap-2 rounded-xl px-3 py-2.5 text-[12px] font-semibold ${
                    foraDoAr ? "bg-[#fff4e5] text-[#9a4b00]" : "bg-[var(--ks-emerald-soft)] text-[var(--ks-color-status-success)]"
                  }`}
                >
                  <CalendarClock size={15} className="mt-px shrink-0" />
                  <span>
                    {textoDoAgendamento(agenda)}.{" "}
                    {momento === "antes" ? "Ainda não está na loja." : momento === "depois" ? "Já saiu da loja." : "Está na loja agora."}
                  </span>
                </div>
              ) : null}
              {foraDoAr && painel ? (
                <button
                  type="button"
                  onClick={() => painel.alternarPrevia(secao.chave)}
                  aria-pressed={vendoNoAr}
                  className={`mt-2 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-bold transition ${
                    vendoNoAr ? "bg-[var(--ks-color-primary)] text-white" : "bg-[var(--ks-brand-50)] text-[var(--ks-color-primary)] hover:bg-[var(--ks-brand-100)]"
                  }`}
                >
                  <Eye size={14} /> {vendoNoAr ? "Vendo na prévia como no ar" : "Ver na prévia como se estivesse no ar"}
                </button>
              ) : null}
            </Ajuste>
          ) : null}

          {/* ------------------------------------------------ aparelho */}
          <Ajuste rotulo="Mostrar em" dica={dispositivo === "todos" ? undefined : "Na prévia do editor ela aparece apagada no outro aparelho (troque o aparelho lá em cima para ver)."}>
            <Segmentos<Dispositivo>
              rotulo="Mostrar em"
              valor={dispositivo}
              aoMudar={(novo) => mudarConfig(comDispositivo(config, novo))}
              opcoes={[
                { valor: "todos", rotulo: "Os dois" },
                { valor: "celular", rotulo: <><Smartphone size={14} /> Celular</>, titulo: "Só no celular" },
                { valor: "computador", rotulo: <><Monitor size={14} /> Computador</>, titulo: "Só no computador" },
              ]}
            />
          </Ajuste>

          {/* ------------------------------------------------ fundo */}
          <Ajuste rotulo="Fundo da seção">
            <Segmentos<TipoDeFundo>
              rotulo="Fundo da seção"
              valor={fundo.tipo}
              aoMudar={(tipo) => mudarFundo({ tipo })}
              opcoes={[
                { valor: "nenhum", rotulo: "Nenhum" },
                { valor: "cor", rotulo: "Cor" },
                { valor: "gradiente", rotulo: "Degradê" },
                { valor: "imagem", rotulo: "Imagem" },
              ]}
            />
            {fundo.tipo !== "nenhum" ? (
              <div className="mt-3 space-y-3">
                {fundo.tipo === "imagem" ? (
                  <>
                    <CampoDeImagem valor={fundo.imagem} aoMudar={(imagem) => mudarFundo({ imagem })} proporcao={16 / 9} largura={1920} altura={1080} dica="Ideal 1920 × 1080 px. Ela cobre a seção inteira, cortada pelo centro." />
                    <div>
                      <span className="mb-1.5 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Escurecer a imagem (para o texto aparecer)</span>
                      <Segmentos
                        rotulo="Escurecer a imagem"
                        valor={String(fundo.escurecer)}
                        aoMudar={(v) => mudarFundo({ escurecer: Number(v) })}
                        opcoes={[
                          { valor: "0", rotulo: "Sem" },
                          { valor: "20", rotulo: "20%" },
                          { valor: "35", rotulo: "35%" },
                          { valor: "50", rotulo: "50%" },
                          { valor: "65", rotulo: "65%" },
                        ]}
                      />
                    </div>
                  </>
                ) : (
                  <div className="grid grid-cols-1 gap-2.5">
                    <ColorField label={fundo.tipo === "gradiente" ? "Cor de começo" : "Cor"} value={fundo.cor} onChange={(cor) => mudarFundo({ cor })} allowAuto={false} />
                    {fundo.tipo === "gradiente" ? (
                      <>
                        <ColorField label="Cor de fim" value={fundo.cor_2} onChange={(cor_2) => mudarFundo({ cor_2 })} allowAuto={false} />
                        <div>
                          <span className="mb-1.5 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Direção</span>
                          <Segmentos
                            rotulo="Direção do degradê"
                            valor={String(fundo.angulo)}
                            aoMudar={(v) => mudarFundo({ angulo: Number(v) })}
                            opcoes={[
                              { valor: "90", rotulo: "→", titulo: "Da esquerda para a direita" },
                              { valor: "135", rotulo: "↘", titulo: "Na diagonal" },
                              { valor: "180", rotulo: "↓", titulo: "De cima para baixo" },
                              { valor: "45", rotulo: "↗", titulo: "Na diagonal, subindo" },
                            ]}
                          />
                        </div>
                      </>
                    ) : null}
                    <div
                      aria-hidden
                      className="h-10 rounded-xl ring-1 ring-black/5"
                      style={{ background: fundo.tipo === "gradiente" ? `linear-gradient(${fundo.angulo}deg, ${fundo.cor}, ${fundo.cor_2})` : fundo.cor }}
                    />
                  </div>
                )}
                <div>
                  <span className="mb-1.5 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Cor dos textos</span>
                  <Segmentos
                    rotulo="Cor dos textos"
                    valor={fundo.texto_claro === null ? "auto" : fundo.texto_claro ? "claro" : "bloco"}
                    aoMudar={(v) => mudarFundo({ texto_claro: v === "auto" ? null : v === "claro" })}
                    opcoes={[
                      { valor: "auto", rotulo: "Automática", titulo: "Branco sobre imagem escurecida ou cor escura" },
                      { valor: "claro", rotulo: "Brancos" },
                      { valor: "bloco", rotulo: "Do bloco", titulo: "A cor de sempre do bloco" },
                    ]}
                  />
                </div>
                <div>
                  <span className="mb-1.5 block text-[11px] font-semibold text-[var(--ks-color-text-soft)]">Até onde vai o fundo</span>
                  <Segmentos
                    rotulo="Largura do fundo"
                    valor={fundo.largura}
                    aoMudar={(largura) => mudarFundo({ largura })}
                    opcoes={[
                      { valor: "inteira", rotulo: "De ponta a ponta" },
                      { valor: "contida", rotulo: "Caixa arredondada" },
                    ]}
                  />
                </div>
              </div>
            ) : null}
          </Ajuste>

          {/* ------------------------------------------------ espaço */}
          <Ajuste rotulo="Espaço acima e abaixo" dica="Respiro a mais em volta da seção (fica dentro do fundo, quando houver).">
            <div className="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-2">
              {(["acima", "abaixo"] as const).map((lado) => (
                <div key={lado} className="contents">
                  <span className="text-[11.5px] font-semibold text-[var(--ks-color-text-soft)]">{lado === "acima" ? "Acima" : "Abaixo"}</span>
                  <Segmentos<Espaco>
                    rotulo={`Espaço ${lado}`}
                    valor={fundo[lado]}
                    aoMudar={(v) => mudarFundo({ [lado]: v } as Partial<FundoDaSecao>)}
                    opcoes={[
                      { valor: "", rotulo: "Normal" },
                      { valor: "p", rotulo: "P" },
                      { valor: "m", rotulo: "M" },
                      { valor: "g", rotulo: "G" },
                    ]}
                  />
                </div>
              ))}
            </div>
          </Ajuste>
          {usaAlgum ? (
            <div className="px-5 pb-2">
              <button
                type="button"
                onClick={() => {
                  setAgendar(false);
                  mudarConfig(comFundo(comDispositivo(comAgendamento(config, { inicio: "", fim: "" }), "todos"), { ...fundo, tipo: "nenhum", acima: "", abaixo: "" }));
                }}
                className="inline-flex items-center gap-1.5 text-[12px] font-bold text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)]"
              >
                <X size={13} /> Voltar ao jeito de sempre
              </button>
            </div>
          ) : null}
        </>
      ) : null}

      {painel ? (
        <div className="border-t border-[var(--ks-n-100)] px-5 py-4">
          <button type="button" onClick={() => painel.salvarComoBloco(secao)} className="ks-button ks-button-secondary ks-button-sm w-full justify-center">
            <BookmarkPlus size={15} /> Salvar em Meus blocos
          </button>
          <p className="mt-1.5 text-center text-[11px] text-[var(--ks-color-text-soft)]">Guarda esta seção para pôr de novo em qualquer página.</p>
        </div>
      ) : null}
    </div>
  );
}