// Library page
const Library = () => {
  const { Icon, Button, Toggle, useToast } = window.SB_UI;
  const { GAPS, LIBRARY_FILES, fa } = window.SB_DATA;
  const [files, setFiles] = useState(LIBRARY_FILES);
  const toast = useToast();

  return (
    <div>
      <div className="row between">
        <div>
          <div className="bold" style={{ fontSize: 14 }}>فایل‌های مورد نیاز ربات</div>
          <div className="text-xs text-3 mt-4">ربات این فایل‌ها رو زیاد می‌خواد ولی هنوز توی کتابخونه نداری.</div>
        </div>
        <Button kind="ghost" icon="refresh-cw">بروزرسانی</Button>
      </div>

      <div className="grid grid-2 mt-16">
        {GAPS.map(g => (
          <div key={g.id} className="card" style={{ padding: 18, borderColor: g.urgency === 'high' ? 'rgba(239,68,68,0.3)' : g.urgency === 'medium' ? 'rgba(245,158,11,0.3)' : 'var(--border-soft)' }}>
            <div className="row gap-12" style={{ alignItems: 'flex-start' }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: g.urgency === 'high' ? 'rgba(239,68,68,0.14)' : g.urgency === 'medium' ? 'rgba(245,158,11,0.14)' : 'rgba(108,99,255,0.14)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name={g.urgency === 'high' ? 'alert-circle' : 'file-question'} size={18} color={g.urgency === 'high' ? '#F87171' : g.urgency === 'medium' ? '#FBBF24' : '#A5B4FC'} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="semi text-sm" style={{ lineHeight: 1.5 }}>{g.topic}</div>
                <div className="text-xs text-3 mono mt-4">{fa(g.requests)} بار درخواست شده توسط ربات</div>
              </div>
              <Button kind="primary" size="sm" icon="upload" onClick={() => toast('فایل آپلود شد', 'success')}>آپلود کردم</Button>
            </div>
          </div>
        ))}
      </div>

      <div className="section-h mt-24">
        <h2>کتابخانه فایل‌ها</h2>
        <Button kind="primary" icon="plus">آپلود فایل</Button>
      </div>

      <div className="grid grid-3 gap-16">
        {files.map(f => (
          <div key={f.id} className="card card-hover" style={{ padding: 0, overflow: 'hidden', opacity: f.active ? 1 : 0.6 }}>
            <div style={{ height: 100, background: `linear-gradient(135deg, ${fileColor(f.kind)}, ${fileColorD(f.kind)})`, position: 'relative', display: 'grid', placeItems: 'center' }}>
              <Icon name={fileIcon(f.kind)} size={32} color="#fff" strokeWidth={1.4} />
              <div style={{ position: 'absolute', top: 10, right: 10 }}>
                <span className="badge solid" style={{ background: 'rgba(0,0,0,0.5)', color: '#fff', backdropFilter: 'blur(4px)', fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.05 }}>{kindLabel(f.kind)}</span>
              </div>
              <div style={{ position: 'absolute', bottom: 8, left: 10, color: 'rgba(255,255,255,0.85)', fontSize: 10, fontFamily: 'JetBrains Mono' }}>
                {f.dur || f.size}
              </div>
            </div>
            <div style={{ padding: 14 }}>
              <div className="row between">
                <div className="semi text-sm" style={{ flex: 1, paddingLeft: 8 }}>{f.name}</div>
                <Toggle on={f.active} onChange={(v) => setFiles(files.map(x => x.id === f.id ? {...x, active: v} : x))} />
              </div>
              <div className="col gap-4 mt-12">
                <div className="row between">
                  <span className="text-xs text-3">امتیاز</span>
                  <span className="mono text-xs semi" style={{ color: scoreColor(f.score) }}>{fa(f.score)}/۱۰۰</span>
                </div>
                <div className="bar"><div className={`bar-fill ${scoreClass(f.score)}`} style={{ width: f.score + '%' }} /></div>
              </div>
              <div className="row between mt-12">
                <span className="text-xs text-3"><Icon name="send" size={11} /> {fa(f.sent)} ارسال</span>
                <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="more-vertical" size={13} /></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const fileIcon = (k) => ({ video: 'video', audio: 'mic', pdf: 'file-text', image: 'image' }[k] || 'file');
const fileColor = (k) => ({ video: 'rgba(239,68,68,0.7)', audio: 'rgba(139,92,246,0.7)', pdf: 'rgba(59,130,246,0.7)', image: 'rgba(52,211,153,0.7)' }[k]);
const fileColorD = (k) => ({ video: 'rgba(127,29,29,0.5)', audio: 'rgba(67,56,202,0.5)', pdf: 'rgba(30,58,138,0.5)', image: 'rgba(5,150,105,0.5)' }[k]);
const kindLabel = (k) => ({ video: 'ویدیو', audio: 'صوتی', pdf: 'PDF', image: 'تصویر' }[k] || k);
const scoreColor = (s) => s >= 80 ? '#34D399' : s >= 60 ? '#FBBF24' : '#F87171';
const scoreClass = (s) => s >= 80 ? 'green' : s >= 60 ? 'yellow' : 'red';

window.Library = Library;