import React, { useState, useRef } from 'react'
import api from '../api.js'
import {
  Download, Upload, Database, AlertTriangle, Check,
  RefreshCw, FileJson, ShieldAlert, Info
} from 'lucide-react'

export default function Maintenance() {
  const [exporting, setExporting] = useState(false)
  const [importing, setImporting] = useState(false)
  const [importMode, setImportMode] = useState('merge')
  const [selectedFile, setSelectedFile] = useState(null)
  const [previewData, setPreviewData] = useState(null)
  const [previewError, setPreviewError] = useState('')
  const [result, setResult] = useState(null)
  const [error, setError] = useState('')
  const fileRef = useRef()

  // --- Export ---
  const handleExport = async () => {
    setExporting(true)
    setError('')
    try {
      const { data } = await api.get('/maintenance/backup', { responseType: 'blob' })
      const url = URL.createObjectURL(new Blob([data], { type: 'application/json' }))
      const a = document.createElement('a')
      a.href = url
      a.download = `backup-${new Date().toISOString().split('T')[0]}.json`
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      setError('Export failed. Please try again.')
    } finally {
      setExporting(false)
    }
  }

  // --- File selection & preview ---
  const handleFileChange = (e) => {
    const file = e.target.files[0]
    setSelectedFile(file || null)
    setPreviewData(null)
    setPreviewError('')
    setResult(null)
    setError('')

    if (!file) return

    const reader = new FileReader()
    reader.onload = (ev) => {
      try {
        const parsed = JSON.parse(ev.target.result)
        if (!parsed.fields || !parsed.contracts) {
          setPreviewError('Invalid backup file: missing fields or contracts data.')
          return
        }
        setPreviewData(parsed)
      } catch {
        setPreviewError('Could not parse file — make sure it is a valid JSON backup.')
      }
    }
    reader.readAsText(file)
  }

  // --- Import ---
  const handleImport = async () => {
    if (!selectedFile || !previewData) return
    setImporting(true)
    setError('')
    setResult(null)

    const formData = new FormData()
    formData.append('backup', selectedFile)
    formData.append('mode', importMode)

    try {
      const { data } = await api.post('/maintenance/restore', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      setResult(data)
      setSelectedFile(null)
      setPreviewData(null)
      if (fileRef.current) fileRef.current.value = ''
    } catch (err) {
      setError(err.response?.data?.error || 'Import failed. Please try again.')
    } finally {
      setImporting(false)
    }
  }

  const clearFile = () => {
    setSelectedFile(null)
    setPreviewData(null)
    setPreviewError('')
    setResult(null)
    setError('')
    if (fileRef.current) fileRef.current.value = ''
  }

  return (
    <div className="max-w-3xl">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-white">Maintenance</h2>
        <p className="text-slate-400 text-sm mt-1">Export and import backups of your contracts and field definitions</p>
      </div>

      {/* Success result */}
      {result && (
        <div className="bg-green-500/10 border border-green-500/30 rounded-xl p-4 mb-6 flex items-start gap-3">
          <Check size={20} className="text-green-400 flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-green-300 font-semibold">Restore completed successfully</p>
            <p className="text-green-400/80 text-sm mt-1">
              {result.fields_restored} field{result.fields_restored !== 1 ? 's' : ''} restored · {result.contracts_imported} contract{result.contracts_imported !== 1 ? 's' : ''} imported · Mode: <span className="capitalize">{result.mode}</span>
            </p>
          </div>
        </div>
      )}

      {/* Global error */}
      {error && (
        <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-6 flex items-start gap-3">
          <AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
          <p className="text-red-400 text-sm">{error}</p>
        </div>
      )}

      {/* Export section */}
      <div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 mb-5">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center">
            <Download size={20} className="text-indigo-400" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">Export Backup</h3>
            <p className="text-slate-400 text-sm">Download a full JSON backup of all contracts and field definitions</p>
          </div>
        </div>

        <div className="bg-slate-800/60 rounded-xl p-4 mb-5 flex items-start gap-3">
          <Info size={15} className="text-slate-400 flex-shrink-0 mt-0.5" />
          <p className="text-slate-400 text-sm">
            The backup file includes all field definitions and every contract record. It does <strong className="text-slate-300">not</strong> include user accounts or passwords.
          </p>
        </div>

        <button
          onClick={handleExport}
          disabled={exporting}
          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
        >
          {exporting ? <RefreshCw size={16} className="animate-spin" /> : <Download size={16} />}
          {exporting ? 'Exporting...' : 'Download Backup'}
        </button>
      </div>

      {/* Import section */}
      <div className="bg-slate-900 rounded-2xl border border-slate-800 p-6">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-amber-500/20 rounded-xl flex items-center justify-center">
            <Upload size={20} className="text-amber-400" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">Import Backup</h3>
            <p className="text-slate-400 text-sm">Restore data from a previously exported backup file</p>
          </div>
        </div>

        {/* Import mode */}
        <div className="mb-5">
          <label className="block text-sm font-medium text-slate-400 mb-2">Import Mode</label>
          <div className="grid grid-cols-2 gap-3">
            <button
              type="button"
              onClick={() => setImportMode('merge')}
              className={`text-left p-4 rounded-xl border transition ${
                importMode === 'merge'
                  ? 'border-indigo-500 bg-indigo-500/10'
                  : 'border-slate-700 hover:border-slate-600'
              }`}
            >
              <p className={`text-sm font-semibold mb-1 ${importMode === 'merge' ? 'text-indigo-400' : 'text-white'}`}>
                Merge
              </p>
              <p className="text-xs text-slate-400">Add backup records to existing data. Existing field definitions are updated if the key matches. Contracts are always appended.</p>
            </button>
            <button
              type="button"
              onClick={() => setImportMode('replace')}
              className={`text-left p-4 rounded-xl border transition ${
                importMode === 'replace'
                  ? 'border-red-500 bg-red-500/10'
                  : 'border-slate-700 hover:border-slate-600'
              }`}
            >
              <p className={`text-sm font-semibold mb-1 ${importMode === 'replace' ? 'text-red-400' : 'text-white'}`}>
                Replace
              </p>
              <p className="text-xs text-slate-400">Delete all existing contracts and fields before importing. This cannot be undone.</p>
            </button>
          </div>
        </div>

        {/* Replace warning */}
        {importMode === 'replace' && (
          <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-5 flex items-start gap-3">
            <ShieldAlert size={18} className="text-red-400 flex-shrink-0 mt-0.5" />
            <p className="text-red-400 text-sm">
              <strong>Warning:</strong> Replace mode will permanently delete ALL existing contracts and field definitions before importing. This action cannot be undone.
            </p>
          </div>
        )}

        {/* File upload */}
        <div className="mb-5">
          <label className="block text-sm font-medium text-slate-400 mb-2">Backup File</label>
          <div
            onClick={() => fileRef.current?.click()}
            className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition ${
              selectedFile
                ? 'border-indigo-500/50 bg-indigo-500/5'
                : 'border-slate-700 hover:border-slate-600 hover:bg-slate-800/30'
            }`}
          >
            <input
              type="file"
              accept=".json,application/json"
              ref={fileRef}
              onChange={handleFileChange}
              className="hidden"
            />
            {selectedFile ? (
              <div className="flex items-center justify-center gap-3">
                <FileJson size={24} className="text-indigo-400" />
                <div className="text-left">
                  <p className="text-white text-sm font-medium">{selectedFile.name}</p>
                  <p className="text-slate-400 text-xs">{(selectedFile.size / 1024).toFixed(1)} KB</p>
                </div>
              </div>
            ) : (
              <div>
                <FileJson size={32} className="text-slate-600 mx-auto mb-2" />
                <p className="text-slate-400 text-sm">Click to select a <strong className="text-slate-300">.json</strong> backup file</p>
              </div>
            )}
          </div>

          {previewError && (
            <div className="mt-3 bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 flex items-center gap-2">
              <AlertTriangle size={14} className="text-red-400" />
              <p className="text-red-400 text-sm">{previewError}</p>
            </div>
          )}
        </div>

        {/* Preview */}
        {previewData && (
          <div className="mb-5 bg-slate-800/60 rounded-xl p-4 border border-slate-700">
            <p className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
              <Database size={14} className="text-slate-400" />Backup Preview
            </p>
            <div className="grid grid-cols-2 gap-3 text-sm">
              {[
                { label: 'Exported', value: previewData.exported_at ? new Date(previewData.exported_at).toLocaleString() : 'Unknown' },
                { label: 'Exported by', value: previewData.exported_by || 'Unknown' },
                { label: 'Fields', value: `${previewData.fields.length} field definition${previewData.fields.length !== 1 ? 's' : ''}` },
                { label: 'Contracts', value: `${previewData.contracts.length} record${previewData.contracts.length !== 1 ? 's' : ''}` },
              ].map(({ label, value }) => (
                <div key={label} className="bg-slate-800 rounded-lg px-3 py-2.5">
                  <p className="text-xs text-slate-500 mb-0.5">{label}</p>
                  <p className="text-slate-200 text-sm font-medium">{value}</p>
                </div>
              ))}
            </div>

            {previewData.fields.length > 0 && (
              <div className="mt-3">
                <p className="text-xs text-slate-500 mb-1.5">Fields in backup:</p>
                <div className="flex flex-wrap gap-1.5">
                  {previewData.fields.map(f => (
                    <span key={f.field_key} className="text-xs bg-slate-700 text-slate-300 px-2.5 py-1 rounded-full">
                      {f.label}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        <div className="flex gap-3">
          {selectedFile && (
            <button
              type="button"
              onClick={clearFile}
              className="px-4 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium"
            >
              Clear
            </button>
          )}
          <button
            onClick={handleImport}
            disabled={importing || !previewData}
            className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition disabled:opacity-50 ${
              importMode === 'replace'
                ? 'bg-red-600/80 hover:bg-red-600 text-white'
                : 'bg-amber-600/80 hover:bg-amber-600 text-white'
            }`}
          >
            {importing ? <RefreshCw size={16} className="animate-spin" /> : <Upload size={16} />}
            {importing ? 'Importing...' : importMode === 'replace' ? 'Replace & Import' : 'Merge & Import'}
          </button>
        </div>
      </div>
    </div>
  )
}