import Image from "next/image";
import type { CSSProperties,ReactNode } from "react";
type StoreTenant={name:string;phone:string;whatsapp:string|null;city:string;state:string;email:string;addressLine:string|null;postalCode:string|null;showGoogleMap:boolean;instagramUrl:string|null;facebookUrl:string|null;businessModel:"PRODUCTS"|"SERVICES"|"MIXED";theme:{logoUrl:string|null;primaryColor:string;headerColor:string;buttonColor:string;footerColor:string}|null};
const whatsappNumber=(value:string)=>{const digits=value.replace(/\D/g,"");return digits.startsWith("55")?digits:`55${digits}`};
const formatPhone=(value:string)=>{let digits=value.replace(/\D/g,"");if((digits.length===12||digits.length===13)&&digits.startsWith("55"))digits=digits.slice(2);if(digits.length===11)return `(${digits.slice(0,2)}) ${digits.slice(2,3)} ${digits.slice(3,7)}-${digits.slice(7)}`;if(digits.length===10)return `(${digits.slice(0,2)}) ${digits.slice(2,6)}-${digits.slice(6)}`;return value};

function SocialLinks({tenant,placement}:{tenant:StoreTenant;placement:"header"|"footer"}){
  const links=[
    tenant.instagramUrl&&{href:tenant.instagramUrl,label:"Instagram",icon:<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.4" cy="6.7" r="1" className="social-dot"/></svg>},
    tenant.facebookUrl&&{href:tenant.facebookUrl,label:"Facebook",icon:<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3.3l.7-4h-4V9c0-.7.3-1 1-1Z"/></svg>},
  ].filter(Boolean) as {href:string;label:string;icon:ReactNode}[];
  if(!links.length)return null;
  return <div className={`store-socials store-socials-${placement}`}>{links.map(link=><a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer" aria-label={`${link.label} de ${tenant.name}`} title={link.label}>{link.icon}</a>)}</div>;
}

export function StoreShell({tenant,host,children}:{tenant:StoreTenant;host:string;children:ReactNode}){
  const theme=tenant.theme;
  const base=`/site/${encodeURIComponent(host)}`;
  const contact=tenant.whatsapp||tenant.phone;
  const displayContact=formatPhone(contact);
  const waNumber=whatsappNumber(contact);
  const waHref=waNumber?`https://wa.me/${waNumber}`:null;
  const style={"--store-primary":theme?.primaryColor??"#e60000","--store-header":theme?.headerColor??"#ffffff","--store-button":theme?.buttonColor??"#e60000","--store-footer":theme?.footerColor??"#202124"} as CSSProperties;
  return <div className="store" style={style}>
    <div className="store-contact-bar"><div><span><i/> Atendimento próximo e rápido</span>{waHref&&<a href={waHref} target="_blank" rel="noopener noreferrer"><Image src="/whatsapp-icon-v2.png" alt="" width={20} height={20}/> <b>WhatsApp</b> {displayContact}</a>}</div></div>
    <header className="store-header"><a href={base} className="store-brand">{theme?.logoUrl?<Image src={theme.logoUrl} alt={tenant.name} width={160} height={88}/>:<><Image src="/inixis-logo.png" alt="Inixis" width={900} height={437}/><strong>{tenant.name}</strong></>}</a><div className="store-header-actions"><nav><a href={base}>Início</a>{tenant.businessModel!=="SERVICES"&&<a href={`${base}/produtos`}>Produtos</a>}{tenant.businessModel!=="PRODUCTS"&&<a href={`${base}/servicos`}>Serviços</a>}<a href={`${base}/blog`}>Blog</a><a className="store-nav-contact" href="#contato">Contato</a></nav><SocialLinks tenant={tenant} placement="header"/></div></header>
    {children}
    {tenant.showGoogleMap&&tenant.addressLine&&<section className="store-map" aria-label={`Localização de ${tenant.name}`}><div><p className="eyebrow">LOCALIZAÇÃO</p><h2>Como chegar</h2><p>{tenant.addressLine} · {tenant.city}/{tenant.state}</p></div><iframe title={`Mapa de ${tenant.name}`} src={`https://www.google.com/maps?q=${encodeURIComponent(`${tenant.addressLine}, ${tenant.city}, ${tenant.state}, ${tenant.postalCode??""}`)}&output=embed`} loading="lazy" referrerPolicy="no-referrer-when-downgrade"/></section>}
    <footer className="store-footer" id="contato">
      <div className="store-footer-main">
        <div className="store-footer-brand"><a href={base} className="store-footer-logo">{theme?.logoUrl?<Image src={theme.logoUrl} alt={tenant.name} width={150} height={80}/>:<Image src="/inixis-logo.png" alt="Inixis" width={900} height={437}/>}</a><strong>{tenant.name}</strong><p><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z"/><circle cx="12" cy="9" r="2.4"/></svg><span>{tenant.addressLine||`${tenant.city} / ${tenant.state}`}{tenant.addressLine&&<small>{tenant.city} / {tenant.state}</small>}</span></p></div>
        <div className="store-footer-links"><strong>Navegue</strong><a href={base}>Início</a>{tenant.businessModel!=="SERVICES"&&<a href={`${base}/produtos`}>Produtos</a>}{tenant.businessModel!=="PRODUCTS"&&<a href={`${base}/servicos`}>Serviços</a>}<a href={`${base}/blog`}>Blog</a></div>
        <div className="store-footer-contact"><strong>Fale conosco</strong><a href={`mailto:${tenant.email}`}><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg><span>{tenant.email}</span></a><a className="store-phone" href={`tel:${contact.replace(/\D/g,"")}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3H4.5A1.5 1.5 0 0 0 3 4.5C3 13.6 10.4 21 19.5 21a1.5 1.5 0 0 0 1.5-1.5V17l-4-1-1.4 2a15 15 0 0 1-9.6-9.6L8 7 7 3Z"/></svg><span>{displayContact}</span></a><SocialLinks tenant={tenant} placement="footer"/></div>
      </div>
      <div className="store-footer-bottom"><small>© {new Date().getFullYear()} {tenant.name}. Todos os direitos reservados.</small><small className="inixis-credit"><Image src="/inixis-icon.png" alt="" width={22} height={22}/><span>Site criado com <strong>Inixis</strong></span></small></div>
    </footer>
    {waHref&&<a className="whatsapp-float" href={waHref} target="_blank" rel="noopener noreferrer" aria-label={`Chamar ${tenant.name} no WhatsApp`}><span><Image src="/whatsapp-icon-v2.png" alt="" width={34} height={34}/></span><b>WhatsApp</b></a>}
  </div>;
}