k-tv/k-tv-frontend/app/(main)/dashboard/components/transcode-settings-dialog.tsx

"use client";

import { useState, useEffect } from "react";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  useTranscodeSettings,
  useUpdateTranscodeSettings,
  useTranscodeStats,
  useClearTranscodeCache,
} from "@/hooks/use-transcode";
import { useAdminSettings, useUpdateAdminSettings } from "@/hooks/use-admin-settings";
import { useTriggerSync, useLibrarySyncStatus } from "@/hooks/use-library-sync";
import { toast } from "sonner";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

function fmtBytes(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024)
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}

export function TranscodeSettingsDialog({ open, onOpenChange }: Props) {
  const { data: settings } = useTranscodeSettings();
  const { data: stats } = useTranscodeStats();
  const updateSettings = useUpdateTranscodeSettings();
  const clearCache = useClearTranscodeCache();

  const { data: adminSettings } = useAdminSettings();
  const updateAdminSettings = useUpdateAdminSettings();
  const triggerSync = useTriggerSync();
  const { data: syncStatuses } = useLibrarySyncStatus();
  const syncInterval = adminSettings?.library_sync_interval_hours ?? 6;
  const [syncIntervalInput, setSyncIntervalInput] = useState<number | null>(null);
  const displayInterval = syncIntervalInput ?? syncInterval;

  const [ttl, setTtl] = useState<number>(24);
  const [confirmClear, setConfirmClear] = useState(false);

  useEffect(() => {
    // Initialise controlled input from async data — intentional setState in effect
    // eslint-disable-next-line react-hooks/set-state-in-effect
    if (settings) setTtl(settings.cleanup_ttl_hours);
  }, [settings]);

  const handleSave = () => {
    updateSettings.mutate(
      { cleanup_ttl_hours: ttl },
      {
        onSuccess: () => toast.success("Settings saved"),
        onError: () => toast.error("Failed to save settings"),
      },
    );
  };

  const handleClear = () => {
    if (!confirmClear) {
      setConfirmClear(true);
      return;
    }
    clearCache.mutate(undefined, {
      onSuccess: () => {
        toast.success("Transcode cache cleared");
        setConfirmClear(false);
      },
      onError: () => toast.error("Failed to clear cache"),
    });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-zinc-900 border-zinc-800 text-zinc-100 sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="text-zinc-100">Transcode Settings</DialogTitle>
        </DialogHeader>

        <div className="space-y-5 py-2">
          {/* TTL */}
          <div className="space-y-1.5">
            <Label htmlFor="ttl" className="text-zinc-300">
              Cache cleanup TTL (hours)
            </Label>
            <Input
              id="ttl"
              type="number"
              min={1}
              value={ttl}
              onChange={(e) => setTtl(Number(e.target.value))}
              className="w-32 bg-zinc-800 border-zinc-700 text-zinc-100"
            />
            <p className="text-xs text-zinc-500">
              Transcoded segments older than this are removed automatically.
            </p>
          </div>

          {/* Stats */}
          <div className="rounded-lg border border-zinc-800 bg-zinc-800/50 p-4 space-y-1">
            <p className="text-xs font-medium text-zinc-400">Cache</p>
            <p className="text-sm text-zinc-200">
              {stats ? fmtBytes(stats.cache_size_bytes) : "—"}{" "}
              <span className="text-zinc-500">
                ({stats ? stats.item_count : "—"} items)
              </span>
            </p>
          </div>

          {/* Clear cache */}
          <Button
            variant="destructive"
            size="sm"
            onClick={handleClear}
            disabled={clearCache.isPending}
            className="w-full"
          >
            <Trash2 className="size-4" />
            {confirmClear ? "Confirm — clear cache?" : "Clear transcode cache"}
          </Button>
          {confirmClear && (
            <p
              className="text-center text-xs text-zinc-500 cursor-pointer hover:text-zinc-300"
              onClick={() => setConfirmClear(false)}
            >
              Cancel
            </p>
          )}
        </div>

        <div className="border-t border-zinc-800 pt-4 mt-4">
          <h3 className="text-sm font-medium mb-3">Library sync</h3>
          <div className="flex items-center gap-3 mb-3">
            <label className="text-xs text-zinc-400 w-32">Sync interval (hours)</label>
            <Input
              type="number"
              min={1}
              max={168}
              value={displayInterval}
              onChange={e => setSyncIntervalInput(Number(e.target.value))}
              className="h-8 w-24 text-xs bg-zinc-800 border-zinc-700 text-zinc-100"
            />
            <Button
              size="sm"
              variant="outline"
              onClick={() => updateAdminSettings.mutate({ library_sync_interval_hours: displayInterval })}
              disabled={updateAdminSettings.isPending}
              className="border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
            >
              Save
            </Button>
          </div>
          <Button
            size="sm"
            onClick={() => triggerSync.mutate()}
            disabled={triggerSync.isPending || syncStatuses?.some(s => s.status === "running")}
          >
            {triggerSync.isPending ? "Triggering…" : "Sync now"}
          </Button>
          {syncStatuses?.map(s => (
            <p key={s.id} className="mt-1 text-xs text-zinc-500">
              {s.provider_id}: {s.status} — {s.items_found} items
            </p>
          ))}
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
          >
            Cancel
          </Button>
          <Button onClick={handleSave} disabled={updateSettings.isPending}>
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}