'use client'

import { useEffect, useState, useRef, useCallback } from 'react'
import { FileText, Trash2, X, Share2, Users, Check, Download, Pencil, Globe } from 'lucide-react'

interface Doc {
  id: string
  filename: string
  display_name: string
  description_de: string | null
  description_en: string | null
  mime_type: string
  file_size: number
  uploaded_by: string
  created_at: string
  release_count: number
}

interface Release {
  id: string
  investor_id: string
  email: string
  name: string | null
  company: string | null
  released_at: string
  data_masked_at: string | null
}

interface Investor {
  id: string
  email: string
  name: string | null
  company: string | null
  status: string
  data_masked_at: string | null
}

interface InvestorUpload {
  id: string
  filename: string
  display_name: string
  description_de: string | null
  description_en: string | null
  mime_type: string
  file_size: number
  created_at: string
}

function fmt(bytes: number) {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

function LangToggle({ lang, onChange }: { lang: 'de' | 'en'; onChange: (l: 'de' | 'en') => void }) {
  return (
    <div className="flex rounded-lg overflow-hidden border border-white/10 text-xs shrink-0">
      {(['de', 'en'] as const).map(l => (
        <button key={l} onClick={() => onChange(l)}
          className={`px-2 py-1 uppercase transition-colors ${lang === l ? 'bg-indigo-500/30 text-indigo-300' : 'text-white/40 hover:text-white/70'}`}>
          {l}
        </button>
      ))}
    </div>
  )
}

export default function DataroomPage() {
  const [docs, setDocs] = useState<Doc[]>([])
  const [investors, setInvestors] = useState<Investor[]>([])
  const [selected, setSelected] = useState<Doc | null>(null)
  const [releases, setReleases] = useState<Release[]>([])
  const [dragging, setDragging] = useState(false)
  const [uploading, setUploading] = useState(false)
  const [busy, setBusy] = useState(false)
  const [toast, setToast] = useState<string | null>(null)
  const [tab, setTab] = useState<'documents' | 'uploads'>('documents')
  const [investorUploads, setInvestorUploads] = useState<Record<string, InvestorUpload[]>>({})
  const [descEdit, setDescEdit] = useState<{ text: string; lang: 'de' | 'en' } | null>(null)
  const [editingUpload, setEditingUpload] = useState<{ invId: string; uploadId: string; text: string; lang: 'de' | 'en' } | null>(null)
  const fileRef = useRef<HTMLInputElement>(null)

  function flash(msg: string) { setToast(msg); setTimeout(() => setToast(null), 3000) }

  async function loadDocs() {
    const r = await fetch('/api/admin/dataroom/documents')
    if (r.ok) setDocs((await r.json()).documents)
  }

  async function loadInvestors() {
    const r = await fetch('/api/admin/investors')
    if (r.ok) {
      const d = await r.json()
      setInvestors((d.investors || []).filter((i: Investor) => !i.data_masked_at && i.status !== 'revoked'))
    }
  }

  async function loadReleases(docId: string) {
    const r = await fetch(`/api/admin/dataroom/documents/${docId}/release`)
    if (r.ok) setReleases((await r.json()).releases)
  }

  async function loadInvestorUploads() {
    const results: Record<string, InvestorUpload[]> = {}
    for (const inv of investors) {
      const r = await fetch(`/api/admin/dataroom/investors/${inv.id}/uploads`)
      if (r.ok) results[inv.id] = (await r.json()).uploads
    }
    setInvestorUploads(results)
  }

  useEffect(() => { loadDocs(); loadInvestors() }, [])
  useEffect(() => { if (tab === 'uploads' && investors.length > 0) loadInvestorUploads() }, [tab, investors])

  async function selectDoc(doc: Doc) {
    setSelected(doc); setDescEdit(null)
    await loadReleases(doc.id)
  }

  async function uploadFiles(files: FileList | File[]) {
    const list = Array.from(files).filter(f => f.size > 0)
    if (!list.length) return
    setUploading(true)
    const fd = new FormData()
    list.forEach(f => fd.append('file', f))
    const r = await fetch('/api/admin/dataroom/documents', { method: 'POST', body: fd })
    setUploading(false)
    if (r.ok) { flash(`Uploaded ${list.length} file${list.length > 1 ? 's' : ''}`); loadDocs() }
    else { const d = await r.json().catch(() => ({})); flash(d.error || 'Upload failed') }
  }

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault(); setDragging(false)
    if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files)
  }, [])

  async function deleteDoc(id: string) {
    if (!confirm('Delete this document? All releases will be removed.')) return
    setBusy(true)
    const r = await fetch(`/api/admin/dataroom/documents/${id}`, { method: 'DELETE' })
    setBusy(false)
    if (r.ok) { flash('Deleted'); setSelected(null); loadDocs() }
    else flash('Delete failed')
  }

  async function toggleRelease(investorId: string, hasRelease: boolean) {
    if (!selected) return
    setBusy(true)
    if (hasRelease) {
      await fetch(`/api/admin/dataroom/documents/${selected.id}/release/${investorId}`, { method: 'DELETE' })
    } else {
      await fetch(`/api/admin/dataroom/documents/${selected.id}/release`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ investor_ids: [investorId] }),
      })
    }
    setBusy(false); await loadReleases(selected.id); loadDocs()
  }

  async function releaseAll() {
    if (!selected || investors.length === 0) return
    setBusy(true)
    await fetch(`/api/admin/dataroom/documents/${selected.id}/release`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ investor_ids: investors.map(i => i.id) }),
    })
    setBusy(false); await loadReleases(selected.id); loadDocs()
  }

  async function saveDescription() {
    if (!selected || !descEdit) return
    setBusy(true)
    const r = await fetch(`/api/admin/dataroom/documents/${selected.id}`, {
      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ description: descEdit.text || null, description_lang: descEdit.lang }),
    })
    setBusy(false)
    if (r.ok) {
      const updated = (await r.json()).document as Doc
      setDocs(prev => prev.map(d => d.id === updated.id ? { ...d, ...updated } : d))
      setSelected(prev => prev ? { ...prev, ...updated } : prev)
      setDescEdit(null); flash('Description saved & translated')
    } else flash('Save failed')
  }

  async function saveUploadDescription() {
    if (!editingUpload) return
    setBusy(true)
    const r = await fetch(`/api/admin/dataroom/investors/${editingUpload.invId}/uploads`, {
      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ upload_id: editingUpload.uploadId, description: editingUpload.text || null, description_lang: editingUpload.lang }),
    })
    setBusy(false)
    if (r.ok) {
      const updated = (await r.json()).upload as InvestorUpload
      setInvestorUploads(prev => ({
        ...prev,
        [editingUpload.invId]: (prev[editingUpload.invId] || []).map(u => u.id === updated.id ? updated : u),
      }))
      setEditingUpload(null); flash('Description saved & translated')
    } else flash('Save failed')
  }

  const releasedIds = new Set(releases.map(r => r.investor_id))
  const allInvestors = investors.filter(i => !i.data_masked_at)
  const investorsWithUploads = allInvestors.filter(i => (investorUploads[i.id] || []).length > 0)

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold text-white">Data Room</h1>
        <div className="flex gap-2">
          {(['documents', 'uploads'] as const).map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={`text-sm px-4 py-2 rounded-lg transition-colors ${tab === t ? 'bg-indigo-500/20 text-indigo-300' : 'text-white/50 hover:text-white/80'}`}>
              {t === 'documents' ? 'Documents' : 'Investor Uploads'}
            </button>
          ))}
        </div>
      </div>

      {tab === 'documents' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Drop zone + document list */}
          <div className="space-y-3">
            <div
              onDragOver={e => { e.preventDefault(); setDragging(true) }}
              onDragLeave={() => setDragging(false)}
              onDrop={handleDrop}
              onClick={() => fileRef.current?.click()}
              className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all select-none ${dragging ? 'border-indigo-400/60 bg-indigo-500/10' : 'border-white/[0.08] bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.03]'}`}
            >
              {uploading
                ? <p className="text-white/40 text-sm">Uploading…</p>
                : <>
                    <p className="text-white/50 text-sm font-medium">Drop files here</p>
                    <p className="text-white/25 text-xs mt-1">or click to browse · multiple files supported</p>
                  </>}
              <input ref={fileRef} type="file" multiple className="hidden" onChange={e => { if (e.target.files) uploadFiles(e.target.files); e.target.value = '' }} />
            </div>

            {docs.length > 0 && (
              <p className="text-xs text-white/30">{docs.length} document{docs.length !== 1 ? 's' : ''}</p>
            )}

            {docs.map(doc => (
              <button key={doc.id} onClick={() => selectDoc(doc)}
                className={`w-full text-left bg-white/[0.03] border rounded-xl p-4 transition-colors ${selected?.id === doc.id ? 'border-indigo-500/40 bg-indigo-500/5' : 'border-white/[0.06] hover:border-white/[0.12]'}`}>
                <div className="flex items-start gap-3">
                  <FileText className="w-5 h-5 text-indigo-400 mt-0.5 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-medium text-white truncate">{doc.display_name || doc.filename}</div>
                    <div className="text-xs text-white/40 mt-0.5">{fmt(doc.file_size)} · {new Date(doc.created_at).toLocaleDateString()}</div>
                    {(doc.description_en || doc.description_de) && (
                      <div className="text-xs text-white/30 mt-1 line-clamp-1">{doc.description_en || doc.description_de}</div>
                    )}
                  </div>
                  <span className="text-xs text-white/40 shrink-0">
                    {doc.release_count > 0 ? <span className="text-emerald-400">{doc.release_count} released</span> : 'not released'}
                  </span>
                </div>
              </button>
            ))}
          </div>

          {/* Detail panel */}
          {selected ? (
            <div className="bg-white/[0.04] border border-white/[0.06] rounded-2xl p-5 space-y-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="text-sm font-semibold text-white">{selected.display_name || selected.filename}</div>
                  <div className="text-xs text-white/40 mt-0.5">{fmt(selected.file_size)} · {selected.mime_type}</div>
                </div>
                <div className="flex gap-2 shrink-0">
                  <button onClick={releaseAll} disabled={busy || allInvestors.length === 0}
                    className="text-xs bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-300 px-3 py-1.5 rounded-lg flex items-center gap-1.5 disabled:opacity-40">
                    <Share2 className="w-3.5 h-3.5" /> Release all
                  </button>
                  <button onClick={() => deleteDoc(selected.id)} disabled={busy}
                    className="text-xs bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 px-3 py-1.5 rounded-lg flex items-center gap-1.5 disabled:opacity-40">
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                  <button onClick={() => setSelected(null)} className="text-white/40 hover:text-white/80">
                    <X className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Description editor */}
              <div className="border-t border-white/[0.06] pt-4">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Globe className="w-3.5 h-3.5 text-white/30" />
                    <span className="text-xs font-semibold text-white/50 uppercase tracking-wider">Description</span>
                  </div>
                  {!descEdit && (
                    <button onClick={() => setDescEdit({ text: selected.description_en || selected.description_de || '', lang: selected.description_en ? 'en' : 'de' })}
                      className="text-xs text-white/30 hover:text-white/60 flex items-center gap-1">
                      <Pencil className="w-3 h-3" /> Edit
                    </button>
                  )}
                </div>
                {descEdit ? (
                  <div className="space-y-2">
                    <div className="flex gap-2 items-start">
                      <textarea
                        value={descEdit.text}
                        onChange={e => setDescEdit(d => d ? { ...d, text: e.target.value } : d)}
                        rows={3}
                        placeholder="Enter description…"
                        className="flex-1 bg-white/[0.04] border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/20 resize-none focus:outline-none focus:border-indigo-500/40"
                      />
                      <LangToggle lang={descEdit.lang} onChange={l => setDescEdit(d => d ? { ...d, lang: l } : d)} />
                    </div>
                    <div className="flex gap-2">
                      <button onClick={saveDescription} disabled={busy}
                        className="text-xs bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-300 px-3 py-1.5 rounded-lg disabled:opacity-40">
                        Save & translate
                      </button>
                      <button onClick={() => setDescEdit(null)} className="text-xs text-white/30 hover:text-white/60 px-3 py-1.5">Cancel</button>
                    </div>
                  </div>
                ) : (selected.description_en || selected.description_de) ? (
                  <div className="space-y-1.5">
                    {selected.description_de && <p className="text-xs text-white/40 leading-relaxed"><span className="text-white/20 uppercase text-[10px] mr-1">DE</span>{selected.description_de}</p>}
                    {selected.description_en && <p className="text-xs text-white/40 leading-relaxed"><span className="text-white/20 uppercase text-[10px] mr-1">EN</span>{selected.description_en}</p>}
                  </div>
                ) : (
                  <p className="text-xs text-white/20">No description yet.</p>
                )}
              </div>

              {/* Investor access */}
              <div className="border-t border-white/[0.06] pt-4">
                <div className="flex items-center gap-2 mb-3">
                  <Users className="w-4 h-4 text-white/40" />
                  <span className="text-xs font-semibold text-white/60 uppercase tracking-wider">Investor Access</span>
                </div>
                {allInvestors.length === 0 && <p className="text-xs text-white/30">No active investors yet.</p>}
                <div className="space-y-2">
                  {allInvestors.map(inv => {
                    const has = releasedIds.has(inv.id)
                    return (
                      <button key={inv.id} onClick={() => toggleRelease(inv.id, has)} disabled={busy}
                        className="w-full flex items-center gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors disabled:opacity-50">
                        <div className={`w-5 h-5 rounded border flex items-center justify-center shrink-0 ${has ? 'bg-emerald-500 border-emerald-500' : 'border-white/20'}`}>
                          {has && <Check className="w-3 h-3 text-white" />}
                        </div>
                        <div className="text-left min-w-0 flex-1">
                          <div className="text-sm text-white truncate">{inv.name || inv.email}</div>
                          {inv.company && <div className="text-xs text-white/40 truncate">{inv.company}</div>}
                        </div>
                        {has && (
                          <span className="text-[10px] text-emerald-400 shrink-0">
                            {releases.find(r => r.investor_id === inv.id) ? new Date(releases.find(r => r.investor_id === inv.id)!.released_at).toLocaleDateString() : ''}
                          </span>
                        )}
                      </button>
                    )
                  })}
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-white/[0.02] border border-dashed border-white/[0.06] rounded-2xl p-10 flex items-center justify-center text-white/20 text-sm">
              Select a document to manage releases
            </div>
          )}
        </div>
      )}

      {tab === 'uploads' && (
        <div className="space-y-4">
          {investorsWithUploads.length === 0 && (
            <div className="bg-white/[0.03] border border-dashed border-white/10 rounded-xl p-10 text-center text-white/30 text-sm">
              No investor uploads yet.
            </div>
          )}
          {allInvestors.map(inv => {
            const uploads = investorUploads[inv.id] || []
            if (uploads.length === 0) return null
            return (
              <div key={inv.id} className="bg-white/[0.04] border border-white/[0.06] rounded-2xl p-5">
                <div className="flex items-center gap-2 mb-3">
                  <span className="text-sm font-semibold text-white">{inv.name || inv.email}</span>
                  {inv.company && <span className="text-xs text-white/40">{inv.company}</span>}
                  <span className="ml-auto text-xs text-white/40">{uploads.length} file{uploads.length !== 1 ? 's' : ''}</span>
                </div>
                <div className="space-y-2">
                  {uploads.map(u => {
                    const isEditing = editingUpload?.uploadId === u.id
                    return (
                      <div key={u.id} className="bg-white/[0.03] rounded-lg p-3 space-y-2">
                        <div className="flex items-center gap-3">
                          <FileText className="w-4 h-4 text-white/40 shrink-0" />
                          <div className="min-w-0 flex-1">
                            <div className="text-sm text-white truncate">{u.display_name || u.filename}</div>
                            <div className="text-xs text-white/40">{fmt(u.file_size)} · {new Date(u.created_at).toLocaleString()}</div>
                          </div>
                          <div className="flex items-center gap-2 shrink-0">
                            <button onClick={() => isEditing ? setEditingUpload(null) : setEditingUpload({ invId: inv.id, uploadId: u.id, text: u.description_en || u.description_de || '', lang: u.description_en ? 'en' : 'de' })}
                              className="text-xs text-white/30 hover:text-white/60 flex items-center gap-1">
                              <Pencil className="w-3 h-3" />
                            </button>
                            <a href={`/api/admin/dataroom/investors/${inv.id}/uploads?download=${u.id}`} download
                              className="text-xs bg-white/[0.06] hover:bg-white/[0.1] text-white/70 px-3 py-1.5 rounded-lg flex items-center gap-1.5">
                              <Download className="w-3.5 h-3.5" />
                            </a>
                          </div>
                        </div>
                        {(u.description_de || u.description_en) && !isEditing && (
                          <div className="pl-7 space-y-1">
                            {u.description_de && <p className="text-xs text-white/30"><span className="text-white/15 uppercase text-[10px] mr-1">DE</span>{u.description_de}</p>}
                            {u.description_en && <p className="text-xs text-white/30"><span className="text-white/15 uppercase text-[10px] mr-1">EN</span>{u.description_en}</p>}
                          </div>
                        )}
                        {isEditing && editingUpload && (
                          <div className="pl-7 space-y-2">
                            <div className="flex gap-2 items-start">
                              <textarea value={editingUpload.text} onChange={e => setEditingUpload(d => d ? { ...d, text: e.target.value } : d)}
                                rows={2} placeholder="Description…"
                                className="flex-1 bg-white/[0.04] border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/20 resize-none focus:outline-none focus:border-indigo-500/40" />
                              <LangToggle lang={editingUpload.lang} onChange={l => setEditingUpload(d => d ? { ...d, lang: l } : d)} />
                            </div>
                            <div className="flex gap-2">
                              <button onClick={saveUploadDescription} disabled={busy}
                                className="text-xs bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-300 px-3 py-1.5 rounded-lg disabled:opacity-40">
                                Save & translate
                              </button>
                              <button onClick={() => setEditingUpload(null)} className="text-xs text-white/30 hover:text-white/60 px-2">Cancel</button>
                            </div>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
      )}

      {toast && (
        <div className="fixed bottom-6 right-6 bg-indigo-500/20 border border-indigo-500/40 text-indigo-200 text-sm px-4 py-2 rounded-lg backdrop-blur-sm z-50">
          {toast}
        </div>
      )}
    </div>
  )
}
