import type { ChangeEvent } from 'react';
import { Ikon } from './Ikon';

export type KeadaanBerkas = {
    rincian: string;
    aksi: string;
    tampilBatang: boolean;
    kemajuan: number;
    /** `` | 'ok' | 'galat' */
    penanda: string;
    status: string;
};

export const KEADAAN_AWAL = (keterangan: string): KeadaanBerkas => ({
    rincian: keterangan,
    aksi: 'Pilih',
    tampilBatang: false,
    kemajuan: 0,
    penanda: '',
    status: '',
});

/**
 * Kartu unggah satu berkas — markup persis dari `daftar.blade.php` asli,
 * termasuk `.unggah`, `.batang`, `.aksi`, dan `[data-status-berkas]`.
 */
export function KartuUnggah(props: {
    jenis: string;
    label: string;
    keadaan: KeadaanBerkas;
    onPilih: (berkas: File | null) => void;
}) {
    const { jenis, label, keadaan, onPilih } = props;

    function saatBerpindah(e: ChangeEvent<HTMLInputElement>) {
        onPilih(e.target.files?.[0] ?? null);
    }

    return (
        <div className="bidang unggah-berkas" data-slot={jenis} data-berkas-field>
            <label className={`unggah${keadaan.penanda ? ` ${keadaan.penanda}` : ''}`} htmlFor={`berkas-${jenis}`}>
                <span className="ik">
                    <Ikon nama={keadaan.penanda === 'ok' ? 'check' : 'file'} ukuran={22} />
                </span>
                <span style={{ flex: 1 }}>
                    <b>{label}</b>
                    <small data-rincian-berkas>{keadaan.rincian}</small>
                    <span className="batang" data-batang hidden={!keadaan.tampilBatang}>
                        <i style={{ width: `${keadaan.kemajuan}%` }}></i>
                    </span>
                </span>
                <span className="aksi" data-aksi-berkas>{keadaan.aksi}</span>
                <input
                    id={`berkas-${jenis}`}
                    name={`berkas_${jenis}`}
                    type="file"
                    className="sr"
                    accept=".jpg,.jpeg,.png,.pdf,image/jpeg,image/png,application/pdf"
                    required
                    onChange={saatBerpindah}
                />
            </label>
            <span className="bantuan" data-status-berkas role="status">{keadaan.status}</span>
        </div>
    );
}