'use client';
import Image from 'next/image';
import { useEffect, useRef, useState } from 'react';
import { ArrowUpRight, ArrowLeft, ArrowRight, MoveHorizontal, X } from 'lucide-react';
import { site } from '@/data/site';
import { CaseStudies } from './case-studies';
import { AppointmentLink } from './appointment-link';
const pad = (n:number) => String(n+1).padStart(2,'0');
function Tag({children}:{children:React.ReactNode}){return <p className="chapter-tag">{children}</p>}
export function ResultGallery(){const[active,setActive]=useState<number|null>(null);const[compare,setCompare]=useState(false);const[value,setValue]=useState(50);const dialog=useRef<HTMLDialogElement>(null);const opener=useRef<HTMLButtonElement|null>(null);const items=site.results.items;const item=active===null?null:items[active];
 useEffect(()=>{if(active!==null){if(!dialog.current?.open)dialog.current?.showModal();document.body.style.overflow='hidden'}else{dialog.current?.close();document.body.style.overflow=''}return()=>{document.body.style.overflow=''}},[active]);
 const close=()=>{dialog.current?.close();setActive(null);opener.current?.focus()};const move=(delta:number)=>{setActive(i=>i===null?0:(i+delta+items.length)%items.length);setValue(50);setCompare(false)};
 return <section id="resultados" className="gallery-chapter"><div className="gallery-top"><Tag>04 / O cuidado, em imagens</Tag><span>03 CASOS EM DESTAQUE</span></div><div className="gallery-heading" data-reveal><h2>Resultados <em>reais</em></h2><p>Registros reais. Planejamentos individuais.</p></div><CaseStudies/><h3 className="complementary-title">Outros registros de cuidado</h3><div className="gallery-grid">{items.map((r,i)=>({r,i})).map(({r,i})=>{return <figure className={`gallery-item gallery-item-${i}`} key={r.image} data-reveal><button onClick={e=>{opener.current=e.currentTarget;setCompare(false);setValue(50);setActive(i)}} aria-label={`Ampliar resultado ${pad(i)}: ${r.label}`}><div className="gallery-photo" style={{aspectRatio:r.orientation==='vertical'?r.comparisonRatio*r.beforeShare:r.comparisonRatio/r.beforeShare}}><Image src={r.image} alt={r.alt} fill sizes="(max-width:700px) 88vw, 29vw"/></div><span className="gallery-open"><ArrowUpRight size={23}/></span></button><figcaption><span><small>{pad(i)} /</small> {r.label}</span><span>{r.orientation==='single'?'REGISTRO':'ANTES & DEPOIS'}</span></figcaption></figure>})}</div><div className="gallery-end"><p>Fotografias publicadas com autorização dos pacientes.<br/>Resultados individuais. Cada pessoa tem características próprias.</p><AppointmentLink id="results-whatsapp">AGENDAR AVALIAÇÃO</AppointmentLink></div>
 <dialog ref={dialog} className="result-dialog" aria-labelledby="viewer-title" onCancel={close} onClose={()=>setActive(null)} onKeyDown={e=>{if((e.target as HTMLElement).tagName==='INPUT')return;if(e.key==='ArrowRight'){e.preventDefault();move(1)}if(e.key==='ArrowLeft'){e.preventDefault();move(-1)}}}>{item&&<><div className="viewer-top"><div><Tag>Um olhar mais próximo</Tag><h3 id="viewer-title">{item.label}</h3></div><button className="viewer-icon" onClick={close} aria-label="Fechar resultado"><X/></button></div><div className="viewer-stage">{compare&&item.orientation!=='single'?<div className={`comparison ${item.orientation==='vertical'?'vertical':''}`} style={{aspectRatio:item.comparisonRatio}}><div className="compare-half after" style={{backgroundImage:`url(${item.image})`,backgroundSize:item.orientation==='vertical'?'100% auto':'auto 100%'}}/><div className="compare-half before" style={{backgroundImage:`url(${item.image})`,backgroundSize:item.orientation==='vertical'?'100% auto':'auto 100%',clipPath:`inset(0 ${100-value}% 0 0)`}}/><div className="comparison-line" style={{left:`${value}%`}}><span><MoveHorizontal size={18} aria-hidden="true"/></span></div><span className="compare-label left">Antes</span><span className="compare-label right">Depois</span></div>:<Image src={item.image} alt={item.alt} fill sizes="90vw"/>}</div>{compare&&<label className="viewer-range">Deslize para comparar<input type="range" min="0" max="100" value={value} onChange={e=>setValue(+e.target.value)} aria-label="Proporção entre antes e depois"/></label>}<div className="viewer-bottom"><button className="viewer-icon" aria-label="Resultado anterior" onClick={()=>move(-1)}><ArrowLeft/></button><span aria-live="polite">{pad(active!)} / {String(items.length).padStart(2,'0')}</span>{item.orientation!=='single'&&<button className="viewer-mode" aria-pressed={compare} onClick={()=>{setCompare(!compare);setValue(50)}}>{compare?'Ver foto original':'Comparar antes e depois'}</button>}<button className="viewer-icon" aria-label="Próximo resultado" onClick={()=>move(1)}><ArrowRight/></button></div>{compare&&<p className="viewer-note">Recortes do registro original. Enquadramentos podem variar.</p>}</>}</dialog>
 </section>
}