const { useState, useEffect, useRef } = React;

const MPATHS = {
  home:'M3 11.5 12 4l9 7.5M5.5 10v9.5h13V10',
  search:'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM20 20l-4-4',
  grid:'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
  heart:'M12 20s-7-4.6-9.3-9C1 7.7 2.6 4.5 6 4.5c2 0 3.2 1.2 4 2.4.8-1.2 2-2.4 4-2.4 3.4 0 5 3.2 3.3 6.5C19 15.4 12 20 12 20Z',
  heartFill:'M12 20s-7-4.6-9.3-9C1 7.7 2.6 4.5 6 4.5c2 0 3.2 1.2 4 2.4.8-1.2 2-2.4 4-2.4 3.4 0 5 3.2 3.3 6.5C19 15.4 12 20 12 20Z',
  clock:'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM12 7v5l3.5 2',
  gear:'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM19.4 13a7.8 7.8 0 0 0 0-2l2-1.5-2-3.4-2.3 1a7.6 7.6 0 0 0-1.7-1l-.3-2.6H10.9l-.3 2.6a7.6 7.6 0 0 0-1.7 1l-2.3-1-2 3.4L4.6 11a7.8 7.8 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7.6 7.6 0 0 0 1.7 1l.3 2.6h4.2l.3-2.6a7.6 7.6 0 0 0 1.7-1l2.3 1 2-3.4Z',
  play:'M8 5v14l11-7z',
  pause:'M7 5h4v14H7zM13 5h4v14h-4z',
  plus:'M12 5v14M5 12h14',
  check:'M5 12l5 5 9-11',
  back:'M9 6l6 6-6 6',
  chevDown:'M6 9l6 6 6-6',
  x:'M6 6l12 12M18 6L6 18',
  skipBack:'M11 6V2L5 7l6 5V8a6 6 0 1 1-6 6H3a8 8 0 1 0 8-8Z',
  skipFwd:'M13 6V2l6 5-6 5V8a6 6 0 1 0 6 6h2a8 8 0 1 1-8-8Z',
  track:'M6 6l6 6-6 6M14 6l6 6-6 6',
  expand:'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
};
function MIcon({name, style, className}){
  const fill = ['play','pause','heartFill'].includes(name);
  return (
    <svg className={className} style={style} viewBox="0 0 24 24"
      fill={fill?'currentColor':'none'} stroke={fill?'none':'currentColor'}
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d={MPATHS[name]} />
    </svg>
  );
}
function StarIcon({style}){
  return <svg style={style} viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.9L6 21l1.6-7L2.2 9.2l7.1-.6L12 2z" fill="currentColor"/></svg>;
}

function MPoster({item, wide, children}){
  const [err,setErr]=useState(false);
  const src = wide ? (item.banner||item.cover) : item.cover;
  const ok = src && !err;
  return (
    <div className={'poster'+(wide?' wide':'')}>
      {ok ? <img src={src} alt="" onError={()=>setErr(true)} /> : <div className="fb">{(item.title||'?')[0]}</div>}
      {children}
    </div>
  );
}

const TYPE_LABEL = { anime:'أنمي', tv:'مسلسل', movie:'فيلم' };

function MCard({item, onClick, showProgress}){
  return (
    <div className="card-cap" onClick={onClick}>
      <MPoster item={item}>
        <span className="type-tag">{TYPE_LABEL[item.type]}</span>
        {showProgress>0 && <div className="prog"><i style={{width:(showProgress*100)+'%'}}></i></div>}
      </MPoster>
      <div className="t">{item.title}</div>
      <div className="m">{item.year} · {item.type==='movie'?`${item.runtime} د`:`م${item.seasons}`}</div>
    </div>
  );
}

function Rail({title, sub, items, onOpen, renderExtra}){
  if(!items.length) return null;
  return (
    <div className="rail">
      <div className="rail-head"><span className="rail-title">{title}</span>{sub && <span className="rail-sub">{sub}</span>}</div>
      <div className="rail-track">
        {items.map(it=> <MCard key={it.id} item={it.anime||it} onClick={()=>onOpen(it.anime||it)} showProgress={it.progress} />)}
      </div>
    </div>
  );
}

const TABS = [
  {id:'home', label:'الرئيسية', icon:'home'},
  {id:'categories', label:'التصنيفات', icon:'grid'},
  {id:'library', label:'مكتبتي', icon:'heart'},
  {id:'settings', label:'الإعدادات', icon:'gear'},
];
function TabBar({active, onGo}){
  return (
    <div className="tabbar">
      {TABS.map(t=>(
        <div key={t.id} className={'tab'+(active===t.id?' active':'')} onClick={()=>onGo(t.id)}>
          <MIcon name={t.icon} />
          <span>{t.label}</span>
        </div>
      ))}
    </div>
  );
}

function Header({title, onBack, onSearch}){
  return (
    <div className="mtv-header">
      {onBack ? <div className="back-btn" onClick={onBack}><MIcon name="back" /></div>
        : <div className="brand"><span className="my">MY</span><span className="tv">TV</span></div>}
      {title && <span className="screen-title">{title}</span>}
      <div className="spacer"></div>
      {onSearch && <div className="icon-btn" onClick={onSearch}><MIcon name="search" /></div>}
    </div>
  );
}

function Sheet({title, onClose, children}){
  return (
    <div className="sheet-back" onClick={onClose}>
      <div className="sheet" onClick={e=>e.stopPropagation()}>
        <div className="grip"></div>
        <div className="sheet-title">{title}</div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { MIcon, StarIcon, MPoster, MCard, Rail, TabBar, Header, Sheet, TYPE_LABEL });