import { useState, useEffect, useRef, useCallback } from 'react';
import { api, S } from '../lib.js';
import { useConfirm } from '../confirm.jsx';
import { UploadIcon, DownloadIcon, TrashIcon, SearchIcon, PlusIcon, ChevronIcon, DatabaseIcon } from '../icons.jsx';

const fmtSize = b => b<1024?`${b} B`:b<1024*1024?`${(b/1024).toFixed(1)} KB`:`${(b/(1024*1024)).toFixed(1)} MB`;
const fmtDate = s => new Date(s).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric'});
const extIcon = name => {
  const e = name.split('.').pop().toLowerCase();
  if (['jpg','jpeg','png','gif','webp'].includes(e)) return '🖼';
  if (e==='pdf') return '📄'; if (['zip','rar','7z'].includes(e)) return '📦';
  if (['mp4','mov','avi'].includes(e)) return '🎬'; if (['mp3','wav'].includes(e)) return '🎵';
  if (['stl','3mf'].includes(e)) return '🖨'; if (['txt','md'].includes(e)) return '📝';
  if (['xlsx','csv'].includes(e)) return '📊'; if (['docx','doc'].includes(e)) return '📃';
  return '📎';
};

// ── Share Modal ───────────────────────────────────────────────────────────────
function ShareModal({ item, type, onClose, toast }) {
  const [username, setUsername] = useState('');
  const [shares,   setShares]   = useState([]);
  const base = type==='folder' ? `/tools/dateien/folders/${item.id}` : `/tools/dateien/${item.id}`;
  useEffect(() => { api(`${base}/shares`).then(setShares).catch(()=>{}); }, [base]);
  const share = async () => {
    if (!username.trim()) return;
    try { await api(`${base}/share`,{body:{username:username.trim()}}); toast(`Geteilt ✓`); setUsername(''); api(`${base}/shares`).then(setShares); }
    catch(e) { toast(e.message,'error'); }
  };
  const unshare = async uid => {
    try { await api(`${base}/share/${uid}`,{method:'DELETE'}); setShares(p=>p.filter(s=>s.id!==uid)); toast('Freigabe entfernt'); }
    catch(e) { toast(e.message,'error'); }
  };
  const isMobile = window.innerWidth<768;
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.8)',zIndex:6000,
      display:'flex',alignItems:isMobile?'flex-end':'center',justifyContent:'center',padding:isMobile?0:24}}
      onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div style={{background:'#1a1a1e',borderRadius:isMobile?'16px 16px 0 0':16,
        width:'100%',maxWidth:440,padding:'20px 20px 28px',border:'1px solid rgba(255,255,255,0.12)'}}>
        {isMobile&&<div style={{width:36,height:4,background:'rgba(255,255,255,0.15)',borderRadius:2,margin:'0 auto 14px'}}/>}
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
          <div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:13,fontWeight:700}}>
            {type==='folder'?'📁':'📎'} {item.name||item.originalname} teilen
          </div>
          <button onClick={onClose} style={{background:'transparent',border:'none',color:'rgba(255,255,255,0.4)',cursor:'pointer',fontSize:18}}>✕</button>
        </div>
        <div style={{display:'flex',gap:8,marginBottom:14}}>
          <input value={username} onChange={e=>setUsername(e.target.value)} onKeyDown={e=>e.key==='Enter'&&share()}
            placeholder="Benutzername" autoCapitalize="none" style={{...S.inp,flex:1,fontSize:15}}/>
          <button onClick={share} style={S.btn('#4ecdc4')}>Teilen</button>
        </div>
        {shares.length>0&&(<div>
          <div style={{...S.head,marginBottom:6}}>GETEILT MIT</div>
          {shares.map(s=>(
            <div key={s.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',
              padding:'7px 0',borderBottom:'1px solid rgba(255,255,255,0.05)'}}>
              <span style={{color:'rgba(255,255,255,0.75)',fontFamily:'monospace',fontSize:13}}>{s.username}</span>
              <button onClick={()=>unshare(s.id)} style={S.btn('#ff6b9d',true)}>✕</button>
            </div>
          ))}
        </div>)}
      </div>
    </div>
  );
}

