import { useState } from "react";
import { Button } from "@admin/components/ui/button";
import { Checkbox } from "@admin/components/ui/checkbox";
import { Card } from "@admin/components/ui/card";
import { toast } from "sonner";
import AppLayout from '@admin/layouts/app-layout';
import { ReactNode } from 'react';

const AVAILABLE_COLUMNS = [
	{ label: "Name", value: "name" },
	{ label: "Email", value: "email" },
	{ label: "Role", value: "role" },
	{ label: "Status", value: "status" },
	{ label: "Phone", value: "phone" },
];

const EXPORT_FORMATS = [
	{ label: "CSV", value: "csv" },
	{ label: "PDF", value: "pdf" },
];

export default function ExportPage() {
	const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
	const [format, setFormat] = useState<string>("pdf");
	const [submitting, setSubmitting] = useState(false);

	const handleColumnChange = (col: string) => {
		setSelectedColumns((prev) =>
			prev.includes(col)
				? prev.filter((c) => c !== col)
				: [...prev, col]
		);
	};

	const handleFormatChange = (fmt: string) => {
		setFormat(fmt);
	};

	const handleSubmit = async (e: React.FormEvent) => {
		e.preventDefault();
		if (selectedColumns.length === 0) {
			toast.error("Please select at least one column.");
			return;
		}
		setSubmitting(true);
		// Simulate export API call
		setTimeout(() => {
			toast.success("Export started!");
			setSubmitting(false);
			// You can send { columns: selectedColumns, type: format } to your backend here
		}, 1200);
	};

	return (
		<div className="max-w-lg mx-auto mt-10 p-6">
			<Card className="p-6">
				<h2 className="text-xl font-bold mb-4">Export Data</h2>
				<form onSubmit={handleSubmit}>
					<div className="mb-6">
						<label className="block font-medium mb-2">
							Select columns to export:
						</label>
						<div className="grid grid-cols-2 gap-2">
							{AVAILABLE_COLUMNS.map((col) => (
								<label key={col.value} className="flex items-center gap-2">
									<Checkbox
										checked={selectedColumns.includes(col.value)}
										onCheckedChange={() => handleColumnChange(col.value)}
									/>
									{col.label}
								</label>
							))}
						</div>
					</div>
					<div className="mb-6">
						<label className="block font-medium mb-2">Export format:</label>
						<div className="flex gap-4">
							{EXPORT_FORMATS.map((fmt) => (
								<label key={fmt.value} className="flex items-center gap-2">
									<input
										type="radio"
										name="format"
										value={fmt.value}
										checked={format === fmt.value}
										onChange={() => handleFormatChange(fmt.value)}
									/>
									{fmt.label}
								</label>
							))}
						</div>
					</div>
					<Button type="submit" disabled={submitting} className="w-full">
						{submitting ? "Exporting..." : "Export"}
					</Button>
				</form>
			</Card>
		</div>
	);
}

ExportPage.layout = (page: ReactNode) => (
	<AppLayout
		breadcrumbs={[
			{ title: "Home", href: "/" },
			{ title: "Export", href: "/export" },
		]}
		title="Export"
	>
		{page}
	</AppLayout>
);