import React,{useEffect,useState} from 'react';
import{createRoot}from'react-dom/client';
import{Tv,ShieldCheck,Clock3,Play,Menu,LogOut,User,Users,Clapperboard,Layers,Plus,Trash2,Copy,Download,KeyRound,Radio,CheckCircle2}from'lucide-react';
import{configured,supabase}from './supabase';import './style.css';
const plans=[{name:'الزوار',price:'مجاني',desc:'تعرّف على المنصة وتصفح القنوات المتاحة',features:['تصفح القنوات العامة','تصميم مناسب للهاتف','بدون تسجيل']},{name:'التجربة المجانية',price:'24 ساعة',desc:'جرّب القنوات المصرح بتوزيعها بعد التسجيل',features:['رابط M3U خاص بك','صلاحية محدودة تلقائياً','إدارة الاشتراك من حسابك'],featured:true},{name:'العضوية',price:'حسب الباقة',desc:'اشتراكات يحددها مسؤول المنصة',features:['باقات متعددة','إدارة الاشتراكات','الدعم الفني']}];
function App(){const[session,setSession]=useState(null),[profile,setProfile]=useState(null),[tab,setTab]=useState('home'),[authMode,setAuthMode]=useState('login'),[email,setEmail]=useState(''),[password,setPassword]=useState(''),[message,setMessage]=useState(''),[busy,setBusy]=useState(false),[channels,setChannels]=useState([]),[packages,setPackages]=useState([]),[subscriptions,setSubscriptions]=useState([]),[adminUsers,setAdminUsers]=useState([]),[newChannel,setNewChannel]=useState({name:'',stream_url:'',logo_url:'',category:'عام'}),[newPackage,setNewPackage]=useState({name:'',description:'',duration_hours:24}),[assign,setAssign]=useState({user_id:'',package_id:''}),[selectedChannels,setSelectedChannels]=useState([]),[menu,setMenu]=useState(false);
useEffect(()=>{if(!supabase)return;supabase.auth.getSession().then(({data})=>setSession(data.session));const{data:{subscription}}=supabase.auth.onAuthStateChange((_event,s)=>setSession(s));return()=>subscription.unsubscribe()},[]);
useEffect(()=>{if(!session){setProfile(null);setSubscriptions([]);return}loadProfile()},[session?.user?.id]);
useEffect(()=>{if(!configured)return;loadPublic()},[]);
useEffect(()=>{if(!session||!profile)return;loadSubscriptions();if(profile.role==='admin')loadAdmin()},[session?.user?.id,profile?.role]);
async function loadProfile(){const{data,error}=await supabase.from('profiles').select('*').eq('id',session.user.id).single();if(error)setMessage(error.message);else setProfile(data)}
async function loadPublic(){const[c,p]=await Promise.all([supabase.from('channel_directory').select('id,name,logo_url,category').order('name').limit(100),supabase.from('packages').select('id,name,description,duration_hours').eq('is_active',true)]);setChannels(c.data||[]);setPackages(p.data||[])}
async function loadSubscriptions(){const{data,error}=await supabase.from('subscriptions').select('id,status,expires_at,created_at,playlist_token,packages(name)').order('created_at',{ascending:false});if(error)setMessage(error.message);else setSubscriptions(data||[])}
async function loadAdmin(){const[c,p,u]=await Promise.all([supabase.from('channels').select('*').order('created_at',{ascending:false}).limit(500),supabase.from('packages').select('*').order('created_at',{ascending:false}),supabase.from('profiles').select('id,email,role,created_at').order('created_at',{ascending:false}).limit(500)]);setChannels(c.data||[]);setPackages(p.data||[]);setAdminUsers(u.data||[])}
async function login(e){e.preventDefault();setBusy(true);setMessage('');const{error}=authMode==='login'?await supabase.auth.signInWithPassword({email,password}):await supabase.auth.signUp({email,password});setBusy(false);setMessage(error?error.message:authMode==='register'?'تم إنشاء الحساب. تحقق من بريدك الإلكتروني إذا طُلب منك ذلك.':'تم تسجيل الدخول');if(!error&&authMode==='login')setTab('account')}
async function requestTrial(){setBusy(true);setMessage('');const{data,error}=await supabase.rpc('request_trial');setBusy(false);setMessage(error?error.message:'تم إصدار تجربتك حتى '+new Date(data).toLocaleString('ar-DZ'));if(!error)loadSubscriptions()}
async function addChannel(e){e.preventDefault();setBusy(true);const{error}=await supabase.from('channels').insert(newChannel);setBusy(false);setMessage(error?error.message:'تمت إضافة القناة');if(!error){setNewChannel({name:'',stream_url:'',logo_url:'',category:'عام'});loadAdmin()}}
async function addPackage(e){e.preventDefault();const{error}=await supabase.from('packages').insert({...newPackage,duration_hours:Number(newPackage.duration_hours)});setMessage(error?error.message:'تمت إضافة الباقة');if(!error)loadAdmin()}
async function assignSubscription(e){e.preventDefault();const{error}=await supabase.rpc('admin_assign_subscription',{target_user:assign.user_id,target_package:assign.package_id});setMessage(error?error.message:'تم إصدار الاشتراك')}
async function deleteChannel(id){if(!confirm('هل تريد حذف هذه القناة؟'))return;const{error}=await supabase.from('channels').delete().eq('id',id);setMessage(error?error.message:'تم الحذف');if(!error)loadAdmin()}
async function deleteSelected(){if(!selectedChannels.length||!confirm(`حذف ${selectedChannels.length} قناة؟`))return;const{error}=await supabase.from('channels').delete().in('id',selectedChannels);setMessage(error?error.message:'تم حذف القنوات المحددة');if(!error){setSelectedChannels([]);loadAdmin()}}
const playlistUrl=t=>`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/playlist?token=${encodeURIComponent(t)}`;
const nav=[['home','الرئيسية'],['channels','القنوات'],['plans','الباقات'],[session?'account':'auth',session?'حسابي':'دخول']];if(profile?.role==='admin')nav.push(['admin','لوحة الإدارة']);
return <><header className="header"><div className="container topbar"><button className="brand" onClick={()=>setTab('home')}><span className="brand-icon"><Tv size={24}/></span><span>LEIN <b>TV PLUS</b></span></button><nav className={menu?'nav open':'nav'}>{nav.map(([id,label])=><button key={id} className={tab===id?'active':''} onClick={()=>{setTab(id);setMenu(false)}}>{label}</button>)}</nav><button className="mobile-menu" onClick={()=>setMenu(!menu)} aria-label="القائمة"><Menu/></button></div></header>
{!configured&&<div className="config-warning">وضع المعاينة: اربط Supabase في ملف .env لتفعيل الحسابات ولوحة الإدارة.</div>}
{message&&<div className="toast" role="status">{message}<button onClick={()=>setMessage('')}>×</button></div>}
<main>{tab==='home'&&<><section className="hero"><div className="glow"></div><div className="container hero-content"><div className="eyebrow"><span className="pulse"></span> منصة إدارة المحتوى التلفزيوني</div><h1>عالم الترفيه<br/><span>بين يديك</span></h1><p>استكشف القنوات المتاحة، وأنشئ حسابك، واطلب تجربة مجانية لمدة 24 ساعة للمحتوى المرخّص.</p><div className="actions"><button className="btn primary" onClick={()=>setTab(session?'account':'auth')}>ابدأ الآن <Play size={17}/></button><button className="btn secondary" onClick={()=>setTab('plans')}>اكتشف الباقات</button></div><div className="hero-stats"><div><Tv/><b>قنوات مباشرة</b><small>حسب المحتوى المتاح</small></div><div><Clock3/><b>تجربة 24 ساعة</b><small>مرة واحدة لكل حساب</small></div><div><ShieldCheck/><b>حساب آمن</b><small>إدارة صلاحيات</small></div></div></div></section><section className="container section"><h2>اختر الباقة المناسبة</h2><p className="muted center">بداية سهلة واشتراكات قابلة للإدارة</p><div className="plan-grid">{plans.map((p,i)=><Plan key={p.name} plan={p} onClick={()=>setTab(i===0?'channels':session?'account':'auth')}/>)}</div></section><section className="container cta"><h2>جاهز للبدء؟</h2><p>سجّل حسابك واحصل على تجربة مجانية إذا كانت متاحة لك.</p><button className="btn primary" onClick={()=>setTab(session?'account':'auth')}>ابدأ تجربتك</button></section></>}
{tab==='plans'&&<section className="container section"><h1 className="page-title">باقات الاشتراك</h1><div className="plan-grid">{plans.map((p,i)=><Plan key={p.name} plan={p} onClick={()=>setTab(i===0?'channels':session?'account':'auth')}/>)}</div>{packages.length>0&&<><h2>الباقات المتاحة حالياً</h2><div className="cards">{packages.map(p=><article className="card" key={p.id}><h3>{p.name}</h3><p>{p.description}</p><b>{p.duration_hours} ساعة</b></article>)}</div></>}</section>}
{tab==='channels'&&<section className="container section"><h1 className="page-title">دليل القنوات</h1><p className="muted">قائمة القنوات المنشورة؛ روابط البث لا تظهر للزوار.</p><div className="channel-grid">{channels.length?channels.map(c=><article className="channel" key={c.id}>{c.logo_url?<img src={c.logo_url} alt="" loading="lazy"/>:<Radio size={28}/>}<strong>{c.name}</strong><small>{c.category}</small></article>):<p className="muted">لم تُضف قنوات بعد.</p>}</div></section>}
{tab==='auth'&&<section className="container section"><div className="auth-card card"><div className="auth-icon"><User/></div><h1>{authMode==='login'?'مرحباً بعودتك':'إنشاء حساب جديد'}</h1><p className="muted">{authMode==='login'?'ادخل إلى حسابك لإدارة اشتراكاتك':'ابدأ رحلتك مع LEIN TV PLUS'}</p><form onSubmit={login}><label>البريد الإلكتروني<input type="email" required value={email} onChange={e=>setEmail(e.target.value)} placeholder="name@example.com"/></label><label>كلمة المرور<input type="password" minLength={6} required value={password} onChange={e=>setPassword(e.target.value)} placeholder="••••••••"/></label><button className="btn primary full" disabled={!configured||busy}>{busy?'انتظر...':authMode==='login'?'تسجيل الدخول':'إنشاء الحساب'}</button></form><button className="link-btn" onClick={()=>setAuthMode(authMode==='login'?'register':'login')}>{authMode==='login'?'ليس لديك حساب؟ أنشئ حساباً':'لديك حساب؟ تسجيل الدخول'}</button></div></section>}
{tab==='account'&&<section className="container section"><h1 className="page-title">حسابي</h1>{!session?<div className="card"><p>سجّل الدخول أولاً.</p><button className="btn primary" onClick={()=>setTab('auth')}>تسجيل الدخول</button></div>:<><div className="account-bar card"><div><h3>{profile?.email||session.user.email}</h3><p className="muted">{profile?.role==='admin'?'مسؤول المنصة':'عضو'}</p></div><button className="btn secondary" onClick={async()=>{await supabase.auth.signOut();setTab('home')}}><LogOut size={17}/> خروج</button></div><div className="card trial"><Clock3 size={34}/><h2>تجربة مجانية لمدة 24 ساعة</h2><p className="muted">يمكن طلب تجربة واحدة لكل حساب. قد تتطلب الخدمة تأكيد بريدك الإلكتروني.</p><button className="btn primary" onClick={requestTrial} disabled={busy||!configured}>{busy?'جارٍ الإصدار...':'طلب التجربة المجانية'}</button></div><h2>اشتراكاتي</h2><div className="cards">{subscriptions.length?subscriptions.map(s=><article className="card subscription" key={s.id}><h3>{s.packages?.name||'اشتراك'}</h3><span className={new Date(s.expires_at)>new Date()&&s.status==='active'?'status good':'status'}>{new Date(s.expires_at)>new Date()&&s.status==='active'?'نشط':'منتهي / غير نشط'}</span><p>تاريخ الانتهاء: {new Date(s.expires_at).toLocaleString('ar-DZ')}</p>{s.playlist_token&&new Date(s.expires_at)>new Date()&&s.status==='active'&&<div className="actions"><button className="btn secondary" onClick={()=>navigator.clipboard.writeText(playlistUrl(s.playlist_token)).then(()=>setMessage('تم نسخ الرابط'))}><Copy size={16}/> نسخ M3U</button><a className="btn secondary" href={playlistUrl(s.playlist_token)} target="_blank" rel="noreferrer"><Download size={16}/> فتح M3U</a></div>}</article>):<p className="muted">ليس لديك اشتراكات حتى الآن.</p>}</div></>}</section>}
{tab==='admin'&&<section className="container section"><h1 className="page-title">لوحة الإدارة</h1>{profile?.role!=='admin'?<p>هذه الصفحة متاحة للمسؤول فقط.</p>:<><div className="admin-stats"><div className="card"><Tv/><strong>{channels.length}</strong><span>قناة (أول 500)</span></div><div className="card"><Layers/><strong>{packages.length}</strong><span>باقة</span></div><div className="card"><Users/><strong>{adminUsers.length}</strong><span>عضو (أول 500)</span></div></div><div className="admin-grid"><div className="card"><h2><Plus size={20}/> إضافة قناة</h2><form onSubmit={addChannel}>{[['name','اسم القناة'],['stream_url','رابط البث المرخّص'],['logo_url','رابط الشعار (اختياري)'],['category','التصنيف']].map(([k,l])=><label key={k}>{l}<input required={k==='name'||k==='stream_url'} type={k.includes('url')?'url':'text'} value={newChannel[k]} onChange={e=>setNewChannel({...newChannel,[k]:e.target.value})}/></label>)}<button className="btn primary" disabled={busy}>إضافة القناة</button></form></div><div className="card"><h2><Plus size={20}/> إضافة باقة</h2><form onSubmit={addPackage}><label>اسم الباقة<input required value={newPackage.name} onChange={e=>setNewPackage({...newPackage,name:e.target.value})}/></label><label>الوصف<input value={newPackage.description} onChange={e=>setNewPackage({...newPackage,description:e.target.value})}/></label><label>المدة بالساعات<input type="number" min="1" max="8760" required value={newPackage.duration_hours} onChange={e=>setNewPackage({...newPackage,duration_hours:e.target.value})}/></label><button className="btn primary">إضافة الباقة</button></form></div></div><div className="card table-card"><div className="table-heading"><h2>إدارة القنوات</h2><button className="btn danger" disabled={!selectedChannels.length} onClick={deleteSelected}><Trash2 size={16}/> حذف المحدد ({selectedChannels.length})</button></div><div className="table-scroll"><table><thead><tr><th><input type="checkbox" checked={channels.length>0&&selectedChannels.length===channels.length} onChange={e=>setSelectedChannels(e.target.checked?channels.map(c=>c.id):[])}/></th><th>القناة</th><th>التصنيف</th><th>الحالة</th><th>إجراء</th></tr></thead><tbody>{channels.map(c=><tr key={c.id}><td><input type="checkbox" checked={selectedChannels.includes(c.id)} onChange={e=>setSelectedChannels(e.target.checked?[...selectedChannels,c.id]:selectedChannels.filter(x=>x!==c.id))}/></td><td>{c.name}</td><td>{c.category}</td><td>{c.is_active?'نشطة':'معطلة'}</td><td><button className="icon-danger" aria-label="حذف" onClick={()=>deleteChannel(c.id)}><Trash2 size={17}/></button></td></tr>)}</tbody></table></div></div><div className="admin-grid"><div className="card"><h2>إصدار اشتراك لعضو</h2><form onSubmit={assignSubscription}><label>العضو<select required value={assign.user_id} onChange={e=>setAssign({...assign,user_id:e.target.value})}><option value="">اختر العضو</option>{adminUsers.map(u=><option key={u.id} value={u.id}>{u.email}</option>)}</select></label><label>الباقة<select required value={assign.package_id} onChange={e=>setAssign({...assign,package_id:e.target.value})}><option value="">اختر الباقة</option>{packages.map(p=><option key={p.id} value={p.id}>{p.name} ({p.duration_hours} ساعة)</option>)}</select></label><button className="btn primary">إصدار الاشتراك</button></form></div><div className="card"><h2>الأعضاء</h2><div className="table-scroll"><table><thead><tr><th>البريد</th><th>الصلاحية</th></tr></thead><tbody>{adminUsers.map(u=><tr key={u.id}><td>{u.email}</td><td>{u.role==='admin'?'مسؤول':'عضو'}</td></tr>)}</tbody></table></div></div></div></>}</section>}</main><footer><div className="container footer-inner"><span>© {new Date().getFullYear()} LEIN TV PLUS</span><span>منصة إدارة المحتوى المرخّص • جميع الحقوق محفوظة</span></div></footer></>}
function Plan({plan,onClick}){return <article className={'plan card '+(plan.featured?'featured':'')}>{plan.featured&&<div className="ribbon">الأكثر طلباً</div>}<h3>{plan.name}</h3><div className="price">{plan.price}</div><p>{plan.desc}</p><div className="features">{plan.features.map(f=><div key={f}><CheckCircle2 size={17}/>{f}</div>)}</div><button className={'btn full '+(plan.featured?'primary':'secondary')} onClick={onClick}>اختر الباقة</button></article>}
createRoot(document.getElementById('root')).render(<App/>);