'use client';

/**
 * Backup Dashboard
 * Enterprise FinTech Platform — Backup & Restore System
 *
 * Super-Admin overview of the backup system: total backups, storage used,
 * breakdown by type/status, and quick actions (create manual backup).
 */

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { backupService } from '@/services/backup.service';
import type { BackupStatusResponse } from '@/types/backup.types';

export default function BackupDashboardPage() {
  const [status, setStatus] = useState<BackupStatusResponse['data'] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let active = true;
    backupService
      .getStatus()
      .then((res) => {
        if (active) setStatus(res);
      })
      .catch((err) => {
        if (active) setError(err?.response?.data?.message ?? 'Failed to load backup status');
      })
      .finally(() => {
        if (active) setLoading(false);
      });
    return () => {
      active = false;
    };
  }, []);

  const fmtBytes = (bytes: string) => {
    const n = Number(bytes);
    if (!n) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let i = 0;
    let v = n;
    while (v >= 1024 && i < units.length - 1) {
      v /= 1024;
      i++;
    }
    return `${v.toFixed(2)} ${units[i]}`;
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-100">Backup Dashboard</h1>
          <p className="text-sm text-slate-400">
            Enterprise backup & restore system overview
          </p>
        </div>
        <Link
          href="/super-admin/backup/manual-backup"
          className="rounded-lg bg-cyan-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cyan-500"
        >
          + Create Backup
        </Link>
      </div>

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

      {loading && <div className="text-slate-400">Loading backup status…</div>}

      {!loading && status && (
        <>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <StatCard label="Total Backups" value={String(status.total)} />
            <StatCard label="Storage Used" value={fmtBytes(status.totalSizeBytes)} />
            <StatCard label="Retention (Daily)" value={`${status.retention.dailyDays} days`} />
            <StatCard
              label="System Enabled"
              value={status.enabled ? 'Yes' : 'No'}
              accent={status.enabled ? 'text-emerald-400' : 'text-red-400'}
            />
          </div>

          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div className="rounded-xl border border-white/10 bg-white/5 p-5">
              <h3 className="mb-3 text-sm font-semibold text-slate-200">By Type</h3>
              {status.byType.length === 0 ? (
                <p className="text-sm text-slate-500">No backups yet</p>
              ) : (
                <ul className="space-y-2">
                  {status.byType.map((t) => (
                    <li key={t.type} className="flex justify-between text-sm">
                      <span className="text-slate-300 capitalize">{t.type.toLowerCase()}</span>
                      <span className="font-mono text-slate-200">{t._count}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div className="rounded-xl border border-white/10 bg-white/5 p-5">
              <h3 className="mb-3 text-sm font-semibold text-slate-200">By Status</h3>
              {status.byStatus.length === 0 ? (
                <p className="text-sm text-slate-500">No backups yet</p>
              ) : (
                <ul className="space-y-2">
                  {status.byStatus.map((s) => (
                    <li key={s.status} className="flex justify-between text-sm">
                      <span className="text-slate-300 capitalize">{s.status.toLowerCase()}</span>
                      <span className="font-mono text-slate-200">{s._count}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>

          <div className="flex flex-wrap gap-3">
            <QuickLink href="/super-admin/backup/history" label="View History" />
            <QuickLink href="/super-admin/backup/restore" label="Restore" />
            <QuickLink href="/super-admin/backup/verification" label="Verification" />
            <QuickLink href="/super-admin/backup/retention" label="Retention Settings" />
          </div>
        </>
      )}
    </div>
  );
}

function StatCard({ label, value, accent = 'text-slate-100' }: { label: string; value: string; accent?: string }) {
  return (
    <div className="rounded-xl border border-white/10 bg-white/5 p-5">
      <div className="text-xs uppercase tracking-wide text-slate-400">{label}</div>
      <div className={`mt-2 text-2xl font-bold ${accent}`}>{value}</div>
    </div>
  );
}

function QuickLink({ href, label }: { href: string; label: string }) {
  return (
    <Link
      href={href}
      className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200 hover:bg-white/10"
    >
      {label}
    </Link>
  );
}