import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Player} from '@remotion/player';
import {AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig} from 'remotion';
import './style.css';

const presets={
  diggeo:{brand:'DIGGEO',headline:'YOUR BRAND. AMPLIFIED.',subtitle:'Digital solutions that drive real growth.',cta:'LET’S GROW',accent:'#b56aff'},
  seirios:{brand:'Γ.Ε. ΣΕΙΡΙΟΣ',headline:'ΠΑΙΖΟΥΜΕ ΜΑΖΙ',subtitle:'Volley για ενήλικες στη Μεσσηνία',cta:'ΕΛΑ ΣΤΗΝ ΟΜΑΔΑ',accent:'#53a6f4'},
  endikon:{brand:'ENDIKON',headline:'ΝΟΜΙΚΕΣ ΛΥΣΕΙΣ',subtitle:'Με επαγγελματισμό και σαφήνεια',cta:'ΕΠΙΚΟΙΝΩΝΗΣΤΕ ΜΑΖΙ ΜΑΣ',accent:'#c4a57a'}
};
const initial={...presets.diggeo,seconds:15,ratio:'9:16'};
const safeRead=()=>{try{return {...initial,...JSON.parse(localStorage.getItem('diggeo-studio-project')||'{}')}}catch{return initial}};
function Ad({brand,headline,subtitle,cta,accent}) {
 const frame=useCurrentFrame();const {durationInFrames}=useVideoConfig();
 const fade=(a,b)=>interpolate(frame,[a,b],[0,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp'});
 const scale=interpolate(frame,[0,24],[0.88,1],{extrapolateRight:'clamp'});
 return <AbsoluteFill style={{background:'radial-gradient(circle at 75% 25%, '+accent+'66, transparent 45%), #080810',color:'white',fontFamily:'Arial,sans-serif',justifyContent:'center',alignItems:'center',padding:75,textAlign:'center'}}>
 <div style={{position:'absolute',top:90,fontSize:42,fontWeight:900,letterSpacing:6,color:accent,overflowWrap:'anywhere'}}>{brand}</div>
 <div style={{opacity:fade(4,24),transform:'scale('+scale+')',fontSize:78,fontWeight:900,lineHeight:1.08,overflowWrap:'anywhere'}}>{headline}</div>
 <div style={{opacity:fade(22,42),fontSize:36,marginTop:45,lineHeight:1.35,overflowWrap:'anywhere'}}>{subtitle}</div>
 <div style={{opacity:fade(Math.max(42,durationInFrames-55),Math.max(60,durationInFrames-35)),background:accent,borderRadius:60,padding:'23px 42px',fontSize:30,fontWeight:800,marginTop:80,color:'#080810',overflowWrap:'anywhere'}}>{cta}</div>
 <div style={{position:'absolute',bottom:70,fontSize:22,letterSpacing:3,opacity:.7}}>DIGGEO · AI ADS STUDIO</div>
 </AbsoluteFill>;
}
function App(){
 const [project,setProject]=useState(safeRead);
 const set=(field,value)=>setProject(p=>({...p,[field]:value}));
 const save=()=>{try{localStorage.setItem('diggeo-studio-project',JSON.stringify(project));alert('Το project αποθηκεύτηκε σε αυτόν τον browser.')}catch{alert('Δεν ήταν δυνατή η τοπική αποθήκευση.')}};
 const download=()=>{const blob=new Blob([JSON.stringify({version:1,...project},null,2)],{type:'application/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='diggeo-ad-project.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)};
 const importProject=async(e)=>{const file=e.target.files?.[0];if(!file)return;try{const data=JSON.parse(await file.text());if(typeof data.headline!=='string'||typeof data.brand!=='string')throw Error();const merged={...initial,...data};if(!['9:16','1:1','16:9'].includes(merged.ratio)||![15,30,60].includes(Number(merged.seconds))||!/^#[0-9a-f]{6}$/i.test(merged.accent))throw Error();setProject({...merged,seconds:Number(merged.seconds)});}catch{alert('Μη έγκυρο αρχείο project.')}e.target.value=''};
 const [w,h]=project.ratio==='9:16'?[1080,1920]:project.ratio==='1:1'?[1080,1080]:[1920,1080];
 return <div className="app"><header><strong>DIGGEO <span>AI ADS STUDIO</span></strong><small>LOCAL CREATOR · v0.2</small></header><main><section className="panel"><h2>Create your ad</h2>
 <label>Quick template<select defaultValue="" onChange={e=>{if(presets[e.target.value])setProject(p=>({...p,...presets[e.target.value]}))}}><option value="">Choose a brand</option><option value="diggeo">DIGGEO</option><option value="seirios">Γ.Ε. Σείριος</option><option value="endikon">ENDIKON</option></select></label>
 <label>Brand<input value={project.brand} maxLength={70} onChange={e=>set('brand',e.target.value)}/></label>
 <label>Headline<textarea value={project.headline} maxLength={110} onChange={e=>set('headline',e.target.value)}/></label>
 <label>Subtitle<textarea value={project.subtitle} maxLength={160} onChange={e=>set('subtitle',e.target.value)}/></label>
 <label>Call to action<input value={project.cta} maxLength={65} onChange={e=>set('cta',e.target.value)}/></label>
 <label>Accent color<input type="color" value={project.accent} onChange={e=>set('accent',e.target.value)}/></label>
 <label>Duration<select value={project.seconds} onChange={e=>set('seconds',Number(e.target.value))}><option value={15}>15 seconds</option><option value={30}>30 seconds</option><option value={60}>60 seconds</option></select></label>
 <label>Format<select value={project.ratio} onChange={e=>set('ratio',e.target.value)}><option>9:16</option><option>1:1</option><option>16:9</option></select></label>
 <div className="actions"><button onClick={save}>Save locally</button><button onClick={download}>Download project JSON</button><label className="upload">Import project JSON<input type="file" accept=".json,application/json" onChange={importProject}/></label></div>
 <p className="hint">Local save stores data only in this browser. JSON is a project backup, not a video. MP4 export and AI video generation are not available yet.</p>
 </section><section className="preview"><h2>Live preview</h2><div className="player" style={{maxWidth:project.ratio==='16:9'?760:project.ratio==='1:1'?470:340}}><Player key={project.ratio+'-'+project.seconds} component={Ad} inputProps={project} compositionWidth={w} compositionHeight={h} fps={30} durationInFrames={project.seconds*30} controls autoPlay loop style={{width:'100%',aspectRatio:w+'/'+h}}/></div><p>Editable motion graphics · {project.seconds}s · {project.ratio}</p></section></main></div>
}
createRoot(document.getElementById('root')).render(<App/>);