"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import { prices, rupiah } from "../lib/content";
import type { PublicFaq } from "../lib/public-settings";
import { businessHours, phoneHref, whatsappHref } from "../lib/business-settings";
import type { PublicMenuItem } from "../lib/menu-data";
import { Icon } from "./icons";
import { useSiteMenus, useSiteSettings } from "./site-settings-provider";

function MenuLink({item,onNavigate,className}:{item:PublicMenuItem;onNavigate?:()=>void;className?:string}){
  const external=/^(https:|mailto:|tel:)/i.test(item.url),target=item.target==="_blank"?"_blank":undefined,rel=target?"noreferrer":undefined;
  return external?<a className={className} href={item.url} target={target} rel={rel} onClick={onNavigate}>{item.label}</a>:<Link className={className} href={item.url} target={target} rel={rel} onClick={onNavigate}>{item.label}</Link>;
}

export function Brand() {
  const business=useSiteSettings(),parts=business.business_name.trim().split(/\s+/),suffix=parts.length>1?parts.pop():"";
  return (
    <Link className="brand" href="/" aria-label={`${business.business_name} — Beranda`}>
      {business.logo_media_id?<Image className="brand-logo" src={`/api/media/${business.logo_media_id}`} width={190} height={48} unoptimized alt={`Logo ${business.business_name}`}/>:<><span className="brand-mark"><Icon name="bolt" /></span><span><strong>{parts.join(" ")||business.business_name}</strong>{suffix&&<small>{suffix.toUpperCase()}</small>}</span></>}
    </Link>
  );
}

export function Header() {
  const [open, setOpen] = useState(false);
  const business=useSiteSettings(),menus=useSiteMenus(),whatsapp=whatsappHref(business.whatsapp_number);
  return (
    <>
      <header className="site-header">
        <div className="shell header-inner">
          <Brand />
          <nav className={open ? "main-nav is-open" : "main-nav"} aria-label="Navigasi utama">
            {menus.header.filter(item=>item.visible).map(item=>item.children.length?<div className="nav-dropdown" key={item.id}><MenuLink item={item} onNavigate={()=>setOpen(false)}/><span className="nav-dropdown-indicator" aria-hidden="true">⌄</span><div className="nav-submenu">{item.children.filter(child=>child.visible).map(child=><MenuLink item={child} key={child.id} onNavigate={()=>setOpen(false)}/>)}</div></div>:<MenuLink item={item} key={item.id} onNavigate={()=>setOpen(false)}/>)}
            {whatsapp&&<a className="button button-sm nav-cta" href={`${whatsapp}?text=${encodeURIComponent(`Halo ${business.business_name}, saya ingin berkonsultasi mengenai instalasi listrik.`)}`} target="_blank" rel="noreferrer"><Icon name="whatsapp" /> Konsultasi WhatsApp</a>}
          </nav>
          <button className="menu-button" type="button" aria-label={open ? "Tutup menu" : "Buka menu"} aria-expanded={open} onClick={() => setOpen(!open)}><Icon name={open ? "close" : "menu"} /></button>
        </div>
      </header>
      {open && <button className="menu-backdrop" aria-label="Tutup menu" onClick={() => setOpen(false)} />}
    </>
  );
}

export function Footer() {
  const business=useSiteSettings(),menus=useSiteMenus(),phone=phoneHref(business.phone_number),whatsapp=whatsappHref(business.whatsapp_number),hours=businessHours(business),socials=[["Instagram",business.instagram_url],["Facebook",business.facebook_url],["TikTok",business.tiktok_url]].filter((x):x is [string,string]=>!!x[1]);
  return (
    <footer className="footer">
      <div className="shell footer-grid">
        <div className="footer-brand"><Brand /><p>{business.short_description||`${business.tagline}. Layanan instalasi, perbaikan, panel, grounding, dan maintenance untuk ${business.service_area.toLowerCase()}.`}</p>{business.legal_name&&<span>{business.legal_name}{business.registration_number?` · ${business.registration_number}`:""}</span>}{business.address?<span>{business.address}</span>:<span className="placeholder-note">Alamat belum dipublikasikan oleh administrator.</span>}</div>
        <div><h3>Layanan</h3>{menus.footer_services.filter(item=>item.visible).map(item=><MenuLink item={item} key={item.id}/>)}</div>
        <div><h3>Informasi</h3>{menus.footer_information.filter(item=>item.visible).map(item=><MenuLink item={item} key={item.id}/>)}</div>
        <div><h3>Kontak</h3>{whatsapp&&<a href={whatsapp}>WhatsApp · {business.whatsapp_number}</a>}{phone&&<a href={phone}>{business.phone_number}</a>}{business.public_email&&<a href={`mailto:${business.public_email}`}>{business.public_email}</a>}{hours.map((h) => <span key={h}>{h}</span>)}<span>{business.service_area}</span>{business.maps_url&&<a href={business.maps_url} target="_blank" rel="noreferrer">Google Maps</a>}{socials.map(([label,url])=><a href={url} target="_blank" rel="noreferrer" key={label}>{label}</a>)}</div>
      </div>
      <div className="shell footer-bottom"><span>© {new Date().getFullYear()} {business.business_name}</span><div>{menus.footer_legal.filter(item=>item.visible).map(item=><MenuLink item={item} key={item.id}/>)}</div></div>
    </footer>
  );
}

