import { requireTenantAdmin } from "@/lib/auth";
import { db } from "@/lib/db";
import { PanelShell } from "@/components/panel-shell";
import { AppearanceForm } from "@/components/appearance-form";
import { deleteSiteBanner,saveFeatureBoxes,saveSiteBanner,toggleGoogleMap } from "@/lib/actions";

export default async function Appearance({searchParams}:{searchParams:Promise<{banner?:string;mapa?:string;caixas?:string}>}){
  const {tenant:base}=await requireTenantAdmin();
  const query=await searchParams;
  const tenant=await db.tenant.findUniqueOrThrow({
    where:{id:base.id},
    include:{theme:true,siteBanners:{orderBy:[{sortOrder:"asc"},{createdAt:"asc"}]}}
  });
  const theme=tenant.theme;

  return <PanelShell eyebrow="CONFIGURAÇÕES" title="Aparência" activePath="/painel/aparencia">
    <AppearanceForm tenant={{name:tenant.name,description:tenant.description??"",whatsapp:tenant.whatsapp??"",postalCode:tenant.postalCode??"",addressLine:tenant.addressLine??"",instagramUrl:tenant.instagramUrl??"",facebookUrl:tenant.facebookUrl??""}} theme={{logoUrl:theme?.logoUrl??"",faviconUrl:theme?.faviconUrl??"",primaryColor:theme?.primaryColor??"#e60000",headerColor:theme?.headerColor??"#ffffff",buttonColor:theme?.buttonColor??"#e60000",footerColor:theme?.footerColor??"#202124"}}/>

    <section className="form-card feature-box-editor">
      <div><p className="eyebrow">CONTEÚDO OPCIONAL</p><h2>Três caixas de destaque</h2><p>Use como vantagens, diferenciais ou missão, visão e valores. Uma caixa totalmente vazia não aparecerá no site.</p></div>
      {query.caixas&&<strong className="map-feedback">Caixas salvas.</strong>}
      <form action={saveFeatureBoxes} className="form-stack">
        <div className="feature-fields">{[1,2,3].map(number=><fieldset key={number}><legend>Caixa {number}</legend><label>Título<input name={`feature${number}Title`} maxLength={80} defaultValue={tenant[`feature${number}Title` as "feature1Title"]??""} placeholder={number===1?"Ex.: Qualidade":""}/></label><label>Descrição<textarea name={`feature${number}Description`} maxLength={300} rows={4} defaultValue={tenant[`feature${number}Description` as "feature1Description"]??""} placeholder={number===1?"Explique este destaque em poucas palavras.":""}/></label></fieldset>)}</div>
        <button className="button">Salvar caixas <span>→</span></button>
      </form>
    </section>

    <section className="form-card map-setting"><div><p className="eyebrow">LOCALIZAÇÃO</p><h2>Google Maps</h2><p>Mostre no site um mapa usando o endereço, cidade e estado cadastrados.</p>{tenant.addressLine?<small>{tenant.addressLine} · {tenant.city}/{tenant.state}</small>:<small>Preencha e salve o endereço acima antes de ativar.</small>}</div><form action={toggleGoogleMap}><input type="hidden" name="enabled" value={String(!tenant.showGoogleMap)}/><button className={tenant.showGoogleMap?"secondary-button":"button"} disabled={!tenant.addressLine}>{tenant.showGoogleMap?"Ocultar mapa":"Mostrar mapa no site"}</button></form>{query.mapa&&<strong className="map-feedback">Mapa {query.mapa}.</strong>}</section>

    <section className="banner-manager">
      <div className="module-toolbar"><div><p className="eyebrow">DESTAQUES</p><h2>Banners do site</h2><p>Ao adicionar banners, o título e os botões sobre a imagem deixam de aparecer. O banner inteiro poderá ser clicado.</p></div></div>
      {query.banner&&<div className="form-card form-feedback success"><strong>{query.banner==="excluido"?"Banner excluído.":"Banner salvo."}</strong></div>}
      <article className="form-card"><h3>Adicionar banner</h3><form action={saveSiteBanner} className="form-stack"><div className="form-grid two"><label>Imagem<input name="bannerImage" type="file" accept="image/png,image/jpeg,image/webp" required/><small>Recomendado: 1920 × 800 px, até 5 MB.</small></label><label>Link do banner<input name="linkUrl" placeholder="/produto/nome-do-produto ou https://..."/><small>Pode apontar para produto, serviço, outra página ou site externo.</small></label><label>Descrição da imagem<input name="altText" maxLength={180} placeholder="Ex.: Promoção de costela aos domingos"/></label><label>Ordem<input name="sortOrder" type="number" min="0" max="99" defaultValue={tenant.siteBanners.length}/></label></div><button className="button">Adicionar banner <span>→</span></button></form></article>
      <div className="banner-admin-grid">{tenant.siteBanners.map(banner=><article className="form-card banner-admin-card" key={banner.id}>
        <img src={banner.imageUrl} alt={banner.altText??"Banner"}/>
        <form action={saveSiteBanner} className="form-stack">
          <input type="hidden" name="bannerId" value={banner.id}/>
          <label>Link<input name="linkUrl" defaultValue={banner.linkUrl??""}/></label>
          <label>Descrição<input name="altText" defaultValue={banner.altText??""}/></label>
          <label>Ordem<input name="sortOrder" type="number" min="0" max="99" defaultValue={banner.sortOrder}/></label>
          <label className="check-line"><input name="active" type="checkbox" defaultChecked={banner.active}/> Exibir no site</label>
          <button className="secondary-button">Salvar</button>
        </form>
        <form action={deleteSiteBanner} className="banner-delete-form"><input type="hidden" name="bannerId" value={banner.id}/><button className="secondary-button danger">Excluir</button></form>
      </article>)}</div>
      {!tenant.siteBanners.length&&theme?.bannerUrl&&<p className="field-note">O banner atual continua ativo. Ao adicionar o primeiro banner novo, ele será substituído pelo carrossel.</p>}
    </section>
  </PanelShell>;
}