"use client";

import React, { useState, useEffect } from "react";
import {
  Wifi,
  WifiOff,
  Database,
  Trash2,
  RefreshCw,
  CheckCircle2,
  AlertTriangle,
  RotateCcw,
  ShieldCheck,
  FileText,
  Clock,
} from "lucide-react";
import { toast } from "sonner";
import { draftService } from "@/lib/draft-service";
import { LocalDraftSession } from "@/types/attendance";

interface StoredDraftSummary {
  key: string;
  sessionId: string;
  savedAt: string;
  version: number;
  marksCount: number;
  remarksCount: number;
  isExpired: boolean;
}

export default function DraftRecoveryDiagnosticPage() {
  const [isOnline, setIsOnline] = useState<boolean>(true);
  const [storedDrafts, setStoredDrafts] = useState<StoredDraftSummary[]>([]);
  const [simulatedNetwork, setSimulatedNetwork] = useState<"ONLINE" | "OFFLINE">("ONLINE");
  const [activeDraftDetail, setActiveDraftDetail] = useState<LocalDraftSession | null>(null);

  // Scan localStorage for draft_session_*
  const refreshDraftsList = () => {
    if (typeof window === "undefined") return;

    const list: StoredDraftSummary[] = [];
    const now = Date.now();
    const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key && key.startsWith("draft_session_")) {
        try {
          const raw = localStorage.getItem(key);
          if (raw) {
            const parsed = JSON.parse(raw);
            const savedTime = new Date(parsed.savedAt).getTime();
            list.push({
              key,
              sessionId: parsed.sessionId || key.replace("draft_session_", ""),
              savedAt: new Date(parsed.savedAt).toLocaleString(),
              version: parsed.version || 1,
              marksCount: Object.keys(parsed.marks || {}).length,
              remarksCount: Object.keys(parsed.remarks || {}).length,
              isExpired: now - savedTime > SEVEN_DAYS_MS,
            });
          }
        } catch {
          // ignore unparseable
        }
      }
    }

    setStoredDrafts(list);
  };

  useEffect(() => {
    setIsOnline(navigator.onLine);
    refreshDraftsList();

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  const handleSimulateSeedDraft = () => {
    draftService.saveDraft({
      sessionId: "session_1042",
      marks: {
        "s-101": "P",
        "s-102": "P",
        "s-103": "A",
        "s-104": "P",
        "s-105": "C",
      },
      remarks: {
        "s-103": "Reported sick at 09:15 AM",
        "s-105": "Inter-college kitchen symposium",
      },
      version: 1,
      savedAt: new Date().toISOString(),
      actualConductedHours: 4.0,
    });
    refreshDraftsList();
    toast.success("Seeded test draft for session_1042 in local device storage.");
  };

  const handleCleanExpired = () => {
    draftService.cleanStaleDrafts();
    refreshDraftsList();
    toast.success("Cleaned all expired drafts older than 7-day institutional TTL.");
  };

  const handleDeleteDraft = (sessionId: string) => {
    draftService.clearDraft(sessionId);
    refreshDraftsList();
    setActiveDraftDetail(null);
    toast.info(`Local draft for ${sessionId} removed from device.`);
  };

  const handleViewDetail = (sessionId: string) => {
    const draft = draftService.getDraft(sessionId);
    setActiveDraftDetail(draft);
  };

  const handleSimulateConflictSync = () => {
    // Simulates backend having version 2 while local is version 1
    toast.error(
      "Sync Aborted: 409 CONCURRENCY_CONFLICT. Another faculty member finalized this session at 09:45 AM. Please reload.",
      {
        action: {
          label: "Resolve & Merge",
          onClick: () => toast.success("Draft merged with latest server state."),
        },
      }
    );
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-slate-200 pb-4 dark:border-slate-800">
        <div>
          <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
            <Database className="w-3.5 h-3.5" />
            <span>Resiliency & Diagnostic Console</span>
          </div>
          <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
            Offline Attendance Draft & Storage Inspector
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Audit uncommitted kitchen attendance marks stored on device, test offline transitions, and verify zero-token security.
          </p>
        </div>

        <div className="flex items-center gap-2 self-start sm:self-auto">
          <button
            onClick={refreshDraftsList}
            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-700 bg-white border border-slate-300 rounded hover:bg-slate-50 shadow-sm dark:bg-slate-800 dark:border-slate-700 dark:text-slate-200"
          >
            <RefreshCw className="w-3.5 h-3.5" />
            <span>Scan Device Storage</span>
          </button>
        </div>
      </div>

      {/* Network Status & Security Banner */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Network Connectivity Status */}
        <div className="p-4 rounded-lg border border-slate-200 bg-white shadow-sm flex items-center justify-between dark:border-slate-800 dark:bg-slate-900">
          <div className="flex items-center gap-3">
            <div
              className={`w-10 h-10 rounded-full flex items-center justify-center ${
                isOnline
                  ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400"
                  : "bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400"
              }`}
            >
              {isOnline ? <Wifi className="w-5 h-5" /> : <WifiOff className="w-5 h-5" />}
            </div>
            <div>
              <h3 className="text-xs font-bold text-slate-900 dark:text-slate-100">
                Network Status: {isOnline ? "ONLINE (Connected)" : "OFFLINE (Disrupted)"}
              </h3>
              <p className="text-[11px] text-slate-500">
                {isOnline
                  ? "Direct HTTP syncing to institutional backend active."
                  : "Basement kitchen mode: Attendance will persist locally until connection restored."}
              </p>
            </div>
          </div>

          <button
            onClick={() => {
              const next = simulatedNetwork === "ONLINE" ? "OFFLINE" : "ONLINE";
              setSimulatedNetwork(next);
              setIsOnline(next === "ONLINE");
              toast.info(`Simulated network toggled to: ${next}`);
            }}
            className="px-2.5 py-1 text-xs font-semibold text-slate-700 bg-slate-100 rounded hover:bg-slate-200 border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700"
          >
            Toggle {simulatedNetwork === "ONLINE" ? "Offline" : "Online"}
          </button>
        </div>

        {/* Zero-Token Security Assurance */}
        <div className="p-4 rounded-lg border border-slate-200 bg-white shadow-sm flex items-center gap-3 dark:border-slate-800 dark:bg-slate-900">
          <div className="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center dark:bg-blue-950 dark:text-blue-400 shrink-0">
            <ShieldCheck className="w-5 h-5" />
          </div>
          <div className="text-xs">
            <h3 className="font-bold text-slate-900 dark:text-slate-100">
              Zero-Token Security Compliant
            </h3>
            <p className="text-[11px] text-slate-500 leading-relaxed mt-0.5">
              Draft marks in <code className="font-mono text-slate-700 dark:text-slate-300">localStorage</code> contain only student IDs and marks (P/A/C). Auth tokens remain strictly in-memory.
            </p>
          </div>
        </div>
      </div>

      {/* Draft Management Toolbar */}
      <div className="p-4 rounded-lg border border-slate-200 bg-white shadow-sm space-y-3 dark:border-slate-800 dark:bg-slate-900">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div>
            <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wider dark:text-slate-100">
              Cached Session Drafts on This Device ({storedDrafts.length})
            </h3>
            <p className="text-[11px] text-slate-500">
              Drafts expire after 7 days if not committed to prevent stale session overwrites.
            </p>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleSimulateSeedDraft}
              className="px-2.5 py-1 text-xs font-semibold text-blue-700 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800"
            >
              Seed Sample Draft
            </button>
            <button
              onClick={handleCleanExpired}
              className="px-2.5 py-1 text-xs font-semibold text-slate-700 bg-slate-100 rounded hover:bg-slate-200 border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700"
            >
              Clean Expired (&gt;7d)
            </button>
            <button
              onClick={handleSimulateConflictSync}
              className="px-2.5 py-1 text-xs font-semibold text-rose-700 bg-rose-50 border border-rose-200 rounded hover:bg-rose-100 dark:bg-rose-950 dark:text-rose-300 dark:border-rose-800"
            >
              Test 409 Conflict Handling
            </button>
          </div>
        </div>

        {storedDrafts.length === 0 ? (
          <div className="p-8 text-center text-xs text-slate-400 border border-dashed border-slate-200 rounded dark:border-slate-800">
            No local uncommitted attendance drafts found on this device.
          </div>
        ) : (
          <div className="divide-y divide-slate-100 dark:divide-slate-800 border border-slate-200 rounded dark:border-slate-800">
            {storedDrafts.map((d) => (
              <div
                key={d.key}
                className="p-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs"
              >
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-mono font-bold text-blue-600 dark:text-blue-400">
                      {d.sessionId}
                    </span>
                    <span className="text-slate-500 font-mono">v{d.version}</span>
                    {d.isExpired && (
                      <span className="text-[10px] font-bold text-rose-700 bg-rose-50 px-1.5 py-0.5 rounded border border-rose-200">
                        EXPIRED (&gt;7d)
                      </span>
                    )}
                  </div>
                  <div className="text-slate-600 dark:text-slate-400 text-[11px]">
                    Saved: {d.savedAt} • {d.marksCount} Students Marked • {d.remarksCount} Remarks Recorded
                  </div>
                </div>

                <div className="flex items-center gap-2 self-start sm:self-auto">
                  <button
                    onClick={() => handleViewDetail(d.sessionId)}
                    className="px-2.5 py-1 text-[11px] font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 rounded border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700"
                  >
                    Inspect JSON
                  </button>
                  <button
                    onClick={() => handleDeleteDraft(d.sessionId)}
                    className="p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                    title="Delete Draft"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Draft Detail Drawer / View */}
      {activeDraftDetail && (
        <div className="p-4 rounded-lg border border-slate-200 bg-slate-950 text-slate-200 shadow-sm space-y-2 dark:border-slate-800 font-mono text-xs">
          <div className="flex items-center justify-between text-slate-400 border-b border-slate-800 pb-2">
            <span>Inspecting Cached Payload: {activeDraftDetail.sessionId}</span>
            <button
              onClick={() => setActiveDraftDetail(null)}
              className="text-slate-400 hover:text-white"
            >
              Close
            </button>
          </div>
          <pre className="p-2 overflow-x-auto text-[11px] text-emerald-400 leading-relaxed">
            {JSON.stringify(activeDraftDetail, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}