export function FloatingWhatsapp() {
  const business=useSiteSettings(),whatsapp=whatsappHref(business.whatsapp_number);if(!whatsapp)return null;
  return <a className="floating-wa" href={`${whatsapp}?text=${encodeURIComponent(`Halo ${business.business_name}, saya ingin meminta estimasi pekerjaan listrik.`)}`} target="_blank" rel="noreferrer" aria-label={`Chat WhatsApp ${business.business_name}`}><Icon name="whatsapp" /><span>Chat WhatsApp</span></a>;
}

const faqCategoryLabels:Record<string,string>={general:"Umum",price:"Harga",survey:"Survei",service:"Layanan",safety:"Keselamatan",warranty:"Garansi",area:"Area layanan"};
export function FAQ({items,limit,showFilters=false}:{items:PublicFaq[];limit?:number;showFilters?:boolean}) {
  const [category,setCategory]=useState("all");
  const [open, setOpen] = useState(0);
  const categories=useMemo(()=>[...new Set(items.map(item=>item.category))],[items]);
  const list=useMemo(()=>{const filtered=category==="all"?items:items.filter(item=>item.category===category);return limit?filtered.slice(0,limit):filtered},[items,category,limit]);
  return <div>{showFilters&&categories.length>1&&<div className="faq-filters" aria-label="Filter kategori FAQ"><button className={category==="all"?"active":""} type="button" onClick={()=>{setCategory("all");setOpen(0)}}>Semua</button>{categories.map(item=><button className={category===item?"active":""} type="button" key={item} onClick={()=>{setCategory(item);setOpen(0)}}>{faqCategoryLabels[item]||item}</button>)}</div>}{list.length?<div className="faq-list">{list.map((item, i) => <div className={open === i ? "faq-item open" : "faq-item"} key={item.id}><button type="button" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}><span><small>{faqCategoryLabels[item.category]||item.category}</small>{item.question}</span><span className="faq-plus">{open === i ? "−" : "+"}</span></button>{open === i && <div className="faq-answer"><p>{item.answer}</p></div>}</div>)}</div>:<div className="empty-state compact"><p>Belum ada FAQ aktif.</p></div>}</div>;
}

