"use client";

import { useState } from "react";
import { X, RefreshCw, CheckCircle, AlertCircle } from "lucide-react";
import { api } from "@/services/apiClient";

interface SettingsModalProps {
    isOpen: boolean;
    onClose: () => void;
}

export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
    const [updating, setUpdating] = useState(false);
    const [status, setStatus] = useState<{ type: "success" | "error" | null; message: string }>({ type: null, message: "" });

    if (!isOpen) return null;

    const handleUpdate = async () => {
        setUpdating(true);
        setStatus({ type: null, message: "" });
        try {
            await api.post("/settings/update-ytdlp", {});
            setStatus({ type: "success", message: "Update successful! Server is restarting..." });
            // Reload page after a delay to reflect restart
            setTimeout(() => {
                window.location.reload();
            }, 5000);
        } catch (e: any) {
            setStatus({ type: "error", message: e.message || "Update failed" });
        } finally {
            setUpdating(false);
        }
    };

    return (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
            <div className="bg-[#1e1e1e] rounded-xl p-6 w-full max-w-md shadow-2xl border border-white/10">
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-xl font-bold">Settings</h2>
                    <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition">
                        <X size={20} />
                    </button>
                </div>

                <div className="space-y-6">
                    <div className="bg-[#2a2a2a] p-4 rounded-lg">
                        <h3 className="font-semibold mb-2">Core Components</h3>
                        <p className="text-sm text-gray-400 mb-4">
                            Update the core playback library (yt-dlp) to the latest version to fix playback issues.
                        </p>

                        <button
                            onClick={handleUpdate}
                            disabled={updating}
                            className={`w-full py-3 rounded-lg font-medium flex items-center justify-center gap-2 transition ${updating ? "bg-blue-600/50 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-500"
                                }`}
                        >
                            {updating ? (
                                <>
                                    <RefreshCw className="animate-spin" size={18} />
                                    Updating...
                                </>
                            ) : (
                                <>
                                    <RefreshCw size={18} />
                                    Update yt-dlp (Nightly)
                                </>
                            )}
                        </button>
                    </div>

                    {status.message && (
                        <div className={`p-4 rounded-lg flex items-start gap-3 ${status.type === "success" ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"
                            }`}>
                            {status.type === "success" ? <CheckCircle size={20} /> : <AlertCircle size={20} />}
                            <p className="text-sm">{status.message}</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}