// FilesScreen + FileInspector

const StatusPill = ({ status }) => {
  const map = {
    uploaded: { cls: 'uploaded', icon: '⏳', label: 'Yükleniyor…' },
    parsed:   { cls: 'parsed',   icon: '🔄', label: 'Analiz ediliyor…' },
    analyzed: { cls: 'analyzed', icon: '✓',  label: 'Analiz hazır' },
    error:    { cls: 'error',    icon: '⚠️', label: 'Hata · tekrar dene' },
  };
  const s = map[status] || map.uploaded;
  return (
    <span className={`status-pill ${s.cls} ${status === 'parsed' ? 'pulse' : ''}`}>
      <span className="status-icon">{s.icon}</span>{s.label}
    </span>
  );
};

const FilesScreen = ({ files, onUpload, onOpenFile }) => {
  const [drag, setDrag] = React.useState(false);
  const inputRef = React.useRef(null);

  const handleDrop = (e) => {
    e.preventDefault();
    setDrag(false);
    const fs = Array.from(e.dataTransfer.files || []);
    if (fs.length) onUpload(fs);
  };
  const handlePick = (e) => {
    const fs = Array.from(e.target.files || []);
    if (fs.length) onUpload(fs);
    e.target.value = '';
  };

  return (
    <div className="fade-in files-screen">
      <div className="team-v3-head">
        <div>
          <h1 className="team-v3-title">Dosyalar</h1>
          <div className="team-v3-meta">
            <span>{files.length} dosya</span>
            <span className="dot-sep">·</span>
            <span>son yükleme {files[0]?.when || '—'}</span>
          </div>
        </div>
      </div>

      <div
        className={`upload-zone ${drag ? 'dragging' : ''}`}
        onClick={() => inputRef.current?.click()}
        onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={handleDrop}
      >
        <div className="upload-icon">📥</div>
        <div className="upload-title">Dosyaları buraya sürükleyin</div>
        <div className="upload-sub">veya tıklayıp seçin</div>
        <div className="upload-types">Excel (.xlsx) · CSV · PDF · 50 MB max</div>
        <input
          ref={inputRef}
          type="file"
          multiple
          accept=".xlsx,.xls,.csv,.pdf"
          style={{ display: 'none' }}
          onChange={handlePick}
        />
      </div>

      <div className="files-section-h">Yüklenen dosyalar</div>

      <div className="files-list">
        {files.map((f, i) => (
          <button
            key={f.id}
            className="file-row"
            style={{ animationDelay: `${i * 40}ms` }}
            onClick={() => onOpenFile(f)}
          >
            <span className="file-row-icon">{f.icon}</span>
            <span className="file-row-body">
              <span className="file-row-name">{f.name}</span>
              <span className="file-row-meta">
                {FILE_CATEGORIES[f.category] || 'Genel'}
                <span className="dot-sep">·</span>
                {f.pages}
                <span className="dot-sep">·</span>
                {f.sizeKB > 1024 ? (f.sizeKB / 1024).toFixed(1) + ' MB' : f.sizeKB + ' KB'}
                <span className="dot-sep">·</span>
                {f.when}
              </span>
            </span>
            <StatusPill status={f.status} />
            <Icon name="chevron" size={14} className="file-row-chev"/>
          </button>
        ))}
      </div>
    </div>
  );
};

const FileInspector = ({ file, onClose, onTalkCoS, onDelete }) => {
  React.useEffect(() => {
    if (!file) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [file, onClose]);

  return (
    <>
      <div className={`agent-overlay ${file ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`agent-inspector file-inspector ${file ? 'open' : ''}`}>
        {file && (
          <>
            <div className="agent-insp-head">
              <div className="agent-insp-id">
                <span className="file-insp-icon">{file.icon}</span>
                <StatusPill status={file.status}/>
              </div>
              <button className="agent-insp-close" onClick={onClose}><Icon name="x" size={16}/></button>
            </div>
            <div className="agent-insp-body">
              <div className="agent-insp-stagger" style={{ animationDelay: '60ms' }}>
                <div className="agent-insp-role">{FILE_CATEGORIES[file.category] || 'Genel'}</div>
                <h2 className="agent-insp-name file-insp-name">{file.name}</h2>
                <div className="agent-insp-sub">
                  {file.pages} · {file.sizeKB > 1024 ? (file.sizeKB / 1024).toFixed(1) + ' MB' : file.sizeKB + ' KB'} · {file.when}
                </div>
              </div>

              {file.status === 'analyzed' && (
                <>
                  <div className="agent-insp-pitch agent-insp-stagger" style={{ animationDelay: '140ms' }}>
                    {file.summary}
                  </div>

                  {file.metrics?.length > 0 && (
                    <div className="agent-insp-stagger" style={{ animationDelay: '220ms' }}>
                      <div className="agent-insp-label">Çıkarılan veriler ({file.metrics.length})</div>
                      <ul className="file-insp-metrics">
                        {file.metrics.map((m, i) => (
                          <li key={i}>
                            <span className="file-insp-metric-key">{m.key}</span>
                            <span className="file-insp-metric-val">{m.value}</span>
                            <span className="file-insp-metric-period">{m.period}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {file.note && (
                    <div className="agent-insp-stagger" style={{ animationDelay: '300ms' }}>
                      <div className="agent-insp-label">Ekip Notu (Managing Partner)</div>
                      <div className="file-insp-note">{file.note}</div>
                    </div>
                  )}
                </>
              )}

              {file.status === 'parsed' && (
                <div className="agent-insp-stagger file-insp-pending" style={{ animationDelay: '140ms' }}>
                  <span className="mm-pulse"></span>
                  Veri çekiliyor… ekip toplandı, sentez hazırlanıyor.
                </div>
              )}

              {file.status === 'error' && (
                <div className="agent-insp-stagger file-insp-error" style={{ animationDelay: '140ms' }}>
                  Dosya parse edilemedi. Format kontrol edip tekrar yükleyebilirsiniz.
                </div>
              )}
            </div>

            <div className="agent-insp-foot file-insp-foot">
              <a
                className="file-insp-action"
                href={`/api/files/${file.id}/download`}
                download={file.name}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
              >İndir</a>
              <button className="agent-insp-primary file-insp-primary" onClick={() => onTalkCoS(file)}>
                <Icon name="chat" size={15}/>
                <span>CoS ile konuş</span>
              </button>
              <button className="file-insp-action danger" onClick={() => onDelete(file)}>Sil</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
};

window.FilesScreen = FilesScreen;
window.FileInspector = FileInspector;