export function PriceCalculator({ compact = false }: { compact?: boolean }) {
  const business=useSiteSettings(),whatsapp=whatsappHref(business.whatsapp_number);
  const [items, setItems] = useState(prices);
  const [lines, setLines] = useState([{id:"line-1",itemId:prices[0].id,qty:1}]);
  const nextLine=useRef(2);
  useEffect(() => {
    fetch("/api/prices")
      .then((response) => response.ok ? response.json() : Promise.reject())
      .then((data: { items?: typeof prices }) => {if(data.items?.length){setItems(data.items);setLines(current=>current.map((line,index)=>data.items!.some(item=>item.id===line.itemId)?line:{...line,itemId:data.items![Math.min(index,data.items!.length-1)].id}))}})
      .catch(() => undefined);
  }, []);
  const calculated=useMemo(()=>lines.map(line=>{const item=items.find(candidate=>candidate.id===line.itemId)??items[0]??prices[0],qty=Math.max(1,line.qty||1);return{...line,item,qty,subtotal:item.price*qty}}),[items,lines]);
  const total=useMemo(()=>calculated.reduce((sum,line)=>sum+line.subtotal,0),[calculated]);
  const usedIds=new Set(lines.map(line=>line.itemId));
  const message=`Halo ${business.business_name}, saya meminta estimasi beberapa pekerjaan:\n${calculated.map((line,index)=>`${index+1}. ${line.item.name}\n   ${line.qty} ${line.item.unit} × ${rupiah(line.item.price)} = ${rupiah(line.subtotal)}`).join("\n")}\n\nTotal estimasi awal: ${rupiah(total)}\nMohon konfirmasi biaya final, material, dan jadwal survei.`;
  function updateLine(id:string,patch:{itemId?:string;qty?:number}){setLines(current=>current.map(line=>line.id===id?{...line,...patch}:line))}
  function addLine(){const nextItem=items.find(item=>!usedIds.has(item.id));if(!nextItem)return;setLines(current=>[...current,{id:`line-${nextLine.current++}`,itemId:nextItem.id,qty:1}])}
  function removeLine(id:string){setLines(current=>current.length>1?current.filter(line=>line.id!==id):current)}
  return <div className={compact ? "calculator multi compact" : "calculator multi"}>
    <div className="calculator-form"><div className="calculator-heading"><div><strong>Daftar pekerjaan</strong><span>Pilih beberapa jasa dan tentukan jumlah masing-masing.</span></div><span>{lines.length} item</span></div><div className="calculator-lines">{calculated.map((line,index)=><div className="calculator-line" key={line.id}><label className="calculator-service">Jenis pekerjaan<select value={line.item.id} onChange={e=>updateLine(line.id,{itemId:e.target.value})}>{items.filter(item=>item.id===line.item.id||!usedIds.has(item.id)).map(item=><option value={item.id} key={item.id}>{item.name}</option>)}</select></label><label>Jumlah<input min="1" max="999" type="number" value={line.qty} onChange={e=>updateLine(line.id,{qty:Math.max(1,Number(e.target.value)||1)})}/></label><div className="line-subtotal"><span>Subtotal</span><strong>{rupiah(line.subtotal)}</strong></div><button className="calculator-remove" type="button" disabled={lines.length===1} onClick={()=>removeLine(line.id)} aria-label={`Hapus pekerjaan ${index+1}`}>×</button></div>)}</div><button className="calculator-add" type="button" onClick={addLine} disabled={lines.length>=items.length}>＋ Tambah jasa lain</button></div>
    <div className="estimate-card"><span>Total estimasi awal</span><strong>{rupiah(total)}</strong><small>{lines.length} jenis pekerjaan. Estimasi belum termasuk material dan belum menjadi penawaran final.</small>{whatsapp?<a className="button button-light" href={`${whatsapp}?text=${encodeURIComponent(message)}`} target="_blank" rel="noreferrer"><Icon name="whatsapp" /> Kirim rincian ke WhatsApp</a>:<Link className="button button-light" href="/permintaan-survei">Kirim permintaan survei</Link>}</div>
  </div>;
}

export function PublicPriceTable() {
  const [items, setItems] = useState(prices);
  useEffect(() => {
    fetch("/api/prices")
      .then((response) => response.ok ? response.json() : Promise.reject())
      .then((data: { items?: typeof prices }) => data.items?.length && setItems(data.items))
      .catch(() => undefined);
  }, []);
  return <div className="price-table-wrap"><table className="price-table"><thead><tr><th>Jenis pekerjaan</th><th>Kategori</th><th>Harga</th><th>Satuan</th><th>Pembaruan</th><th>Status</th></tr></thead><tbody>{items.map((item) => <tr key={item.id}><td><strong>{item.name}</strong></td><td>{item.type}</td><td><strong>{rupiah(item.price)}</strong></td><td>{item.unit}</td><td>{item.updated}</td><td><span className="status-badge">Terverifikasi</span></td></tr>)}</tbody></table></div>;
}

type LeadState = { status: "idle" | "sending" | "success" | "error"; message?: string };
type SelectedPhoto = { name: string; size: number; previewUrl: string };

