import db from "@/lib/db";
import Link from "next/link";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";

export default function TaskTemplatesPage() {
	const templates = db
		.prepare(
			`
    SELECT * FROM tasks WHERE is_standard = 1 ORDER BY name ASC
  `
		)
		.all();
	return (
		<PageContainer>
			<PageHeader
				title="Task Templates"
				description="Manage reusable task templates"
				action={
					<Link href="/tasks/templates/new">
						<Button variant="primary" size="lg">
							<svg
								className="w-5 h-5 mr-2"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d="M12 4v16m8-8H4"
								/>
							</svg>
							New Template
						</Button>
					</Link>
				}
			/>

			{templates.length === 0 ? (
				<Card>
					<CardContent className="text-center py-12">
						<div className="text-gray-400 mb-4">
							<svg
								className="w-16 h-16 mx-auto"
								fill="currentColor"
								viewBox="0 0 20 20"
							>
								<path
									fillRule="evenodd"
									d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
									clipRule="evenodd"
								/>
							</svg>
						</div>
						<h3 className="text-lg font-medium text-gray-900 mb-2">
							No task templates yet
						</h3>
						<p className="text-gray-500 mb-6">
							Create reusable task templates to streamline your workflow
						</p>
						<Link href="/tasks/templates/new">
							<Button variant="primary">Create First Template</Button>
						</Link>
					</CardContent>
				</Card>
			) : (
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
					{templates.map((template) => (
						<Card
							key={template.task_id}
							className="hover:shadow-md transition-shadow"
						>
							<CardContent className="p-6">
								<div className="flex items-start justify-between mb-4">
									<h3 className="text-lg font-semibold text-gray-900 truncate pr-2">
										{template.name}
									</h3>
									<Badge variant="primary" size="sm">
										{template.max_wait_days} days
									</Badge>
								</div>
								{template.description && (
									<p className="text-gray-600 text-sm mb-4 line-clamp-2">
										{template.description}
									</p>
								)}{" "}
								<div className="flex items-center justify-end">
									<Link href={`/tasks/templates/${template.task_id}/edit`}>
										<Button variant="outline" size="sm">
											Edit
										</Button>
									</Link>
								</div>
							</CardContent>
						</Card>
					))}{" "}
				</div>
			)}
		</PageContainer>
	);
}