import {studioLink} from './platform';
import {useEffect,useState} from 'react';
import {MusicEditor} from './MusicEditor';
import {EmailGifEditor} from './EmailGifEditor';
import {validateLocalVideoFile,validateLocalVideoMetadata} from './local-video';
export default function LocalVideoTools(){
 const [file,setFile]=useState<File>();const [url,setUrl]=useState('');const [ready,setReady]=useState(false);const [error,setError]=useState('');
 useEffect(()=>{if(!file){setUrl('');return;}const next=URL.createObjectURL(file);setUrl(next);return()=>URL.revokeObjectURL(next);},[file]);
 return <main className="live-main"><nav className="action-row" aria-label="Picsart tools"><a href="admin.php?page=picsart-studio">Picsart Commerce</a><a href={studioLink('images')}>Image tools</a></nav><h1>Work with your own video</h1><p>Create an email GIF or add your own music. These tools run in your browser and use no generation credits. Your original file stays unchanged; nothing is uploaded or published.</p><p>Choose MP4 or WebM, up to 100 MB, two minutes and Full HD. No Picsart connection or product is required.</p><label>Choose a video<input type="file" accept="video/mp4,video/webm" onChange={e=>{setReady(false);setError('');const next=e.target.files?.[0];if(!next){setFile(undefined);return;}try{validateLocalVideoFile(next);setFile(next);}catch(e){setFile(undefined);setError(e instanceof Error?e.message:'This video cannot be opened.');}}}/></label>{error&&<p role="alert">{error}</p>}{url&&<section className="live-card"><h2>{file?.name}</h2><video key={url} src={url} controls playsInline preload="metadata" style={{maxWidth:'100%',maxHeight:360}} onLoadedMetadata={e=>{const video=e.currentTarget;try{validateLocalVideoMetadata(video.duration,video.videoWidth,video.videoHeight);setReady(true);setError('');}catch(e){setReady(false);setError(e instanceof Error?e.message:'This video cannot be processed.');}}} onError={()=>{setReady(false);setError('This browser could not read the video. Try another MP4 or WebM file.');}}/>{ready&&<div key={`tools:${url}`}><MusicEditor url={url}/><EmailGifEditor url={url} name={file?.name.replace(/\.[^.]+$/,'')}/></div>}</section>}</main>;
}