import { useState, useEffect } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Copy, Eye, EyeOff, RefreshCw, Network, RotateCcw, HardDrive } 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() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Network className="h-5 w-5" />
          Network Backup
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="rclone">
          <TabsList className="mb-4">
            <TabsTrigger value="rclone">
              <HardDrive className="h-4 w-4 mr-1" />
              Rclone
            </TabsTrigger>
            <TabsTrigger value="apikey">
              <Network className="h-4 w-4 mr-1" />
              API Key
            </TabsTrigger>
          </TabsList>
          <TabsContent value="rclone">
            <RcloneBackupSection />
          </TabsContent>
          <TabsContent value="apikey">
            <ApiKeyBackupSection />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}

// ============================================================
// Tab 1: Rclone
// ============================================================
function RcloneBackupSection() {
  const { toast } = useToast();

  // Server (source) state
  const [serverEnabled, setServerEnabled] = useState(false);
  const [serverPort, setServerPort] = useState(8080);

  // Receiver state
  const [receiverEnabled, setReceiverEnabled] = useState(false);
  const [receiverSyncHour, setReceiverSyncHour] = useState(21);
  const [sourceIp, setSourceIp] = useState("");
  const [sourcePort, setSourcePort] = useState(8080);

  // Auto-import state
  const [autoImportEnabled, setAutoImportEnabled] = useState(false);
  const [autoImportHour, setAutoImportHour] = useState(22);

  const [formLoaded, setFormLoaded] = useState(false);

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

  const { data: rcloneStatus } = useQuery({
    queryKey: ["/db/rclone-status"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/database-management/rclone-status");
      return res.json() as Promise<{ installed: boolean; serverRunning: boolean }>;
    },
    refetchInterval: 5000,
  });

  useEffect(() => {
    if (rcloneConfig && !formLoaded) {
      setServerEnabled(rcloneConfig.serverEnabled ?? false);
      setServerPort(rcloneConfig.serverPort ?? 8080);
      setReceiverEnabled(rcloneConfig.receiverEnabled ?? false);
      setReceiverSyncHour(rcloneConfig.receiverSyncHour ?? 21);
      setSourceIp(rcloneConfig.sourceIp ?? "");
      setSourcePort(rcloneConfig.sourcePort ?? 8080);
      setAutoImportEnabled(rcloneConfig.autoImportEnabled ?? false);
      setAutoImportHour(rcloneConfig.autoImportHour ?? 22);
      setFormLoaded(true);
    }
  }, [rcloneConfig, formLoaded]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("PUT", "/api/database-management/rclone-config", {
        serverEnabled,
        serverPort,
        receiverEnabled,
        receiverSyncHour,
        sourceIp,
        sourcePort,
        autoImportEnabled,
        autoImportHour,
      });
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
      toast({ title: "Rclone settings saved" });
    },
    onError: () => {
      toast({ title: "Error", description: "Failed to save rclone settings.", variant: "destructive" });
    },
  });

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

  const importNowMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/database-management/auto-import-now");
      if (!res.ok) {
        const body = await res.json();
        throw new Error(body.details || body.error || "Import failed");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
      toast({ title: "Import complete", description: "Latest backup restored to database." });
    },
    onError: (err: any) => {
      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
      toast({ title: "Import failed", description: err.message, variant: "destructive" });
    },
  });

  const serverRunning = rcloneStatus?.serverRunning ?? false;

  return (
    <div className="space-y-6">
      {/* ── Source PC: Serve backups via WebDAV ── */}
      <div className="space-y-3 border rounded-lg p-4">
        <div className="flex items-center justify-between">
          <p className="text-sm font-semibold text-gray-800">Source PC — Serve Backups</p>
          <div className={`flex items-center gap-1.5 text-xs ${serverRunning ? "text-green-600" : "text-gray-400"}`}>
            <div className={`w-2 h-2 rounded-full ${serverRunning ? "bg-green-500" : "bg-gray-300"}`} />
            {serverRunning ? "Running" : "Stopped"}
          </div>
        </div>
        <p className="text-xs text-gray-500">
          Enable this on the source PC to serve the <code>backups/</code> folder via WebDAV.
          The backup PC will connect to this machine to pull files.
        </p>

        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <Switch
              id="rclone-server-toggle"
              checked={serverEnabled}
              onCheckedChange={setServerEnabled}
            />
            <label
              htmlFor="rclone-server-toggle"
              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
            >
              Enable WebDAV server
            </label>
          </div>
        </div>

        <div className="space-y-1 max-w-xs">
          <label className="text-xs font-medium text-gray-600">Port</label>
          <Input
            type="number"
            placeholder="8080"
            value={serverPort}
            onChange={(e) => setServerPort(Number(e.target.value))}
          />
        </div>

      </div>

      {/* ── Receiver PC: Pull backups from source ── */}
      <div className="space-y-3 border rounded-lg p-4">
        <p className="text-sm font-semibold text-gray-800">Receiver PC — Pull Backups</p>
        <p className="text-xs text-gray-500">
          Enable this on the backup PC to pull backup files from the source PC's WebDAV server
          at a scheduled time each day.
        </p>

        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <Switch
              id="rclone-receiver-toggle"
              checked={receiverEnabled}
              onCheckedChange={setReceiverEnabled}
            />
            <label
              htmlFor="rclone-receiver-toggle"
              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
            >
              Enable daily pull
            </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={receiverSyncHour}
              onChange={(e) => setReceiverSyncHour(Number(e.target.value))}
            >
              {HOUR_OPTIONS.map((o) => (
                <option key={o.value} value={o.value}>
                  {o.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <div className="space-y-1">
            <label className="text-xs font-medium text-gray-600">Source PC IP</label>
            <Input
              placeholder="192.168.0.94"
              value={sourceIp}
              onChange={(e) => setSourceIp(e.target.value)}
            />
          </div>
          <div className="space-y-1">
            <label className="text-xs font-medium text-gray-600">Source PC Port</label>
            <Input
              type="number"
              placeholder="8080"
              value={sourcePort}
              onChange={(e) => setSourcePort(Number(e.target.value))}
            />
          </div>
        </div>

        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => pullNowMutation.mutate()}
            disabled={pullNowMutation.isPending || !sourceIp}
          >
            <RotateCcw className="h-4 w-4 mr-1" />
            {pullNowMutation.isPending ? "Pulling..." : "Pull Now"}
          </Button>
        </div>

        <RcloneSyncStatus />
      </div>

      {/* ── Auto-Import: restore latest backup to database ── */}
      <div className="space-y-3 border rounded-lg p-4">
        <p className="text-sm font-semibold text-gray-800">Auto-Import Database</p>
        <p className="text-xs text-gray-500">
          Automatically restore the latest backup file from the <code>backups/</code> folder
          into this PC's database after rclone finishes pulling.
        </p>

        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <Switch
              id="auto-import-toggle"
              checked={autoImportEnabled}
              onCheckedChange={setAutoImportEnabled}
            />
            <label
              htmlFor="auto-import-toggle"
              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
            >
              Enable auto-import
            </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={autoImportHour}
              onChange={(e) => setAutoImportHour(Number(e.target.value))}
            >
              {HOUR_OPTIONS.map((o) => (
                <option key={o.value} value={o.value}>
                  {o.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => importNowMutation.mutate()}
            disabled={importNowMutation.isPending}
          >
            <RotateCcw className="h-4 w-4 mr-1" />
            {importNowMutation.isPending ? "Importing..." : "Import Now"}
          </Button>
        </div>

        <AutoImportStatus />
      </div>

      {/* Save all settings */}
      <Button
        onClick={() => saveMutation.mutate()}
        disabled={saveMutation.isPending}
      >
        {saveMutation.isPending ? "Saving..." : "Save Rclone Settings"}
      </Button>
    </div>
  );
}

function RcloneSyncStatus() {
  const { data } = useQuery({
    queryKey: ["/db/rclone-config"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/database-management/rclone-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 pull: " : "Last pull failed: "}{date}
      {!ok && data.lastSyncError && (
        <span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
      )}
    </div>
  );
}

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

  if (!data?.lastImportAt) return null;

  const date = new Date(data.lastImportAt).toLocaleString();
  const ok = data.lastImportStatus === "success";

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

// ============================================================
// Tab 2: API Key (existing behavior)
// ============================================================
function ApiKeyBackupSection() {
  const { toast } = useToast();
  const [showKey, setShowKey] = useState(false);
  const [showReceiverKey, setShowReceiverKey] = useState(false);
  const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);

  const [enabled, setEnabled] = useState(false);
  const [syncHour, setSyncHour] = useState(0);
  const [sourceUrl, setSourceUrl] = useState("");
  const [receiverApiKey, setReceiverApiKey] = useState("");
  const [formLoaded, setFormLoaded] = useState(false);

  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 }>;
    },
  });

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

  useEffect(() => {
    if (syncConfig && !formLoaded) {
      setEnabled(syncConfig.enabled ?? false);
      setSyncHour(syncConfig.syncHour ?? 0);
      setSourceUrl(syncConfig.sourceUrl ?? "");
      setReceiverApiKey(syncConfig.apiKey ?? "");
      setFormLoaded(true);
    }
  }, [syncConfig, formLoaded]);

  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 (
    <div className="space-y-6">
      {/* Source role */}
      <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" />

      {/* Receiver role */}
      <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>

        <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>
          <div className="flex items-center gap-2">
            <Input
              type={showReceiverKey ? "text" : "password"}
              placeholder="Paste the key from the source PC"
              value={receiverApiKey}
              onChange={(e) => setReceiverApiKey(e.target.value)}
            />
            <Button
              variant="outline"
              size="icon"
              title={showReceiverKey ? "Hide key" : "Show key"}
              onClick={() => setShowReceiverKey((v) => !v)}
              type="button"
            >
              {showReceiverKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
          </div>
        </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>

        <ApiKeySyncStatus />
      </div>

      {/* 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>
    </div>
  );
}

function ApiKeySyncStatus() {
  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: " : "Last sync failed: "}{date}
      {!ok && data.lastSyncError && (
        <span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
      )}
    </div>
  );
}