'use client'

import { useRef, useState, type ChangeEvent } from 'react'
import { exportLeadBackup, importLeadBackup } from '@/lib/leads/api'
import type { LeadExportResponse, LeadImportPayload } from '@/lib/types'

interface LeadBackupPanelProps {
  onImported: () => Promise<void> | void
  onClose: () => void
}

function downloadFile(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}

function parseImportPayload(raw: string): LeadImportPayload {
  const parsed = JSON.parse(raw) as Partial<LeadExportResponse>

  if (parsed && parsed.format === 'json_backup' && Array.isArray(parsed.leads)) {
    return { leads: parsed.leads }
  }

  throw new Error('Import expects a JSON backup object exported from the full backup flow')
}

export default function LeadBackupPanel({ onImported, onClose }: LeadBackupPanelProps) {
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const [rawJson, setRawJson] = useState('')
  const [filename, setFilename] = useState('')
  const [isExportingJson, setIsExportingJson] = useState(false)
  const [isExportingCsv, setIsExportingCsv] = useState(false)
  const [isImporting, setIsImporting] = useState(false)
  const [message, setMessage] = useState('')
  const [error, setError] = useState('')

  const handleExportJson = async () => {
    setIsExportingJson(true)
    setError('')
    setMessage('')

    try {
      const backup = await exportLeadBackup('json') as LeadExportResponse
      const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' })
      downloadFile(blob, `mspacez-leads-backup-${backup.exported_at.slice(0, 10)}.json`)
      setMessage(`Exported ${backup.leads.length} leads to JSON backup.`)
    } catch (exportError) {
      setError(exportError instanceof Error ? exportError.message : 'JSON export failed')
    } finally {
      setIsExportingJson(false)
    }
  }

  const handleExportCsv = async () => {
    setIsExportingCsv(true)
    setError('')
    setMessage('')

    try {
      const blob = await exportLeadBackup('csv') as Blob
      downloadFile(blob, `mspacez-leads-report-${new Date().toISOString().slice(0, 10)}.csv`)
      setMessage('Exported the current lead library to CSV reporting format. Use JSON for backup and restore.')
    } catch (exportError) {
      setError(exportError instanceof Error ? exportError.message : 'CSV export failed')
    } finally {
      setIsExportingCsv(false)
    }
  }

  const handleImport = async () => {
    setIsImporting(true)
    setError('')
    setMessage('')

    try {
      const payload = parseImportPayload(rawJson)
      const result = await importLeadBackup(payload)
      await onImported()
      setMessage(`Import complete: ${result.imported} imported, ${result.skipped} skipped.${result.errors.length ? ` ${result.errors.length} errors logged below.` : ''}`)
      if (result.errors.length > 0) {
        setError(result.errors.join('\n'))
      } else {
        setRawJson('')
        setFilename('')
      }
    } catch (importError) {
      setError(importError instanceof Error ? importError.message : 'Import failed')
    } finally {
      setIsImporting(false)
    }
  }

  const handleFileSelect = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    const text = await file.text()
    setFilename(file.name)
    setRawJson(text)
    setError('')
    setMessage(`Loaded ${file.name}. Review the JSON and import when ready.`)
  }

  return (
    <div className="mx-6 mt-4 rounded-2xl border border-[#574143]/10 bg-[#060e20] p-5">
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Lead Backup & Restore</p>
          <h3 className="mt-1 text-lg font-extrabold text-slate-100">Export or restore the shared lead library</h3>
          <p className="mt-1 text-xs leading-relaxed text-slate-400">
            JSON backups preserve the full lead payload for reimport. CSV is reporting-only and should not be treated as a survivability format.
          </p>
        </div>
        <button
          type="button"
          onClick={onClose}
          className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-xs font-bold text-slate-300 transition-colors hover:text-white"
        >
          Close
        </button>
      </div>

      <div className="mt-5 grid gap-4 lg:grid-cols-[0.9fr,1.1fr]">
        <div className="space-y-4">
          <div className="rounded-2xl border border-[#574143]/10 bg-[#131b2e] p-4">
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Export</p>
            <p className="mt-2 text-xs leading-relaxed text-slate-400">
              JSON is the true backup format. CSV stays available only for flat reporting and spreadsheet review.
            </p>
            <div className="mt-3 flex flex-wrap gap-3">
              <button
                type="button"
                onClick={handleExportJson}
                disabled={isExportingJson}
                className="rounded-xl bg-[#dae2fd] px-4 py-3 text-sm font-black text-[#0b1326] transition hover:opacity-90 disabled:opacity-40"
              >
                {isExportingJson ? 'Exporting JSON...' : 'Export JSON Backup'}
              </button>
              <button
                type="button"
                onClick={handleExportCsv}
                disabled={isExportingCsv}
                className="rounded-xl border border-[#574143]/10 bg-[#0b1326] px-4 py-3 text-sm font-bold text-slate-200 transition hover:text-white disabled:opacity-40"
              >
                {isExportingCsv ? 'Exporting CSV...' : 'Export CSV'}
              </button>
            </div>
          </div>

          <div className="rounded-2xl border border-[#574143]/10 bg-[#131b2e] p-4">
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Load Backup File</p>
            <p className="mt-2 text-xs leading-relaxed text-slate-400">
              Upload a previous JSON backup export or paste the backup body directly.
            </p>
            <div className="mt-3 flex flex-wrap items-center gap-3">
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className="rounded-xl border border-[#574143]/10 bg-[#0b1326] px-4 py-3 text-sm font-bold text-slate-200 transition hover:text-white"
              >
                Choose JSON File
              </button>
              {filename && <span className="text-xs text-slate-500">{filename}</span>}
            </div>
            <input
              ref={fileInputRef}
              type="file"
              accept="application/json,.json"
              onChange={handleFileSelect}
              className="hidden"
            />
          </div>
        </div>

        <div className="rounded-2xl border border-[#574143]/10 bg-[#131b2e] p-4">
          <div className="flex items-center justify-between gap-3">
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Import JSON</p>
            <button
              type="button"
              onClick={handleImport}
              disabled={isImporting || !rawJson.trim()}
              className="rounded-xl bg-[#ffb2b9] px-4 py-2.5 text-sm font-black text-[#390512] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {isImporting ? 'Importing...' : 'Import Leads'}
            </button>
          </div>

          <textarea
            rows={14}
            value={rawJson}
            onChange={event => setRawJson(event.target.value)}
            placeholder='Paste a JSON backup object like {"exported_at":"...","version":"2.2","leads":[...]}'
            className="mt-3 w-full rounded-xl border border-[#574143]/10 bg-[#0b1326] px-3 py-3 font-mono text-[11px] text-[#dae2fd] outline-none transition focus:border-[#ffb2b9]/30 focus:ring-1 focus:ring-[#ffb2b9]/40"
          />

          {message && (
            <div className="mt-3 rounded-xl border border-[#22c55e]/20 bg-[#22c55e]/10 px-4 py-3 text-sm text-[#9fe8c4]">
              {message}
            </div>
          )}

          {error && (
            <pre className="mt-3 whitespace-pre-wrap rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-xs leading-relaxed text-red-300">
              {error}
            </pre>
          )}
        </div>
      </div>
    </div>
  )
}