import { useEffect, useState } from 'react';
import { Head } from '@inertiajs/react';
import TataLetakPublik from '@/tata-letak/TataLetakPublik';
import { salinTeks } from '@/lib/salin';
import { toast } from '@/lib/dialog';

interface PendaftarBukti {
    nomor: string;
    nama: string;
    jenis_kelamin: string;
    sekolah_asal: string;
    ttl: string;
    alamat: string;
    ayah: string;
    ibu: string;
    no_hp: string;
    pembawa: string | null;
    tahun_ajaran: string;
    nama_jurusan1: string;
    waktu_daftar: string;
    /** Tanggal bukti ini dibuka/dicetak, dari server supaya tidak bergantung jam perangkat. */
    tanggal_cetak: string;
    berkas_lengkap: boolean;
}

interface Props {
    pendaftar: PendaftarBukti;
    url_cek_status: string;
    pesan_wa: string;
    wa_panitia_pesan: string | null;
    judul: string;
}

export default function Bukti({
    pendaftar,
    url_cek_status,
    pesan_wa,
    wa_panitia_pesan,
    judul,
}: Props) {
    const [qr, setQr] = useState('');

    useEffect(() => {
        // Lebar 192px (dua kali tampilan) supaya tajam saat dicetak; ukuran tampil diatur CSS.
        void import('qrcode')
            .then((mod) =>
                (mod.default ?? mod).toDataURL(url_cek_status, { width: 192, margin: 0 }),
            )
            .then(setQr)
            .catch(() => {
                // QR gagal dimuat bukan galat fatal.
            });
    }, [url_cek_status]);
    async function salinPesan() {
        const ok = await salinTeks(pesan_wa);
        void toast(ok ? 'success' : 'error', ok ? 'Pesan tersalin!' : 'Gagal menyalin.');
    }

    // `aksi`: tombol hanya di salinan pertama, di dalam kartu.
    const salinan = (untuk: string, aksi = false) => (
        <article className="kartu bukti-daftar">
            <p className="bukti-daftar__untuk">{untuk}</p>
            <div className="bukti-daftar__kepala">
                <img src="/logo-dikdasmenmu.png" alt="Logo Dikdasmen PP Muhammadiyah" />
                <div className="bukti-daftar__judul">
                    <h1>
                        Formulir Pendaftaran
                        <br />
                        Calon Peserta Didik Baru
                    </h1>
                    <p>SMK Muhammadiyah 2 Cepu</p>
                    <p>Tahun Pelajaran : {pendaftar.tahun_ajaran}</p>
                </div>
                <img src="/logo-sekolah.png" alt="Logo SMK Muhammadiyah 2 Cepu" />
            </div>

            <div className="bukti-daftar__nomor-baris">
                <div>
                    <p className="bukti-daftar__nomor-label">Nomor pendaftaran</p>
                    <p className="bukti-daftar__nomor">{pendaftar.nomor}</p>
                </div>
                <div className="bukti-daftar__qr">
                    {qr && <img src={qr} alt="Kode QR untuk halaman cek status" />}
                    <span>Cek status</span>
                </div>
            </div>

            <dl className="bukti-daftar__data">
                {[
                    ['Nama calon murid', `${pendaftar.nama} (${pendaftar.jenis_kelamin.toUpperCase()})`],
                    ['Tempat, tgl. lahir', pendaftar.ttl],
                    ['Alamat', pendaftar.alamat],
                ].map(([kunci, nilai]) => (
                    <div key={kunci}>
                        <dt>{kunci}</dt>
                        <dd>{nilai}</dd>
                    </div>
                ))}
                {/* Orang tua: judul selebar baris, lalu ayah dan ibu menjorok di bawahnya. */}
                <div className="bukti-daftar__judul-baris">
                    <dt>Nama orang tua</dt>
                </div>
                <div className="bukti-daftar__anak">
                    <dt>Nama Ayah</dt>
                    <dd>{pendaftar.ayah}</dd>
                </div>
                <div className="bukti-daftar__anak">
                    <dt>Nama Ibu</dt>
                    <dd>{pendaftar.ibu}</dd>
                </div>
                {[
                    ['Asal sekolah', pendaftar.sekolah_asal],
                    ['Pilihan jurusan', pendaftar.nama_jurusan1],
                    ['No. HP / WhatsApp', pendaftar.no_hp],
                    ['Tanggal daftar', `${pendaftar.waktu_daftar} WIB`],
                ].map(([kunci, nilai]) => (
                    <div key={kunci}>
                        <dt>{kunci}</dt>
                        <dd>{nilai}</dd>
                    </div>
                ))}
            </dl>

            <p className="bukti-daftar__ingat">
                Berkas Anda {pendaftar.berkas_lengkap ? 'sudah lengkap.' : 'belum lengkap.'} Simpan
                nomor pendaftaran untuk memeriksa status di halaman cek status.
            </p>

            {/*
             * Urutan tiap kolom: judul, ruang tanda tangan/stempel, lalu nama
             * yang duduk tepat di atas garis. Barisnya dibagi bersama antar
             * kolom (subgrid), jadi garis selalu sejajar berapa pun panjang
             * nama; nama panjang hanya menambah tinggi baris nama.
             */}
            <section className="bukti-daftar__ttd" aria-label="Tanda tangan">
                <p className="bukti-daftar__tanggal">Cepu, {pendaftar.tanggal_cetak}</p>
                <div
                    className={`bukti-daftar__ttd-baris${pendaftar.pembawa ? ' bukti-daftar__ttd-baris--tiga' : ''}`}
                >
                    <div>
                        <p>Panitia SPMB</p>
                        <span className="bukti-daftar__ruang"></span>
                        <small className="bukti-daftar__nama">&nbsp;</small>
                    </div>
                    {pendaftar.pembawa && (
                        <div>
                            <p>Pembawa</p>
                            <span className="bukti-daftar__ruang"></span>
                            <small className="bukti-daftar__nama">{pendaftar.pembawa}</small>
                        </div>
                    )}
                    <div>
                        <p>Calon murid</p>
                        <span className="bukti-daftar__ruang"></span>
                        <small className="bukti-daftar__nama">{pendaftar.nama}</small>
                    </div>
                </div>
            </section>

            {aksi && (
                <div className="tombol-baris bukti-daftar__aksi tanpa-cetak">
                    <a
                        className="tombol tombol--utama"
                        href={`${window.location.pathname}/pdf${window.location.search}`}
                        download
                    >
                        Unduh PDF
                    </a>
                    <button
                        className="tombol tombol--kedua"
                        type="button"
                        onClick={() => window.print()}
                    >
                        Cetak bukti
                    </button>
                    <button className="tombol tombol--kedua" type="button" onClick={salinPesan}>
                        Salin pesan WhatsApp
                    </button>
                    {wa_panitia_pesan && (
                        <a className="tombol tombol--kedua" href={wa_panitia_pesan} rel="noopener">
                            Hubungi panitia
                        </a>
                    )}
                </div>
            )}
        </article>
    );

    return (
        <TataLetakPublik>
            <Head title={judul} />

            <style>{`
                @media print {
                    @page { size: A4 landscape; margin: 6mm; }
                    body { background: #fff !important; font-size: 10px !important; }
                    .kepala-situs, .kaki-situs, .lewati-ke-isi, .tanpa-cetak { display: none !important; }
                    .isi-utama, .wadah { max-width: none !important; margin: 0 !important; padding: 0 !important; }
                }
            `}</style>

            {/* Layar: satu bukti. Cetak: dua salinan berdampingan, dipisah garis potong. */}
            <div className="bukti-lembar">
                {salinan('Salinan calon murid', true)}
                <div className="bukti-lembar__potong" aria-hidden="true">
                    <span>✂ potong di sini</span>
                </div>
                {salinan('Salinan panitia')}
            </div>
        </TataLetakPublik>
    );
}