
import React, { useRef } from 'react';
import { Head, Link } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Download, Share2, Home } from 'lucide-react';
// import { useReactToPrint } from 'react-to-print';

export default function ShowCertificate({ course, student, date, certificate_id }: any) {
    const componentRef = useRef<HTMLDivElement>(null);

    const handlePrint = () => {
        window.print();
    };

    return (
        <div className="min-h-screen bg-neutral-100 dark:bg-neutral-950 flex flex-col items-center justify-center p-4">
            <Head title={`Sertifikat: ${course.title}`} />

            <div className="max-w-4xl w-full space-y-8">
                {/* Actions Bar */}
                <div className="flex flex-col sm:flex-row items-center justify-between gap-4 bg-white dark:bg-card p-4 rounded-xl shadow-sm border print:hidden">
                    <div className="flex items-center gap-4">
                        <Link href={route('dashboard')}>
                             <Button variant="ghost" size="sm">
                                <Home size={16} className="mr-2" />
                                Dashboard
                             </Button>
                        </Link>
                        <span className="text-muted-foreground">|</span>
                        <p className="text-sm font-medium">Sertifikat Kelulusan</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <Button onClick={handlePrint} className="gap-2">
                            <Download size={16} />
                            Download PDF
                        </Button>
                    </div>
                </div>

                {/* Certificate Canvas */}
                <div 
                    ref={componentRef}
                    className="relative bg-white text-black w-full aspect-[1.414/1] shadow-2xl overflow-hidden print:shadow-none print:w-full print:h-screen print:absolute print:top-0 print:left-0"
                    style={{ fontFamily: "'Playfair Display', serif" }} // Ideally import a nice serif font
                >
                    {/* Border/Frame */}
                    <div className="absolute inset-4 border-4 border-double border-neutral-200 pointer-events-none" />
                    <div className="absolute inset-6 border border-neutral-100 pointer-events-none" />

                    {/* Content */}
                    <div className="h-full flex flex-col items-center justify-center text-center p-16 space-y-8">
                        
                        {/* Header */}
                        <div className="space-y-2">
                             <img src="/brand/logo-symbol.svg" alt="NihonBuzz" className="h-16 w-16 mx-auto mb-6 opacity-80" />
                             <p className="text-sm uppercase tracking-[0.3em] text-neutral-500 font-sans">Sertifikat Penyelesaian</p>
                             <h1 className="text-5xl font-bold tracking-tight text-neutral-900">NihonBuzz Academy</h1>
                        </div>

                        {/* Body */}
                        <div className="space-y-6 max-w-2xl">
                            <p className="text-lg text-neutral-600 italic">Diberikan dengan bangga kepada</p>
                            <h2 className="text-4xl font-black text-nihonbuzz-red underline decoration-neutral-200 underline-offset-8 decoration-1">
                                {student.name}
                            </h2>
                            <p className="text-neutral-600 leading-relaxed">
                                Atas keberhasilan menyelesaikan kursus <br />
                                <span className="font-bold text-neutral-900 text-xl block mt-2">{course.title}</span>
                            </p>
                        </div>

                        {/* Footer */}
                        <div className="w-full grid grid-cols-2 gap-20 pt-12 mt-12 border-t border-neutral-100 max-w-3xl">
                            <div className="text-center space-y-2">
                                <p className="font-bold text-lg">{date}</p>
                                <p className="text-xs uppercase tracking-widest text-neutral-400 border-t pt-2 w-32 mx-auto">Tanggal</p>
                            </div>
                            <div className="text-center space-y-2">
                                <img src="/signatures/director.png" className="h-10 mx-auto object-contain opacity-0" alt="Signature" /> {/* Placeholder */}
                                <p className="font-bold text-lg font-script">NihonBuzz Team</p>
                                <p className="text-xs uppercase tracking-widest text-neutral-400 border-t pt-2 w-32 mx-auto">Instruktur</p>
                            </div>
                        </div>

                        {/* ID */}
                        <div className="absolute bottom-6 left-8 text-[10px] text-neutral-300 font-mono">
                            ID: {certificate_id}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
