/**
 * AdminUserFeatures — Super Admin per-user permission engine.
 *
 * Layout: split-pane.
 *   • Left: user list (search, role badge, suspended marker).
 *   • Right: selected user's profile + per-category feature toggles + limits +
 *            recent audit-trail + admin actions (suspend/lock/force-logout/reset).
 */
import React, { useEffect, useState, useCallback, useMemo } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
    Search, Shield, UserCheck, UserX, Lock, Unlock, LogOut as ForceLogout,
    RotateCcw, Loader2, History, ShieldAlert, Users, Bot, Sparkles, Plug, Smartphone,
    Crown, Activity, Save,
} from "lucide-react";
import { toast } from "sonner";
import { api, formatApiError } from "@/lib/api";

const CATEGORY_ICONS = { "AI": Sparkles, "Core": Shield, "Integration": Plug, "Access": Smartphone };

export default function AdminUserFeatures() {
    const [catalog, setCatalog] = useState(null);
    const [users, setUsers] = useState([]);
    const [selectedEmail, setSelectedEmail] = useState("");
    const [detail, setDetail] = useState(null);   // {user, effective, overrides}
    const [audit, setAudit] = useState([]);
    const [q, setQ] = useState("");
    const [busy, setBusy] = useState(false);
    const [savingKey, setSavingKey] = useState(null);    // last key whose save is in-flight

    const loadInitial = useCallback(async () => {
        try {
            const [c, u] = await Promise.all([
                api.get("/user-features/catalog"),
                api.get("/users"),
            ]);
            setCatalog(c.data);
            setUsers(u.data || []);
            if ((u.data || []).length && !selectedEmail) setSelectedEmail(u.data[0].email);
        } catch (e) { toast.error("Failed to load"); }
    }, [selectedEmail]);

    useEffect(() => { loadInitial(); }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const loadDetail = useCallback(async (email) => {
        if (!email) return;
        setBusy(true);
        try {
            const [d, a] = await Promise.all([
                api.get(`/user-features/${encodeURIComponent(email)}`),
                api.get(`/user-features/${encodeURIComponent(email)}/audit`, { params: { limit: 30 } }),
            ]);
            setDetail(d.data);
            setAudit(a.data);
        } catch (e) { toast.error("Load detail failed"); }
        finally { setBusy(false); }
    }, []);

    useEffect(() => {
        if (selectedEmail) loadDetail(selectedEmail);
    }, [selectedEmail, loadDetail]);

    const filteredUsers = useMemo(() => {
        const qq = q.toLowerCase().trim();
        if (!qq) return users;
        return users.filter((u) => (u.email + " " + (u.name || "") + " " + (u.role || "")).toLowerCase().includes(qq));
    }, [users, q]);

    const groupedFeatures = useMemo(() => {
        if (!catalog) return {};
        const groups = {};
        for (const f of catalog.features) {
            (groups[f.category] = groups[f.category] || []).push(f);
        }
        return groups;
    }, [catalog]);

    const setFeature = async (key, value) => {
        if (!detail) return;
        setSavingKey(`feat-${key}`);
        try {
            const { data } = await api.put(`/user-features/${encodeURIComponent(detail.user.email)}`, { features: { [key]: value } });
            setDetail((d) => ({ ...d, effective: data.effective, overrides: data.overrides }));
            loadDetail(detail.user.email);    // refresh audit
            toast.success(`${value ? "Enabled" : "Disabled"} for ${detail.user.email}`);
        } catch (e) { toast.error(formatApiError(e.response?.data?.detail) || "Save failed"); }
        finally { setSavingKey(null); }
    };

    const setLimit = async (key, value) => {
        if (!detail) return;
        setSavingKey(`lim-${key}`);
        try {
            const { data } = await api.put(`/user-features/${encodeURIComponent(detail.user.email)}`, { limits: { [key]: value } });
            setDetail((d) => ({ ...d, effective: data.effective, overrides: data.overrides }));
            loadDetail(detail.user.email);
            toast.success(`Limit updated`);
        } catch (e) { toast.error("Save failed"); }
        finally { setSavingKey(null); }
    };

    const runAction = async (action) => {
        if (!detail) return;
        if (!window.confirm(`Confirm: ${action} user ${detail.user.email}?`)) return;
        try {
            await api.post(`/user-features/${encodeURIComponent(detail.user.email)}/action`, { action });
            toast.success(`Action ${action} done`);
            loadDetail(detail.user.email);
            loadInitial();        // refresh suspended marker in the left list
        } catch (e) { toast.error("Action failed"); }
    };

    const resetAll = async () => {
        if (!detail) return;
        if (!window.confirm("Clear ALL feature overrides for this user? They will fall back to role defaults.")) return;
        try {
            await api.post(`/user-features/${encodeURIComponent(detail.user.email)}/reset`);
            toast.success("Overrides cleared");
            loadDetail(detail.user.email);
        } catch (e) { toast.error("Reset failed"); }
    };

    return (
        <div className="space-y-4" data-testid="admin-user-features-page">
            <div className="flex items-center gap-3">
                <div className="rounded-xl bg-primary/10 p-2.5 text-primary"><Crown className="h-6 w-6" /></div>
                <div>
                    <div className="label-cap flex items-center gap-1.5"><Shield className="h-3 w-3" /> Super Admin · Permission Engine</div>
                    <h1 className="font-display text-3xl font-bold tracking-tight">User-Level Feature Control</h1>
                    <p className="text-sm text-muted-foreground mt-1">Har user ke liye alag-alag features ON/OFF karein. Changes instant effect mein lagte hain — no restart needed.</p>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
                {/* LEFT — user list */}
                <Card className="lg:col-span-4"><CardContent className="p-3 space-y-2">
                    <div className="relative">
                        <Search className="h-3.5 w-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
                        <Input placeholder={`Search ${users.length} users…`} className="pl-8 h-9 text-xs" value={q} onChange={(e) => setQ(e.target.value)} data-testid="user-search" />
                    </div>
                    <div className="max-h-[70vh] overflow-y-auto space-y-1">
                        {filteredUsers.length === 0 && <div className="text-xs text-muted-foreground italic py-4 text-center">No users found</div>}
                        {filteredUsers.map((u) => (
                            <button
                                key={u.email}
                                onClick={() => setSelectedEmail(u.email)}
                                className={`w-full text-left rounded-md border px-3 py-2 transition ${selectedEmail === u.email ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/30"}`}
                                data-testid={`user-row-${u.email}`}
                            >
                                <div className="flex items-center justify-between gap-2">
                                    <div className="min-w-0 flex-1">
                                        <div className="text-sm font-medium truncate">{u.name || u.email.split("@")[0]}</div>
                                        <div className="text-[10px] text-muted-foreground truncate">{u.email}</div>
                                    </div>
                                    <div className="flex flex-col items-end gap-0.5">
                                        <Badge variant={u.role === "admin" ? "default" : "secondary"} className="text-[9px]">{u.role || "staff"}</Badge>
                                        {u.is_active === false && <Badge variant="destructive" className="text-[9px]">Suspended</Badge>}
                                    </div>
                                </div>
                            </button>
                        ))}
                    </div>
                </CardContent></Card>

                {/* RIGHT — detail */}
                <Card className="lg:col-span-8">
                    <CardContent className="p-5 space-y-4">
                        {busy && !detail ? (
                            <div className="text-center text-muted-foreground py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto" /></div>
                        ) : !detail ? (
                            <div className="text-center text-muted-foreground italic py-12">Pick a user from the left to manage their features.</div>
                        ) : (
                            <>
                                {/* User header + actions */}
                                <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-3">
                                    <div className="flex items-center gap-3">
                                        <div className="rounded-full bg-primary/10 p-2 text-primary"><Users className="h-5 w-5" /></div>
                                        <div>
                                            <div className="font-semibold text-base">{detail.user.name || detail.user.email}</div>
                                            <div className="text-[11px] text-muted-foreground">{detail.user.email} · role <span className="font-mono">{detail.user.role}</span></div>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-1.5 flex-wrap">
                                        {detail.user.is_active === false ? (
                                            <Button size="sm" variant="outline" onClick={() => runAction("activate")} className="text-emerald-700 border-emerald-500/40" data-testid="action-activate">
                                                <UserCheck className="h-3.5 w-3.5 mr-1.5" /> Activate
                                            </Button>
                                        ) : (
                                            <Button size="sm" variant="outline" onClick={() => runAction("suspend")} className="text-amber-700 border-amber-500/40" data-testid="action-suspend">
                                                <UserX className="h-3.5 w-3.5 mr-1.5" /> Suspend
                                            </Button>
                                        )}
                                        <Button size="sm" variant="outline" onClick={() => runAction("lock")} data-testid="action-lock"><Lock className="h-3.5 w-3.5 mr-1.5" /> Lock</Button>
                                        <Button size="sm" variant="outline" onClick={() => runAction("force_logout")} data-testid="action-force-logout"><ForceLogout className="h-3.5 w-3.5 mr-1.5" /> Force Logout</Button>
                                        <Button size="sm" variant="outline" onClick={resetAll} className="text-destructive border-destructive/40" data-testid="action-reset-all">
                                            <RotateCcw className="h-3.5 w-3.5 mr-1.5" /> Reset All
                                        </Button>
                                    </div>
                                </div>

                                <Tabs defaultValue="features">
                                    <TabsList className="grid grid-cols-3 mb-2">
                                        <TabsTrigger value="features">Features ({Object.values(detail.effective.features).filter(Boolean).length} on)</TabsTrigger>
                                        <TabsTrigger value="limits">Usage Limits</TabsTrigger>
                                        <TabsTrigger value="audit">Audit Trail ({audit.length})</TabsTrigger>
                                    </TabsList>

                                    {/* FEATURES TAB */}
                                    <TabsContent value="features" className="space-y-4">
                                        {Object.entries(groupedFeatures).map(([cat, items]) => {
                                            const Icon = CATEGORY_ICONS[cat] || Sparkles;
                                            return (
                                                <div key={cat}>
                                                    <div className="label-cap mb-1.5 flex items-center gap-1.5"><Icon className="h-3 w-3" /> {cat}</div>
                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-1.5">
                                                        {items.map((f) => {
                                                            const isOn = !!detail.effective.features[f.key];
                                                            const overridden = f.key in (detail.overrides?.features || {});
                                                            return (
                                                                <div key={f.key} className={`flex items-center justify-between rounded-md border px-3 py-1.5 ${overridden ? "border-primary/40 bg-primary/5" : "border-border"}`}>
                                                                    <div className="min-w-0 flex-1">
                                                                        <div className="text-xs font-medium truncate">{f.label}</div>
                                                                        <div className="text-[9px] text-muted-foreground">{f.key}{overridden && <span className="ml-1 text-primary">· custom</span>}</div>
                                                                    </div>
                                                                    {savingKey === `feat-${f.key}` ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : (
                                                                        <Switch checked={isOn} onCheckedChange={(v) => setFeature(f.key, v)} data-testid={`feature-${f.key}`} />
                                                                    )}
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </TabsContent>

                                    {/* LIMITS TAB */}
                                    <TabsContent value="limits" className="space-y-2">
                                        {catalog?.limits.map((ld) => {
                                            const val = detail.effective.limits[ld.key];
                                            const overridden = ld.key in (detail.overrides?.limits || {});
                                            return (
                                                <div key={ld.key} className={`flex items-center justify-between rounded-md border px-3 py-2 ${overridden ? "border-primary/40 bg-primary/5" : "border-border"}`}>
                                                    <div className="flex-1 min-w-0">
                                                        <Label className="text-xs font-medium">{ld.label}</Label>
                                                        <div className="text-[10px] text-muted-foreground">{ld.key} · default {ld.default} {ld.unit}{overridden && <span className="ml-1 text-primary">· custom</span>}</div>
                                                    </div>
                                                    <div className="flex items-center gap-1.5">
                                                        <Input
                                                            type="number"
                                                            defaultValue={val}
                                                            onBlur={(e) => {
                                                                const v = parseFloat(e.target.value);
                                                                if (!Number.isNaN(v) && v !== val) setLimit(ld.key, v);
                                                            }}
                                                            className="h-8 w-32 text-xs"
                                                            data-testid={`limit-${ld.key}`}
                                                        />
                                                        <span className="text-[10px] text-muted-foreground w-12">{ld.unit}</span>
                                                        {savingKey === `lim-${ld.key}` && <Loader2 className="h-3 w-3 animate-spin" />}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </TabsContent>

                                    {/* AUDIT TAB */}
                                    <TabsContent value="audit">
                                        <div className="max-h-[400px] overflow-y-auto space-y-1">
                                            {audit.length === 0 && <div className="text-xs text-muted-foreground italic text-center py-4">No changes yet.</div>}
                                            {audit.map((a) => (
                                                <div key={a.id} className="text-xs border-b border-border/50 py-1.5 flex flex-wrap items-center gap-2">
                                                    <Activity className="h-3 w-3 text-primary flex-shrink-0" />
                                                    <span className="font-mono text-[10px] bg-muted px-1.5 py-0.5 rounded">{a.change_type}</span>
                                                    <span className="text-muted-foreground">{String(a.old_value)} → <span className="text-foreground font-medium">{String(a.new_value)}</span></span>
                                                    <span className="ml-auto text-[10px] text-muted-foreground">by {a.changed_by} · {new Date(a.ts).toLocaleString()}</span>
                                                </div>
                                            ))}
                                        </div>
                                    </TabsContent>
                                </Tabs>
                            </>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}