import { useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Copy, Eye, EyeOff, RefreshCw, Network, RotateCcw } from "lucide-react";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";

const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => {
  const label =
    h === 0
      ? "12:00 AM (midnight)"
      : h < 12
      ? `${h}:00 AM`
      : h === 12
      ? "12:00 PM (noon)"
      : `${h - 12}:00 PM`;
  return { value: h, label };
});

export function NetworkBackupManager() {
  const { toast } = useToast();
  const [showKey, setShowKey] = useState(false);
  const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);

  // receiver form state (initialised from query)
  const [enabled, setEnabled] = useState(false);
  const [syncHour, setSyncHour] = useState(0);
  const [sourceUrl, setSourceUrl] = useState("");
  const [receiverApiKey, setReceiverApiKey] = useState("");
  const [formLoaded, setFormLoaded] = useState(false);

  // ==============================
  // Queries
  // ==============================
  const { data: keyData } = useQuery({
    queryKey: ["/db/network-backup-key"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/database-management/network-backup-key");
      return res.json() as Promise<{ apiKey: string }>;
    },
  });

  useQuery({
    queryKey: ["/db/network-sync-config"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/database-management/network-sync-config");
      const data = await res.json();
      if (!formLoaded) {
        setEnabled(data.enabled ?? false);
        setSyncHour(data.syncHour ?? 0);
        setSourceUrl(data.sourceUrl ?? "");
        setReceiverApiKey(data.apiKey ?? "");
        setFormLoaded(true);
      }
      return data;
    },
  });

  // ==============================
  // Mutations
  // ==============================
  const regenMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/database-management/network-backup-key/regenerate");
      return res.json() as Promise<{ apiKey: string }>;
    },
    onSuccess: (data) => {
      queryClient.setQueryData(["/db/network-backup-key"], data);
      setConfirmRegenOpen(false);
      toast({ title: "API key regenerated", description: "Update the key on your backup PC." });
    },
    onError: () => {
      toast({ title: "Error", description: "Failed to regenerate key.", variant: "destructive" });
    },
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("PUT", "/api/database-management/network-sync-config", {
        enabled,
        syncHour,
        sourceUrl: sourceUrl.trim(),
        apiKey: receiverApiKey.trim(),
      });
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
      toast({ title: "Network sync settings saved" });
    },
    onError: () => {
      toast({ title: "Error", description: "Failed to save settings.", variant: "destructive" });
    },
  });

  const syncNowMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/database-management/network-sync-now");
      if (!res.ok) {
        const body = await res.json();
        throw new Error(body.details || body.error || "Sync failed");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
      toast({ title: "Sync complete", description: "Database synced from source PC." });
    },
    onError: (err: any) => {
      queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
      toast({ title: "Sync failed", description: err.message, variant: "destructive" });
    },
  });

  const displayKey = keyData?.apiKey ?? "";
  const maskedKey = displayKey ? "••••••••-••••-••••-••••-" + displayKey.slice(-12) : "—";

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Network className="h-5 w-5" />
          Network Backup
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">

        {/* ── Section A: Source role (this machine's API key) ── */}
        <div className="space-y-3">
          <p className="text-sm font-semibold text-gray-800">This Machine's Backup Key</p>
          <p className="text-xs text-gray-500">
            Share this key with the backup PC so it can pull a copy of this machine's
            database. The key survives database restores (stored in a local file).
          </p>
          <div className="flex items-center gap-2">
            <Input
              readOnly
              value={showKey ? displayKey : maskedKey}
              className="font-mono text-sm"
            />
            <Button
              variant="outline"
              size="icon"
              title={showKey ? "Hide key" : "Show key"}
              onClick={() => setShowKey((v) => !v)}
            >
              {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
            <Button
              variant="outline"
              size="icon"
              title="Copy to clipboard"
              onClick={() => {
                navigator.clipboard.writeText(displayKey);
                toast({ title: "Copied to clipboard" });
              }}
              disabled={!displayKey}
            >
              <Copy className="h-4 w-4" />
            </Button>
            <Button
              variant="outline"
              size="icon"
              title="Regenerate key"
              onClick={() => setConfirmRegenOpen(true)}
              disabled={regenMutation.isPending}
            >
              <RefreshCw className="h-4 w-4" />
            </Button>
          </div>
        </div>

        <div className="border-t" />

        {/* ── Section B: Receiver role (pull config) ── */}
        <div className="space-y-4">
          <p className="text-sm font-semibold text-gray-800">Sync from Another PC</p>
          <p className="text-xs text-gray-500">
            Configure this machine to pull a fresh copy of the database and all uploaded
            files (patient photos, cloud storage, documents) from another PC at a scheduled
            time each day. Enter the source PC's URL (e.g. http://192.168.0.94 — no port number) and the Backup Key shown in the source PC's Network Backup section.
          </p>

          {/* Enable toggle + time picker on same row */}
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-2">
              <Switch
                id="network-sync-toggle"
                checked={enabled}
                onCheckedChange={setEnabled}
              />
              <label
                htmlFor="network-sync-toggle"
                className="text-sm font-medium text-gray-700 cursor-pointer select-none"
              >
                Enable daily sync
              </label>
            </div>

            <div className="flex items-center gap-2">
              <label className="text-sm text-gray-600 whitespace-nowrap">at</label>
              <select
                className="border rounded px-2 py-1 text-sm text-gray-700 bg-white"
                value={syncHour}
                onChange={(e) => setSyncHour(Number(e.target.value))}
              >
                {HOUR_OPTIONS.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.label}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="space-y-2">
            <label className="text-xs font-medium text-gray-600">Source PC URL</label>
            <Input
              placeholder="http://192.168.0.94"
              value={sourceUrl}
              onChange={(e) => setSourceUrl(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <label className="text-xs font-medium text-gray-600">Source PC API Key</label>
            <Input
              type="password"
              placeholder="Paste the key from the source PC"
              value={receiverApiKey}
              onChange={(e) => setReceiverApiKey(e.target.value)}
            />
          </div>

          <div className="flex gap-2">
            <Button
              onClick={() => saveMutation.mutate()}
              disabled={saveMutation.isPending}
            >
              {saveMutation.isPending ? "Saving…" : "Save Settings"}
            </Button>
            <Button
              variant="outline"
              onClick={() => syncNowMutation.mutate()}
              disabled={syncNowMutation.isPending || !sourceUrl || !receiverApiKey}
              title="Pull and restore now — replaces this machine's database and uploads folder"
            >
              <RotateCcw className="h-4 w-4 mr-1" />
              {syncNowMutation.isPending ? "Syncing…" : "Sync Now"}
            </Button>
          </div>

          {/* Last sync status */}
          <SyncStatus />
        </div>
      </CardContent>

      {/* Confirm regenerate dialog */}
      <AlertDialog open={confirmRegenOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Regenerate backup key?</AlertDialogTitle>
            <AlertDialogDescription>
              The old key will stop working immediately. You will need to update the API key
              on any backup PC that is currently configured to sync from this machine.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setConfirmRegenOpen(false)}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => regenMutation.mutate()}
              disabled={regenMutation.isPending}
            >
              Regenerate
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Card>
  );
}

function SyncStatus() {
  const { data } = useQuery({
    queryKey: ["/db/network-sync-config"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/database-management/network-sync-config");
      return res.json();
    },
  });

  if (!data?.lastSyncAt) return null;

  const date = new Date(data.lastSyncAt).toLocaleString();
  const ok = data.lastSyncStatus === "success";

  return (
    <div className={`text-xs rounded p-2 ${ok ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}>
      {ok ? "✅" : "❌"} Last sync: {date}
      {!ok && data.lastSyncError && (
        <span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
      )}
    </div>
  );
}