import { Head, Link } from '@inertiajs/react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import type { KnowledgeBaseArticle } from '@/types';

type Props = { article: KnowledgeBaseArticle };

export default function ShowKnowledgeBase({ article }: Props) {
    return (
        <>
            <Head title={article.title} />
            <div className="mx-auto max-w-3xl space-y-4 p-4">
                <div className="flex items-center justify-between">
                    <h1 className="text-2xl font-bold">{article.title}</h1>
                    <div className="flex gap-2">
                        <Button variant="outline" asChild>
                            <Link
                                href={`/admin/knowledge-base/${article.id}/edit`}
                            >
                                Edit
                            </Link>
                        </Button>
                        <Button variant="outline" asChild>
                            <Link href="/admin/knowledge-base">Back</Link>
                        </Button>
                    </div>
                </div>
                <Card>
                    <CardHeader>
                        <div className="flex items-center gap-3">
                            <Badge
                                variant={
                                    article.is_published
                                        ? 'default'
                                        : 'secondary'
                                }
                            >
                                {article.is_published ? 'Published' : 'Draft'}
                            </Badge>
                            {article.system && (
                                <span className="text-sm text-muted-foreground">
                                    System: {article.system.name}
                                </span>
                            )}
                            {article.category && (
                                <span className="text-sm text-muted-foreground">
                                    Category: {article.category.name}
                                </span>
                            )}
                        </div>
                    </CardHeader>
                    <Separator />
                    <CardContent className="pt-4">
                        <div className="prose dark:prose-invert max-w-none whitespace-pre-wrap">
                            {article.content}
                        </div>
                    </CardContent>
                </Card>
                {article.tags && article.tags.length > 0 && (
                    <div className="flex flex-wrap gap-1">
                        {article.tags.map((tag) => (
                            <Badge key={tag} variant="outline">
                                {tag}
                            </Badge>
                        ))}
                    </div>
                )}
            </div>
        </>
    );
}
