export default function NotificationSettings({ minScore, notifyEnabled, onChange, passCount }) {
    const score = minScore ?? 70;
    const enabled = notifyEnabled ?? true;

    return (
        <div className="sub-panel">
            <div className="sub-panel__head">
                <p className="sub-panel__eyebrow">알림 설정</p>
                <h3>🔔 텔레그램 알림</h3>
            </div>
            <div className="sub-panel__body" style={{ display: "grid", gap: 16 }}>
                <label className="ns-row">
                    <span className="ns-row__label">텔레그램 알림</span>
                    <span className="ns-toggle">
                        <input
                            type="checkbox"
                            className="sub-toggle"
                            checked={enabled}
                            onChange={(e) => onChange({ notify_enabled: e.target.checked })}
                        />
                        <span className="sub-toggle__label">{enabled ? "ON" : "OFF"}</span>
                    </span>
                </label>

                <label className="ns-row ns-row--column">
                    <span className="ns-row__label">매칭 임계값 — {score}점</span>
                    <input
                        type="range"
                        min="0"
                        max="100"
                        step="5"
                        value={score}
                        onChange={(e) => onChange({ min_match_score: Number(e.target.value) })}
                        className="ns-slider"
                        disabled={!enabled}
                    />
                    <div className="ns-scale">
                        <span>0</span>
                        <span>50</span>
                        <span>100</span>
                    </div>
                </label>

                <p className="ns-hint">
                    {enabled ? (
                        <>
                            💡 {score}점 이상 매치 시 텔레그램에 자동 알림합니다.
                            {passCount != null && (
                                <span className="ns-pass-count">
                                    현재 <strong>{passCount}건</strong> 대상
                                </span>
                            )}
                        </>
                    ) : "⚠️ 알림 OFF — 임계값을 통과한 매칭이 있어도 메시지가 발송되지 않습니다."}
                </p>
            </div>
        </div>
    );
}
