"use client";

import { useState } from "react";
import { createProduct,updateProduct } from "@/lib/actions";

type Category={id:string;name:string};
type ProductValues={id:string;name:string;slug:string;shortDescription:string;description:string;sku:string;categoryId:string;price:string;promoPrice:string;stock:number;trackStock:boolean;active:boolean;featured:boolean;seoTitle:string;metaDescription:string};
type Props={categories:Category[];initial?:ProductValues};
const slugify=(value:string)=>value.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");

export function ProductForm({categories,initial}:Props){
  const editing=Boolean(initial);const [name,setName]=useState(initial?.name??"");const [shortDescription,setShortDescription]=useState(initial?.shortDescription??"");const [slug,setSlug]=useState(initial?.slug??"");const [seoTitle,setSeoTitle]=useState(initial?.seoTitle??"");const [metaDescription,setMetaDescription]=useState(initial?.metaDescription??"");const [slugManual,setSlugManual]=useState(Boolean(initial&&initial.slug!==slugify(initial.name)));const [seoManual,setSeoManual]=useState(Boolean(initial&&initial.seoTitle!==initial.name.slice(0,70)));const [metaManual,setMetaManual]=useState(Boolean(initial&&initial.metaDescription!==(initial.shortDescription||`Conheça ${initial.name}.`).slice(0,160)));const [slugUnlocked,setSlugUnlocked]=useState(false);const [seoUnlocked,setSeoUnlocked]=useState(false);const [metaUnlocked,setMetaUnlocked]=useState(false);
  const changeName=(value:string)=>{setName(value);if(!slugManual)setSlug(slugify(value));if(!seoManual)setSeoTitle(value.slice(0,70));if(!metaManual&&!shortDescription)setMetaDescription((value?`Conheça ${value}.`:"").slice(0,160))};
  const changeDescription=(value:string)=>{setShortDescription(value);if(!metaManual)setMetaDescription((value||`Conheça ${name}.`).slice(0,160))};
  return <form action={editing?updateProduct:createProduct} className="editor-form">{initial&&<input type="hidden" name="id" value={initial.id}/>}<section className="editor-main"><article className="form-card"><h2>Informações principais</h2><div className="form-stack"><label>Nome do produto<input name="name" value={name} onChange={e=>changeName(e.target.value)} required/></label><label>URL amigável<span className="assisted-field"><input name="slug" value={slug} onChange={e=>{setSlug(e.target.value);setSlugManual(true)}} readOnly={!slugUnlocked} placeholder="gerada automaticamente"/><button type="button" title="Editar URL amigável" aria-label="Editar URL amigável" onClick={()=>setSlugUnlocked(value=>!value)}>✎</button></span><small>Gerada automaticamente pelo nome do produto.</small></label><label>Descrição curta<textarea name="shortDescription" maxLength={240} rows={3} value={shortDescription} onChange={e=>changeDescription(e.target.value)}/></label><label>Descrição completa<textarea name="description" maxLength={5000} rows={6} defaultValue={initial?.description??""}/></label><div className="form-grid two"><label><span className="label-with-help">SKU <span className="help-dot" tabIndex={0}>?<i>SKU é um código único usado para identificar e organizar o produto no estoque, por exemplo: CAM-001.</i></span></span><input name="sku" defaultValue={initial?.sku??""} placeholder="Ex.: CAM-001"/></label><label>Categoria<select name="categoryId" defaultValue={initial?.categoryId??""}><option value="">Sem categoria</option>{categories.map(c=><option value={c.id} key={c.id}>{c.name}</option>)}</select></label></div></div></article><article className="form-card"><h2>Preço e estoque</h2><div className="form-grid three"><label>Preço (R$)<input name="price" inputMode="decimal" placeholder="49,90" defaultValue={initial?.price??""} required/></label><label>Preço promocional<input name="promoPrice" inputMode="decimal" placeholder="39,90" defaultValue={initial?.promoPrice??""}/></label><label>Estoque<input name="stock" type="number" min="0" defaultValue={initial?.stock??0} required/></label></div><div className="check-grid"><label><input name="trackStock" type="checkbox" defaultChecked={initial?.trackStock??true}/> Controlar estoque</label><label><input name="featured" type="checkbox" defaultChecked={initial?.featured??false}/> Produto em destaque</label><label><input name="active" type="checkbox" defaultChecked={initial?.active??true}/> {editing?"Publicado":"Publicar agora"}</label></div></article><article className="form-card"><h2>SEO</h2><div className="form-stack"><label>Título SEO<span className="assisted-field"><input name="seoTitle" maxLength={70} value={seoTitle} onChange={e=>{setSeoTitle(e.target.value);setSeoManual(true)}} readOnly={!seoUnlocked}/><button type="button" title="Editar título SEO" aria-label="Editar título SEO" onClick={()=>setSeoUnlocked(value=>!value)}>✎</button></span><small>Preenchido automaticamente pelo nome.</small></label><label>Meta description<span className="assisted-field"><textarea name="metaDescription" maxLength={160} rows={3} value={metaDescription} onChange={e=>{setMetaDescription(e.target.value);setMetaManual(true)}} readOnly={!metaUnlocked}/><button type="button" title="Editar meta description" aria-label="Editar meta description" onClick={()=>setMetaUnlocked(value=>!value)}>✎</button></span><small>Preenchida automaticamente pela descrição curta.</small></label></div></article></section><aside className="editor-side"><div className="publish-card"><p className="eyebrow">{editing?"ATUALIZAÇÃO":"PUBLICAÇÃO"}</p><h3>{editing?"Salvar alterações":"Salvar produto"}</h3><p>{editing?"As alterações serão refletidas no site da empresa.":"O produto será publicado automaticamente. Você poderá desativá-lo depois."}</p><button type="submit">{editing?"Salvar alterações":"Salvar produto"} <span>→</span></button></div></aside></form>;
}