"use client";

import { useState } from "react";
import {
    useGetConfigsQuery,
    useUpsertConfigMutation,
    AdminConfig
} from "@/redux/apis/adminApi";
import {
    Settings,
    Plus,
    Save,
    Edit2,
    Key,
    Shield,
    Globe,
    Database,
    Mail,
    CreditCard,
    CheckCircle2,
    XCircle,
    Loader2,
    Info
} from "lucide-react";
import Layout from "../components/Layout";

export default function AdminConfigsPage() {
    const { data: configsData, isLoading, isError } = useGetConfigsQuery();
    const [upsertConfig, { isLoading: isSaving }] = useUpsertConfigMutation();

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingConfig, setEditingConfig] = useState<Partial<AdminConfig> | null>(null);

    const categories = [
        { id: "general", label: "General", icon: <Settings className="w-4 h-4" /> },
        { id: "payment", label: "Payment", icon: <CreditCard className="w-4 h-4" /> },
        { id: "email", label: "Email", icon: <Mail className="w-4 h-4" /> },
        { id: "system", label: "System", icon: <Database className="w-4 h-4" /> },
        { id: "ui", label: "User Interface", icon: <Globe className="w-4 h-4" /> },
    ];

    const handleSave = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!editingConfig?.key || !editingConfig?.value) return;

        try {
            await upsertConfig(editingConfig).unwrap();
            setIsModalOpen(false);
            setEditingConfig(null);
        } catch (error) {
            console.error("Failed to save config:", error);
            alert("Failed to save configuration");
        }
    };

    const groupedConfigs = configsData?.data?.reduce((acc: any, config) => {
        if (!acc[config.category]) acc[config.category] = [];
        acc[config.category].push(config);
        return acc;
    }, {});

    return (
        <Layout>
            <div className="p-6">
                <div className="flex justify-between items-center mb-8">
                    <div>
                        <h1 className="text-2xl font-bold text-black flex items-center gap-3">
                            <Shield className="w-8 h-8 text-indigo-700" />
                            Admin Configurations
                        </h1>
                        <p className="text-gray-600 mt-1 font-medium text-sm">Manage system keys, payments, and global settings</p>
                    </div>
                    <button
                        onClick={() => {
                            setEditingConfig({ category: "general", isActive: true });
                            setIsModalOpen(true);
                        }}
                        className="flex items-center gap-2 bg-indigo-700 text-white px-5 py-2.5 rounded-xl hover:bg-indigo-800 transition-all shadow-md active:scale-95 font-medium"
                    >
                        <Plus className="w-5 h-5" />
                        Add New Config
                    </button>
                </div>

                {isLoading ? (
                    <div className="flex items-center justify-center h-64">
                        <Loader2 className="w-10 h-10 text-indigo-700 animate-spin" />
                    </div>
                ) : isError ? (
                    <div className="p-8 bg-red-50 text-red-900 rounded-2xl border border-red-100 flex items-center gap-4 shadow-sm font-medium">
                        <XCircle className="w-6 h-6 text-red-600" />
                        <div>
                            <p className="text-black font-semibold">Error loading configurations</p>
                            <p className="text-gray-600 text-sm">Please check your connection and try again later.</p>
                        </div>
                    </div>
                ) : (
                    <div className="space-y-12">
                        {categories.map((cat) => (
                            <div key={cat.id} className="space-y-4">
                                <div className="flex items-center gap-3 text-black border-b border-gray-200 pb-2">
                                    <div className="p-2 bg-indigo-50 text-indigo-700 rounded-lg">
                                        {cat.icon}
                                    </div>
                                    <h2 className="text-sm font-bold uppercase tracking-wider">{cat.label}</h2>
                                    <span className="ml-auto text-xs bg-gray-100 px-2.5 py-1 rounded-full text-black font-semibold">
                                        {groupedConfigs?.[cat.id]?.length || 0} Configs
                                    </span>
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                    {groupedConfigs?.[cat.id]?.map((config: AdminConfig) => (
                                        <div
                                            key={config.id}
                                            className="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-full"
                                        >
                                            <div className="flex items-start justify-between mb-4">
                                                <div className="flex items-center gap-2">
                                                    <div className="p-1.5 bg-gray-50 border border-gray-100 rounded-lg text-gray-500 group-hover:text-indigo-600 transition-colors">
                                                        <Key className="w-4 h-4" />
                                                    </div>
                                                    <h3 className="text-black font-semibold text-base tracking-tight">{config.key}</h3>
                                                </div>
                                                <button
                                                    onClick={() => {
                                                        setEditingConfig(config);
                                                        setIsModalOpen(true);
                                                    }}
                                                    className="p-2 text-gray-400 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition-all border border-gray-100 shadow-sm"
                                                >
                                                    <Edit2 className="w-4 h-4" />
                                                </button>
                                            </div>

                                            <div className="space-y-4 flex-1">
                                                <div className="bg-gray-50 p-3 rounded-xl border border-gray-100 font-mono text-sm text-black break-all line-clamp-3 min-h-[3.5rem]">
                                                    {config.value}
                                                </div>

                                                {config.description && (
                                                    <div className="flex items-start gap-2 p-2 bg-blue-50/50 rounded-lg border border-blue-100">
                                                        <Info className="w-3.5 h-3.5 text-blue-600 shrink-0 mt-0.5" />
                                                        <p className="text-xs text-gray-800 leading-relaxed font-medium">
                                                            {config.description}
                                                        </p>
                                                    </div>
                                                )}

                                                <div className="flex items-center justify-between pt-3 mt-auto border-t border-gray-100">
                                                    <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border ${config.isActive ? 'bg-green-50 text-green-700 border-green-200' : 'bg-red-50 text-red-700 border-red-200'}`}>
                                                        <div className={`w-1.5 h-1.5 rounded-full ${config.isActive ? 'bg-green-600' : 'bg-red-600'}`} />
                                                        <span className="text-[10px] font-bold uppercase tracking-wider">
                                                            {config.isActive ? 'Active' : 'Inactive'}
                                                        </span>
                                                    </div>
                                                    <span className="text-[10px] text-gray-500 font-bold bg-gray-50 px-2 py-1 rounded border border-gray-200">ID: {config.id}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}

                                    {(!groupedConfigs?.[cat.id] || groupedConfigs[cat.id].length === 0) && (
                                        <div className="col-span-full py-8 text-center bg-transparent rounded-xl border border-dashed border-gray-200">
                                            <p className="text-xs text-gray-400 font-medium uppercase tracking-widest">No keys found here</p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>
                )}

                {/* Upsert Modal */}
                {isModalOpen && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
                        <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={() => setIsModalOpen(false)} />

                        <div className="relative bg-white w-full max-w-xl rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-200 border border-gray-200">
                            <div className="bg-white p-5 border-b border-gray-100 flex justify-between items-center">
                                <h2 className="text-lg font-bold text-black flex items-center gap-2">
                                    <Settings className="w-5 h-5 text-indigo-700" />
                                    {editingConfig?.id ? "Edit Configuration" : "New Configuration"}
                                </h2>
                                <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-black transition-colors rounded-full p-1 hover:bg-gray-100">
                                    <XCircle className="w-6 h-6" />
                                </button>
                            </div>

                            <form onSubmit={handleSave} className="p-6 space-y-6">
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Config Key</label>
                                        <input
                                            type="text"
                                            value={editingConfig?.key || ""}
                                            onChange={(e) => setEditingConfig({ ...editingConfig, key: e.target.value })}
                                            className="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-black font-medium disabled:bg-gray-100 disabled:text-gray-500"
                                            placeholder="e.g. razorpay-key"
                                            required
                                            disabled={!!editingConfig?.id}
                                        />
                                        <p className="text-[10px] text-gray-400">Lowercase, unique, kebab-case</p>
                                    </div>

                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Category</label>
                                        <select
                                            value={editingConfig?.category || "general"}
                                            onChange={(e) => setEditingConfig({ ...editingConfig, category: e.target.value as any })}
                                            className="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-black font-medium cursor-pointer"
                                        >
                                            {categories.map(c => (
                                                <option key={c.id} value={c.id}>{c.label}</option>
                                            ))}
                                        </select>
                                    </div>
                                </div>

                                <div className="space-y-1.5">
                                    <label className="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Config Value</label>
                                    <textarea
                                        value={editingConfig?.value || ""}
                                        onChange={(e) => setEditingConfig({ ...editingConfig, value: e.target.value })}
                                        className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition-all min-h-[120px] font-mono text-sm text-black font-medium"
                                        placeholder="Paste setting value or JSON object string..."
                                        required
                                    />
                                    <p className="text-[10px] text-gray-400">Values are saved as literal strings</p>
                                </div>

                                <div className="space-y-1.5">
                                    <label className="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Description</label>
                                    <input
                                        type="text"
                                        value={editingConfig?.description || ""}
                                        onChange={(e) => setEditingConfig({ ...editingConfig, description: e.target.value })}
                                        className="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-black font-medium"
                                        placeholder="Brief description of this setting"
                                    />
                                </div>

                                <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-xl border border-gray-200 group cursor-pointer" onClick={() => setEditingConfig({ ...editingConfig, isActive: !editingConfig?.isActive })}>
                                    <div className={`w-5 h-5 rounded flex items-center justify-center border transition-all ${editingConfig?.isActive ?? true ? 'bg-indigo-700 border-indigo-700' : 'bg-white border-gray-300'}`}>
                                        <CheckCircle2 className={`w-3.5 h-3.5 text-white ${editingConfig?.isActive ?? true ? 'scale-100' : 'scale-0'} transition-transform`} />
                                    </div>
                                    <span className="text-sm font-semibold text-gray-800 select-none">
                                        Active and visible to system
                                    </span>
                                </div>

                                <div className="flex gap-3 pt-2">
                                    <button
                                        type="submit"
                                        disabled={isSaving}
                                        className="flex-1 bg-indigo-700 text-white font-bold py-3 rounded-xl hover:bg-indigo-800 transition-all flex items-center justify-center gap-2 shadow-lg shadow-indigo-100 active:scale-95 disabled:opacity-50"
                                    >
                                        {isSaving ? (
                                            <Loader2 className="w-5 h-5 animate-spin" />
                                        ) : (
                                            <Save className="w-5 h-5" />
                                        )}
                                        {editingConfig?.id ? "Save Changes" : "Create Configuration"}
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setIsModalOpen(false)}
                                        className="px-6 py-3 bg-gray-100 text-gray-600 font-bold rounded-xl hover:bg-gray-200 transition-all active:scale-95"
                                    >
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                )}
            </div>
        </Layout>
    );
}