UPDATE THIS CODE:'use client'

import { useState, useEffect } from 'react';
import { Tag, TagType, TAG_TYPES } from '@/types/tag';
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Plus, X } from 'lucide-react';
import { Badge } from "@/components/ui/badge";

// Add pastel colors array
const PASTEL_COLORS = [
    '#FFB3BA', // pastel red
    '#BAFFC9', // pastel green
    '#BAE1FF', // pastel blue
    '#FFFFBA', // pastel yellow
    '#FFB3F7', // pastel pink
    '#B5EAD7', // pastel mint
    '#E2F0CB', // pastel lime
    '#FFDAC1', // pastel peach
    '#C7CEEA', // pastel periwinkle
    '#E0BBE4', // pastel lavender
];

export default function TagsPage() {
    const [tags, setTags] = useState<Tag[]>([]);
    const [newTagName, setNewTagName] = useState('');
    const [selectedType, setSelectedType] = useState<TagType>('TRADE_JOURNAL');
    const [isCreating, setIsCreating] = useState(false);

    // Add function to generate random color
    const generateTagColor = (): string => {
        return PASTEL_COLORS[Math.floor(Math.random() * PASTEL_COLORS.length)];
    };

    // Add function to determine text color based on background
    const getContrastColor = (bgColor: string): string => {
        const hex = bgColor.replace('#', '');
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.5 ? '#000000' : '#ffffff';
    };

    useEffect(() => {
        fetchTags();
    }, []);

    const handleTypeChange = (value: string) => {
        setSelectedType(value as TagType);
    };

    const fetchTags = async () => {
        const response = await fetch('/api/tags?includeInactive=true');
        if (response.ok) {
            const fetchedTags = await response.json();
            setTags(fetchedTags);
        }
    };

    const createTag = async () => {
        if (!newTagName.trim()) return;

        const tagColor = generateTagColor();

        const response = await fetch('/api/tags', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: newTagName,
                type: selectedType,
                color: tagColor, // Include the generated color
            }),
        });

        if (response.ok) {
            setNewTagName('');
            setIsCreating(false);
            fetchTags();
        }
    };

    const toggleTagActive = async (tagId: number, active: boolean) => {
        const response = await fetch(`/api/tags/${tagId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ active }),
        });

        if (response.ok) {
            fetchTags();
        }
    };

    const groupedTags = tags.reduce((acc, tag) => {
        if (!acc[tag.type]) {
            acc[tag.type] = [];
        }
        acc[tag.type].push(tag);
        return acc;
    }, {} as Record<string, Tag[]>);

    return (
        <div className="container mx-auto py-6">
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-2xl font-bold">Tag Management</h1>
                <Button onClick={() => setIsCreating(true)} className="flex items-center gap-2">
                    <Plus className="w-4 h-4" /> Add New Tag
                </Button>
            </div>

            {isCreating && (
                <Card className="mb-6">
                    <CardHeader>
                        <CardTitle>Create New Tag</CardTitle>
                        <CardDescription>Add a new tag to organize your trades and journal entries</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex gap-4">
                            <Input
                                value={newTagName}
                                onChange={(e) => setNewTagName(e.target.value)}
                                placeholder="Enter tag name..."
                                className="flex-1"
                            />
                            <Select value={selectedType} onValueChange={handleTypeChange}>
                                <SelectTrigger className="w-[200px]">
                                    <SelectValue placeholder="Select type" />
                                </SelectTrigger>
                                <SelectContent>
                                    {Object.values(TAG_TYPES).map((type) => (
                                        <SelectItem key={type} value={type}>
                                            {type.replace(/_/g, ' ')}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            <Button onClick={createTag}>Create</Button>
                            <Button variant="ghost" onClick={() => setIsCreating(false)}>Cancel</Button>
                        </div>
                    </CardContent>
                </Card>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Object.entries(groupedTags).map(([type, tagsList]) => (
                    <Card key={type}>
                        <CardHeader>
                            <CardTitle>{type.replace(/_/g, ' ')}</CardTitle>
                            <CardDescription>{tagsList.length} tags</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-wrap gap-2">
                                {tagsList.map(tag => (
                                    <Badge
                                        key={tag.id}
                                        variant={tag.active ? "default" : "secondary"}
                                        className="flex items-center gap-1"
                                        style={{
                                            backgroundColor: tag.color || undefined,
                                            color: tag.color ? getContrastColor(tag.color) : undefined
                                        }}
                                    >
                                        {tag.name}
                                        <button
                                            onClick={() => toggleTagActive(tag.id, !tag.active)}
                                            className="ml-1 hover:text-red-500"
                                        >
                                            <X className="w-3 h-3" />
                                        </button>
                                    </Badge>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </div>
    );
}

WITH THE INSTRUCTIONS:'use client'

import { useState, useEffect } from 'react';
import { Tag, TagType, TAG_TYPES } from '@/types/tag';
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Plus, X } from 'lucide-react';
import { Badge } from "@/components/ui/badge";

// Updated brighter pastel colors
const PASTEL_COLORS = [
    '#FF9EAA', // brighter pastel red
    '#98FB98', // bright mint green
    '#87CEFA', // bright sky blue
    '#FFEF8F', // bright pastel yellow
    '#FFA6E6', // bright pastel pink
    '#98FF98', // bright lime green
    '#FFB347', // bright pastel orange
    '#AEC6CF', // bright pastel blue-gray
    '#B19CD9', // bright pastel purple
    '#77DD77', // bright pastel green
];

export default function TagsPage() {
    const [tags, setTags] = useState<Tag[]>([]);
    const [newTagName, setNewTagName] = useState('');
    const [selectedType, setSelectedType] = useState<TagType>('TRADE_JOURNAL');
    const [isCreating, setIsCreating] = useState(false);

    const generateTagColor = (): string => {
        return PASTEL_COLORS[Math.floor(Math.random() * PASTEL_COLORS.length)];
    };

    const getContrastColor = (bgColor: string): string => {
        const hex = bgColor.replace('#', '');
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.5 ? '#000000' : '#ffffff';
    };

    // ... [keeping all the existing fetch and handle functions] ...

    return (
        <div className="container mx-auto py-6">
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-2xl font-bold">Tag Management</h1>
                <Button 
                    onClick={() => setIsCreating(true)} 
                    className="flex items-center gap-2 rounded-full"
                >
                    <Plus className="w-4 h-4" /> Add New Tag
                </Button>
            </div>

            {isCreating && (
                <Card className="mb-6">
                    <CardHeader>
                        <CardTitle>Create New Tag</CardTitle>
                        <CardDescription>Add a new tag to organize your trades and journal entries</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex gap-4">
                            <Input
                                value={newTagName}
                                onChange={(e) => setNewTagName(e.target.value)}
                                placeholder="Enter tag name..."
                                className="flex-1 rounded-full"
                            />
                            <Select value={selectedType} onValueChange={handleTypeChange}>
                                <SelectTrigger className="w-[200px] rounded-full">
                                    <SelectValue placeholder="Select type" />
                                </SelectTrigger>
                                <SelectContent>
                                    {Object.values(TAG_TYPES).map((type) => (
                                        <SelectItem key={type} value={type}>
                                            {type.replace(/_/g, ' ')}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            <Button onClick={createTag} className="rounded-full">Create</Button>
                            <Button variant="ghost" onClick={() => setIsCreating(false)} className="rounded-full">Cancel</Button>
                        </div>
                    </CardContent>
                </Card>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Object.entries(groupedTags).map(([type, tagsList]) => (
                    <Card key={type}>
                        <CardHeader>
                            <CardTitle>{type.replace(/_/g, ' ')}</CardTitle>
                            <CardDescription>{tagsList.length} tags</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-wrap gap-2">
                                {tagsList.map(tag => (
                                    <Badge
                                        key={tag.id}
                                        variant={tag.active ? "default" : "secondary"}
                                        className="flex items-center gap-2 px-4 py-1.5 rounded-full transition-all duration-200 hover:opacity-90 shadow-sm"
                                        style={{
                                            backgroundColor: tag.active ? (tag.color || undefined) : '#e5e7eb',
                                            color: tag.active && tag.color ? getContrastColor(tag.color) : undefined,
                                            fontSize: '0.875rem',
                                            fontWeight: '500',
                                            border: 'none'
                                        }}
                                    >
                                        {tag.name}
                                        <button
                                            onClick={() => toggleTagActive(tag.id, !tag.active)}
                                            className="hover:scale-110 transition-transform"
                                        >
                                            <X className="w-3.5 h-3.5" />
                                        </button>
                                    </Badge>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </div>
    );
}


ONLY RETURN THE UPDATED CODE