'use client'

import { useEffect, useState, useRef } from 'react'
import { FileText, Download, Upload, Eye, LogOut } from 'lucide-react'

interface Doc {
  id: string
  filename: string
  display_name: string | null
  mime_type: string
  file_size: number
  released_at: string
}

interface MyUpload {
  id: string
  filename: string
  display_name: 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 isPDF(mime: string) {
  return mime === 'application/pdf'
}

export default function DataroomPage() {
  const [docs, setDocs] = useState<Doc[]>([])
  const [uploads, setUploads] = useState<MyUpload[]>([])
  const [uploading, setUploading] = useState(false)
  const [toast, setToast] = useState<string | null>(null)
  const fileRef = useRef<HTMLInputElement>(null)

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

  async function loadAll() {
    const [dr, ur] = await Promise.all([
      fetch('/api/dataroom/documents'),
      fetch('/api/dataroom/uploads'),
    ])
    if (dr.ok) setDocs((await dr.json()).documents)
    if (ur.ok) setUploads((await ur.json()).uploads)
  }

  useEffect(() => { loadAll() }, [])

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    const fd = new FormData()
    fd.append('file', file)
    const r = await fetch('/api/dataroom/uploads', { method: 'POST', body: fd })
    setUploading(false)
    if (r.ok) { flash('File uploaded successfully'); loadAll() }
    else {
      const d = await r.json().catch(() => ({}))
      flash(d.error || 'Upload failed')
    }
    e.target.value = ''
  }

  return (
    <div className="min-h-screen bg-[#0a0a1a] text-white">
      {/* Header */}
      <div className="border-b border-white/[0.06] px-6 py-4 flex items-center justify-between">
        <div>
          <h1 className="text-lg font-semibold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
            Data Room
          </h1>
          <p className="text-xs text-white/30 mt-0.5">BreakPilot ComplAI · Investor Portal</p>
        </div>
        <div className="flex items-center gap-3">
          <a href="/" className="text-xs text-white/40 hover:text-white/70 transition-colors">← Back to pitch</a>
          <a href="/api/auth/logout" className="text-xs text-white/40 hover:text-white/70 transition-colors flex items-center gap-1.5">
            <LogOut className="w-3.5 h-3.5" /> Sign out
          </a>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-6 py-10 space-y-10">

        {/* Released documents */}
        <section>
          <h2 className="text-sm font-semibold text-white/60 uppercase tracking-wider mb-4">Documents</h2>
          {docs.length === 0 ? (
            <div className="bg-white/[0.02] border border-dashed border-white/[0.08] rounded-2xl p-12 text-center">
              <FileText className="w-8 h-8 text-white/20 mx-auto mb-3" />
              <p className="text-white/30 text-sm">No documents have been shared with you yet.</p>
            </div>
          ) : (
            <div className="space-y-3">
              {docs.map(doc => (
                <div key={doc.id} className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 flex items-center gap-4">
                  <div className="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center shrink-0">
                    <FileText className="w-5 h-5 text-indigo-400" />
                  </div>
                  <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)} · Released {new Date(doc.released_at).toLocaleDateString()}
                    </div>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    {isPDF(doc.mime_type) && (
                      <a
                        href={`/api/dataroom/documents/${doc.id}/download?preview=1`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="bg-white/[0.06] hover:bg-white/[0.1] text-white/70 text-xs px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
                      >
                        <Eye className="w-3.5 h-3.5" /> Preview
                      </a>
                    )}
                    <a
                      href={`/api/dataroom/documents/${doc.id}/download`}
                      className="bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-300 text-xs px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
                      download
                    >
                      <Download className="w-3.5 h-3.5" /> Download
                    </a>
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>

        {/* Upload section */}
        <section>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-sm font-semibold text-white/60 uppercase tracking-wider">Your Documents</h2>
            <button
              onClick={() => fileRef.current?.click()}
              disabled={uploading}
              className="bg-indigo-500 hover:bg-indigo-600 disabled:opacity-50 text-white text-sm px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
            >
              <Upload className="w-4 h-4" />
              {uploading ? 'Uploading…' : 'Send document'}
            </button>
            <input ref={fileRef} type="file" className="hidden" onChange={handleUpload} />
          </div>

          <p className="text-xs text-white/30 mb-4">
            Upload documents you want to share with us — NDAs, term sheets, financial statements, or any other relevant files.
          </p>

          {uploads.length === 0 ? (
            <div className="bg-white/[0.02] border border-dashed border-white/[0.08] rounded-2xl p-10 text-center">
              <Upload className="w-7 h-7 text-white/20 mx-auto mb-3" />
              <p className="text-white/30 text-sm">No files uploaded yet.</p>
            </div>
          ) : (
            <div className="space-y-2">
              {uploads.map(u => (
                <div key={u.id} className="bg-white/[0.03] border border-white/[0.05] rounded-xl p-4 flex items-center gap-3">
                  <FileText className="w-4 h-4 text-white/30 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <div className="text-sm text-white/80 truncate">{u.display_name || u.filename}</div>
                    <div className="text-xs text-white/30 mt-0.5">{fmt(u.file_size)} · {new Date(u.created_at).toLocaleString()}</div>
                  </div>
                  <span className="text-xs text-emerald-400/70 shrink-0">Received</span>
                </div>
              ))}
            </div>
          )}
        </section>
      </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>
  )
}