"use client";

import { useRouter } from "next/navigation";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CMS_TYPES, CMS_TYPE_LABELS } from "@/config/constants";
import { FileText, Sparkles, Image, Layout } from "lucide-react";

const contentTypes = [
    {
        type: CMS_TYPES.SPLASH,
        label: CMS_TYPE_LABELS.splash,
        description: "Splash screen content for app launch",
        icon: Sparkles,
        color: "text-purple-500",
    },
    {
        type: CMS_TYPES.PROMO,
        label: CMS_TYPE_LABELS.promo,
        description: "Promotional content and offers",
        icon: Image,
        color: "text-blue-500",
    },
    {
        type: CMS_TYPES.ARTICLE,
        label: CMS_TYPE_LABELS.article,
        description: "Articles and blog posts",
        icon: FileText,
        color: "text-green-500",
    },
    {
        type: CMS_TYPES.BANNER,
        label: CMS_TYPE_LABELS.banner,
        description: "Banner advertisements",
        icon: Layout,
        color: "text-orange-500",
    },
    {
        type: CMS_TYPES.FLOATING_WIDGET,
        label: CMS_TYPE_LABELS.floatingWidget,
        description: "Floating widget content",
        icon: Image,
        color: "text-pink-500",
    },
];

export default function ContentOverviewPage() {
    const router = useRouter();

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold">CMS Content Management</h1>
                <p className="text-muted-foreground">
                    Manage different types of content for your applications
                </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {contentTypes.map((item) => (
                    <Card key={item.type} className="hover:shadow-lg transition-shadow cursor-pointer">
                        <CardHeader>
                            <div className="flex items-center justify-between">
                                <item.icon className={`h-8 w-8 ${item.color}`} />
                                <Button
                                    size="sm"
                                    onClick={() => router.push(`/cms/content/${item.type}`)}
                                >
                                    Manage
                                </Button>
                            </div>
                            <CardTitle>{item.label}</CardTitle>
                            <CardDescription>{item.description}</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="text-sm text-muted-foreground">
                                Click &quot;Manage&quot; to view and edit {item.label.toLowerCase()} content
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </div>
    );
}