// ── Datei-Manager ─────────────────────────────────────────────────────────────
export default function Dateien({ toast, mobile }) {
  const [data,       setData]       = useState({own:[],shared:[],sharedByMe:[]});
  const [folders,    setFolders]    = useState({own:[],shared:[],sharedByMe:[]});
  const [loading,    setLoading]    = useState(true);
  const [currentFolderId, setCurrentFolderId] = useState(null);
  const [folderPath, setFolderPath] = useState([]); // [{id, name}]
  const [tab,        setTab]        = useState('own');
  const [search,     setSearch]     = useState('');
  const [shareItem,  setShareItem]  = useState(null); // {item, type}
  const [uploading,  setUploading]  = useState(false);
  const [dragOver,   setDragOver]   = useState(false);
  const [newFolder,  setNewFolder]  = useState(false);
  const [folderName, setFolderName] = useState('');
  const fileRef = useRef(null);
  const { confirm, ConfirmDialog } = useConfirm();

  const load = useCallback(() => {
    setLoading(true);
    const fq = currentFolderId ? `?folder_id=${currentFolderId}` : '';
    const pq = currentFolderId ? `?parent_id=${currentFolderId}` : '';
    Promise.all([
      api(`/tools/dateien${fq}`),
      api(`/tools/dateien/folders${pq}`),
    ]).then(([d, f]) => {
      setData({ own:d.own||[], shared:d.shared||[], sharedByMe:d.sharedByMe||[] });
      setFolders({ own:f.own||[], shared:f.shared||[], sharedByMe:f.sharedByMe||[] });
    })
      .catch(e => toast(e.message,'error'))
      .finally(() => setLoading(false));
  }, [currentFolderId]);

  useEffect(() => { load(); }, [load]);

  const doUpload = async file => {
    if (!file) return;
    setUploading(true);
    try {
      const form = new FormData();
      form.append('file', file);
      if (currentFolderId) form.append('folder_id', currentFolderId);
      await api('/tools/dateien', {method:'POST', body:form, isFile:true});
      toast(`${file.name} hochgeladen ✓`); load();
    } catch(e) { toast(e.message,'error'); } finally { setUploading(false); }
  };

  const onFileInput = e => { doUpload(e.target.files?.[0]); e.target.value=''; };
  const onDrop = e => {
    e.preventDefault(); setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) doUpload(file);
  };

  const download = async file => {
    try {
      const res = await fetch(`/api/tools/dateien/${file.id}/download`, {
        headers: { Authorization: `Bearer ${localStorage.getItem('sk_token')}` }
      });
      if (!res.ok) {
        const err = await res.json().catch(()=>({error:'Download fehlgeschlagen'}));
        toast(err.error || 'Download fehlgeschlagen', 'error'); return;
      }
      const blob = await res.blob();
      const url  = URL.createObjectURL(blob);
      const a    = document.createElement('a');
      a.href     = url;
      a.download = file.originalname;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    } catch(e) { toast(e.message,'error'); }
  };

  const delFile = async file => {
    if (!await confirm(`"${file.originalname}" löschen?`)) return;
    try { await api(`/tools/dateien/${file.id}`,{method:'DELETE'}); toast('Gelöscht'); load(); }
    catch(e) { toast(e.message,'error'); }
  };

  const delFolder = async folder => {
    if (!await confirm(`Ordner "${folder.name}" und alle Inhalte löschen?`)) return;
    try { await api(`/tools/dateien/folders/${folder.id}`,{method:'DELETE'}); toast('Gelöscht'); load(); }
    catch(e) { toast(e.message,'error'); }
  };

  const createFolder = async () => {
    if (!folderName.trim()) return;
    try {
      const body = { name: folderName.trim() };
      if (currentFolderId) body.parent_id = currentFolderId;
      await api('/tools/dateien/folders', { body });
      toast('Ordner erstellt'); setFolderName(''); setNewFolder(false); load();
    } catch(e) { toast(e.message,'error'); }
  };

  const enterFolder = (folder, isShared=false) => {
    setCurrentFolderId(folder.id);
    setFolderPath(p => [...p, {id:folder.id, name:folder.name, isShared}]);
    setSearch('');
  };

  const navigateTo = (idx) => {
    if (idx < 0) { setCurrentFolderId(null); setFolderPath([]); }
    else {
      const target = folderPath[idx];
      setCurrentFolderId(target.id);
      setFolderPath(p => p.slice(0, idx+1));
    }
    setSearch('');
  };

  const sq = search.toLowerCase();
  const currentFolders = tab==='own' ? folders.own : folders.shared;
  const currentFiles   = tab==='own' ? data.own    : data.shared;
  const currentFolders2 = tab==='sharedByMe' ? (folders.sharedByMe||[]) : (tab==='shared' ? (folders.shared||[]) : folders.own);
  const currentFiles2   = tab==='sharedByMe' ? (data.sharedByMe||[])   : (tab==='shared' ? data.shared : data.own);
  const filtFolders = sq ? currentFolders2.filter(f=>f.name.toLowerCase().includes(sq)) : currentFolders2;
  const filtFiles   = sq ? currentFiles2.filter(f=>f.originalname.toLowerCase().includes(sq)) : currentFiles2;

  const totalSize = data.own.reduce((s,f)=>s+f.size,0);
  const inSharedFolder = folderPath.some(p=>p.isShared);

  return (
    <div style={{padding:mobile?'14px 14px 90px':'36px 44px',maxWidth:900}}>
      <ConfirmDialog/>
      {shareItem && <ShareModal item={shareItem.item} type={shareItem.type} onClose={()=>{setShareItem(null);load();}} toast={toast}/>}
      <input ref={fileRef} type="file" onChange={onFileInput} style={{display:'none'}}/>

      {/* Header */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}}>
        <div>
          <h1 style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:mobile?18:22,margin:0}}>Dateien</h1>
          <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:10,marginTop:3}}>
            {data.own.length} Dateien · {fmtSize(totalSize)}
          </div>
        </div>
        <div style={{display:'flex',gap:6}}>

        </div>
      </div>

      {/* Tabs + Ordner-Button */}
      {!currentFolderId && (
        <div style={{display:'flex',gap:6,marginBottom:12,flexWrap:'wrap',alignItems:'center'}}>
          {[
            ['own','Meine Dateien', null],
            ['shared','Geteilt mit mir', data.shared.length + (folders.shared||[]).length],
            ['sharedByMe','Geteilt von mir', (data.sharedByMe||[]).length + (folders.sharedByMe||[]).length],
          ].map(([k,l,cnt])=>(
            <button key={k} onClick={()=>{setTab(k);setSearch('');}} style={{
              padding:'5px 14px',borderRadius:20,fontFamily:'monospace',fontSize:11,cursor:'pointer',
              border:`1px solid ${tab===k?'rgba(78,205,196,0.5)':'rgba(255,255,255,0.1)'}`,
              background:tab===k?'rgba(78,205,196,0.12)':'transparent',
              color:tab===k?'#4ecdc4':'rgba(255,255,255,0.5)',
            }}>{l}{cnt>0?` (${cnt})`:''}</button>
          ))}
          {tab==='own' && (
            <button onClick={()=>setNewFolder(true)} style={{
              marginLeft:'auto', padding:'5px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
              cursor:'pointer', border:'1px solid rgba(255,255,255,0.15)',
              background:'rgba(255,255,255,0.05)', color:'rgba(255,255,255,0.6)',
              display:'flex', alignItems:'center', gap:5,
            }}>📁 + Ordner</button>
          )}
        </div>
      )}

      {/* Breadcrumb */}
      {folderPath.length > 0 && (
        <div style={{display:'flex',alignItems:'center',gap:4,marginBottom:12,flexWrap:'wrap'}}>
          <button onClick={()=>navigateTo(-1)} style={{background:'transparent',border:'none',
            color:'rgba(255,255,255,0.5)',cursor:'pointer',fontFamily:'monospace',fontSize:11,padding:'2px 6px'}}>
            Dateien
          </button>
          {folderPath.map((p,i)=>(
            <span key={p.id} style={{display:'flex',alignItems:'center',gap:4}}>
              <ChevronIcon size={12} color="rgba(255,255,255,0.25)" dir="right"/>
              <button onClick={()=>navigateTo(i)} style={{
                background:i===folderPath.length-1?'rgba(78,205,196,0.1)':'transparent',
                border:i===folderPath.length-1?'1px solid rgba(78,205,196,0.2)':'none',
                borderRadius:6,color:i===folderPath.length-1?'#4ecdc4':'rgba(255,255,255,0.5)',
                cursor:'pointer',fontFamily:'monospace',fontSize:11,padding:'2px 8px'}}>
                {p.name}
              </button>
            </span>
          ))}
        </div>
      )}

      {/* Neuer Ordner Button (in Unterordnern) */}
      {tab==='own' && currentFolderId && !newFolder && !inSharedFolder && (
        <button onClick={()=>setNewFolder(true)} style={{
          display:'flex', alignItems:'center', gap:8, marginBottom:8,
          background:'rgba(255,255,255,0.03)', border:'1px dashed rgba(255,255,255,0.15)',
          borderRadius:8, padding:'8px 14px', cursor:'pointer',
          color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:11, width:'100%',
        }}>📁 + Neuen Unterordner erstellen</button>
      )}

      {/* Neuer Ordner Formular */}
      {newFolder && (
        <div style={{...S.card,marginBottom:10,display:'flex',gap:8,alignItems:'center'}}>
          <span style={{fontSize:18}}>📁</span>
          <input value={folderName} onChange={e=>setFolderName(e.target.value)}
            onKeyDown={e=>{if(e.key==='Enter')createFolder();if(e.key==='Escape'){setNewFolder(false);setFolderName('');}}}
            placeholder="Ordnername…" autoFocus
            style={{...S.inp,flex:1,fontSize:15}}/>
          <button onClick={createFolder} style={S.btn('#4ecdc4')}>✓</button>
          <button onClick={()=>{setNewFolder(false);setFolderName('');}} style={S.btn('#ff6b9d',true)}>✕</button>
        </div>
      )}

      {/* Suche */}
      <div style={{position:'relative',marginBottom:12}}>
        <span style={{position:'absolute',left:12,top:'50%',transform:'translateY(-50%)'}}>
          <SearchIcon size={14} color="rgba(255,255,255,0.3)"/>
        </span>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Suchen…"
          style={{...S.inp,paddingLeft:34,fontSize:15}}/>
        {search&&<button onClick={()=>setSearch('')} style={{position:'absolute',right:10,top:'50%',
          transform:'translateY(-50%)',background:'transparent',border:'none',
          color:'rgba(255,255,255,0.3)',cursor:'pointer',fontSize:16}}>✕</button>}
      </div>

      {/* Drop Zone */}
      <div
        onDragOver={e=>{e.preventDefault();setDragOver(true);}}
        onDragLeave={()=>setDragOver(false)}
        onDrop={onDrop}
        style={{
          border:`2px dashed ${dragOver?'#4ecdc4':'rgba(255,255,255,0.1)'}`,
          borderRadius:10, padding:'14px 16px', marginBottom:12, textAlign:'center',
          background:dragOver?'rgba(78,205,196,0.08)':'transparent',
          transition:'all 0.15s', cursor:'pointer',
        }}
        onClick={()=>fileRef.current?.click()}>
        <div style={{color:dragOver?'#4ecdc4':'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:11}}>
          {uploading ? '⏳ Wird hochgeladen…' : dragOver ? '↓ Loslassen zum Hochladen' : '📂 Dateien hierher ziehen oder klicken'}
        </div>
      </div>

      {loading&&<div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace'}}>Lädt…</div>}

      {/* Ordner */}
      {filtFolders.map(folder=>(
        <div key={folder.id} style={{...S.card,marginBottom:6,padding:'10px 14px',
          display:'flex',alignItems:'center',gap:12,cursor:'pointer'}}
          onClick={()=>enterFolder(folder, folder.owner!==undefined)}>
          <span style={{fontSize:22,flexShrink:0}}>📁</span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{color:'#fff',fontFamily:'monospace',fontSize:13,fontWeight:700}}>{folder.name}</div>
            <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:10,marginTop:2}}>
              {[
                folder.owner && tab!=='sharedByMe' ? `von ${folder.owner}` : null,
                folder.subCount>0 ? `${folder.subCount} Ordner` : null,
                folder.fileCount>0 ? `${folder.fileCount} Datei${folder.fileCount!==1?'en':''}` : null,
                folder.fileCount>0 && folder.totalSize>0 ? fmtSize(folder.totalSize) : null,
                (folder.subCount===0 && folder.fileCount===0) ? 'leer' : null,
                tab==='sharedByMe'&&folder.shared_with_names ? `geteilt mit: ${folder.shared_with_names}` : null,
              ].filter(Boolean).join(' · ')}
            </div>
          </div>
          {(!folder.owner || tab==='sharedByMe') && (
            <div style={{display:'flex',gap:5}} onClick={e=>e.stopPropagation()}>
              <button onClick={()=>setShareItem({item:folder,type:'folder'})} style={S.btn('#ffe66d',true)} title="Teilen verwalten">🤝</button>
              {tab==='own'&&<button onClick={()=>delFolder(folder)} style={S.btn('#ff6b9d',true)} title="Löschen">
                <TrashIcon size={13} color="#ff6b9d"/>
              </button>}
            </div>
          )}
          <ChevronIcon size={14} color="rgba(255,255,255,0.3)" dir="right"/>
        </div>
      ))}

      {/* Dateien */}
      {filtFiles.map(file=>(
        <div key={file.id} style={{...S.card,marginBottom:6,padding:'10px 14px',
          display:'flex',alignItems:'center',gap:12}}>
          <span style={{fontSize:22,flexShrink:0}}>{extIcon(file.originalname)}</span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{color:'#fff',fontFamily:'monospace',fontSize:12,fontWeight:700,
              overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{file.originalname}</div>
            <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:10,marginTop:2}}>
              {fmtSize(file.size)} · {fmtDate(file.created_at)}
              {tab==='shared'?` · von ${file.owner}`:''}
              {tab==='sharedByMe'&&file.shared_with_names?` · mit: ${file.shared_with_names}${file.shared_at?' seit '+fmtDate(file.shared_at):''}` : ''}
            </div>
          </div>
          <div style={{display:'flex',gap:5,flexShrink:0}}>
            <button onClick={()=>download(file)} style={S.btn('#4ecdc4',true)} title="Download">
              <DownloadIcon size={13} color="#4ecdc4"/>
            </button>
            {(tab==='own'&&!inSharedFolder)||tab==='sharedByMe' ? <>
              <button onClick={()=>setShareItem({item:file,type:'file'})} style={S.btn('#ffe66d',true)} title="Teilen verwalten">🤝</button>
              {tab==='own'&&<button onClick={()=>delFile(file)} style={S.btn('#ff6b9d',true)} title="Löschen">
                <TrashIcon size={13} color="#ff6b9d"/>
              </button>}
            </> : null}
          </div>
        </div>
      ))}

      {!loading&&filtFolders.length===0&&filtFiles.length===0&&(
        <div style={{...S.card,textAlign:'center',padding:36}}>
          <div style={{fontSize:26,marginBottom:8}}>📂</div>
          <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:12}}>
            {search?'Keine Treffer.':tab==='own'?'Noch leer. Dateien hochladen oder ziehen.':'Noch nichts geteilt.'}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Datei-Einstellungen (Admin) ───────────────────────────────────────────────
