import { Head, Link } from "@inertiajs/react";
import { Hammer, Home, ArrowLeft } from "lucide-react";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";

interface Props {
    featureName?: string;
}

export default function UnderConstruction({ featureName = "此功能" }: Props) {
    return (
        <AuthenticatedLayout breadcrumbs={[
            { label: '系統訊息', href: '#' },
            { label: '功能製作中', isPage: true }
        ] as any}>
            <Head title="功能製作中" />

            <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
                <div className="relative mb-8">
                    <div className="absolute inset-0 bg-primary/10 rounded-full animate-ping opacity-25"></div>
                    <div className="relative bg-white p-8 rounded-full shadow-xl border-4 border-primary/20">
                        <Hammer className="h-20 w-20 text-primary-main animate-bounce" />
                    </div>
                </div>

                <h1 className="text-3xl font-bold text-gray-900 mb-4">
                    {featureName} 正在趕工中！
                </h1>

                <p className="text-gray-500 max-w-md mb-10 text-lg leading-relaxed">
                    我們正在努力完善這個功能，以提供更優質的體驗。
                    這部分可能涉及與其他系統的深度整合，請稍候片刻。
                </p>

                <div className="flex flex-col sm:flex-row gap-4">
                    <Button
                        variant="outline"
                        size="lg"
                        className="button-outlined-primary gap-2 min-w-[150px]"
                        onClick={() => window.history.back()}
                    >
                        <ArrowLeft className="h-5 w-5" /> 返回上一頁
                    </Button>
                    <Link href={route('dashboard')}>
                        <Button
                            variant="default"
                            size="lg"
                            className="button-filled-primary gap-2 min-w-[150px]"
                        >
                            <Home className="h-5 w-5" /> 回到首頁
                        </Button>
                    </Link>
                </div>

                <div className="mt-16 text-sm text-gray-400 font-mono">
                    Coming Soon | Star ERP Design System
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
