'use client';

/**
 * Verification
 * Enterprise FinTech Platform — Backup & Restore System
 *
 * Super-Admin page to verify a specific backup's integrity (file exists,
 * SHA-256 checksum matches, decryptable). Displays the verification result.
 */

import { useState } from 'react';
import { backupService } from '@/services/backup.service';
import type { BackupVerificationItem } from '@/types/backup.types';

export default function VerificationPage() {
  const [backupId, setBackupId] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<BackupVerificationItem | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!backupId.trim()) {
      setError('Backup ID is required');
      return;
    }
    setLoading(true);
    setError(null);
    setResult(null);
    try {
      const res = await backupService.verifyBackup(backupId.trim());
      setResult(res);
    } catch (err: any) {
      setError(err?.response?.data?.message ?? 'Verification failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl space-y-6 p-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-100">Backup Verification</h1>
        <p className="text-sm text-slate-400">
          Verify a backup&apos;s integrity: file existence, SHA-256 checksum,
          and decryption sanity check.
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-5 rounded-xl border border-white/10 bg-white/5 p-6">
        <div>
          <label className="mb-1 block text-sm text-slate-300">Backup ID</label>
          <input
            type="text"
            value={backupId}
            onChange={(e) => setBackupId(e.target.value)}
            placeholder="Backup ID"
            className="w-full rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm text-slate-100"
          />
        </div>

        {error && (
          <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-300">
            {error}
          </div>
        )}

        <button
          type="submit"
          disabled={loading}
          className="rounded-lg bg-cyan-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cyan-500 disabled:opacity-50"
        >
          {loading ? 'Verifying…' : 'Verify Backup'}
        </button>
      </form>

      {result && (
        <div className="rounded-xl border border-white/10 bg-white/5 p-6">
          <h3 className="mb-4 text-sm font-semibold text-slate-200">Verification Result</h3>
          <dl className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
            <Field label="Status" value={result.status} />
            <Field label="File Exists" value={result.fileExists ? 'Yes' : 'No'} />
            <Field label="Checksum Matched" value={result.checksumMatched ? 'Yes' : result.checksumMatched === false ? 'No' : 'N/A'} />
            <Field label="Can Decrypt" value={result.canDecrypt ? 'Yes' : result.canDecrypt === false ? 'No' : 'N/A'} />
            <Field label="Checksum" value={result.expectedChecksum?.slice(0, 24) + '…'} />
            <Field label="Verified At" value={result.verifiedAt ? new Date(result.verifiedAt).toLocaleString() : '—'} />
            {result.errorMessage && (
              <div className="sm:col-span-2 rounded bg-red-500/10 p-2 text-red-300">
                {result.errorMessage}
              </div>
            )}
          </dl>
        </div>
      )}
    </div>
  );
}

function Field({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-xs uppercase tracking-wide text-slate-500">{label}</dt>
      <dd className="mt-1 font-mono text-slate-200 break-all">{value}</dd>
    </div>
  );
}