export function DateiSettings({ toast }) {
  const [s, setS] = useState({file_max_size_mb:'50',file_max_count:'20',file_allowed_ext:'.pdf,.jpg,.jpeg,.png,.gif,.zip,.txt,.docx,.xlsx,.mp4,.stl,.3mf'});
  const [busy, setBusy] = useState(false);
  useEffect(()=>{ api('/tools/dateien/settings').then(setS).catch(()=>{}); },[]);
  const save = async()=>{
    setBusy(true);
    try { await api('/tools/dateien/settings',{method:'PUT',body:s}); toast('Gespeichert ✓'); }
    catch(e) { toast(e.message,'error'); } finally { setBusy(false); }
  };
  return (
    <div>
      <div style={{marginBottom:10}}>
        <label style={{...S.head,display:'block',marginBottom:4}}>MAX. DATEIGRÖSSE (MB)</label>
        <input type="number" value={s.file_max_size_mb} onChange={e=>setS(p=>({...p,file_max_size_mb:e.target.value}))} style={{...S.inp,fontSize:15}} min="1"/>
      </div>
      <div style={{marginBottom:10}}>
        <label style={{...S.head,display:'block',marginBottom:4}}>MAX. DATEIEN PRO BENUTZER</label>
        <input type="number" value={s.file_max_count} onChange={e=>setS(p=>({...p,file_max_count:e.target.value}))} style={{...S.inp,fontSize:15}} min="1"/>
      </div>
      <div style={{marginBottom:14}}>
        <label style={{...S.head,display:'block',marginBottom:4}}>ERLAUBTE ENDUNGEN (kommagetrennt)</label>
        <input value={s.file_allowed_ext} onChange={e=>setS(p=>({...p,file_allowed_ext:e.target.value}))} autoCapitalize="none" style={{...S.inp,fontSize:13}}/>
      </div>
      <button onClick={save} disabled={busy} style={{...S.btn('#4ecdc4'),width:'100%',textAlign:'center',padding:'10px 0'}}>
        {busy?'…':'✓ Speichern'}
      </button>
    </div>
  );
}