export function LeadForm({ title = "Ceritakan kebutuhan Anda" }: { title?: string }) {
  const [state, setState] = useState<LeadState>({ status: "idle" });
  const [selectedPhoto,setSelectedPhoto]=useState<SelectedPhoto|null>(null);

  useEffect(()=>()=>{
    if(selectedPhoto?.previewUrl)URL.revokeObjectURL(selectedPhoto.previewUrl);
  },[selectedPhoto?.previewUrl]);

  function choosePhoto(event:React.ChangeEvent<HTMLInputElement>){
    const file=event.currentTarget.files?.[0];
    if(!file){setSelectedPhoto(null);return}
    const allowed=["image/jpeg","image/png","image/webp"];
    if(!allowed.includes(file.type)||file.size>5*1024*1024){
      event.currentTarget.value="";
      setSelectedPhoto(null);
      setState({status:"error",message:"Foto harus JPG, PNG, atau WebP dan maksimal 5 MB."});
      return;
    }
    setSelectedPhoto({name:file.name,size:file.size,previewUrl:URL.createObjectURL(file)});
    setState({status:"idle",message:"Foto dipilih dan siap dikirim bersama formulir."});
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault(); setState({ status: "sending" });
    const form = event.currentTarget;
    const body = new FormData(form);
    const params = new URLSearchParams(window.location.search);
    ["source", "medium", "campaign", "content", "term"].forEach((key) => body.set(`utm_${key}`, params.get(`utm_${key}`) ?? ""));
    body.set("landing_page", window.location.pathname);
    try {
      const response = await fetch("/api/leads", { method: "POST", body });
      const json = await response.json() as { message?: string; photoUploaded?: boolean };
      if (!response.ok) throw new Error(json.message || "Formulir belum dapat dikirim.");
      form.reset();
      setSelectedPhoto(null);
      setState({ status: "success", message: json.photoUploaded ? "Permintaan dan foto berhasil diunggah. Tim kami akan menghubungi Anda pada jam operasional." : "Permintaan berhasil disimpan. Tim kami akan menghubungi Anda pada jam operasional." });
    } catch (error) { setState({ status: "error", message: error instanceof Error ? error.message : "Terjadi kesalahan." }); }
  }
  return <form className="lead-form" onSubmit={submit} encType="multipart/form-data">
    <div className="form-heading"><span className="eyebrow">Konsultasi & survei</span><h2>{title}</h2><p>Isi informasi yang sudah diketahui. Kolom bertanda * wajib diisi.</p></div>
    <div className="form-grid"><label>Nama *<input required name="name" autoComplete="name" maxLength={100} /></label><label>Nomor WhatsApp *<input required name="whatsapp" inputMode="tel" autoComplete="tel" placeholder="08xxxxxxxxxx" pattern="[0-9+()\-\s]{8,20}" /></label><label>Email (opsional)<input name="email" type="email" autoComplete="email" /></label><label>Lokasi *<input required name="location" placeholder="Kecamatan / kelurahan" maxLength={160} /></label><label>Jenis bangunan *<select required name="building_type" defaultValue=""><option value="" disabled>Pilih bangunan</option><option>Rumah</option><option>Ruko / toko</option><option>Kantor</option><option>Restoran</option><option>Sekolah / klinik</option><option>Kos / kontrakan</option><option>Gudang / komersial</option><option>Lainnya</option></select></label><label>Jenis layanan *<select required name="service" defaultValue=""><option value="" disabled>Pilih layanan</option><option>Instalasi listrik baru</option><option>Renovasi / instalasi ulang</option><option>Panel listrik</option><option>Tambah titik</option><option>Perbaikan korsleting</option><option>Grounding</option><option>Audit / maintenance</option><option>Lainnya</option></select></label><label>Jumlah titik<input name="quantity" type="number" min="1" max="9999" /></label><label>Tingkat urgensi<select name="urgency" defaultValue="normal"><option value="normal">Terencana</option><option value="soon">Dalam 1–3 hari</option><option value="urgent">Mendesak</option></select></label><label className="span-2">Deskripsi kebutuhan *<textarea required name="description" rows={5} maxLength={2000} placeholder="Contoh: tambah 6 titik stop kontak dan periksa panel yang sering panas." /></label><label>Jadwal survei yang diinginkan<input name="schedule" type="datetime-local" /></label><label className="upload-label">Foto kondisi (JPG/PNG/WebP, maks. 5 MB)<span className={`upload-box ${selectedPhoto?"has-file":""}`}><Icon name={selectedPhoto?"check":"upload"} /> {selectedPhoto?"Ganti foto":"Pilih foto"}<input name="photo" type="file" accept="image/jpeg,image/png,image/webp" onChange={choosePhoto} /></span></label>{selectedPhoto&&<div className="selected-photo" role="status"><Image src={selectedPhoto.previewUrl} unoptimized width={92} height={70} alt="Pratinjau foto yang dipilih"/><div><strong>✓ Foto siap dikirim</strong><span>{selectedPhoto.name}</span><small>{(selectedPhoto.size/1024/1024).toFixed(2)} MB · akan diunggah saat formulir dikirim</small></div></div>}<label className="honeypot" aria-hidden="true">Website<input name="website" tabIndex={-1} autoComplete="off" /></label><label className="check-label span-2"><input required type="checkbox" name="privacy" value="accepted" /><span>Saya menyetujui <Link href="/kebijakan-privasi">Kebijakan Privasi</Link> dan penggunaan data untuk menindaklanjuti permintaan ini.</span></label></div>
    <button className="button form-submit" disabled={state.status === "sending"} type="submit">{state.status === "sending" ? "Mengirim…" : "Kirim Permintaan Survei"}<Icon name="arrow" /></button>
    {state.message && <p className={`form-message ${state.status}`} role="status">{state.message}</p>}
  </form>;
}