// Sources screen — list grouped by type (RSS, Telegram, sites, files) + add modal + uploader.
const { useState: useStateSrc, useRef: useRefSrc } = React;

function Sources({ data, setData }) {
  const { Button, IconButton, Card, Toggle, TextInput, Modal, SectionHead, EmptyState, Badge } = window.UI;
  const I = window.Icons;
  const [addOpen, setAddOpen] = useStateSrc(false);
  const [type, setType] = useStateSrc('rss');
  const [url, setUrl] = useStateSrc('');
  const [dragActive, setDragActive] = useStateSrc(false);
  const fileInputRef = useRefSrc(null);

  const files = data.files || [];

  const grouped = {
    rss: data.sources.filter(s => s.type === 'rss'),
    tg: data.sources.filter(s => s.type === 'tg'),
    site: data.sources.filter(s => s.type === 'site'),
  };

  const toggleEnabled = (id) => setData({ ...data, sources: data.sources.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s) });
  const remove = (id) => setData({ ...data, sources: data.sources.filter(s => s.id !== id) });
  const addSource = () => {
    if (!url.trim()) return;
    setData({ ...data, sources: [...data.sources, { id: 's' + Date.now(), type, url: url.trim(), last: 'только что', count: 0, enabled: true }] });
    setUrl(''); setAddOpen(false);
  };

  const handleFiles = (filesList) => {
    const items = Array.from(filesList || []).map((f, i) => {
      const ext = (f.name.split('.').pop() || '').toLowerCase();
      const kind =
        ext === 'pdf' ? 'pdf' :
        ['doc', 'docx'].includes(ext) ? 'doc' :
        ['xls', 'xlsx', 'csv'].includes(ext) ? 'xls' :
        ['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg'].includes(ext) ? 'image' : 'file';
      return {
        id: 'f' + Date.now() + '-' + i,
        name: f.name,
        kind,
        size: f.size ? (f.size > 1024 * 1024 ? (f.size / 1048576).toFixed(1) + ' МБ' : Math.round(f.size / 1024) + ' КБ') : '—',
        when: 'только что',
      };
    });
    setData({ ...data, files: [...items, ...files] });
  };
  const removeFile = (id) => setData({ ...data, files: files.filter(f => f.id !== id) });

  const isEmpty = data.sources.length === 0 && files.length === 0;

  return (
    <div className="max-w-[1100px] mx-auto px-5 sm:px-8 py-8">
      <SectionHead
        kicker="источники"
        title="Откуда мы читаем"
        sub="Подключайте RSS, Telegram-каналы, сайты — и загружайте свои документы и материалы."
        right={<Button icon={<I.Plus size={14}/>} onClick={() => setAddOpen(true)}>Добавить источник</Button>}
      />
      <div className="sm:hidden mb-4"><Button full icon={<I.Plus size={14}/>} onClick={() => setAddOpen(true)}>Добавить источник</Button></div>

      {isEmpty ? (
        <EmptyState
          icon={<I.Plug size={22}/>}
          title="Пока ни одного источника"
          sub="Подключите RSS-ленту, телеграм-канал, сайт или загрузите файлы — и Omneee начнёт предлагать темы."
          action={<Button icon={<I.Plus size={14}/>} onClick={() => setAddOpen(true)}>Подключить первый</Button>}
        />
      ) : (
        <div className="space-y-8">
          {[
            { key: 'rss', label: 'RSS-фиды', icon: 'Rss', sub: 'статьи из блогов, изданий, любые ленты' },
            { key: 'tg', label: 'Telegram-каналы', icon: 'Telegram', sub: 'публичные каналы, которые читаете' },
            { key: 'site', label: 'Сайты', icon: 'Globe', sub: 'свои и любимые — для контекста' },
          ].map((g) => {
            const list = grouped[g.key];
            if (!list.length) return null;
            const Icon = I[g.icon];
            return (
              <div key={g.key}>
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2.5">
                    <span className="h-8 w-8 rounded-lg bg-ink-100 flex items-center justify-center text-ink-700"><Icon size={14}/></span>
                    <div>
                      <div className="text-[14px] font-semibold">{g.label}</div>
                      <div className="text-[11.5px] text-ink-500">{g.sub}</div>
                    </div>
                  </div>
                  <span className="text-[12px] text-ink-500 font-mono">{list.length}</span>
                </div>
                <Card className="overflow-hidden">
                  {list.map((s, i) => (
                    <div key={s.id} className={'flex items-center gap-3 px-4 sm:px-5 py-3.5 ' + (i > 0 ? 'border-t border-ink-200' : '')}>
                      <div className="h-9 w-9 rounded-lg bg-ink-100 flex items-center justify-center text-ink-700 shrink-0"><Icon size={14}/></div>
                      <div className="flex-1 min-w-0">
                        <div className="font-mono text-[13px] truncate">{s.url}</div>
                        <div className="text-[11.5px] text-ink-500 mt-0.5">обновлено {s.last} · {s.count} материалов</div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Toggle on={s.enabled} onChange={() => toggleEnabled(s.id)} size="sm"/>
                        <IconButton size="sm" onClick={() => remove(s.id)} title="Удалить"><I.Trash size={14}/></IconButton>
                      </div>
                    </div>
                  ))}
                </Card>
              </div>
            );
          })}

          {/* Files section */}
          <div>
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2.5">
                <span className="h-8 w-8 rounded-lg bg-ink-100 flex items-center justify-center text-ink-700"><I.File size={14}/></span>
                <div>
                  <div className="text-[14px] font-semibold">Файлы</div>
                  <div className="text-[11.5px] text-ink-500">PDF, DOCX, XLS и изображения — контекст для генерации</div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-[12px] text-ink-500 font-mono">{files.length}</span>
                <Button size="sm" variant="outline" icon={<I.Upload size={13}/>} onClick={() => fileInputRef.current && fileInputRef.current.click()}>Загрузить</Button>
                <input ref={fileInputRef} type="file" multiple className="hidden"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.webp,.gif,.svg"
                  onChange={(e) => handleFiles(e.target.files)}/>
              </div>
            </div>

            {/* Dropzone */}
            <div
              onDragEnter={(e) => { e.preventDefault(); setDragActive(true); }}
              onDragOver={(e) => { e.preventDefault(); setDragActive(true); }}
              onDragLeave={() => setDragActive(false)}
              onDrop={(e) => { e.preventDefault(); setDragActive(false); handleFiles(e.dataTransfer.files); }}
              className={'rounded-2xl border-2 border-dashed p-5 mb-3 transition-colors flex items-center gap-4 cursor-pointer ' + (dragActive ? 'border-ink-900 bg-ink-50' : 'border-ink-200 bg-paper hover:bg-ink-50')}
              onClick={() => fileInputRef.current && fileInputRef.current.click()}
            >
              <div className="h-11 w-11 rounded-xl bg-white border border-ink-200 flex items-center justify-center text-ink-700"><I.Upload size={18}/></div>
              <div className="flex-1">
                <div className="text-[13.5px] font-semibold">Перетащите файлы сюда</div>
                <div className="text-[12px] text-ink-500">или нажмите, чтобы выбрать · PDF, DOCX, XLS, PNG/JPG · до 25 МБ каждый</div>
              </div>
              <div className="hidden sm:flex items-center gap-1 text-[10.5px] font-semibold tracking-wide uppercase">
                <Badge>PDF</Badge>
                <Badge>DOCX</Badge>
                <Badge>XLS</Badge>
                <Badge>IMG</Badge>
              </div>
            </div>

            {files.length > 0 && (
              <Card className="overflow-hidden">
                {files.map((f, i) => <FileRow key={f.id} file={f} first={i === 0} onRemove={() => removeFile(f.id)}/>)}
              </Card>
            )}
          </div>
        </div>
      )}

      <Modal open={addOpen} onClose={() => setAddOpen(false)} title="Подключить источник" sub="Выберите тип и вставьте адрес.">
        <div className="space-y-5">
          <div className="grid grid-cols-3 gap-2">
            {[
              { v: 'rss', label: 'RSS', icon: 'Rss' },
              { v: 'tg', label: 'Telegram', icon: 'Telegram' },
              { v: 'site', label: 'Сайт', icon: 'Globe' },
            ].map((t) => {
              const Icon = I[t.icon];
              const active = type === t.v;
              return (
                <button key={t.v} onClick={() => setType(t.v)} className={'flex flex-col items-center gap-1.5 py-4 rounded-xl border transition-colors ' + (active ? 'border-ink-900 bg-ink-50' : 'border-ink-200 hover:bg-ink-50')}>
                  <Icon size={18}/>
                  <span className="text-[12.5px] font-medium">{t.label}</span>
                </button>
              );
            })}
          </div>
          <div>
            <label className="block text-[12.5px] font-medium mb-1.5">{type === 'tg' ? 'Хэндл канала' : 'URL'}</label>
            <TextInput
              value={url}
              onChange={setUrl}
              placeholder={type === 'rss' ? 'https://example.com/feed.xml' : type === 'tg' ? '@channel_name' : 'https://example.com'}
              icon={type === 'rss' ? <I.Rss size={15}/> : type === 'tg' ? <I.Telegram size={15}/> : <I.Globe size={15}/>}
              size="lg"
            />
          </div>
          <div className="flex items-center justify-end gap-2 pt-2">
            <Button variant="ghost" onClick={() => setAddOpen(false)}>Отмена</Button>
            <Button onClick={addSource} disabled={!url.trim()}>Подключить</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

function FileRow({ file, first, onRemove }) {
  const I = window.Icons;
  const { IconButton } = window.UI;
  const meta = {
    pdf:   { Icon: I.Pdf,       tint: 'bg-red-50 text-red-700',         label: 'PDF' },
    doc:   { Icon: I.FileText,  tint: 'bg-blue-50 text-blue-700',       label: 'DOCX' },
    xls:   { Icon: I.Sheet,     tint: 'bg-emerald-50 text-emerald-700', label: 'XLS' },
    image: { Icon: I.ImageFile, tint: 'bg-violet-soft text-violet-ink', label: 'IMG' },
    file:  { Icon: I.File,      tint: 'bg-ink-100 text-ink-700',        label: 'FILE' },
  }[file.kind] || { Icon: I.File, tint: 'bg-ink-100 text-ink-700', label: 'FILE' };
  const { Icon } = meta;
  return (
    <div className={'flex items-center gap-3 px-4 sm:px-5 py-3.5 ' + (first ? '' : 'border-t border-ink-200')}>
      <div className={'h-9 w-9 rounded-lg flex items-center justify-center shrink-0 ' + meta.tint}><Icon size={15}/></div>
      <div className="flex-1 min-w-0">
        <div className="text-[13.5px] font-medium truncate">{file.name}</div>
        <div className="text-[11.5px] text-ink-500 mt-0.5 font-mono">{meta.label} · {file.size} · {file.when}</div>
      </div>
      <IconButton size="sm" title="Скачать"><I.Download size={14}/></IconButton>
      <IconButton size="sm" title="Удалить" onClick={onRemove}><I.Trash size={14}/></IconButton>
    </div>
  );
}

window.Screens = window.Screens || {};
window.Screens.Sources = Sources;