import type { Metadata } from "next";
import type { CSSProperties } from "react";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getDbBinding } from "../../db/runtime";
import { InnerLayout } from "../components/inner";
import { ProjectGrid } from "../components/project-grid";
import { TestimonialGrid } from "../components/testimonial-grid";
import { FAQ, LeadForm, PriceCalculator } from "../components/public-ui";
import { Icon } from "../components/icons";
import { services } from "../lib/content";
import { whatsappHref } from "../lib/business-settings";
import { readBusinessSettings, readPublicAreas, readPublicFaqs, readPublicProjects, readPublicTestimonials } from "../lib/public-settings";
import type { PublicArea, PublicFaq, PublicProject, PublicTestimonial } from "../lib/public-settings";
import { getCmsPageUser } from "../lib/security";

type PageRow={id:string,title:string,slug:string,template:string,status:string,author_id:string|null,meta_description:string|null,seo_title:string|null,canonical_url:string|null,robots_index:number,robots_follow:number};
type BlockRow={id:string,block_type:string,position:number,data:string,settings:string|null,visible:number};
function publicBlockAppearance(raw:string,type:string){let data:Record<string,unknown>={};try{data=JSON.parse(raw) as Record<string,unknown>}catch{}const number=(value:unknown,fallback:number)=>Number.isFinite(Number(value))?Math.min(160,Math.max(0,Number(value))):fallback,color=(value:unknown,fallback:string)=>typeof value==="string"&&/^#[0-9a-fA-F]{6}$/.test(value)?value:fallback,dark=type==="Hero"||type==="CTA",anchor=typeof data.anchor==="string"?data.anchor.replace(/[^a-z0-9_-]+/g,"-").slice(0,80):"";return{id:anchor||undefined,className:`custom-page-block ${data.hideTablet?"hide-on-tablet":""} ${data.hideMobile?"hide-on-mobile":""}`,style:{backgroundColor:color(data.background,dark?"#123D32":"#FFFFFF"),color:color(data.textColor,dark?"#FFFFFF":"#123D32"),textAlign:["left","center","right"].includes(String(data.align))?String(data.align) as CSSProperties["textAlign"]:"left",borderRadius:number(data.radius,0),"--page-pad-desktop":`${number(data.paddingDesktop,56)}px`,"--page-pad-tablet":`${number(data.paddingTablet,40)}px`,"--page-pad-mobile":`${number(data.paddingMobile,28)}px`} as CSSProperties}}
async function loadPage(slug:string,preview=false){
  try{
    const db=getDbBinding();
    let page:PageRow|null=null;
    if(preview){
      const user=await getCmsPageUser();
      if(!user||!["super_admin","sales_promotion"].includes(user.role))return null;
      const candidate=await db.prepare("SELECT id,title,slug,template,status,author_id,meta_description,seo_title,canonical_url,robots_index,robots_follow FROM pages WHERE slug=? AND deleted_at IS NULL LIMIT 1").bind(slug).first<PageRow>();
      if(!candidate||user.role==="sales_promotion"&&(candidate.template!=="promotion"||candidate.author_id!==user.id))return null;
      page=candidate;
    }else{
      page=await db.prepare("SELECT id,title,slug,template,status,author_id,meta_description,seo_title,canonical_url,robots_index,robots_follow FROM pages WHERE slug=? AND deleted_at IS NULL AND (status='published' OR (status='scheduled' AND datetime(scheduled_at)<=CURRENT_TIMESTAMP)) LIMIT 1").bind(slug).first<PageRow>();
    }
    if(!page)return null;
    const blocks=await db.prepare("SELECT id,block_type,position,data,settings,visible FROM page_blocks WHERE page_id=? AND deleted_at IS NULL AND visible=1 ORDER BY position").bind(page.id).all<BlockRow>();
    return{page,blocks:blocks.results};
  }catch{return null}
}
export async function generateMetadata({params,searchParams}:{params:Promise<{slug:string}>;searchParams:Promise<{preview?:string}>}):Promise<Metadata>{const [{slug},query]=await Promise.all([params,searchParams]),preview=query.preview==="1",data=await loadPage(slug,preview);if(!data)return{};return{title:data.page.seo_title||data.page.title,description:data.page.meta_description||undefined,alternates:{canonical:data.page.canonical_url||`/${slug}`},robots:preview?{index:false,follow:false}:{index:!!data.page.robots_index,follow:!!data.page.robots_follow},openGraph:{title:data.page.seo_title||data.page.title,description:data.page.meta_description||undefined,images:[]},twitter:{title:data.page.seo_title||data.page.title,description:data.page.meta_description||undefined,images:[]}}}
export default async function CmsPage({params,searchParams}:{params:Promise<{slug:string}>;searchParams:Promise<{preview?:string}>}){const [{slug},query]=await Promise.all([params,searchParams]),preview=query.preview==="1",[data,business,faqItems,areaItems,projectItems,testimonialItems]=await Promise.all([loadPage(slug,preview),readBusinessSettings(),readPublicFaqs(),readPublicAreas(),readPublicProjects(6),readPublicTestimonials(6)]),whatsapp=whatsappHref(business.whatsapp_number);if(!data)notFound();return <InnerLayout>{preview&&<div className="preview-banner" role="status"><strong>Mode preview</strong><span>Halaman ini belum tentu terlihat oleh pengunjung.</span><Link href="/cms/dashboard#pages">Kembali ke CMS</Link></div>}{data.blocks.map(block=>{const appearance=publicBlockAppearance(block.data,block.block_type);return <div key={block.id} {...appearance}><Block type={block.block_type} title={data.page.title} raw={block.data} businessName={business.business_name} whatsapp={whatsapp} faqItems={faqItems} areaItems={areaItems} projectItems={projectItems} testimonialItems={testimonialItems}/></div>})}</InnerLayout>}
function Block({type,title,raw,businessName,whatsapp,faqItems,areaItems,projectItems,testimonialItems}:{type:string,title:string;raw:string;businessName:string;whatsapp:string;faqItems:PublicFaq[];areaItems:PublicArea[];projectItems:PublicProject[];testimonialItems:PublicTestimonial[]}){let data:Record<string,unknown>={};try{data=JSON.parse(raw)}catch{}const heading=typeof data.headline==="string"&&data.headline?data.headline:title,description=typeof data.text==="string"&&data.text?data.text:"";if(type==="Hero")return <section className="hero" style={{minHeight:540}}><Image unoptimized className="hero-image" src="/images/hero-electrician.png" alt="Teknisi listrik" fill sizes="100vw"/><div className="hero-overlay"/><div className="shell hero-content"><span className="eyebrow light">{businessName}</span><h1>{heading}</h1><p>{description||"Konsultasikan kebutuhan instalasi listrik untuk rumah atau tempat usaha di Bogor."}</p><div className="hero-actions"><Link className="button button-accent" href="/permintaan-survei">Jadwalkan Survei</Link>{whatsapp&&<a className="button button-ghost" href={whatsapp}>WhatsApp</a>}</div></div></section>;
if(type==="Rich text")return <section className="inner-section"><article className="shell legal"><h2>{heading||"Informasi"}</h2><p>{description||"Isi section dapat diperbarui melalui Page Builder."}</p></article></section>;
if(type==="Gambar + teks")return <section className="inner-section"><div className="shell split-layout"><div className="image-stack"><Image unoptimized src="/images/electrical-work.png" width={1536} height={1024} alt="Pekerjaan instalasi listrik"/></div><article className="prose"><h2>{heading}</h2><p>{description||"Ruang lingkup, estimasi, dan jadwal ditentukan berdasarkan kebutuhan serta kondisi lapangan."}</p></article></div></section>;
if(type==="Service cards")return <section className="inner-section"><div className="shell inner-grid">{services.slice(0,6).map(s=><article className="inner-card" key={s.slug}><h2>{s.title}</h2><p>{s.excerpt}</p><Link className="text-link" href={`/layanan/${s.slug}`}>Lihat layanan <Icon name="arrow"/></Link></article>)}</div></section>;
if(type==="Pricing table")return <section className="inner-section"><div className="shell"><div className="section-heading"><div><span className="eyebrow">Estimasi awal</span><h2>Hitung subtotal kebutuhan</h2></div><p>Hasil kalkulator merupakan estimasi awal sebelum survei.</p></div><PriceCalculator/></div></section>;
if(type==="Proses kerja")return <section className="inner-section"><div className="shell inner-grid">{["Konsultasi","Survei","Penawaran","Pengerjaan","Serah terima"].map((x,i)=><article className="inner-card" key={x}><span className="eyebrow">0{i+1}</span><h2>{x}</h2></article>)}</div></section>;
if(type==="FAQ accordion")return <section className="inner-section"><div className="shell" style={{maxWidth:900}}><FAQ items={faqItems}/></div></section>;
if(type==="Formulir")return <section className="inner-section"><div className="shell" style={{maxWidth:900}}><LeadForm/></div></section>;
if(type==="Area layanan")return <section className="inner-section"><div className="shell inner-grid">{areaItems.slice(0,9).map(area=><article className="inner-card" key={area.id}><h2>{area.name}</h2><Link className="text-link" href={`/area/${area.slug}`}>Lihat area <Icon name="arrow"/></Link></article>)}</div></section>;
if(type==="Portofolio")return projectItems.length?<section className="inner-section"><div className="shell"><ProjectGrid items={projectItems}/></div></section>:null;
if(type==="Testimoni")return testimonialItems.length?<section className="inner-section"><div className="shell"><TestimonialGrid items={testimonialItems}/></div></section>:null;
if(type==="CTA")return <section className="inner-section"><div className="shell empty-state"><h2>{heading||"Butuh Teknisi Instalasi Listrik di Bogor?"}</h2><p>{description||"Kirim kebutuhan dan foto kondisi untuk mendapatkan arahan awal."}</p><Link className="button button-accent" href="/permintaan-survei">Konsultasikan Kebutuhan</Link></div></section>;
if(["Galeri","Video","Statistik","Benefit cards","Artikel terbaru","Google Maps","Logo pelanggan"].includes(type))return null;
return <div className="shell" style={{height:32}} aria-hidden="true"/>}