import { type Component, For, Show, createSignal, lazy, Suspense } from "solid-js";
import { ThemeToggle } from "../components/ThemeToggle";
import { store, restoreTask, deleteTaskPermanently, restoreNote, deleteNotePermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription } from "@/store";
import { useTheme } from "@/components/ThemeProvider";
import { Trash2, Undo2, ArrowLeftRight, Tag, ChevronDown, ChevronRight, Share2, Users, HelpCircle, Copy, Plus, Type, Upload, Box, Edit2, Archive } from "lucide-solid";
import { TagPicker } from "@/components/TagPicker";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { toast } from "solid-sonner";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { PRIORITY_OPTIONS, URGENCY_OPTIONS } from "@/lib/constants";
import { pb } from "@/lib/pocketbase";
import { createEffect } from "solid-js";

const TaskEditor = lazy(() => import("../components/TaskEditor").then(m => ({ default: m.TaskEditor })));
const ImportTool = lazy(() => import("../components/ImportTool").then(m => ({ default: m.ImportTool })));

export const SettingsView: Component<{ setView?: (v: string) => void }> = (props) => {
    const { resolvedTheme } = useTheme();
    const [isTagsOpen, setIsTagsOpen] = createSignal(false);
    const [isTemplatesOpen, setIsTemplatesOpen] = createSignal(false);
    const [isTrashOpen, setIsTrashOpen] = createSignal(false);
    const [isSharingOpen, setIsSharingOpen] = createSignal(false);
    const [isImportOpen, setIsImportOpen] = createSignal(false);
    const [isBucketsOpen, setIsBucketsOpen] = createSignal(false);
    const [expandedTemplateId, setExpandedTemplateId] = createSignal<string | null>(null);
    const [shareUserId, setShareUserId] = createSignal("");
    const [shareType, setShareType] = createSignal<'all' | 'tag'>('all');
    const [shareMode, setShareMode] = createSignal<'ADD_USER' | 'SEND_TASK'>('ADD_USER');
    const [shareTag, setShareTag] = createSignal<string>("");
    const [allUsers, setAllUsers] = createSignal<Array<{ id: string; name: string }>>([]);
    const [usersLoading, setUsersLoading] = createSignal(false);

    // Fetch users when sharing section opens
    createEffect(() => {
        if (isSharingOpen() && allUsers().length === 0 && !usersLoading()) {
            setUsersLoading(true);
            pb.collection('users').getFullList({ fields: 'id,name,email' })
                .then(records => {
                    setAllUsers(records.map((r: any) => ({ id: r.id, name: r.name || r.email || r.id })));
                })
                .catch(err => console.error("Failed to load users:", err))
                .finally(() => setUsersLoading(false));
        }
    });

    const getUserName = (userId: string) => {
        return allUsers().find(u => u.id === userId)?.name || userId;
    };

    const availableUsers = () => {
        const currentUserId = pb.authStore.model?.id;
        return allUsers().filter(u => u.id !== currentUserId);
    };

    return (
        <div class="w-full max-w-2xl mx-auto py-4 sm:py-10 px-4 sm:px-0 space-y-8 sm:space-y-12 animate-in fade-in slide-in-from-bottom-2 duration-500 min-w-0 overflow-hidden text-balance">
            <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div class="min-w-0 flex-1">
                    <h1 class="text-2xl sm:text-4xl font-black tracking-tighter">Settings</h1>
                    <p class="text-[0.625rem] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
                        {pb.authStore.model?.email}
                    </p>
                </div>
                <div class="flex items-center gap-3 w-full sm:w-auto">
                    <div class="shrink-0">
                        <ThemeToggle />
                    </div>
                    <Button
                        variant="outline"
                        size="sm"
                        class="flex-1 sm:w-auto font-black uppercase tracking-widest text-[0.625rem] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
                        onClick={() => { pb.authStore.clear(); location.reload(); }}
                    >
                        Sign Out
                    </Button>
                </div>
            </header>

            <div class="flex flex-col gap-12 mt-4">


                {/* Resources Category (Mostly for Mobile) */}
                <div class="space-y-3 md:hidden">
                    <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Resources</h2>
                    <button
                        onClick={() => props.setView ? props.setView("help") : (window as any).setCurrentView?.("help")}
                        class="w-full p-4 rounded-2xl border border-primary/20 bg-primary/5 shadow-sm flex items-center justify-between group active:scale-[0.98] transition-all"
                    >
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
                                <HelpCircle size={20} />
                            </div>
                            <div class="text-left">
                                <h3 class="text-sm font-bold">User Help Guide</h3>
                                <p class="text-[0.625rem] text-muted-foreground">Learn how to use TaskGrid effectively.</p>
                            </div>
                        </div>
                        <ChevronRight size={16} class="text-muted-foreground group-hover:text-primary transition-colors" />
                    </button>
                </div>

                {/* Sharing Category */}
                <div class="space-y-3">
                    <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Sharing</h2>
                    <div class="grid gap-4">
                        {/* Sharing */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div
                                class="flex items-center justify-between cursor-pointer group"
                                onClick={() => setIsSharingOpen(!isSharingOpen())}
                            >
                                <div class="space-y-0.5">
                                    <h3 class="text-base font-semibold flex items-center gap-2">
                                        <Share2 size={16} />
                                        Task Sharing
                                    </h3>
                                    <p class="text-sm text-muted-foreground">Share all tasks or tasks with specific tags with others.</p>
                                </div>
                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                    {isSharingOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                </div>
                            </div>

                            <Show when={isSharingOpen()}>
                                <div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    {/* Add new share rule */}
                                    <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
                                        <div class="flex gap-2">
                                            <Button
                                                variant={shareType() === 'all' ? 'default' : 'outline'}
                                                size="sm"
                                                class="h-8 text-xs gap-1"
                                                onClick={() => setShareType('all')}
                                            >
                                                <Users size={12} />
                                                All Tasks
                                            </Button>
                                            <Button
                                                variant={shareType() === 'tag' ? 'default' : 'outline'}
                                                size="sm"
                                                class="h-8 text-xs gap-1"
                                                onClick={() => setShareType('tag')}
                                            >
                                                <Tag size={12} />
                                                By Tag
                                            </Button>
                                        </div>

                                        {/* Share Mode Selection */}
                                        <div class="flex gap-2">
                                            <Button
                                                variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
                                                size="sm"
                                                class="h-7 text-[0.625rem] gap-1 px-2"
                                                title="Recipient gets edit access (Collaboration)"
                                                onClick={() => setShareMode('ADD_USER')}
                                            >
                                                <Users size={10} />
                                                Collaborate
                                            </Button>
                                            <Button
                                                variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
                                                size="sm"
                                                class="h-7 text-[0.625rem] gap-1 px-2"
                                                title="Task ownership is transferred to recipient (Handoff)"
                                                onClick={() => setShareMode('SEND_TASK')}
                                            >
                                                <ArrowLeftRight size={10} />
                                                Handoff
                                            </Button>
                                        </div>

                                        <Show when={shareType() === 'tag'}>
                                            <Select
                                                value={shareTag()}
                                                onChange={(val) => {
                                                    if (val) {
                                                        setShareTag(val);
                                                        const tagDef = store.tagDefinitions.find(t => t.name === val);
                                                        const isBucket = tagDef?.isBucket || store.buckets.some(b => b.name === val);
                                                        const isUser = tagDef?.isUser;

                                                        if (isBucket) {
                                                            setShareMode('SEND_TASK');
                                                        } else if (isUser) {
                                                            setShareMode('ADD_USER');
                                                        }
                                                    }
                                                }}
                                                options={store.tagDefinitions.map(t => t.name)}
                                                placeholder="Select a tag"
                                                itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
                                            >
                                                <SelectTrigger class="h-9 text-sm">
                                                    <span>{shareTag() || "Select a tag..."}</span>
                                                </SelectTrigger>
                                                <SelectContent />
                                            </Select>
                                        </Show>

                                        <div class="flex gap-2">
                                            <Select<{ id: string; name: string }>
                                                value={allUsers().find(u => u.id === shareUserId()) || null}
                                                onChange={(user) => setShareUserId(user?.id || "")}
                                                options={availableUsers()}
                                                optionValue="id"
                                                optionTextValue="name"
                                                placeholder={usersLoading() ? "Loading..." : "Select user..."}
                                                itemComponent={(itemProps: any) => (
                                                    <SelectItem item={itemProps.item}>{itemProps.item.rawValue.name}</SelectItem>
                                                )}
                                            >
                                                <SelectTrigger class="flex-1 h-9 text-sm">
                                                    <SelectValue<{ id: string; name: string }>>
                                                        {(state) => state.selectedOption()?.name || "Select user..."}
                                                    </SelectValue>
                                                </SelectTrigger>
                                                <SelectContent />
                                            </Select>
                                            <Button
                                                size="sm"
                                                class="h-9 gap-2"
                                                disabled={!shareUserId()}
                                                onClick={async () => {
                                                    if (shareUserId()) {
                                                        await addShareRule(shareType(), shareUserId(), shareType() === 'tag' ? shareTag() : undefined, shareMode());
                                                        setShareUserId("");
                                                    }
                                                }}
                                            >
                                                <Plus size={14} />
                                                Share
                                            </Button>
                                        </div>
                                        <p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
                                            {shareMode() === 'ADD_USER'
                                                ? "User will be added to the task's shared list."
                                                : "Task owner will change to the recipient immediately when tagged."}
                                        </p>

                                    </div>

                                    {/* Active share rules */}
                                    {/* Active share rules - Outgoing */}
                                    <div class="space-y-3">
                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
                                            <div class="w-1 h-1 rounded-full bg-primary" />
                                            Sharing With Others
                                        </h4>
                                        <For each={store.shareRules.filter(r => {
                                            const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
                                            const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
                                            const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
                                            const isOwner = r.ownerId === pb.authStore.model?.id;
                                            return !isSystem && isOwner;
                                        })} fallback={
                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
                                                You aren't sharing with anyone yet.
                                            </div>
                                        }>
                                            {(rule) => (
                                                <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all">
                                                    <div class="flex items-center gap-3 min-w-0 flex-1">
                                                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0 transition-transform group-hover/rule:scale-110">
                                                            {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
                                                        </div>
                                                        <div class="min-w-0">
                                                            <p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
                                                            <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
                                                                {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
                                                                <span class="mx-1">•</span>
                                                                <button
                                                                    class="hover:text-primary transition-colors hover:underline"
                                                                    onClick={() => updateShareRule(rule.id, {
                                                                        share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
                                                                    })}
                                                                >
                                                                    {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
                                                                </button>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all opacity-0 group-hover/rule:opacity-100"
                                                        onClick={() => removeShareRule(rule.id)}
                                                    >
                                                        <Trash2 size={14} />
                                                    </Button>
                                                </div>
                                            )}
                                        </For>
                                    </div>

                                    {/* Active share rules - Incoming */}
                                    <div class="space-y-3 pt-4 border-t border-border/20">
                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
                                            <div class="w-1 h-1 rounded-full bg-indigo-500" />
                                            Shared With You
                                        </h4>
                                        <For each={store.shareRules.filter(r => {
                                            const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
                                            const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
                                            const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
                                            const isTarget = r.targetUserId === pb.authStore.model?.id;
                                            return !isSystem && isTarget;
                                        })} fallback={
                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
                                                No one has shared with you yet.
                                            </div>
                                        }>
                                            {(rule) => (
                                                <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all opacity-80">
                                                    <div class="flex items-center gap-3 min-w-0 flex-1">
                                                        <div class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 shrink-0">
                                                            {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
                                                        </div>
                                                        <div class="min-w-0">
                                                            <p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
                                                            <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
                                                                {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
                                                                <span class="mx-1">•</span>
                                                                {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    {/* No delete button for incoming rules unless we add leave logic later */}
                                                </div>
                                            )}
                                        </For>
                                    </div>

                                    {/* Active share rules - System */}
                                    <details class="group/details">
                                        <summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none">
                                            <div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
                                                <ChevronRight size={12} />
                                            </div>
                                            System Rules (Auto-Generated)
                                        </summary>
                                        <div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
                                            <For each={store.shareRules.filter(r => {
                                                const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
                                                const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
                                                return tagDef?.isUser || tagDef?.isBucket || isBucketTag;
                                            })}>
                                                {(rule) => {
                                                    const tagDef = store.tagDefinitions.find(t => t.name === rule.tagName);
                                                    return (
                                                        <div class="flex items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 opacity-70">
                                                            <div class="flex items-center gap-3 min-w-0 flex-1">
                                                                <Tag size={14} class="text-muted-foreground shrink-0" />
                                                                <div class="min-w-0">
                                                                    <p class="text-sm font-medium truncate flex items-center gap-2">
                                                                        {/* If it's a user tag, show the person's name. If it's a bucket, show the bucket name (tagName). */}
                                                                        {tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
                                                                        {tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
                                                                    </p>
                                                                    <p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
                                                                        Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
                                                                        <span class="mx-1">•</span>
                                                                        <button
                                                                            class="hover:text-primary transition-colors hover:underline"
                                                                            onClick={() => updateShareRule(rule.id, {
                                                                                share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
                                                                            })}
                                                                        >
                                                                            {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
                                                                        </button>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    );
                                                }}
                                            </For>
                                        </div>
                                    </details>
                                </div>
                            </Show>
                        </section>


                        {/* Buckets Manager */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div
                                class="flex items-center justify-between cursor-pointer group"
                                onClick={() => setIsBucketsOpen(!isBucketsOpen())}
                            >
                                <div class="space-y-0.5">
                                    <h3 class="text-base font-semibold flex items-center gap-2">
                                        <Box size={16} />
                                        Shared Global Buckets
                                    </h3>
                                    <p class="text-sm text-muted-foreground">Manage public task buckets and your subscriptions.</p>
                                </div>
                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                    {isBucketsOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                </div>
                            </div>

                            <Show when={isBucketsOpen()}>
                                <div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    {/* Create Bucket */}
                                    <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
                                        <form
                                            class="flex flex-col sm:flex-row gap-2"
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                const form = e.currentTarget;
                                                const nameInput = form.elements.namedItem('name') as HTMLInputElement;
                                                const colorInput = form.elements.namedItem('color') as HTMLInputElement;
                                                const descInput = form.elements.namedItem('desc') as HTMLInputElement;

                                                if (nameInput.value) {
                                                    createBucket(nameInput.value, colorInput.value || "#6366f1", descInput.value);
                                                    nameInput.value = "";
                                                    descInput.value = "";
                                                    form.reset();
                                                }
                                            }}
                                        >
                                            <div class="flex gap-2 w-full sm:w-auto min-w-0">
                                                <input
                                                    name="color"
                                                    type="color"
                                                    class="w-9 h-9 rounded-lg border border-input p-0.5 bg-background cursor-pointer shrink-0"
                                                    value="#6366f1"
                                                />
                                                <input
                                                    name="name"
                                                    class="flex h-9 flex-1 sm:w-48 sm:flex-none rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                                                    placeholder="Bucket Name"
                                                    required
                                                />
                                            </div>
                                            <div class="flex gap-2 w-full sm:flex-1 min-w-0">
                                                <input
                                                    name="desc"
                                                    class="flex flex-1 h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                                                    placeholder="Description (optional)"
                                                />
                                                <Button size="sm" type="submit" class="h-9 gap-2 shrink-0">
                                                    <Plus size={14} />
                                                    Create
                                                </Button>
                                            </div>
                                        </form>
                                    </div>

                                    {/* List Buckets */}
                                    <div class="space-y-2">
                                        <For each={store.buckets} fallback={
                                            <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
                                                No buckets found.
                                            </div>
                                        }>
                                            {(bucket) => {
                                                const isSubscribed = () => store.subscribedBuckets.includes(bucket.id);
                                                const [isEditing, setIsEditing] = createSignal(false);
                                                const [editName, setEditName] = createSignal(bucket.name);

                                                return (
                                                    <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/bucket hover:bg-muted/30 transition-all">
                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
                                                            <div
                                                                class="w-2 h-8 rounded-full shrink-0"
                                                                style={{ "background-color": bucket.color }}
                                                            />
                                                            <div class="min-w-0 flex-1">
                                                                <Show when={isEditing()} fallback={
                                                                    <div class="flex items-center gap-2">
                                                                        <p class="font-bold text-sm truncate">{bucket.name}</p>
                                                                        <button onClick={() => setIsEditing(true)} class="opacity-0 group-hover/bucket:opacity-50 hover:opacity-100 transition-opacity">
                                                                            <Edit2 size={10} />
                                                                        </button>
                                                                    </div>
                                                                }>
                                                                    <input
                                                                        value={editName()}
                                                                        onInput={(e) => setEditName(e.currentTarget.value)}
                                                                        onBlur={() => {
                                                                            if (editName() !== bucket.name) updateBucket(bucket.id, { name: editName() });
                                                                            setIsEditing(false);
                                                                        }}
                                                                        onKeyDown={(e) => {
                                                                            if (e.key === "Enter") {
                                                                                if (editName() !== bucket.name) updateBucket(bucket.id, { name: editName() });
                                                                                setIsEditing(false);
                                                                            }
                                                                        }}
                                                                        class="h-6 w-full max-w-[150px] rounded border border-input bg-transparent px-1 text-sm"
                                                                        autofocus
                                                                    />
                                                                </Show>
                                                                <p class="text-[0.625rem] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
                                                            </div>
                                                        </div>

                                                        <div class="flex items-center gap-2">
                                                            <Button
                                                                variant={isSubscribed() ? "secondary" : "outline"}
                                                                size="sm"
                                                                class={cn(
                                                                    "h-8 text-xs gap-2 transition-all",
                                                                    isSubscribed() ? "bg-primary/20 text-primary hover:bg-primary/30" : "opacity-70 group-hover/bucket:opacity-100"
                                                                )}
                                                                onClick={() => toggleBucketSubscription(bucket.id)}
                                                            >
                                                                {isSubscribed() ? (
                                                                    <>
                                                                        <Archive size={12} class="rotate-180" />
                                                                        Pinned
                                                                    </>
                                                                ) : (
                                                                    <>
                                                                        <Archive size={12} />
                                                                        Pin
                                                                    </>
                                                                )}
                                                            </Button>

                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 opacity-0 group-hover/bucket:opacity-100 transition-opacity"
                                                                onClick={() => {
                                                                    if (confirm(`Delete the bucket "${bucket.name}" ? This cannot be undone and will affect all users.`)) {
                                                                        deleteBucket(bucket.id);
                                                                    }
                                                                }}
                                                            >
                                                                <Trash2 size={14} />
                                                            </Button>
                                                        </div>
                                                    </div>
                                                );
                                            }}
                                        </For>
                                    </div>
                                </div>
                            </Show>
                        </section>





                    </div>
                </div>

                {/* Tasks Category */}
                <div class="space-y-3">
                    <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Tasks</h2>
                    <div class="grid gap-4">
                        {/* Task Template Manager */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div class="flex items-center justify-between">
                                <div
                                    class="flex flex-1 items-center justify-between cursor-pointer group mr-4"
                                    onClick={() => setIsTemplatesOpen(!isTemplatesOpen())}
                                >
                                    <div class="space-y-0.5">
                                        <h3 class="text-base font-semibold flex items-center gap-2">
                                            <Copy size={16} />
                                            Task Templates
                                        </h3>
                                        <p class="text-sm text-muted-foreground">Save frequent task configurations for quick reuse.</p>
                                    </div>
                                    <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                        {isTemplatesOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                    </div>
                                </div>
                                <Button
                                    size="sm"
                                    class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem]"
                                    onClick={() => {
                                        addTemplate({
                                            name: "New Template",
                                            title: "",
                                            priority: 5,
                                            urgency: 5,
                                            tags: [],
                                            content: ""
                                        });
                                        toast.success("New template created");
                                    }}
                                >
                                    <Plus size={14} />
                                    New
                                </Button>
                            </div>

                            <Show when={isTemplatesOpen()}>
                                <div class="grid gap-3 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    <For each={store.templates || []} fallback={
                                        <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
                                            No templates created yet.
                                        </div>
                                    }>
                                        {(template) => {
                                            const [isEditingName, setIsEditingName] = createSignal(false);
                                            const [editName, setEditName] = createSignal(template.name);
                                            const [editTitle, setEditTitle] = createSignal(template.title);

                                            const isExpanded = () => expandedTemplateId() === template.id;

                                            const handleSaveName = () => {
                                                if (editName() && editName() !== template.name) {
                                                    updateTemplate(template.id, { name: editName() });
                                                }
                                                setIsEditingName(false);
                                            };

                                            const handleSaveTitle = () => {
                                                if (editTitle() !== template.title) {
                                                    updateTemplate(template.id, { title: editTitle() });
                                                }
                                            };

                                            return (
                                                <div class={cn(
                                                    "flex flex-col rounded-2xl border transition-all overflow-hidden shadow-sm",
                                                    isExpanded() ? "bg-card border-primary/50 ring-1 ring-primary/20" : "bg-muted/20 border-border/40 hover:bg-muted/40"
                                                )}>
                                                    <div class="flex items-center justify-between gap-3 p-3.5">
                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
                                                            <div
                                                                class={cn(
                                                                    "w-8 h-8 rounded-xl flex items-center justify-center shrink-0 transition-colors cursor-pointer",
                                                                    isExpanded() ? "bg-primary text-primary-foreground" : "bg-primary/10 text-primary"
                                                                )}
                                                                onClick={() => setExpandedTemplateId(isExpanded() ? null : template.id)}
                                                            >
                                                                <Copy size={16} />
                                                            </div>
                                                            {isEditingName() ? (
                                                                <input
                                                                    class="flex h-8 min-w-0 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                                                    value={editName()}
                                                                    onInput={(e) => setEditName(e.currentTarget.value)}
                                                                    onBlur={handleSaveName}
                                                                    onKeyDown={(e) => e.key === "Enter" && handleSaveName()}
                                                                    autofocus
                                                                />
                                                            ) : (
                                                                <div class="min-w-0 cursor-pointer flex-1" onClick={() => setExpandedTemplateId(isExpanded() ? null : template.id)}>
                                                                    <p class="font-bold text-sm tracking-tight truncate">{template.name}</p>
                                                                    <p class="text-[0.625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60">
                                                                        P:{template.priority} / U:{template.urgency} / {template.tags?.length || 0} Tags
                                                                    </p>
                                                                </div>
                                                            )}
                                                        </div>
                                                        <div class="flex items-center gap-1 shrink-0">
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-8 w-8 hover:bg-primary/10 hover:text-primary rounded-xl"
                                                                onClick={(e: MouseEvent) => {
                                                                    e.stopPropagation();
                                                                    setIsEditingName(true);
                                                                }}
                                                            >
                                                                <Type size={14} />
                                                            </Button>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-8 w-8 hover:bg-red-500/10 hover:text-red-600 rounded-xl"
                                                                onClick={(e: MouseEvent) => {
                                                                    e.stopPropagation();
                                                                    if (confirm(`Delete template "${template.name}" ? `)) {
                                                                        removeTemplate(template.id);
                                                                        toast.error("Template removed");
                                                                    }
                                                                }}
                                                            >
                                                                <Trash2 size={14} />
                                                            </Button>
                                                        </div>
                                                    </div>

                                                    <Show when={isExpanded()}>
                                                        <div class="border-t border-border/50 p-4 space-y-4 bg-background/50 animate-in fade-in slide-in-from-top-2 duration-300">
                                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                                <div class="space-y-1.5">
                                                                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
                                                                    <input
                                                                        class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                                                        value={editTitle()}
                                                                        onInput={(e) => setEditTitle(e.currentTarget.value)}
                                                                        onBlur={handleSaveTitle}
                                                                        placeholder="Default task title..."
                                                                    />
                                                                </div>
                                                                <div class="flex gap-4">
                                                                    <div class="flex-1 space-y-1.5">
                                                                        <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
                                                                        <select
                                                                            class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
                                                                            value={template.priority}
                                                                            onChange={(e) => updateTemplate(template.id, { priority: parseInt(e.currentTarget.value) })}
                                                                        >
                                                                            <For each={PRIORITY_OPTIONS}>
                                                                                {(opt) => <option value={opt.value}>{opt.label}</option>}
                                                                            </For>
                                                                        </select>
                                                                    </div>
                                                                    <div class="flex-1 space-y-1.5">
                                                                        <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
                                                                        <select
                                                                            class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
                                                                            value={template.urgency}
                                                                            onChange={(e) => updateTemplate(template.id, { urgency: parseInt(e.currentTarget.value) })}
                                                                        >
                                                                            <For each={URGENCY_OPTIONS}>
                                                                                {(opt) => <option value={opt.value}>{opt.label}</option>}
                                                                            </For>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="space-y-1.5">
                                                                <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
                                                                <div class="flex flex-wrap gap-2 p-2 rounded-xl bg-muted/30 border border-border/40">
                                                                    <TagPicker
                                                                        selectedTags={template.tags || []}
                                                                        onTagsChange={(tags) => updateTemplate(template.id, { tags })}
                                                                    />
                                                                    <For each={template.tags || []}>
                                                                        {(tag) => (
                                                                            <button
                                                                                class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-background border border-border/50 text-xs hover:bg-destructive/10 hover:border-destructive/30 group/tag transition-all"
                                                                                onClick={() => updateTemplate(template.id, { tags: (template.tags || []).filter(t => t !== tag) })}
                                                                            >
                                                                                <div
                                                                                    class="w-1.5 h-1.5 rounded-full"
                                                                                    style={{
                                                                                        "background-color": store.tagDefinitions.find(d => d.name === tag)?.color ||
                                                                                            ((store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8")
                                                                                    }}
                                                                                />
                                                                                {tag}
                                                                            </button>
                                                                        )}
                                                                    </For>
                                                                </div>
                                                            </div>

                                                            <div class="space-y-1.5">
                                                                <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
                                                                <div class="min-h-[120px] rounded-xl border border-border/40 bg-background/50 p-2 overflow-hidden prose-sm">
                                                                    <Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
                                                                        <TaskEditor
                                                                            content={template.content}
                                                                            onUpdate={(html) => {
                                                                                // For the rich editor, we can use a slightly debounced store update
                                                                                // to avoid losing focus if the parent re-renders,
                                                                                // although Tiptap usually handles its own state well.
                                                                                // But to be safe, let's just update the store.
                                                                                updateTemplate(template.id, { content: html });
                                                                            }}
                                                                            class="min-h-[100px]"
                                                                        />
                                                                    </Suspense>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </Show>
                                                </div>
                                            );
                                        }}
                                    </For>
                                </div>
                            </Show>
                        </section>

                        {/* Import Tasks */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div
                                class="flex items-center justify-between cursor-pointer group"
                                onClick={() => setIsImportOpen(!isImportOpen())}
                            >
                                <div class="space-y-0.5">
                                    <h3 class="text-base font-semibold flex items-center gap-2">
                                        <Upload size={16} />
                                        Import Tasks
                                    </h3>
                                    <p class="text-sm text-muted-foreground">Paste a list of tasks from another app to import them.</p>
                                </div>
                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                    {isImportOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                </div>
                            </div>

                            <Show when={isImportOpen()}>
                                <div class="pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    <Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
                                        <ImportTool />
                                    </Suspense>
                                </div>
                            </Show>
                        </section>

                        {/* Trash Manager */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div
                                class="flex items-center justify-between cursor-pointer group"
                                onClick={() => setIsTrashOpen(!isTrashOpen())}
                            >
                                <div class="space-y-0.5 min-w-0">
                                    <h3 class="text-base font-semibold flex items-center gap-2">
                                        <Trash2 size={16} />
                                        Trash
                                    </h3>
                                    <p class="text-sm text-muted-foreground truncate">Items are permanently deleted after 7 days.</p>
                                </div>
                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                    {isTrashOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                </div>
                            </div>

                            <Show when={isTrashOpen()}>
                                <div class="space-y-6 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    {/* Tasks Trash */}
                                    <div class="space-y-2">
                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pl-1">Tasks</h4>
                                        <For each={store.tasks.filter(t => t.deletedAt)} fallback={
                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] italic border border-dashed border-border/40 rounded-xl bg-muted/5 uppercase tracking-widest">
                                                No trashed tasks.
                                            </div>
                                        }>
                                            {(task) => {
                                                const daysLeft = Math.ceil(((task.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
                                                return (
                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
                                                        <div class="min-w-0 flex-1 px-1">
                                                            <p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
                                                            <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
                                                        </div>
                                                        <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
                                                            <Button
                                                                variant="secondary"
                                                                size="sm"
                                                                class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
                                                                onClick={() => {
                                                                    restoreTask(task.id);
                                                                    toast.success("Task restored");
                                                                }}
                                                            >
                                                                <Undo2 size={14} class="mr-2" />
                                                                Recover
                                                            </Button>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
                                                                onClick={() => {
                                                                    if (confirm("Permanently delete this task? This cannot be undone.")) {
                                                                        deleteTaskPermanently(task.id);
                                                                        toast.error("Task permanently deleted");
                                                                    }
                                                                }}
                                                            >
                                                                <Trash2 size={14} />
                                                            </Button>
                                                        </div>
                                                    </div>
                                                );
                                            }}
                                        </For>
                                    </div>

                                    {/* Notes Trash */}
                                    <div class="space-y-2">
                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pl-1">Notes</h4>
                                        <For each={store.notes.filter(n => n.deletedAt)} fallback={
                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] italic border border-dashed border-border/40 rounded-xl bg-muted/5 uppercase tracking-widest">
                                                No trashed notes.
                                            </div>
                                        }>
                                            {(note) => {
                                                const daysLeft = Math.ceil(((note.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
                                                return (
                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
                                                        <div class="min-w-0 flex-1 px-1">
                                                            <p class="font-semibold truncate text-sm sm:text-base">{note.title || "Untitled"}</p>
                                                            <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
                                                        </div>
                                                        <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
                                                            <Button
                                                                variant="secondary"
                                                                size="sm"
                                                                class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
                                                                onClick={() => {
                                                                    restoreNote(note.id);
                                                                    toast.success("Note restored");
                                                                }}
                                                            >
                                                                <Undo2 size={14} class="mr-2" />
                                                                Recover
                                                            </Button>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
                                                                onClick={() => {
                                                                    if (confirm("Permanently delete this note? This cannot be undone.")) {
                                                                        deleteNotePermanently(note.id);
                                                                        toast.error("Note permanently deleted");
                                                                    }
                                                                }}
                                                            >
                                                                <Trash2 size={14} />
                                                            </Button>
                                                        </div>
                                                    </div>
                                                );
                                            }}
                                        </For>
                                    </div>
                                </div>
                            </Show>
                        </section>
                    </div>
                </div>

                {/* Organization Category */}
                <div class="space-y-3">
                    <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Organization</h2>
                    <div class="grid gap-4">
                        {/* Global Tag Manager */}
                        <section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 overflow-hidden">
                            <div
                                class="flex items-center justify-between cursor-pointer group"
                                onClick={() => setIsTagsOpen(!isTagsOpen())}
                            >
                                <div class="space-y-0.5">
                                    <h3 class="text-base font-semibold flex items-center gap-2">
                                        <Tag size={16} />
                                        Tag List
                                    </h3>
                                    <p class="text-sm text-muted-foreground">Manage tag definitions and values.</p>
                                </div>
                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                    {isTagsOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                                </div>
                            </div>

                            <Show when={isTagsOpen()}>
                                <div class="space-y-2 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                    <div class="space-y-2">
                                        <For each={store.tagDefinitions.filter(t => !t.isUser && !t.isBucket && !t.name.startsWith('#') && !t.name.startsWith('@')).sort((a, b) => a.name.localeCompare(b.name))} fallback={
                                            <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
                                                No custom tags found.
                                            </div>
                                        }>
                                            {(tag) => {
                                                const [isEditingName, setIsEditingName] = createSignal(false);
                                                const [tempName, setTempName] = createSignal(tag.name);

                                                const handleRename = () => {
                                                    if (tempName() && tempName() !== tag.name) {
                                                        renameTagDefinition(tag.name, tempName());
                                                    }
                                                    setIsEditingName(false);
                                                };

                                                return (
                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded-xl bg-muted/30 border border-border/50 gap-3 sm:gap-4 group">
                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
                                                            <input
                                                                type="color"
                                                                value={tag.color || "#6366f1"}
                                                                onInput={(e) => upsertTagDefinition(tag.name, tag.value, e.currentTarget.value, resolvedTheme())}
                                                                class="w-4 h-4 rounded-full border-none p-0 bg-transparent cursor-pointer shrink-0 overflow-hidden"
                                                                title="Tag accent color"
                                                            />

                                                            {isEditingName() ? (
                                                                <input
                                                                    class="flex h-7 min-w-0 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                                                    value={tempName()}
                                                                    onInput={(e) => setTempName(e.currentTarget.value)}
                                                                    onBlur={handleRename}
                                                                    onKeyDown={(e) => e.key === "Enter" && handleRename()}
                                                                    autofocus
                                                                />
                                                            ) : (
                                                                <span
                                                                    class="font-medium cursor-pointer hover:underline decoration-dashed underline-offset-4 truncate"
                                                                    onClick={() => setIsEditingName(true)}
                                                                    title="Click to rename"
                                                                >
                                                                    {tag.name}
                                                                </span>
                                                            )}
                                                        </div>

                                                        <div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
                                                            <div class="flex items-center gap-2">
                                                                <span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
                                                                <select
                                                                    value={String(tag.value)}
                                                                    onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
                                                                    class="flex h-8 w-16 items-center justify-between rounded-md border border-input bg-background px-2 py-1 text-xs shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring appearance-none"
                                                                >
                                                                    <For each={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"]}>
                                                                        {(v) => <option value={v}>{v}</option>}
                                                                    </For>
                                                                </select>
                                                            </div>

                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                                                                onClick={() => {
                                                                    if (confirm(`Delete tag definition for "${tag.name}" ? `)) {
                                                                        removeTagDefinition(tag.name);
                                                                    }
                                                                }}
                                                            >
                                                                <Trash2 size={14} />
                                                            </Button>
                                                        </div>
                                                    </div>
                                                );
                                            }}
                                        </For>
                                    </div>

                                    {/* User/System Tags Expansion */}
                                    <details class="group/details">
                                        <summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none pt-4">
                                            <div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
                                                <ChevronRight size={12} />
                                            </div>
                                            System Tags (Users, Buckets & Notes)
                                        </summary>
                                        <div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
                                            <For each={store.tagDefinitions.filter(t => t.isUser || t.isBucket || t.name.startsWith('#') || t.name.startsWith('@')).sort((a, b) => a.name.localeCompare(b.name))}>
                                                {(tag) => (
                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 sm:gap-4 group opacity-80">
                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
                                                            <input
                                                                type="color"
                                                                value={tag.color || "#6366f1"}
                                                                onInput={(e) => upsertTagDefinition(tag.name, tag.value, e.currentTarget.value, resolvedTheme())}
                                                                class="w-4 h-4 rounded-full border-none p-0 bg-transparent cursor-pointer shrink-0 overflow-hidden"
                                                                title="Tag accent color"
                                                            />
                                                            <span class="font-medium truncate flex items-center gap-2 text-sm">
                                                                {tag.name}
                                                                <Users size={12} class="text-muted-foreground opacity-70" />
                                                            </span>
                                                        </div>

                                                        <div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
                                                            <div class="flex items-center gap-2">
                                                                <span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
                                                                <select
                                                                    value={String(tag.value)}
                                                                    onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
                                                                    class="flex h-7 w-14 items-center justify-between rounded-md border border-input bg-background/50 px-2 py-1 text-xs shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring appearance-none"
                                                                >
                                                                    <For each={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"]}>
                                                                        {(v) => <option value={v}>{v}</option>}
                                                                    </For>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )}
                                            </For>
                                        </div>
                                    </details>
                                </div>
                            </Show>
                        </section>
                    </div>
                </div>
            </div>

            <footer class="pt-40 pb-20 flex flex-col items-center gap-4">
                <Button
                    variant="ghost"
                    size="sm"
                    class="h-8 gap-2 text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground opacity-30 hover:opacity-100 transition-opacity"
                    onClick={async () => {
                        const { forceServiceWorkerUpdate } = await import('@/components/PwaUpdater');
                        forceServiceWorkerUpdate();
                        toast.success("Checking for updates...");
                    }}
                >
                    <Upload class="rotate-180" size={14} />
                    Check for Updates
                </Button>
                <p class="text-[0.5rem] font-mono text-muted-foreground/30 uppercase tracking-[0.2em]">Tasgrid v1.0.0</p>
            </footer>
        </div>
    );
};