"use client";
import { useState } from "react";
import type { CSSProperties,ChangeEvent } from "react";
import { updateAppearance } from "@/lib/actions";

type Props={tenant:{name:string;description:string;whatsapp:string;postalCode:string;addressLine:string;instagramUrl:string;facebookUrl:string};theme:{logoUrl:string;faviconUrl:string;primaryColor:string;headerColor:string;buttonColor:string;footerColor:string}};
export function AppearanceForm({tenant,theme}:Props){const [name,setName]=useState(tenant.name);const [description,setDescription]=useState(tenant.description);const [primary,setPrimary]=useState(theme.primaryColor);const [header,setHeader]=useState(theme.headerColor);const [button,setButton]=useState(theme.buttonColor);const [footer,setFooter]=useState(theme.footerColor);const [logo,setLogo]=useState(theme.logoUrl);const previewFile=(setter:(url:string)=>void)=>(event:ChangeEvent<HTMLInputElement>)=>{const file=event.target.files?.[0];if(file)setter(URL.createObjectURL(file))};const vars={"--preview-primary":primary,"--preview-header":header,"--preview-button":button,"--preview-footer":footer} as CSSProperties;return <form action={updateAppearance} className="settings-layout settings-form"><section className="settings-main"><article className="form-card"><h2>Identidade da empresa</h2><div className="form-stack"><label>Nome público<input name="name" value={name} onChange={e=>setName(e.target.value)} required/></label><label>Descrição<textarea name="description" rows={4} maxLength={500} value={description} onChange={e=>setDescription(e.target.value)}/></label><div className="form-grid two"><label>WhatsApp<input name="whatsapp" defaultValue={tenant.whatsapp}/></label><label>CEP<input name="postalCode" defaultValue={tenant.postalCode}/></label></div><label>Endereço<input name="addressLine" defaultValue={tenant.addressLine}/></label><div className="form-grid two"><label>Instagram<input name="instagramUrl" type="url" defaultValue={tenant.instagramUrl}/></label><label>Facebook<input name="facebookUrl" type="url" defaultValue={tenant.facebookUrl}/></label></div></div></article><article className="form-card"><h2>Imagens da marca</h2><div className="form-stack"><label className="file-field">Logotipo <small>Recomendado: PNG transparente, 800 × 300 px.</small><input name="logoFile" type="file" accept="image/png,image/jpeg,image/webp" onChange={previewFile(setLogo)}/><span>Selecionar logotipo</span></label><label className="file-field">Favicon <small>Recomendado: PNG ou ICO quadrado, 512 × 512 px.</small><input name="faviconFile" type="file" accept="image/png,image/x-icon"/><span>Selecionar favicon</span></label><small className="field-note">Os banners são gerenciados na seção abaixo.</small></div></article><article className="form-card"><h2>Cores do tema</h2><div className="color-grid"><label>Cor principal<input name="primaryColor" type="color" value={primary} onChange={e=>setPrimary(e.target.value)}/></label><label>Cabeçalho<input name="headerColor" type="color" value={header} onChange={e=>setHeader(e.target.value)}/></label><label>Botões<input name="buttonColor" type="color" value={button} onChange={e=>setButton(e.target.value)}/></label><label>Rodapé<input name="footerColor" type="color" value={footer} onChange={e=>setFooter(e.target.value)}/></label></div></article></section><aside className="settings-side"><div className="theme-preview" style={vars}><div className="preview-nav">{logo?<img src={logo} alt="Prévia do logotipo"/>:<span>{name||"Sua empresa"}</span>}<i/></div><div className="preview-hero"><small>SUA EMPRESA</small><strong>{description||"Seu negócio em destaque."}</strong><b>Conhecer</b></div><div className="preview-cards"><i/><i/><i/></div><div className="preview-footer"/></div><small className="preview-note">Prévia das cores e da identidade.</small><button className="settings-save">Salvar configurações <span>→</span></button></aside></form>}