import { useId } from 'react';

/**
 * Jenis bukti yang diterima server — cerminan `Rule::in(['file','image','link'])`
 * di `TaskController::store` dan `::update`. Tidak ada nilai kosong di sini
 * karena server tidak pernah menerimanya untuk task utama.
 */
export const REQUIRED_PROOF_OPTIONS = [
    { value: 'file', label: 'File / Document' },
    { value: 'image', label: 'Image / Screenshot' },
    { value: 'link', label: 'Link / URL' },
] as const;

interface RequiredProofFieldProps {
    /** Nilai terpilih; string kosong berarti belum ada yang dipilih. */
    value: string;
    onChange: (value: string) => void;
    /** Pesan validasi klien; menggantikan teks bantuan saat terisi. */
    error?: string;
    /** Teks bantuan di bawah pilihan. */
    hint?: string;
}

const DEFAULT_HINT =
    'Tentukan bukti apa yang harus dilampirkan member saat menyelesaikan task ini.';

/**
 * Pilihan bukti penyelesaian untuk task utama.
 *
 * Radio, bukan checkbox: `required_without:parent_id` di server menuntut salah
 * satu nilai selalu terisi, jadi keadaan "semua terlepas" yang dulu bisa dibuat
 * dengan checkbox adalah keadaan yang dijamin ditolak saat disimpan — dan
 * penolakannya baru muncul setelah user menekan Simpan.
 */
export function RequiredProofField({
    value,
    onChange,
    error,
    hint = DEFAULT_HINT,
}: RequiredProofFieldProps) {
    // Create dan Edit sheet bisa ter-mount bersamaan di halaman yang sama.
    // Tanpa nama grup yang unik per instance, radio di kedua sheet masuk grup
    // yang sama dan saling mematikan.
    const groupName = useId();

    return (
        <fieldset className="space-y-2">
            <legend className="mb-2 text-sm leading-none font-medium">
                Required Proof
            </legend>

            <div className="space-y-2">
                {REQUIRED_PROOF_OPTIONS.map((option) => (
                    <div
                        key={option.value}
                        className="flex items-center space-x-2"
                    >
                        <input
                            type="radio"
                            id={`${groupName}-${option.value}`}
                            name={groupName}
                            value={option.value}
                            checked={value === option.value}
                            onChange={() => onChange(option.value)}
                            className="size-4 shrink-0 cursor-pointer accent-primary"
                        />
                        <label
                            htmlFor={`${groupName}-${option.value}`}
                            className="cursor-pointer text-sm font-medium"
                        >
                            {option.label}
                        </label>
                    </div>
                ))}
            </div>

            {error ? (
                <p aria-live="polite" className="text-xs text-destructive">
                    {error}
                </p>
            ) : (
                <p className="text-[10px] text-muted-foreground">{hint}</p>
            )}
        </fieldset>
    );
}